/* Shared brand and appearance surfaces; loaded after generated color overrides. */
:root{--brand-gradient:linear-gradient(140deg,#5074fa,#8353ec);--action-gradient:linear-gradient(140deg,#4e63df,#7948dc);--accent:#7048d2;--accent-soft:#eee8fb;--blue:var(--accent);--primary:var(--accent);--ai-accent:var(--accent);--ink:#282238;--muted:#837c91;--line:#e6e1ed;--surface-border:#e1dce9;--bg:#f7f5fa;--surface:#fff;--raised:#f3f0f8;--input:#fff;--hover:#eee9f7;--page:#edeaf3;color-scheme:light}
:root[data-theme=dark]{--accent:#b79af6;--accent-soft:#302740;--blue:var(--accent);--primary:var(--accent);--ai-accent:var(--accent);--ink:#eeeaf5;--muted:#aca4bc;--line:#3a3448;--surface-border:#3a3448;--bg:#19171f;--surface:#222029;--raised:#2b2734;--input:#27232e;--hover:#373040;--page:#17151d;color-scheme:dark}
body{background:var(--page);color:var(--ink)}
#sidebar .brand-mark,#sidebar .brand-mark:hover{background:none;box-shadow:none}
#sidebar .workspace{background:var(--raised);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--surface));box-shadow:0 3px 10px #2110350c}
#sidebar nav button{border:1px solid transparent}
#sidebar nav button.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--surface));color:var(--accent);box-shadow:0 3px 10px #2110350c}
#sidebar nav button.active:hover{background:var(--hover);color:var(--accent)}
.select-trigger::after{border-color:var(--muted)}
.cd-dashboard-picker{padding-left:12px}
.cd-dashboard-picker .fa-layer-group{color:var(--accent)}
button.primary,.cd-button.primary,.cd-button.cd-primary,.cd-primary-button,#auth-screen button.primary{background:var(--action-gradient);color:#fff;border-color:transparent;box-shadow:0 3px 10px #7655df24}
button.primary:hover,.cd-button.primary:hover,#auth-screen button.primary:hover{background:linear-gradient(140deg,#4357cd,#6c3acb);color:#fff;border-color:transparent}
.progress>span,.billing-progress>span{background:var(--brand-gradient)}
.eyebrow,.entry-create,.segmented button.active{color:var(--accent)}
.i.ai-sparkles{fill:none;stroke:none}
.ai-sparkles path{stroke:none}
#ai-panel .ai-send{background:var(--brand-gradient);color:white}
#ai-panel .ai-send:hover{background:var(--action-gradient)}
:root[data-theme=dark] #ai-panel,:root[data-theme=dark] #sidebar{color:var(--ink)}
:root[data-theme=dark] #ai-panel .chat-bubble.question{background:color-mix(in srgb,var(--accent) 20%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 42%,var(--surface));color:var(--ink);box-shadow:0 2px 8px #00000020}
:root[data-theme=dark] #studio iframe{background:var(--bg)}
:root[data-theme=dark] .cd-app{color:var(--ink);background:var(--bg)}
/* Auth starts from the OS mode, including before the application is mounted. */
body.auth-view,#auth-screen{background:var(--page);color:var(--ink);--blue:var(--accent);color-scheme:inherit}
#auth-screen .entry-story{background:var(--bg)}
#auth-screen .entry-login-panel,#auth-screen .entry-signup,#auth-screen .entry-login-main{background:var(--surface);border-color:var(--line)}
#auth-screen .entry-brand,#auth-screen h1,#auth-screen .entry-story h2{color:var(--ink)}
#auth-screen .entry-story h2>span{background-image:var(--brand-gradient)}
#auth-screen .entry-story-content>p,#auth-screen .entry-intro,#auth-screen .entry-data-note,#auth-screen .entry-wordmark{color:var(--muted)}
#auth-screen .field,#auth-screen .entry-birth legend{color:var(--ink)}
#auth-screen input:not([type=checkbox]),#auth-screen select{color:var(--ink);background:var(--input);border-color:var(--line);color-scheme:inherit}
#auth-screen input::placeholder{color:var(--muted)}
#auth-screen input:focus,#auth-screen select:focus{border-color:var(--accent);outline-color:color-mix(in srgb,var(--accent) 24%,transparent)}
#auth-screen input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--input) inset}
#auth-screen .select-trigger{background:var(--input)!important;color:var(--ink)!important;border-color:var(--line)!important}
#auth-screen .select-trigger::after{border-color:var(--muted)}
#auth-screen .select-trigger:hover{background:var(--hover)!important;border-color:var(--muted)!important}
#auth-screen .select-trigger:focus-visible,#auth-screen .select-trigger[aria-expanded=true]{border-color:var(--accent)!important;outline-color:color-mix(in srgb,var(--accent) 24%,transparent)}
.auth-select-menu{background:var(--surface);color:var(--ink);border-color:var(--line);color-scheme:inherit;scrollbar-color:var(--muted) transparent}
.auth-select-menu>button{color:var(--ink)}
.auth-select-menu[data-navigation=pointer]>button:hover:not(:disabled),.auth-select-menu[data-navigation=keyboard]>button.focused{background:var(--hover)}
.auth-select-menu>button[aria-selected=true]{color:var(--accent);background:var(--accent-soft)}
#auth-screen .auth-google,#auth-screen .entry-secondary{background:var(--raised);color:var(--ink);border-color:var(--line)}
#auth-screen .auth-google:hover,#auth-screen .entry-secondary:hover{background:var(--hover)}
#auth-screen .auth-recovery,#auth-screen .auth-verification-link{color:var(--ink)}
#auth-screen .entry-create{border-color:var(--accent);color:var(--accent)}
#auth-screen .entry-create:hover{background:var(--accent-soft)}
#auth-screen .entry-back{color:var(--muted)}
#auth-screen .entry-back:hover,#auth-screen .entry-back:focus-visible{background:var(--hover);color:var(--ink)}
#auth-screen .entry-footer,#auth-screen .entry-signup .entry-footer{background:var(--bg);color:var(--muted);border-color:var(--line)}
#auth-screen .entry-footer strong{color:var(--muted)}
#auth-screen .auth-verification .subtitle,#auth-screen .auth-prototype-note{color:var(--muted)}
#auth-screen .auth-verification .stack>button:not(.primary){color:var(--ink);background:var(--raised);border-color:var(--line)}
#auth-screen .auth-mail-icon{background:var(--accent-soft);color:var(--accent)}
:root[data-theme=light] #auth-screen .error{color:#b92b46}
:root[data-theme=light] #auth-screen .auth-status{color:#16765c}
/* Marketing preview cards follow the login screen's effective theme. */
#auth-screen .preview-top,#auth-screen .preview-question{color:#edf0f8}
#auth-screen .entry-preview{border-color:#ffffff20}
#auth-screen .preview-ai{border-color:#9484dd55;background:linear-gradient(150deg,#38314e,#242130)}
#auth-screen .preview-question{background:#55466e}
#auth-screen .preview-answer b{color:#c2a9ff}
#auth-screen .preview-compose span{background:var(--brand-gradient)}
:root[data-theme=light] #auth-screen .entry-preview{border-color:#ded6ef;box-shadow:0 18px 40px #30214d1a}
:root[data-theme=light] #auth-screen .preview-script{background:linear-gradient(140deg,#fff,#f0ebfb)}
:root[data-theme=light] #auth-screen .preview-ai{background:linear-gradient(150deg,#fff,#f8f5ff);border-color:#d3c5ef}
:root[data-theme=light] #auth-screen .preview-schedule{background:linear-gradient(130deg,#f7fffc,#e8f4f0);border-color:#cce4dc}
:root[data-theme=light] #auth-screen .preview-top{color:var(--ink);border-color:var(--line)}
:root[data-theme=light] #auth-screen .preview-top .i{color:var(--accent)}
:root[data-theme=light] #auth-screen .preview-top>span{color:#249d7c}
:root[data-theme=light] #auth-screen .preview-script>small{color:var(--muted)}
:root[data-theme=light] #auth-screen .preview-script h3{color:var(--ink)}
:root[data-theme=light] #auth-screen .preview-lines i{background:#82719d26}
:root[data-theme=light] #auth-screen .preview-tag{background:#e9e0f8;color:#685080}
:root[data-theme=light] #auth-screen .preview-question{background:var(--accent-soft);color:var(--ink)}
:root[data-theme=light] #auth-screen .preview-answer{background:#f0ebf8;color:var(--ink)}
:root[data-theme=light] #auth-screen .preview-answer b{color:var(--accent)}
:root[data-theme=light] #auth-screen .preview-compose{background:#fff;border-color:var(--line);color:var(--muted)}
:root[data-theme=light] #auth-screen .preview-calendar{background:#dcefe8}
:root[data-theme=light] #auth-screen .preview-calendar b{color:#23866d}
:root[data-theme=light] #auth-screen .preview-calendar span,:root[data-theme=light] #auth-screen .preview-meeting small{color:#64887c}
:root[data-theme=light] #auth-screen .preview-meeting{color:#2f5448}
:root[data-theme=light] #auth-screen .preview-meeting i{background:#52aa90}
:root[data-theme=light] #auth-screen .entry-float{box-shadow:0 6px 18px #30214d18}
:root[data-theme=light] #auth-screen .float-spark{background:#e2d6fa}
:root[data-theme=light] #auth-screen .float-check{background:#bcefdc;color:#216d56}
/* Theme the default writing surface without rewriting authored rich-text HTML. */
:root{--editor-text-color:#000;--editor-reset-icon:#fff}
:root[data-theme=dark]{--editor-text-color:#fff;--editor-reset-icon:#000}
.cd-rich{color:var(--editor-text-color);caret-color:var(--editor-text-color);--editor-default-color:var(--editor-text-color)}
.cd-palette-popover button.cd-palette-reset{display:grid;place-items:center;padding:0;line-height:1}
.cd-palette-reset>svg{display:block;flex:none}
.cd-palette-popover button.cd-palette-default{color:var(--editor-reset-icon)}
:root[data-theme=dark] .cd-rich{background:transparent;color:var(--editor-text-color);caret-color:var(--editor-text-color);--editor-default-color:var(--editor-text-color);--editor-paper:var(--surface)}
:root[data-theme=dark] .cd-rich table{background:var(--editor-paper);color:inherit;border-color:var(--line)}
:root[data-theme=dark] .cd-rich th{background:var(--raised);color:inherit;--editor-paper:var(--raised)}
:root[data-theme=dark] .cd-rich td,:root[data-theme=dark] .cd-rich th{border-color:var(--line)}
/* Highlight contrast is visual only; clearing it reveals the authored text color. */
:root[data-theme=dark] .cd-rich :is(mark,:is(span,font,b,strong,i,em,u,s,strike)[style*="background-color:"]):not([style*="background-color: transparent"]):not([style*="background-color:transparent"]):not([style*="rgba(0, 0, 0, 0)"]):not([style*="--highlight-cleared"]):not([style*="--plain-format"]),
:root[data-theme=dark] .cd-rich :is(mark,:is(span,font,b,strong,i,em,u,s,strike)[style*="background-color:"]):not([style*="background-color: transparent"]):not([style*="background-color:transparent"]):not([style*="rgba(0, 0, 0, 0)"]):not([style*="--highlight-cleared"]):not([style*="--plain-format"]) *{color:#000!important}
@media(max-width:800px){#auth-screen .entry-login-main,#auth-screen .entry-footer{background:var(--surface)}}

/* Auth remains available on phones; signed-in service screens are not released yet. */
.mobile-unavailable-screen:not([hidden]){position:fixed;inset:0;z-index:200;display:grid;place-items:center;box-sizing:border-box;min-height:100dvh;width:100%;margin:0;padding:28px;background:var(--page);color:var(--ink);text-align:center}
.mobile-unavailable-screen p{margin:0;max-width:100%;font-size:18px;font-weight:600;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
body.mobile-unavailable{overflow:hidden}
body.mobile-unavailable :is(#mobile-appbar,#sidebar,#studio,#crm-module,#ai-panel,#call-tools,#nav-backdrop,#toast){display:none!important}

/* Default section accent follows the theme; explicit section colors remain authored. */
:root{--editor-section-accent:#dce4f5}
:root[data-theme=dark]{--editor-section-accent:#776096}

/* Boundary reorder controls stay visibly unavailable, including on hover. */
.setting-row .reorder-button:disabled{opacity:.3;cursor:not-allowed;background:transparent;box-shadow:none}

/* Keep underline tabs' hover and selected surfaces clear of their labels. */
@media(min-width:768px){
 .tabs{gap:8px}
 .tabs>button{padding-inline:16px;flex-shrink:0}
}
