/* Theme control and surfaces shared by every page. Product photography retains its original lighting. */
:root{--brand-orange:#ff6600;--brand-orange-hover:#e65c00;--on-brand:#fff}
#theme{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:44px;min-height:44px;padding:0 12px;border-radius:6px;background:var(--surface);color:var(--text)}
#theme:hover{border-color:var(--accent)}
#theme .theme-label{font-size:14px;line-height:1;white-space:nowrap}
#theme svg{width:18px;height:18px;flex:none}
html[data-theme=dark] .theme-sun,html[data-theme=light] .theme-moon{display:none}
html[data-theme=light]{--bg:#ffffff;--surface:#f3f5f7;--surface2:#e8edf1;--text:#18212b;--muted:#52606e;--border:#ccd5dd;--accent:#b54700;--header:rgba(255,255,255,.96)}
html[data-theme=light] .hero{--accent:#ff6600}
html[data-theme=light] .button{background:var(--brand-orange);border-color:var(--brand-orange);color:var(--on-brand)}
html[data-theme=light] .button:hover{background:#e95d00}
html[data-theme=light] .button.outline,html[data-theme=light] .button.secondary{background:transparent;color:var(--text);border-color:var(--border)}
html[data-theme=light] .hero .button.white{background:transparent;color:#fff;border-color:#89919b}
html[data-theme=light] .catalog-grid .product-card{background:var(--surface);color:var(--text);border-color:var(--border)}
html[data-theme=light] .catalog-grid .card-content{background:var(--surface);color:var(--text)}
html[data-theme=light] .card-content p{color:var(--muted)}
html[data-theme=light] .card-link{color:var(--text);border-color:var(--border)}
html[data-theme=light] .product-card:hover{box-shadow:0 14px 32px #18212b18}
html[data-theme=light] .selection-product{background:var(--surface);color:var(--text);border-color:var(--border)}
html[data-theme=light] .selection-page .selection-product-label>span,html[data-theme=light] .selection-page .selection-product-caption span{color:var(--muted)}
html[data-theme=light] .system-content .button{color:var(--on-brand)}
html[data-theme=light] .system-content .button.secondary{color:var(--text)}
html[data-theme=light] .system-content .inspector,html[data-theme=light] .system-content .node-card{border-color:var(--border)}
@media(max-width:600px){#theme{width:40px;min-width:40px;min-height:40px;padding:0}#theme .theme-label{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The account is a separate, labelled action in both desktop and mobile headers. */
.nav-actions .account-link{width:42px;height:42px;flex:none;border-radius:6px;background:#283440;border-color:#415364;color:#f6f7f8}
.nav-actions .account-link:hover{background:#344454;border-color:#ff6600;color:#fff}
html[data-theme=light] .nav-actions .account-link{background:#e9eff5;border-color:#bccbd9;color:#233d55}
html[data-theme=light] .nav-actions .account-link:hover{background:#dde8f1;border-color:#ff6600;color:#172c40}
/* Keep filled orange actions identical across public-page themes. */
html[data-theme] .button:not(.outline):not(.secondary):not(.white),
html[data-theme] .btn.primary,
html[data-theme] :is(.ktos-page,.ktos-brief) .ktos-btn:not(.ktos-secondary){background:var(--brand-orange);border-color:var(--brand-orange);color:var(--on-brand)}
html[data-theme] .button:not(.outline):not(.secondary):not(.white):hover,
html[data-theme] .btn.primary:hover,
html[data-theme] :is(.ktos-page,.ktos-brief) .ktos-btn:not(.ktos-secondary):hover{background:var(--brand-orange-hover);border-color:var(--brand-orange-hover);color:var(--on-brand)}
html[data-theme] .stos-configurator :is(.tank-tabs button[aria-pressed=true],[data-play]){background:var(--brand-orange);border-color:var(--brand-orange);color:var(--on-brand)}
@media(max-width:600px){.nav-actions .account-link{width:36px;height:38px}.nav-actions{gap:5px}.header .nav-wrap{gap:10px}}
@media(max-width:380px){.header .nav-wrap{padding-left:12px;padding-right:12px;gap:6px}.header .brand{font-size:17px}.header .brand span{font-size:5px;letter-spacing:.15em}.header .nav-actions{gap:4px}.header #theme{width:34px;min-width:34px}.nav-actions .account-link{width:34px}}

/* Text on light panels must not inherit the white photo/scene palette. */
html[data-theme=light] .selection-page .selection-product-content{background:var(--surface);color:var(--text)}
html[data-theme=light] .selection-page .selection-product-label h2{color:var(--text)}
html[data-theme=light] .system-content .image-label{background:var(--surface);color:var(--muted)}
html[data-theme=light] .system-content .node-choice:is(:hover,[aria-pressed=true]){color:var(--text)}
html[data-theme=light] .system-content .button.secondary:hover{color:var(--text);background:var(--surface2)}
html[data-theme] .hero em{color:var(--brand-orange)}
html[data-theme] :is(.system-content .marker,.composition-marker):is(:hover,[aria-pressed=true]),
html[data-theme] .stos-configurator .tank-label.selected{background:var(--brand-orange);border-color:var(--brand-orange);color:var(--on-brand)}