/* Neutral canvases and shared palette roles, layered after each public site's layout. */
html[data-nox-appearance] {
  --bg-base:var(--nox-bg);--bg-surface:var(--nox-surface);--bg-card:var(--nox-surface);--bg-card-hover:var(--nox-raised);--bg:var(--nox-bg);--bg2:var(--nox-raised);--bg-color:var(--nox-bg);--bg-dark:var(--nox-bg);--bg-darker:var(--nox-bg);
  --panel:var(--nox-surface);--panel2:var(--nox-raised);--surface:var(--nox-surface);--surface-color:var(--nox-surface);--surface-elevated:var(--nox-raised);--elevated:var(--nox-raised);--code-bg:var(--nox-raised);
  --text-main:var(--nox-text);--text-dim:var(--nox-muted);--text-2:var(--nox-muted);--text:var(--nox-text);--text-primary:var(--nox-text);--text-secondary:var(--nox-muted);--text-muted:var(--nox-muted);--muted:var(--nox-muted);
  --line:var(--nox-line);--border:var(--nox-line);--border-color:var(--nox-line);
  --cyan:var(--nox-action);--accent-blue:var(--nox-action);--accent:var(--nox-action);--accent2:var(--nox-action);--brand-cyan:var(--nox-action);--brand-blue:var(--nox-action);--accent-cyan:var(--nox-action);--accent-purple:var(--nox-action);--ink:var(--nox-onaction);
  background:var(--nox-bg);color:var(--nox-text);
}
html[data-nox-appearance] body { background:var(--nox-bg);color:var(--nox-text);transition:none; }
html[data-nox-appearance] :is(.top,.navbar,.nav-container,.g-header,.header) { background:var(--nox-surface);border-color:var(--nox-line); }
html[data-nox-appearance] :is(.card,.cat-card,.feature-card,.feature-box,.glass-card,.highlight-box,.bento-item,.modal-content,.chooser,.shot,.steps li) { background:var(--nox-surface);color:var(--nox-text);border-color:var(--nox-line); }
html[data-nox-appearance] :is(.section-alt,.banner,.shot a,.specs th,.specs td,.g-search,.tip-box) { background:var(--nox-raised);border-color:var(--nox-line); }
html[data-nox-appearance] :is(.card p,.card li,.cat-card p,.lead,.sub,.note,footer,.shot small,.specs td,.feature-card p) { color:var(--nox-muted); }
html[data-nox-appearance] :is(.btn-primary,.button.primary,.btn:not(.ghost):not(.btn-secondary):not(.btn-outline),.lang-switch a.on) { background:var(--nox-action);color:var(--nox-onaction)!important;border-color:var(--nox-action);box-shadow:none; }
html[data-nox-appearance] :is(.btn-secondary,.btn.ghost,.btn-outline,.button:not(.primary),.langs button) { color:var(--nox-action)!important;border-color:var(--nox-action);background:transparent; }
html[data-nox-appearance] :is(h1,h2,h3,h4,p)[style*="color: #fff"] { color:var(--nox-text)!important; }
html[data-nox-appearance] :is(.nox-appearance-open,.nox-close) { border:1px solid var(--nox-action);border-radius:12px;background:var(--nox-action);color:var(--nox-onaction);font:600 14px/1.4 system-ui;min-height:40px;padding:6px 14px;cursor:pointer; }
.nox-appearance-open { position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:30;box-shadow:0 3px 16px #0003; }
html[data-nox-appearance] .nox-appearance-dialog { position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:24px;overflow:auto;border:1px solid var(--nox-line);border-radius:20px;background:var(--nox-surface);color:var(--nox-text);font:16px/1.5 system-ui;box-sizing:border-box; }
.nox-appearance-dialog::backdrop { background:#0009; }
.nox-appearance-dialog form { display:grid;gap:16px;margin:0; }
.nox-appearance-dialog h2 { font-size:22px;margin:0; }
.nox-appearance-dialog label { display:grid;gap:6px; }
.nox-appearance-dialog p { margin:0;font-size:13px;color:var(--nox-muted); }
.nox-appearance-dialog select { width:100%;min-height:44px;padding:9px;border:1px solid var(--nox-line);border-radius:8px;background:var(--nox-raised);color:var(--nox-text);font:inherit; }
.nox-appearance-dialog .nox-check { display:flex;align-items:center;min-height:44px;gap:12px; }
.nox-appearance-dialog input { width:22px;height:22px;accent-color:var(--nox-action); }
.nox-palette-preview { display:flex;align-items:center;gap:10px; }
.nox-palette-preview span { display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--nox-action); }
html[data-nox-appearance] :is(a,button,select,input):focus-visible { outline:3px solid var(--nox-action);outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { html[data-nox-appearance] *,html[data-nox-appearance] *::before { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }

html[data-nox-appearance] :is(#themeToggleBtn,#themeBtn,.theme-btn)[hidden]{display:none!important}

html[data-nox-appearance] :is(.site-header,.site-footer,footer,.privacy-modal-content,.format-box,.privacy-banner,.real-screen) { background:var(--nox-surface);color:var(--nox-text);border-color:var(--nox-line); }
html[data-nox-appearance] :is(h1,h2,h3,h4,.stat-value,.feature-title,.brand-text .p-cap,.brand-text) { color:var(--nox-text); }
html[data-nox-appearance] .gradient-text { background:none;-webkit-text-fill-color:currentColor;color:var(--nox-action); }
html[data-nox-appearance] :is(.ambient-glow,.hero-glow) { display:none; }
html[data-nox-appearance] { --ok:#83dca2;--warn:#ffd79a;--fail:#ffb4ab;--danger:#ffb4ab; }
html[data-nox-appearance][data-theme=light] { --ok:#146c43;--warn:#885000;--fail:#b3261e;--danger:#b3261e; }

html[data-nox-appearance] :is(.btn,.button,.navbar,.lang-btn,.langs button,.pill-btn) { transition:transform .12s ease,filter .12s ease; }
html[data-nox-appearance] :is(.lang-btn.active,.langs button[aria-pressed=true]) { background:var(--nox-action);color:var(--nox-onaction)!important; }
html[data-nox-appearance] .btn:not(.ghost):not(.btn-secondary):not(.btn-outline) :is(span,strong,small) { color:inherit; }
html[data-nox-appearance] .btn-play-badge svg { fill:var(--nox-onaction); }

html[data-nox-appearance] *,html[data-nox-appearance] *::before,html[data-nox-appearance] *::after { transition-property:transform,filter,opacity,width,height,box-shadow; }
html[data-nox-appearance] :is(.g-lang a.on,.g-brand .usb,.tab-btn.active) { background:var(--nox-action);color:var(--nox-onaction); }
html[data-nox-appearance] :is(.format-pill,.tab-btn) { background:var(--nox-raised);color:var(--nox-text);border-color:var(--nox-line); }
html[data-nox-appearance] .tab-btn.active { background:var(--nox-action);color:var(--nox-onaction); }
html[data-nox-appearance] .btn-play-badge div { color:inherit!important; }
html[data-nox-appearance] :is(h1,h2,h3,h4) span:not(.gradient-text) { color:inherit; }
html[data-nox-appearance] :is(h1,h2,h3,h4) span[style] { color:inherit!important; }
html[data-nox-appearance] :is(.eyebrow,nav a[aria-current],.brand em) { color:var(--nox-action); }
html[data-nox-appearance] :is(thead,th) { background:var(--nox-raised);color:var(--nox-text); }
html[data-nox-appearance] :is(.note,.no) { color:var(--nox-muted); }
html[data-nox-appearance][data-theme=light] .yes { color:#146c43; }

html[data-nox-appearance] :is(.guide-header-title,.guide-content,.faq p,.policy-copy) { color:var(--nox-text); }


/* Shared action and selection surfaces — 2026-10-24, PenDF control standard. */
:root {
 --control-surface:#f1f3f6;--control-text:#181c20;--control-outline:#737982;
 --control-accent:#155a9e;--control-on-accent:#fff;
}
@media(prefers-color-scheme:dark) {
 :root {--control-surface:#282a2e;--control-text:#e2e4e9;--control-outline:#8c9199;--control-accent:#a4c9ff;--control-on-accent:#00315d}
}
html:root:is([data-theme=light],[data-color-scheme=light]) {
 --control-surface:#f1f3f6;--control-text:#181c20;--control-outline:#737982;--control-accent:#155a9e;--control-on-accent:#fff;
}
html:root:is([data-theme=dark],[data-theme=amoled],[data-color-scheme=dark],[data-color-scheme=amoled]),.dark {
 --control-surface:#282a2e;--control-text:#e2e4e9;--control-outline:#8c9199;--control-accent:#a4c9ff;--control-on-accent:#00315d;
}
html:root[data-theme=dark][data-amoled=true],html:root[data-theme=amoled],html:root[data-color-scheme=amoled] {--control-surface:#151515}
html:root[data-nox-appearance] {--control-surface:var(--nox-raised);--control-text:var(--nox-text);--control-accent:var(--nox-action);--control-on-accent:var(--nox-onaction)}
/* Preserve destructive/status controls and compact third-party map/player chrome. */
html:root :is(button,.btn,.button,[role=button]):not(:is(.btn-close,[class*="danger"],[class*="success"],[class*="warning"],[class*="destruct"],[class*="bg-red"],[class*="bg-green"],[class*="bg-amber"],[class*="text-red"],[data-danger],.leaflet-control button,.mapboxgl-control-container button,.maplibregl-control-container button,.video-js button,.plyr button)) {
 border-style:solid;border-width:1px;border-color:var(--control-outline);
 border-radius:10px;background-color:var(--control-surface);color:var(--control-text);
 font-weight:600;min-height:40px;padding-block:6px;max-inline-size:100%;white-space:normal;overflow-wrap:anywhere;touch-action:manipulation;
}
html:root :is(.secondary,.ghost,.btn-secondary,.btn-outline,.btn-outline-secondary,.button-secondary,.button-quiet,.btn-link,.text-button):not(:is(.btn-close,[class*="danger"],[class*="success"],[class*="warning"],[class*="destruct"],[class*="bg-red"],[class*="bg-green"],[class*="bg-amber"],[class*="text-red"],[data-danger],.leaflet-control button,.mapboxgl-control-container button,.maplibregl-control-container button,.video-js button,.plyr button)) {
 background:color-mix(in srgb,var(--control-accent) 6%,var(--control-surface))!important;
 color:color-mix(in srgb,var(--control-accent) 55%,var(--control-text))!important;
 border:1px solid color-mix(in srgb,var(--control-accent) 55%,var(--control-text))!important;
}
html:root :is(button:not([class]),.text-button) {padding:6px 14px;font:inherit;font-weight:600}
/* Primary action roles stay paired with their own readable foreground. */
html:root :is(.btn-primary,.button-primary,.button.primary,button.primary,button[data-primary],button[type=submit]:not(.secondary):not(.ghost):not(.btn-secondary),.btn:not(.secondary):not(.ghost):not(.btn-secondary):not(.btn-outline):not(.btn-outline-secondary):not(.btn-link)):not(:is(.btn-close,[class*="danger"],[class*="success"],[class*="warning"],[class*="destruct"],[class*="bg-red"],[class*="bg-green"],[class*="bg-amber"],[class*="text-red"],[data-danger],.leaflet-control button,.mapboxgl-control-container button,.maplibregl-control-container button,.video-js button,.plyr button)) {
 background:var(--control-accent)!important;color:var(--control-on-accent)!important;border-color:var(--control-accent);
}
html:root :is(button,[role=button],.btn,.button,[role=tab]):is([aria-pressed=true],[aria-selected=true],.is-active,.active,.selected),
html:root :is(.btn-check:checked+.btn,.segmented-control input:checked+span) {
 background:var(--control-accent)!important;color:var(--control-on-accent)!important;
 border-color:var(--control-accent)!important;box-shadow:inset 0 0 0 1px currentColor;font-weight:750!important;
}
/* A glyph supplements colour on text selection controls without replacing existing icons. */
html:root :is(.filter-chip,.tab-btn,.lang-btn,.theme-picker-btn,[role=tab]):is([aria-pressed=true],[aria-selected=true],.is-active,.active,.selected):not(:has(.theme-option-check,.check,.selection-icon))::after {
 content:"✓";display:inline-block;margin-inline-start:.4em;font-weight:900;
}
html:root :is(button,.btn,.button,[role=button],[role=tab]):focus-visible {
 outline:3px solid var(--control-accent)!important;outline-offset:3px;
}
html:root :is(button,.btn,.button,[role=button]):active:not(:disabled):not([aria-disabled=true]) {filter:brightness(.92)}
html:root :is(button,.btn,.button,[role=button]):is(:disabled,[aria-disabled=true]) {opacity:.5;cursor:not-allowed;filter:none}
@media(prefers-reduced-motion:reduce) {html:root :is(button,.btn,.button,[role=button]) {transition:none!important;animation:none!important}}

/* Destructive actions are buttons too, with semantic colours independent of the palette. */
:root {--control-danger-bg:#fde8eb;--control-danger-text:#9f1730;--control-danger-border:#b3261e}
@media(prefers-color-scheme:dark) {:root {--control-danger-bg:#3e1720;--control-danger-text:#ffb4ab;--control-danger-border:#ffb4ab}}
html:root:is([data-theme=light],[data-color-scheme=light]) {--control-danger-bg:#fde8eb;--control-danger-text:#9f1730;--control-danger-border:#b3261e}
html:root:is([data-theme=dark],[data-theme=amoled],[data-color-scheme=dark],[data-color-scheme=amoled]),.dark {--control-danger-bg:#3e1720;--control-danger-text:#ffb4ab;--control-danger-border:#ffb4ab}
html:root :is(button,.btn,.button,[role=button]):is(.danger,.btn-danger,.is-danger,[data-danger]) {
 background:var(--control-danger-bg)!important;color:var(--control-danger-text)!important;
 border:1px solid var(--control-danger-border)!important;border-radius:10px;min-height:40px;padding-block:6px;font-weight:600;
}

/* The wide PenDF mark is drawn for dark backgrounds; keep it on its own dark tile in the light theme. */
html[data-theme="light"] .brand-mark img.wide{background:#0b1119;border-radius:14px;padding:5px 10px;box-sizing:content-box;width:96px}
html[data-nox-appearance] nav a:hover{color:var(--nox-action);text-decoration:underline;text-underline-offset:5px}
html[data-nox-appearance] nav a[aria-current]{font-weight:700}

/* ServerNox-style pickers in the appearance dialog */
.nox-appearance-dialog label{position:relative}
.nox-appearance-dialog select.nox-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0;pointer-events:none;clip-path:inset(50%)}
html[data-nox-appearance] .nox-appearance-dialog .nox-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;margin-top:6px;padding:10px 12px;border:1px solid var(--nox-line)!important;border-radius:12px;background:var(--nox-raised)!important;color:var(--nox-text)!important;font:500 15px/1.3 system-ui!important;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
html[data-nox-appearance] .nox-appearance-dialog .nox-picker:hover{border-color:var(--nox-action)!important}
html[data-nox-appearance] .nox-appearance-dialog .nox-picker:focus-visible,html[data-nox-appearance] .nox-appearance-dialog .nox-picker[aria-expanded=true]{outline:0;border-color:var(--nox-action)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--nox-action) 22%,transparent)!important}
.nox-picker svg{flex-shrink:0;color:var(--nox-muted)!important;transition:transform .15s}
.nox-picker[aria-expanded=true] svg{transform:rotate(180deg)}
.nox-picker-value{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nox-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--nox-surface),0 0 0 3px var(--nox-line)}
.nox-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;max-height:min(22rem,60vh);overflow:hidden;border:1px solid var(--nox-line);border-radius:16px;background:var(--nox-surface);box-shadow:0 22px 50px #0f1a2a33,0 4px 14px #0f1a2a1a;animation:nox-menu-in .12s ease-out}
.nox-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--nox-line)}
.nox-menu-head strong{display:block;font:650 14px/1.3 system-ui;color:var(--nox-text)}
.nox-menu-head small{display:block;font:500 11px/1.3 system-ui;color:var(--nox-muted)}
html[data-nox-appearance] .nox-appearance-dialog .nox-menu-close{width:34px;height:34px;display:grid;place-items:center;border:0!important;border-radius:10px;background:transparent!important;color:var(--nox-muted)!important;cursor:pointer}
html[data-nox-appearance] .nox-appearance-dialog .nox-menu-close:hover{background:var(--nox-raised)!important;color:var(--nox-text)!important}
.nox-menu-list{overflow-y:auto;overscroll-behavior:contain;padding:6px}
html[data-nox-appearance] .nox-appearance-dialog .nox-option{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:8px 12px;border:0!important;border-radius:11px;background:transparent!important;box-shadow:none!important;color:var(--nox-text)!important;font:500 15px/1.3 system-ui!important;text-align:left;cursor:pointer}
html[data-nox-appearance] .nox-appearance-dialog .nox-option span{flex:1}
html[data-nox-appearance] .nox-appearance-dialog .nox-option:hover,html[data-nox-appearance] .nox-appearance-dialog .nox-option:focus-visible{background:var(--nox-raised)!important;outline:0}
html[data-nox-appearance] .nox-appearance-dialog .nox-option[aria-selected=true]{background:color-mix(in srgb,var(--nox-action) 14%,transparent)!important;color:var(--nox-action)!important;font-weight:650!important}
@keyframes nox-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nox-menu{animation:none}.nox-picker svg{transition:none}}