/* Exact AccentHex values from Shared/OKO52.ApplicationPreferences. */
:root,[data-oko-accent="lime"]{--accent:#B8F33A}
:root[data-oko-accent="sky"]{--accent:#13C8F5}
:root[data-oko-accent="emerald"]{--accent:#23E6A1}
:root[data-oko-accent="amber"]{--accent:#FFB21C}
:root[data-oko-accent="purple"]{--accent:#BE71FF}
:root{--accent-ink:#0A0F12;--accent-soft:color-mix(in srgb,var(--accent) 13%,var(--surface));--accent-hover:color-mix(in srgb,var(--accent) 82%,white);--accent-border:color-mix(in srgb,var(--accent) 22%,transparent);--accent-wash:color-mix(in srgb,var(--accent) 4%,transparent)}
.oko-theme-swapping *,.oko-theme-swapping *::before,.oko-theme-swapping *::after{transition:none!important}

/* Migrate the few original literal-lime surfaces; semantic danger/warning
   colors and multicolor emoji/media are deliberately not remapped. */
.button-primary:hover{background:var(--accent-hover)}
.ecosystem-visual{background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--accent) 10%,var(--surface)) 0,transparent 65%),var(--surface)}
.ecosystem-visual::before{border-color:color-mix(in srgb,var(--accent) 8%,transparent)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.form-error.success{border-color:color-mix(in srgb,var(--accent) 19%,transparent);background:color-mix(in srgb,var(--accent) 3%,transparent)}
.notice{border-color:var(--accent-border);background:var(--accent-wash)}
.current-release{border-color:color-mix(in srgb,var(--accent) 27%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 65%)}
.toast{border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.chat-message.mine .chat-message-text{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
.chat-admin-badge{border-color:color-mix(in srgb,var(--accent) 19%,transparent)}

/* Brand images have empty alt text; their existing links/text retain their
   accessible names. Masks preserve the exact original SVG geometry. */
@supports (mask-image:url("/assets/oko-logo.svg")){
 .brand>img[src="/assets/oko-logo.svg"],.visual-core>img[src="/assets/oko-logo.svg"],.gate-scan>img[src="/assets/oko-logo.svg"]{display:none}
 .brand::before,.visual-core::before,.gate-scan::before{content:"";display:block;flex:none;background:var(--accent);mask:url("/assets/oko-logo.svg") center/contain no-repeat}
 .brand::before{width:38px;height:38px}
 .visual-core::before{width:100px;height:100px;margin-bottom:14px;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 13%,transparent))}
 .gate-scan::before{width:65px;height:65px}
}
.oko-accent-button{position:relative;flex:none;width:44px;height:44px;min-height:44px;padding:10px;color:var(--muted);border:1px solid var(--line-soft);background:transparent}
.oko-accent-button>svg{width:22px;height:22px;flex:none}
.oko-accent-button:hover,.oko-accent-button[aria-expanded="true"]{background:var(--surface-raised);color:var(--accent);border-color:var(--line)}
.oko-accent-current{position:absolute;right:7px;bottom:7px;width:7px;height:7px;border:2px solid var(--bg);border-radius:50%;background:var(--accent);box-sizing:content-box;pointer-events:none}
.oko-accent-button:focus:not(:focus-visible){outline:none}
.oko-accent-button:focus-visible,.oko-accent-close:focus-visible,.oko-accent-option:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.oko-accent-panel{position:fixed;z-index:500;width:min(304px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:10px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px #0008,0 2px 8px #0004;animation:oko-accent-enter 150ms cubic-bezier(.2,0,0,1);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.oko-accent-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 9px 17px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
.oko-accent-heading>div>span{display:block;font-size:9px;line-height:1.5;letter-spacing:.1em;color:var(--muted);margin-bottom:5px}
.oko-accent-heading h2{font-size:17px;line-height:1.5;letter-spacing:-.025em;color:var(--ink);text-wrap:nowrap}
.oko-accent-close{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:8px;border:0;border-radius:9px;color:var(--muted);background:transparent;transition:background-color 120ms,color 120ms}
.oko-accent-close>svg{width:21px;height:21px}
.oko-accent-close:hover{background:var(--surface-hover);color:var(--ink)}
.oko-accent-options{display:grid;gap:4px;padding-top:3px}
.oko-accent-option{display:flex;align-items:center;gap:13px;width:100%;min-height:54px;padding:8px 13px;border:0;border-radius:10px;background:transparent;text-align:left;color:var(--ink);transition:background-color 120ms}
.oko-accent-option:hover{background:var(--surface-hover)}
.oko-accent-option[aria-checked="true"]{background:var(--accent-soft)}
.oko-accent-option:active,.oko-accent-close:active{transform:scale(.96)}
.oko-accent-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.oko-accent-copy>strong{font-size:13px;line-height:1.5;font-weight:500;letter-spacing:0;color:var(--ink)}
.oko-accent-copy>small{font-size:10px;line-height:1.4;color:var(--muted)}
.oko-accent-swatch{display:block;width:25px;height:25px;flex:none;background:var(--swatch);border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff20}
.oko-accent-check{width:18px;height:18px;flex:none;visibility:hidden;color:var(--accent)}
.oko-accent-option[aria-checked="true"]>.oko-accent-check{visibility:visible}
[data-accent-option="lime"]{--swatch:#B8F33A}
[data-accent-option="sky"]{--swatch:#13C8F5}
[data-accent-option="emerald"]{--swatch:#23E6A1}
[data-accent-option="amber"]{--swatch:#FFB21C}
[data-accent-option="purple"]{--swatch:#BE71FF}
@keyframes oko-accent-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.brand::before{width:32px;height:32px}.visual-core::before{width:80px;height:80px}}
@media(max-width:430px){.brand::before{width:30px;height:30px}.visual-core::before{width:68px;height:68px}.site-header .header-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){.oko-accent-panel{animation:none}.oko-accent-button,.oko-accent-close,.oko-accent-option{transition:none}.oko-accent-button:active,.oko-accent-close:active,.oko-accent-option:active{transform:none}}
@media(forced-colors:active){.oko-accent-button:focus-visible,.oko-accent-close:focus-visible,.oko-accent-option:focus-visible{outline-color:Highlight}.oko-accent-swatch{forced-color-adjust:none}.oko-accent-option[aria-checked="true"]{outline:1px solid Highlight;outline-offset:-1px}.oko-accent-panel{border-color:CanvasText}}