/*
 * VisCtrl dark theme
 * Application chrome only. Rules under .canvas-page are intentionally avoided
 * so the user's website keeps its authored colors.
 */
body.dark{
  color-scheme:dark;
  --bg:#0f1117;
  --surface:#181b23;
  --surface-2:#20242e;
  --surface-3:#282d38;
  --control-bg:#1e222b;
  --control-hover:#292e39;
  --line:#303642;
  --line-strong:#454c5b;
  --text:#f2f4f8;
  --muted:#a9b0bd;
  --muted-2:#747d8d;
  --primary:#8172f2;
  --primary-dark:#9689ff;
  --primary-soft:#2c274a;
  --green:#47c996;
  --danger:#ff737e;
  --shadow:0 18px 55px rgba(0,0,0,.36);
}

/* Home */
body.dark .home{background:var(--bg);color:var(--text)}
body.dark .top-nav{
  background:rgba(15,17,23,.82);
  border-bottom-color:rgba(69,76,91,.66);
}
body.dark .nav-links a{color:#c5cad4}
body.dark .nav-links a:hover{color:#fff}
body.dark .hero{
  background:
    radial-gradient(circle at 50% 5%,rgba(108,92,231,.25) 0,rgba(15,17,23,0) 43%),
    var(--bg);
}
body.dark .hero::before{background:#29234b;opacity:.48}
body.dark .hero::after{background:#153d36;opacity:.42}
body.dark .eyebrow{background:#292541;color:#a99dff}
body.dark .gradient-text{
  background:linear-gradient(100deg,#8e80ff,#b3a9ff);
  -webkit-background-clip:text;
}
body.dark .section{background:var(--bg)}
body.dark .section.alt{background:#13161d}
body.dark .pain-card,
body.dark .feature-card,
body.dark .vs{background:var(--surface);border-color:var(--line)}
body.dark .pain-card.bad{background:#161921}
body.dark .pain-card.good{background:#1b1c29;border-color:#4b4275}
body.dark .pain-bubble{background:var(--surface-3);color:#cbd0da}
body.dark .fake-input{background:#313542}
body.dark .feature-icon{background:var(--primary-soft);color:#a99dff}
body.dark .home-footer{background:var(--bg);border-color:var(--line)}

/* Home product illustration */
body.dark .hero-demo{background:#080a0f;box-shadow:0 36px 90px rgba(0,0,0,.46)}
body.dark .demo-window{background:#11141b}
body.dark .demo-bar,
body.dark .demo-sidebar,
body.dark .demo-props{background:#181b23;border-color:#343a47}
body.dark .demo-dot{background:#4b5261}
body.dark .demo-item{background:#232731;border-color:#3a404e}
body.dark .demo-canvas{background:#12151c}
body.dark .demo-page{background:#20242e;box-shadow:0 8px 30px rgba(0,0,0,.34)}
body.dark .demo-copy p,
body.dark .demo-prop-line span,
body.dark .demo-sidebar b,
body.dark .demo-props b{color:#9ca4b2}
body.dark .demo-slider{background:#353a46}
body.dark .demo-visual{background:linear-gradient(135deg,#413876,#2b2a43)}
body.dark .demo-visual::after{background:#b8b0ef;box-shadow:0 10px 25px rgba(0,0,0,.35)}

/* Global controls outside the authored canvas */
body.dark .btn:not(.btn-primary):not(.btn-danger),
body.dark .tool-btn,
body.dark .close-btn,
body.dark .menu-button{color:var(--muted)}
body.dark .btn-outline{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
body.dark .btn-outline:hover,
body.dark .btn-ghost:hover{background:var(--control-hover);color:var(--text)}
body.dark .btn-danger{background:#3a2228;color:#ff9099}
body.dark .btn-danger:hover{background:#4a272e}
body.dark .tool-btn:hover{background:var(--control-hover);color:#cfc9ff}
body.dark .tool-btn.active{background:var(--primary-soft);color:#b9b0ff}
body.dark .tool-btn:focus-visible,
body.dark .btn:focus-visible{outline:2px solid #9185f2;outline-offset:2px}
body.dark .device-switch{background:#11141b;border:1px solid var(--line)}
body.dark .device-switch .tool-btn{color:#8992a3}
body.dark .device-switch .tool-btn:hover{background:#242935;color:#d8dbe4}
body.dark .device-switch .tool-btn.active{background:#3a3263;color:#d9d4ff}

/* Editor shell and sidebars */
body.dark .editor-toolbar,
body.dark .left-panel,
body.dark .right-panel,
body.dark .panel-tabs,
body.dark .props-head,
body.dark .property-mode-tabs{background:var(--surface);border-color:var(--line)}
body.dark .toolbar-sep{background:var(--line)}
body.dark .panel-tab{color:var(--muted)}
body.dark .panel-tab.active{color:var(--text)}
body.dark .library-item,
body.dark .component-library-row,
body.dark .add-block-entry,
body.dark .add-section-entry,
body.dark .icon-library-entry{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}
body.dark .library-item:hover,
body.dark .component-library-row:hover,
body.dark .add-block-entry:hover,
body.dark .add-section-entry:hover{
  background:var(--control-hover);
  border-color:#5d5586;
  color:#b8afff;
}
body.dark .block-layer-tree,
body.dark .layer-tree,
body.dark .asset-layer-group{background:var(--surface-2);border-color:var(--line)}
body.dark .layer-bottom-toolbar{background:var(--surface);border-color:var(--line)}
body.dark .layer-bottom-toolbar button{border-color:var(--line);color:var(--muted)}
body.dark .layer-bottom-toolbar button:not(:disabled):hover{background:var(--primary-soft);color:#b8afff}

/* Property controls */
body.dark .prop-group,
body.dark .prop-group-body,
body.dark .property-advanced-body,
body.dark .advanced-body{background:var(--surface);border-color:var(--line)}
body.dark .prop-group-title,
body.dark .property-advanced-title,
body.dark .advanced-title{background:var(--surface-2);border-color:var(--line);color:var(--text)}
body.dark input:not([type=color]):not([type=range]):not([type=checkbox]):not([type=radio]),
body.dark select,
body.dark textarea,
body.dark .compact-field,
body.dark .prop-input,
body.dark .gradient-property-grid select,
body.dark .gradient-property-grid input[type=number]{
  background:var(--control-bg);
  border-color:var(--line-strong);
  color:var(--text);
}
body.dark input:disabled,
body.dark select:disabled,
body.dark textarea:disabled{background:#171a21;color:#687181}
body.dark input::placeholder,
body.dark textarea::placeholder{color:var(--muted-2)}
body.dark input[type=color],
body.dark .gradient-color-row input[type=color]{
  background:var(--control-bg);
  border-color:var(--line-strong);
}
body.dark input[type=range]{accent-color:var(--primary)}

/* Rulers and editor-only canvas helpers */
body.dark .canvas-area{
  background-color:#141820;
  background-image:radial-gradient(#303746 1px,transparent 1px);
}
body.dark .canvas-ruler{opacity:.56;filter:saturate(.7)}
body.dark .canvas-ruler:hover{opacity:.76}
body.dark .ruler-coordinate,
body.dark .ruler-selection{
  background:rgba(26,30,39,.88);
  color:#919aaa;
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
body.dark .ruler-selection{color:#a99dff}
body.dark .editor-ruler-guide{opacity:.72}
body.dark .canvas-size-label{color:#8992a3}

/* Modal and menu surfaces */
body.dark .modal,
body.dark .block-library-modal,
body.dark .icon-library-modal,
body.dark .vc-dialog,
body.dark .vc-context-menu,
body.dark .command-menu-portal,
body.dark .project-menu-portal{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}
body.dark .modal-head,
body.dark .modal-foot,
body.dark .block-library-head,
body.dark .icon-library-head,
body.dark .icon-library-footer{background:var(--surface);border-color:var(--line)}
body.dark .modal-backdrop{background:rgba(3,5,9,.68)}
body.dark .block-category-nav,
body.dark .icon-category-list{background:#14171e;border-color:var(--line)}
body.dark .block-category-nav button,
body.dark .icon-category-list button{color:var(--muted)}
body.dark .block-category-nav button:hover,
body.dark .icon-category-list button:hover{background:var(--control-hover);color:var(--text)}
body.dark .block-category-nav button.active,
body.dark .icon-category-list button.active{background:var(--primary-soft);color:#b8afff}
body.dark .block-category-nav small,
body.dark .icon-library-search kbd{background:var(--surface-3);color:var(--muted)}
body.dark .block-template-card,
body.dark .icon-card,
body.dark .selected-icon-card{background:var(--surface);border-color:var(--line);color:var(--text)}
body.dark .block-template-card:hover,
body.dark .block-template-card.selected,
body.dark .icon-card:hover,
body.dark .icon-card.selected{background:#222331;border-color:#6b5fc0}
body.dark .block-thumb{background:#1b1f28}
body.dark .thumb-cards em,
body.dark .thumb-quote>span,
body.dark .thumb-faq span i,
body.dark .thumb-form>em i,
body.dark .thumb-blank{background:#282d38;border-color:#414857}
body.dark .icon-library-toolbar{background:rgba(24,27,35,.96)}

/* New-project visual choices */
body.dark .site-type-option,
body.dark .template-option{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
body.dark .site-type-option:hover,
body.dark .template-option:hover{background:var(--control-hover)}
body.dark .site-type-option.selected,
body.dark .template-option.selected{background:#292640;border-color:#766ad1}
body.dark .option-help{background:var(--control-bg);border-color:var(--line-strong);color:var(--muted)}
body.dark .responsive-layout-demo,
body.dark .desktop-layout-demo,
body.dark .template-thumb,
body.dark .preview-width-hint{background:var(--surface-2);color:var(--muted)}
body.dark .demo-device{background:#171a21;border-color:#626a7a}

/* Semantic status colors */
body.dark .website-compatibility.is-supported{background:#183228;border-color:#285f48;color:#7bd5ac}
body.dark .website-compatibility.is-unsupported,
body.dark .website-limitations,
body.dark .legacy-import-banner,
body.dark .size-mode-warning{background:#352b1b;border-color:#6f5729;color:#e7c984}
body.dark .semantic-locked{background:#372f1e;color:#e7cd8a}
body.dark .page-row .page-direct-delete:hover,
body.dark .layer-bottom-toolbar button.danger:not(:disabled):hover{background:#3a2228!important;color:#ff8e98!important}

/* Keep authored page colors isolated from the editor theme. */
body.dark .canvas-page,
body.dark .canvas-page *,
body.dark .preview-document,
body.dark .preview-document *{color-scheme:light}