/* Shared palette and reserved site chrome. Tool layouts keep their own CSS. */
html { scrollbar-gutter: stable; --site-header-height: 88px; scroll-padding-top: calc(var(--site-header-height) + 16px); }
/* Warm paper by day, forest charcoal at night. Filled controls use their own
   contrast pair so link accents can remain readable on either page background. */
html[data-theme="light"]:not(.fox-embedded), html[data-theme="light"]:not(.fox-embedded) body {
    color-scheme: light;
    --success:#39734b; --error:#b1382f; --warning:#915d20; --info:#466d68; --shadow-sm:0 2px 8px #27321c0d;
    --primary:#42643e; --primary-hover:#304e2d; --primary-dark:#304e2d; --primary-light:#d3ddc6;
    --action:#42643e; --action-hover:#304e2d; --on-action:#f5f0e5;
    --site-header-bg:#3c5039; --accent-copper:#88552e;
    --bg:#e4dfd2; --surface:#eee9de; --bg-card:#eee9de; --card-bg:#eee9de;
    --bg-alt:#dcd8c9; --alt:#dcd8c9; --bg-sidebar:#dcd8c9; --bg-input:#e9e5d9;
    --bg-hover:#d5ddc9; --bg-active:#c7d3ba;
    --text:#2e362b; --text-light:#626858; --text-muted:#626858; --text-secondary:#626858; --muted:#626858; --text-dim:#626858;
    --border:#bec2ad; --border-light:#adb59b; --border-hover:#899777;
    --shadow:0 3px 6px #313b2214,0 1px 2px #313b2214;
}
html[data-theme="dark"]:not(.fox-embedded), html[data-theme="dark"]:not(.fox-embedded) body {
    color-scheme: dark;
    --success:#8bbd83; --error:#f18f78; --warning:#d4ad69; --info:#94bdb2; --shadow-sm:0 2px 8px #0003;
    --primary:#a3c38b; --primary-hover:#bed7a9; --primary-dark:#bed7a9; --primary-light:#30402b;
    --action:#42643e; --action-hover:#304e2d; --on-action:#f5f0e5;
    --site-header-bg:#344832; --accent-copper:#dda370;
    --bg:#171d17; --surface:#252d23; --bg-card:#252d23; --card-bg:#252d23;
    --bg-alt:#30382b; --alt:#30382b; --bg-sidebar:#20271e; --bg-input:#1c231a;
    --bg-hover:#35412e; --bg-active:#405037;
    --text:#ebe6d9; --text-light:#b0b7a1; --text-muted:#b0b7a1; --text-secondary:#b0b7a1; --muted:#b0b7a1; --text-dim:#b0b7a1;
    --border:#48523c; --border-light:#5c664c; --border-hover:#7a8967;
    --shadow:0 3px 6px #0004,0 1px 2px #0003;
}
/* Shared filled-control treatment covers the tools' existing class names. */
html[data-theme]:not(.fox-embedded) body :is(.btn-primary,.home-primary,.lu-primary,.filter-menu-apply,#toast.toast:not(.error),.filter-chip .chip-remove:hover,.rq-tab.active,.page-btn.active,.lm-page-btn.active,.range-btn.active,.mode-tab.active,.lv-usage-periods button.active,.mt-btn.flash,.lt-badge.lt-training,.multiselect-count,.unread-badge,.message-bubble.outgoing) {
    background-color:var(--action); color:var(--on-action);
}
html[data-theme]:not(.fox-embedded) body :is(.btn-primary,.home-primary,.lu-primary,.filter-menu-apply):hover:not(:disabled) { background-color:var(--action-hover); }
/* Semantic notices retain their status backgrounds with matching foregrounds. */
html[data-theme="light"]:not(.fox-embedded) #toast-container .toast { color:var(--on-action); }
html[data-theme="dark"]:not(.fox-embedded) #toast-container .toast { color:var(--bg); }
html[data-theme]:not(.fox-embedded) body {
    margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg); color: var(--text);
}
fox-site { display: block; position: sticky; top: 0; z-index: 150; height: var(--site-header-height); min-height: var(--site-header-height); flex: 0 0 var(--site-header-height); background: var(--site-header-bg); width: 100%; }
body.site-page #gen-app, body.site-page #chat-app, body.site-page #lora-app, body.site-page #trainer-app { height: calc(100dvh - var(--site-header-height)); min-height: 0; }
body.site-page #viewer-app { min-height: calc(100dvh - var(--site-header-height)); }
body.site-page > header:not(#app-header) { position: static; background: var(--surface); color: var(--text); box-shadow: none; }
html:not(.fox-embedded) body.site-checkout { display: block !important; padding: 0 !important; }
html:not(.fox-embedded) body.site-checkout > .container, html:not(.fox-embedded) body.site-checkout > .wrap { margin: 24px auto; width: calc(100% - 32px); }
html.fox-embedded { --site-header-height: 0px; }
html.fox-embedded fox-site { display: none; }
@media(max-width:820px) { html { scrollbar-gutter: stable; --site-header-height:108px; } html.fox-embedded { --site-header-height:0px; } }
fox-site > .fox-login-widget { display: flex; align-items: flex-start; justify-content: flex-start; width: 240px; max-width: 100%; height: 48px; }
fox-site > .fox-login-widget:empty::before { content: ""; display: block; width: 220px; height: 40px; background: var(--bg-alt); border-radius: 8px; }
fox-site > .fox-login-widget > button { min-height: 40px; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.tool-toolbar { display:flex; align-items:center; padding:8px 16px; border-bottom:1px solid var(--border); background:var(--surface); }

@media print {
    html { --site-header-height:0px !important; }
    fox-site { display:none !important; }
    html[data-theme]:not(.fox-embedded) body, html[data-theme].fox-embedded body { background:white !important; color:#1e293b !important; --bg:white; --surface:white; --bg-card:white; --card-bg:white; --text:#1e293b; --text-muted:#475569; --text-secondary:#475569; --text-light:#475569; --muted:#475569; --border:#cbd5e1; }
}

@media(max-width:768px) {
    body.inpaint-active fox-site { display:none; }
    body.site-page.inpaint-active #gen-app { height:100dvh; }
}
@media(min-width:769px) { .tool-toolbar { display:none; } }

html:not(.fox-embedded) body.site-miniapp { padding:0; }
html:not(.fox-embedded) .site-miniapp .miniapp-content { padding:16px; }
html:not(.fox-embedded) .site-miniapp #status { display:block; height:48px; min-height:48px; overflow:auto; }

html:not(.fox-embedded) .embedded-title { display:none; }
html.gallery-embedded { --site-header-height:0px; }

html.chat-embedded { --site-header-height:0px; }
html.chat-embedded #sidebar, html.chat-embedded #sidebar-toggle, html.chat-embedded #btn-back-list, html.chat-embedded .tool-toolbar { display:none !important; }
html.chat-embedded #message-panel { width:100%; }