/* Append after CSS2. Enhancement-owned tokens; legacy selectors stay intact. */
:root {
  --vui-bg: #10151c; --vui-surface: #1a222c; --vui-raised: #24303c;
  --vui-text: #edf2f7; --vui-muted: #bac6d2; --vui-border: #647789;
  --vui-accent: #8bd8ef; --vui-visited: #d9b8f4; --vui-action: #08643f;
  --vui-focus: #ffca6a; --vui-header-height: 220px;
}
:root[data-vui-theme="light"] {
  --vui-bg: #f4f6f8; --vui-surface: #ffffff; --vui-raised: #e7edf2;
  --vui-text: #182430; --vui-muted: #45596b; --vui-border: #7a8996;
  --vui-accent: #005c79; --vui-visited: #71369d; --vui-action: #08643f;
  --vui-focus: #805400;
}
html { scroll-padding-block: calc(var(--vui-header-height) + 16px) 110px; }
body { background: var(--vui-bg); color: var(--vui-text); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
header, #dock { background: var(--vui-surface); border-color: var(--vui-border); }
header { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
a { color: var(--vui-accent); }
a:visited { color: var(--vui-visited); }
h1, h2 { text-wrap: balance; }
.wrap { min-width: 0; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); align-items: stretch; }
.card, .hcard, .stats, .res, #palbox, .vui-panel { background: var(--vui-surface); color: var(--vui-text); border-color: var(--vui-border); }
.card { min-width: 0; box-shadow: 0 2px 7px #0002; }
.card:focus-within { outline: 2px solid var(--vui-focus); outline-offset: 3px; }
.card .cnt { margin-inline: 10px; }
.card .t, .hcard .t { overflow-wrap: anywhere; }
.cnt, .hint, .lbl, .hcard small, .res small, .pit small, .heroX-s, footer, footer a, .vui-note { color: var(--vui-muted); }
header > p[style] { color: var(--vui-muted) !important; }
.btn, .btn:visited { background: var(--vui-action); color: #fff; }
.btn2, .sharebtn, #clr, .chip, .pill, #sort, .vui-button { background: var(--vui-raised); color: var(--vui-text); border: 1px solid var(--vui-border); }
#q, #palq, .vui-setting select { background: var(--vui-bg); color: var(--vui-text); border: 1px solid var(--vui-border); }
::placeholder { color: var(--vui-muted); opacity: 1; }
#q:focus-visible, #palq:focus-visible, :focus-visible { outline: 3px solid var(--vui-focus); outline-offset: 3px; }
#q:focus-visible { box-shadow: none; }
button, select { font: inherit; }
button, a, input, select, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, select, .vui-button, #sort, #clr { min-height: 44px; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.vui-button { border-radius: 10px; padding: 9px 14px; }
.vui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.heroX { background: var(--vui-surface); border-color: var(--vui-border); }
.heroX-t { color: var(--vui-text); background: none; }
.heroX .blob { display: none; }
.stat .bar { background: var(--vui-raised); }
.stat .bar i { background: var(--vui-accent); }
.pill { border-radius: 9px; }
.rail { scroll-snap-type: x proximity; scroll-padding-inline: 6px; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--vui-border) var(--vui-bg); }
.hcard { min-width: 0; }
#dock { padding: 6px; gap: 2px; width: max-content; max-width: calc(100% - 24px); border-radius: 14px; box-shadow: 0 4px 20px #0003; }
#dock a, #dock button { width: auto; flex: 0 0 auto; min-width: 44px; padding-inline: 8px; font-size: .85rem; color: var(--vui-text); }
#dock a:hover, #dock button:hover { transform: none; background: var(--vui-raised); }
#topbtn { left: max(12px, env(safe-area-inset-left)); bottom: calc(88px + env(safe-area-inset-bottom)); background: var(--vui-surface); color: var(--vui-accent); border-color: var(--vui-border); }
#toast { bottom: calc(148px + env(safe-area-inset-bottom)); max-width: min(90vw, 560px); width: max-content; overflow-wrap: anywhere; text-align: center; background: var(--vui-surface); color: var(--vui-text); border-color: var(--vui-accent); transition: opacity .2s, transform .2s; }
#prog { background: var(--vui-accent); }
.vui-overlay, #lb.vui-overlay, #pal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #000b; overscroll-behavior: contain; cursor: default; }
.vui-overlay.show, #lb.vui-overlay.show, #pal.show { display: flex; }
.vui-panel, #palbox { border: 1px solid var(--vui-border); border-radius: 16px; padding: 20px; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 16px 60px #0005; }
.vui-panel h2 { margin-block: 0 18px; font-size: 1.25rem; }
.vui-panel > .vui-button { margin-block: 6px; margin-inline-end: 6px; }
.vui-setting { display: grid; grid-template-columns: 1fr minmax(0, 1.2fr); align-items: center; gap: 12px; margin-block: 14px; }
.vui-setting select { width: 100%; min-width: 0; border-radius: 8px; padding: 8px; }
.vui-note { font-size: .85rem; line-height: 1.9; }
.vui-pal-close { margin-top: 10px; }
#pallist { max-height: 45vh; max-height: 45dvh; overscroll-behavior: contain; }
.pit { color: var(--vui-text); border-color: var(--vui-border); }
.pit.sel, .pit:hover { background: var(--vui-raised); }
.vui-lightbox { width: min(1100px, 100%); text-align: center; }
#lb .vui-lightbox img { display: block; width: 100%; max-width: 100%; max-height: 65vh; max-height: 65dvh; object-fit: contain; margin-inline: auto; background: #0a0a0a; }
.vui-lb-caption { line-height: 1.8; overflow-wrap: anywhere; }
.vui-lb-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.vui-lb-tools a { padding: 10px; min-height: 44px; }
.full img[role="button"] { cursor: zoom-in; }
.car .cprev, .car .cnext { display: block; z-index: 2; }
.car .dots { position: static; display: flex; flex-wrap: wrap; justify-content: center; padding: 4px; background: var(--vui-surface); }
.car button.dot { width: 44px; height: 44px; min-height: 44px; margin: 0; border: 0; border-radius: 8px; background: radial-gradient(circle, var(--vui-border) 4px, transparent 5px); }
.car button.dot.on { background: radial-gradient(circle, var(--vui-accent) 6px, transparent 7px); }
.vui-carousel-status { margin: 0; padding: 4px 8px 8px; text-align: center; font-size: .8rem; background: var(--vui-surface); color: var(--vui-muted); }
.car .slide { min-width: 100%; min-inline-size: 100%; }
.vui-media-fallback { display: flex; min-height: 120px; aspect-ratio: 4/3; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: var(--vui-raised); color: var(--vui-muted); font-size: .9rem; line-height: 1.8; text-align: center; }
.vui-media-error, .vui-network { border: 1px solid var(--vui-border); border-inline-start: 4px solid var(--vui-focus); background: var(--vui-surface); padding: 12px 16px; border-radius: 10px; }
:root[data-vui-titles="full"] .card .t, :root[data-vui-titles="full"] .hcard .t { display: block; -webkit-line-clamp: unset; overflow: visible; }
:root[data-vui-density="compact"] .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr)); gap: 10px; }
:root[data-vui-motion="reduce"] *, :root[data-vui-motion="reduce"] *::before, :root[data-vui-motion="reduce"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
:root[data-vui-motion="reduce"] .card { transform: none !important; will-change: auto; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } :root[data-vui-density="compact"] .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
@media (max-width: 600px), (max-height: 500px) { header { position: relative; } html { scroll-padding-top: 16px; } .heroX { padding: 24px 16px; } .heroX-t { font-size: clamp(1.5rem, 6vw, 2rem); } }
@media (max-width: 360px) { .vui-panel { padding: 14px; } .vui-setting { grid-template-columns: 1fr; gap: 6px; } #dock { gap: 0; padding: 4px; } #dock a, #dock button { padding-inline: 5px; font-size: .78rem; } }
@media (hover: none) { .card:hover, .card:active { transform: none; } .card.tilt { will-change: auto; } }
@media (prefers-reduced-motion: reduce) { .card { transform: none !important; will-change: auto; } }
@media (prefers-contrast: more) { :root { --vui-border: currentColor; } .card, .hcard, .vui-panel { border-width: 2px; } }
@media (forced-colors: active) { .heroX-t { color: CanvasText; } .car button.dot { border: 2px solid ButtonText; background: Canvas; } .car button.dot.on { background: Highlight; } .card, .hcard, #dock { box-shadow: none; } :focus-visible { outline-color: Highlight; } }
@media print { body { background: #fff; color: #000; padding: 0; } header { position: static; background: #fff; color: #000; } #dock, #topbtn, #prog, #toast, #pal, #lb, .vui-overlay, #vui-settings-button, .sharebtn, .vui-network, .skip, header form, #clr, #sort, .hint { display: none !important; } .grid { display: block; } .card, .hcard, .stats { background: #fff; color: #000; box-shadow: none; break-inside: avoid; } .rail { display: block; overflow: visible; } .hcard { margin-block: 12px; } .card .t, .hcard .t { display: block; overflow: visible; } a, a:visited, .cnt, footer, footer a { color: #000; } .car { overflow: visible; background: transparent; } .car .track { display: block; transform: none !important; } .car .slide { visibility: visible; } .car .dots, .car .cprev, .car .cnext { display: none; } }