:root {
  --radius-lg: 10px; --radius-md: 10px; --radius-sm: 8px; --radius-xs: 6px;
  --shadow-premium: none; --shadow-card: none; --shadow-pop: none; --shadow-inset: none; --rim-light: 0 0 0 transparent;
  --surface-sheen: none; --accent-wash: transparent;
  --rail: #020c14; --rail-line: #1d3547; --rail-muted: #6f8494; --rail-text: #bccbd6; --brick-dark: #9a0f00;
  --line-2: rgba(188, 203, 214, 0.24);
}

:root[data-theme="light"] {
  --bg-base: #f4f6f8; --bg-section: #f4f6f8; --bg-panel: #e8edf1; --bg-hover: #e1e8ee; --bg-active: #d5dee5;
  --bg-sunken: #ffffff; --bg-well: #e8edf1; --bg-raised: #ffffff;
  --border: #cbd5dd; --border-hover: #aebcc7; --line-strong: #aebcc7; --line-2: #aebcc7;
  --canvas-dot: rgba(2, 12, 20, 0.07);
}


.background-blobs, body::before { display: none !important; }
body { background: var(--bg-base); }
.workspace { padding: 0; gap: 0; }
.main-center-wrapper { gap: 0; }
#main-sidebar, .canvas-area, #inspector-pane {
  margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  background: var(--bg-section);
}
#main-sidebar { border-right: 1px solid var(--border) !important; }
#inspector-pane { border-top: 1px solid var(--border) !important; }
.canvas-area { background: radial-gradient(var(--canvas-dot) 1px, transparent 1px) 0 0 / 22px 22px, var(--bg-section); }


#app-nav {
  margin: 0 !important; height: 100vh; width: 64px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--rail) !important; padding: 18px 0 24px; overflow: visible;
}
:root:not([data-theme="light"]) #app-nav { border-right: 1px solid var(--border) !important; }
#app-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brick, #ba1200); }
#app-nav .nav-actions-segment > div[style] { background: var(--rail-line) !important; width: 28px !important; }
:root[data-theme="light"] .logo-image { content: url("/demo/static/logo.png") !important; }
#app-nav .nav-btn {
  width: 40px; height: 40px; border-radius: 50%; color: var(--rail-muted); --uic-ac: currentColor; background: transparent;
}
#app-nav .nav-btn .uic { stroke: currentColor; }
#app-nav .nav-btn:hover { background: transparent; color: var(--rail-text); }
#app-nav .nav-btn.active, #app-nav .nav-btn.active:hover { background: var(--brick, #ba1200) !important; color: #fff !important; }
#app-nav .nav-btn.active .uic { --uic-ac: #fff; stroke: #fff; }

#app-nav .nav-btn.active:not(:hover)::after { content: none; }
#app-nav .nav-btn:focus-visible { outline: 2px solid var(--rail-text); outline-offset: 2px; }
.status-indicator-dot .text { color: var(--rail-muted); }


.st-view.modal-overlay { left: 64px !important; width: calc(100vw - 64px) !important; }
.st-view .modal-main { padding: 6px 36px 30px; gap: 22px; }


.st-header { min-height: 0; padding: 24px 0 18px; border-bottom: 1px solid var(--border); align-items: flex-end; }
.st-title-chip { position: relative; height: auto; padding: 0; border: 0; border-radius: 0; background: none; display: block; }
.st-title-chip::before {
  content: "Wdeck"; display: block; padding-left: 24px; margin-bottom: 10px;
  font: 500 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.st-title-chip::after { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 1px; background: var(--text-muted); }
.st-title-chip .st-title-ico { display: none; }
.st-header h2 {
  font-family: var(--sans); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-stretch: 110%;
  line-height: 1.05; text-transform: none; color: var(--text-main);
}
.dv-summary { margin-left: auto; font: 500 11px var(--mono); letter-spacing: 0.04em; color: var(--text-muted); }


.sidebar-header h2, .insp-header, .category-header, .st-card-head h3, .settings-group-title {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.sidebar-header { border-bottom: 1px solid var(--border); }
.sidebar-header h2 { display: flex; align-items: center; gap: 10px; }
.sidebar-header h2::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.sidebar-header > i, .sidebar-header h2 i, .sidebar-header h2 .uic { display: none; }
.st-card-head .st-ico, .st-hero-ico { background: transparent !important; border: 1px solid var(--border) !important; border-radius: 50%; }


.st-card, .st-hero, .st-versions > *, .st-about, .st-link-card, .dv-card, .lay-card, .afl-card, .afl-side, .dv-add, .dv-notice {
  border-radius: var(--radius-lg) !important; box-shadow: none !important;
}
.st-card, .st-hero, .st-about, .dv-card, .lay-card { background: var(--bg-section) !important; }
.dv-shot { background: radial-gradient(var(--canvas-dot) 1px, transparent 1px) 0 0 / 22px 22px, var(--bg-well); }

.dv-card.is-active::after, .lay-card.is-active::after { padding: 1.5px; }
.action-item { border-width: 1px; border-radius: var(--radius-md); }
.action-item:hover { transform: none; }
.chip-dropdown, .modal-content, .custom-dialog-card, .toast-notification, .sync-toast { box-shadow: none !important; }
.modal-overlay, .toast-notification, .sync-toast, .workspace-chip .chip-inner { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }


.workspace-chip .chip-inner { background: var(--bg-section); border: 1px solid var(--line-2); box-shadow: none !important; }
.workspace-chip:hover .chip-inner { background: var(--bg-section); border-color: var(--text-main); }
.chip-inner i { color: var(--text-muted); }


.st-btn, .st-back, .dv-open, .lay-show, .insp-btn, .btn, .st-link-btn, .dashed-btn {
  border-radius: 999px !important; box-shadow: none !important; filter: none !important;
}
.st-btn, .dv-open, .lay-show, .insp-btn, .st-back { font-weight: 600; }
.st-btn:hover, .st-btn:active { transform: none; }
.st-btn--ghost, .st-back, .dv-card:not(.is-active) .dv-open, .lay-show, .insp-btn:not(.primary):not(.danger) {
  background: transparent !important; border: 1px solid var(--line-2) !important; color: var(--text-main) !important;
}
:root[data-theme="light"] :is(.st-btn--ghost, .st-back, .dv-card:not(.is-active) .dv-open, .lay-show, .insp-btn:not(.primary):not(.danger)) { background: #fff !important; }
:is(.st-btn--ghost, .st-back, .lay-show, .insp-btn:not(.primary):not(.danger)):hover,
.dv-card:hover .dv-open { border-color: var(--text-main) !important; }
.st-btn:not([class*="--"]) { background: transparent; border-color: var(--line-2); }
.st-btn--primary, .insp-btn.primary, .btn-primary, .btn.btn-primary, .dv-card.is-active .dv-open {
  background: var(--brick, #ba1200) !important; border: 1px solid var(--brick, #ba1200) !important; color: #fff !important;
}
:is(.st-btn--primary, .insp-btn.primary, .btn-primary, .dv-card.is-active .dv-open):hover {
  background: var(--brick-dark) !important; border-color: var(--brick-dark) !important;
}
.st-back kbd { border-radius: 999px; background: transparent; }
.st-icon-btn, .lay-delete, .dv-forget, .st-nudge-btn { border-radius: 50% !important; }


.st-input, .st-select, .insp-input, .lay-pick, .toolbox-search {
  border-radius: var(--radius-sm) !important; border-color: var(--line-2) !important; box-shadow: none !important;
}
:root[data-theme="light"] :is(.st-input, .st-select, .insp-input, .lay-pick, .toolbox-search) { background: #fff !important; }
:is(.st-input, .st-select, .insp-input, .lay-pick):focus, .toolbox-search:focus-within {
  border-color: var(--text-main) !important; box-shadow: none !important; outline: none;
}


.st-progress { height: 10px; background: var(--bg-well); border: 1px solid var(--border); }
.st-progress > div, #flash-progress-fill, .st-bar span, .wd-bar > * { background: var(--brick, #ba1200) !important; border-radius: 999px; }
.st-bar--full span { background: var(--brick-dark) !important; }
.st-progress-label { color: var(--text-muted); }
.st-switch input:checked + .slider, .switch input:checked + .slider { background: var(--brick, #ba1200); }