/* theme.css - Vootkit theme-toggle button + dark mode (v51). Deep Ocean Blue accent. */

/* ---- Theme toggle button ---- */
.theme-toggle{width:38px;height:38px;border:1px solid var(--vk-line,#e6eaee);border-radius:11px;background:#fff;color:#3d4654;
  display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.theme-toggle:hover{background:#f2f5f7;color:#0f1724}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-moon{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-moon{display:block}

/* ================= DARK MODE ================= */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#0b1220;color:#e6edf5}

/* Masthead */
html[data-theme="dark"] .masthead{background:rgba(13,20,33,.82)!important;border-bottom-color:rgba(255,255,255,.08)!important;box-shadow:0 1px 0 rgba(255,255,255,.04)}
html[data-theme="dark"] .brand,html[data-theme="dark"] .brand-word{color:#eef3fa}
html[data-theme="dark"] .vk-nav button{color:#a6b6c9}
html[data-theme="dark"] .vk-nav button:hover,html[data-theme="dark"] .vk-nav button.active{color:#eef3fa;background:rgba(255,255,255,.06)}
html[data-theme="dark"] .system-state{color:#8296ac}
html[data-theme="dark"] .memory-button,html[data-theme="dark"] .account-button,
html[data-theme="dark"] .language-switcher-button,html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#c6d3e2}
html[data-theme="dark"] .memory-button:hover,html[data-theme="dark"] .account-button:hover,html[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.09);color:#fff}

/* Hero / capture */
html[data-theme="dark"] .capture-screen{background:#0b1220!important}
html[data-theme="dark"] .hero-shade{background:linear-gradient(180deg,rgba(11,18,32,.4),rgba(11,18,32,.85) 60%,#0b1220)!important}
html[data-theme="dark"] .capture-content h1,html[data-theme="dark"] .vk-hero-title{color:#f2f6fb}
html[data-theme="dark"] .capture-content>p,html[data-theme="dark"] .kicker{color:#a6b6c9}

/* Composer */
html[data-theme="dark"] .intent-composer{background:#111c2b!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important}
html[data-theme="dark"] .intent-composer textarea,html[data-theme="dark"] textarea{color:#eef3fa!important}
html[data-theme="dark"] textarea::placeholder{color:#7d90a6!important}
html[data-theme="dark"] .chip-button{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#c6d3e2}
html[data-theme="dark"] .chip-button:hover{background:rgba(255,255,255,.09)}
html[data-theme="dark"] .round-button{color:#a6b6c9}
html[data-theme="dark"] .local-note{color:#7d90a6}

/* Mode chips + starts */
html[data-theme="dark"] .vk-modes button{background:#111c2b;border-color:rgba(255,255,255,.1);color:#dbe6f2}
html[data-theme="dark"] .vk-modes button.active{background:rgba(96,165,250,.18);border-color:#60a5fa;color:#bcd8f4}
html[data-theme="dark"] .starts>span{color:#8296ac}
html[data-theme="dark"] .starts button{background:#111c2b;border-color:rgba(255,255,255,.1);color:#c6d3e2}

/* Workforce strip */
html[data-theme="dark"] .vk-workforce-strip{background:#111c2b!important;border-color:rgba(255,255,255,.1)!important}
html[data-theme="dark"] .vk-workforce-copy strong{color:#eef3fa}
html[data-theme="dark"] .vk-workforce-copy small{color:#a6b6c9}

/* Drawer + live result panels */
html[data-theme="dark"] .vk-intent-drawer{background:#111c2b!important;border-color:rgba(255,255,255,.1)!important;color:#dbe6f2}
html[data-theme="dark"] .vk-result-panel,html[data-theme="dark"] .vk-kernel-panel,
html[data-theme="dark"] .vk-intent-object-panel{background:#111c2b!important;border-color:rgba(255,255,255,.09)!important;color:#dbe6f2}
html[data-theme="dark"] .vk-result-panel header h2,html[data-theme="dark"] .vk-kernel-panel strong{color:#eef3fa}
html[data-theme="dark"] .vk-detected-row,html[data-theme="dark"] .vk-safety-strip{background:#0f1a28!important;border-color:rgba(255,255,255,.08)!important;color:#c6d3e2}
html[data-theme="dark"] .vk-rf-name{color:#dbe6f2}
html[data-theme="dark"] .vk-rf-bar{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .vk-router-note,html[data-theme="dark"] .vk-team-note{color:#93a6bb}

/* Tool + team + agent cards */
html[data-theme="dark"] .vk-agent-tool,html[data-theme="dark"] .vk-team-agent,
html[data-theme="dark"] .vk-agent-card,html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .vk-source-card,html[data-theme="dark"] .vk-output-card{background:#0f1a28!important;border-color:rgba(255,255,255,.09)!important;color:#dbe6f2}
html[data-theme="dark"] .vk-agent-tool strong,html[data-theme="dark"] .vk-team-agent strong,
html[data-theme="dark"] .vk-agent-card strong,html[data-theme="dark"] .tool-card>strong{color:#eef3fa}
html[data-theme="dark"] .vk-agent-tool span,html[data-theme="dark"] .vk-team-agent small,
html[data-theme="dark"] .vk-agent-card small,html[data-theme="dark"] .tool-card>small{color:#93a6bb}

/* Agents hub */
html[data-theme="dark"] .vk-agents-panel{background:#0f1a28!important;border-color:rgba(255,255,255,.09)!important}
html[data-theme="dark"] .vk-agents-head{border-bottom-color:rgba(255,255,255,.09)!important}
html[data-theme="dark"] .vk-agents-head h2{color:#eef3fa}
html[data-theme="dark"] .vk-agents-head p,html[data-theme="dark"] .vk-agents-total{color:#93a6bb}
html[data-theme="dark"] #vkAgentsSearch{background:#0b1220;border-color:rgba(255,255,255,.12);color:#eef3fa}
html[data-theme="dark"] .vk-city-chip{background:#0b1220;border-color:rgba(255,255,255,.12);color:#c6d3e2}
html[data-theme="dark"] .vk-agent-card{background:#0b1220!important}

/* Marketing sections */
html[data-theme="dark"] .vk-home-extra{background:#0b1220}
html[data-theme="dark"] .vk-about,html[data-theme="dark"] .vk-blog{border-top-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .vk-how,html[data-theme="dark"] .vk-faq{background:#0e1826;border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .vk-sec h2{color:#f2f6fb}
html[data-theme="dark"] .vk-sec .vk-lead,html[data-theme="dark"] .vk-how-grid p{color:#a6b6c9}
html[data-theme="dark"] .vk-about-stats article,html[data-theme="dark"] .vk-how-grid article{background:#111c2b;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .vk-about-stats span{color:#a6b6c9}
html[data-theme="dark"] .vk-stage-flow span{background:#111c2b;border-color:rgba(255,255,255,.1);color:#dbe6f2}
html[data-theme="dark"] .vk-how-grid h3{color:#eef3fa}

/* Blog cards + reader */
html[data-theme="dark"] .vk-post{background:#111c2b;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .vk-post-body h3{color:#eef3fa}
html[data-theme="dark"] .vk-post-body p{color:#a6b6c9}
html[data-theme="dark"] .vk-post-meta{color:#7d90a6}
html[data-theme="dark"] .vk-blog-cta{background:#111c2b;border-color:rgba(255,255,255,.12);color:#93b4fb}
html[data-theme="dark"] .vk-reader-panel,html[data-theme="dark"] .vk-rc-panel{background:#111c2b;color:#dbe6f2}
html[data-theme="dark"] .vk-reader-panel h1,html[data-theme="dark"] .vk-rc-head h2{color:#eef3fa}
html[data-theme="dark"] .vk-reader-panel p{color:#c6d3e2}
html[data-theme="dark"] .vk-reader-close,html[data-theme="dark"] .vk-rc-close,html[data-theme="dark"] .vk-agents-close{background:rgba(255,255,255,.06);color:#c6d3e2}

/* FAQ */
html[data-theme="dark"] .vk-faq-list details{border-bottom-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .vk-faq-list summary{color:#eef3fa}
html[data-theme="dark"] .vk-faq-list p{color:#a6b6c9}

/* Inputs generally */
html[data-theme="dark"] input,html[data-theme="dark"] select{background:#0f1a28;border-color:rgba(255,255,255,.12);color:#eef3fa}

/* Dashboard main surfaces */
html[data-theme="dark"] .dashboard-screen{background:#0b1220!important}
html[data-theme="dark"] .dash-rail,html[data-theme="dark"] .dash-topbar{background:#0f1a28!important;border-color:rgba(255,255,255,.08)!important}
html[data-theme="dark"] .dash-hero h1,html[data-theme="dark"] .dash-section-head h2,html[data-theme="dark"] .workspace-view-head h1{color:#eef3fa}
html[data-theme="dark"] .dash-intent{background:#111c2b!important;border-color:rgba(255,255,255,.1)!important}

/* Grain overlay off in dark */
html[data-theme="dark"] .grain{opacity:0}