/* Category Model: holographic HUD styling. Self-contained cyan/red/green/amber palette — independent of the main site's brand tokens. */
:root {
  --bg: #040918; --hud: #5fd4ff; --hud-soft: rgba(95, 212, 255, .55); --hud-dim: rgba(95, 212, 255, .22); --hud-line: rgba(95, 212, 255, .35);
  --hud-red: #ff4d55; --hud-amber: #f5c04a; --hud-green: #3ecf6b; --hud-white: #eaf6ff; --hud-grey: #9fb8cc;
  --hud-font: "Rajdhani", "Canva Sans", Aptos, "Segoe UI", Arial, sans-serif;
}
html, body.catpage { background: var(--bg); color: var(--hud-white); }
body.catpage { font-family: var(--font); overflow-x: hidden; }
body.catpage .site-header { background: rgba(4, 9, 24, .85); border-bottom: 1px solid var(--hud-line); backdrop-filter: blur(8px); }
body.catpage .brand { color: var(--hud-white); }
body.catpage .brand-name small { color: var(--hud-grey); }
body.catpage .nav a { color: var(--hud); }
body.catpage .nav a:hover, body.catpage .nav a[aria-current="page"] { background: rgba(95, 212, 255, .1); }
body.catpage .icon-btn, body.catpage .fab:not(.fab-feedback) { background: rgba(4, 9, 24, .7); border-color: var(--hud-line); color: var(--hud); }
body.catpage .icon-btn:hover, body.catpage .fab:not(.fab-feedback):hover { background: rgba(95, 212, 255, .1); border-color: var(--hud); box-shadow: 0 0 14px var(--hud-dim); }
body.catpage .search-btn kbd { color: var(--hud-grey); border-color: var(--hud-line); }
@media (max-width: 1180px) { .js body.catpage .site-header .nav { background: rgba(4, 9, 24, .97); border-bottom-color: var(--hud-line); } }

/* stage */
.cat-stage { position: relative; isolation: isolate; height: calc(100vh - 68px); height: calc(100svh - 68px); min-height: 560px; overflow: hidden; background: radial-gradient(ellipse at 50% 80%, #0a1f45 0%, #040918 60%); }
@media (max-width: 760px) { .cat-stage { min-height: 520px; } }
/* without JS the mobile nav wraps onto a second row, so leave room for it */
@media (max-width: 1180px) { html:not(.js) .cat-stage { height: calc(100vh - 110px); } }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
#stage canvas:active { cursor: grabbing; }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(4, 9, 24, .85) 100%); }
.corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--hud-soft); pointer-events: none; }
.corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* labels */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; font-family: var(--hud-font); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hud-white); background: rgba(4, 9, 24, .72); border: 1px solid var(--hud-line); border-radius: 4px; padding: 3px 8px; font-size: 12px; line-height: 1.2; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: opacity .25s, border-color .2s, background .2s, box-shadow .2s; backdrop-filter: blur(3px); }
.lbl:hover { border-color: var(--hud); box-shadow: 0 0 12px var(--hud-dim); }
.lbl.dim { opacity: .18 !important; }
.lbl.rel { border-color: var(--hud); box-shadow: 0 0 10px var(--hud-dim); }
.lbl.sel { border-color: var(--hud-red); background: rgba(200, 32, 40, .35); box-shadow: 0 0 18px rgba(255, 77, 85, .55); }
.lbl-swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lbl-overall { font-size: 15px; padding: 7px 14px; border: 1.5px solid var(--hud-red); background: rgba(200, 32, 40, .22); box-shadow: 0 0 22px rgba(255, 77, 85, .35); }
.lbl-count { font-size: 10px; opacity: .75; }
.lbl-moon { font-size: 9.5px; font-weight: 700; padding: 2px 6px; gap: 4px; border-color: rgba(95, 212, 255, .18); background: rgba(4, 9, 24, .58); }
.lbl-moon .lbl-swatch { width: 6px; height: 6px; }
.lbl-moon:hover { background: rgba(95, 212, 255, .16); }
@media (max-width: 760px) { .lbl { font-size: 10px; padding: 2px 6px; } .lbl-overall { font-size: 12px; } }
#reticle { position: absolute; left: 0; top: 0; width: 96px; height: 96px; pointer-events: none; border-radius: 50%; border: 1.5px dashed rgba(255, 77, 85, .85); z-index: 1100; }
#reticle::before, #reticle::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(95, 212, 255, .45); }
#reticle::after { inset: -10px; border-style: dotted; }
#reticle::before { animation: spinb 6s linear infinite; }
@keyframes spinb { to { transform: rotate(360deg); } }
#reticle[hidden] { display: none; }
.hud-tip { position: absolute; z-index: 1300; pointer-events: none; background: rgba(4, 12, 30, .92); border: 1px solid var(--hud-line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; opacity: 0; transition: opacity .12s; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.hud-tip.show { opacity: 1; }
.hud-tip .tt-date { font-family: var(--hud-font); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; color: var(--hud); margin-bottom: 3px; }
.hud-tip .tt-row { display: flex; align-items: center; gap: 7px; }
.hud-tip .tt-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hud-tip .tt-row b { font-variant-numeric: tabular-nums; color: var(--hud-white); font-size: 14px; }

/* top-left title HUD */
.hud-title { position: absolute; z-index: 1200; top: 26px; left: 30px; pointer-events: none; font-family: var(--hud-font); }
.hud-title .k { font-size: 11px; letter-spacing: .3em; color: var(--hud); text-transform: uppercase; }
.hud-title h1 { margin: 2px 0 6px; font-size: clamp(22px, 3vw, 34px); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; line-height: 1; text-shadow: 0 0 18px rgba(95, 212, 255, .45); }
.hud-title p { margin: 0; color: var(--hud-grey); font-family: var(--font); font-size: 13.5px; max-width: 44ch; }
body.has-selection .hud-title p { display: none; }
@media (max-width: 760px) { .hud-title { top: 14px; left: 16px; } .hud-title p { display: none; } }

/* controls */
.hud-controls { position: absolute; z-index: 1200; left: 30px; bottom: 58px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .hud-controls { left: 16px; bottom: 44px; } }
.btn-hud { font-family: var(--hud-font); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--hud); background: rgba(4, 9, 24, .7); border: 1px solid var(--hud-line); border-radius: 4px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, box-shadow .15s, border-color .15s; }
.btn-hud:hover { border-color: var(--hud); box-shadow: 0 0 14px var(--hud-dim); background: rgba(95, 212, 255, .1); }
.btn-hud.accent { color: #fff; background: rgba(200, 32, 40, .8); border-color: rgba(255, 77, 85, .8); }
.btn-hud.accent:hover { background: var(--hud-red); box-shadow: 0 0 16px rgba(255, 77, 85, .5); }
.hint { position: absolute; z-index: 1200; right: 30px; bottom: 58px; font-family: var(--hud-font); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hud-grey); pointer-events: none; }
@media (max-width: 760px) { .hint { display: none; } }
body.has-selection .hint { display: none; }

/* ticker */
.ticker { position: absolute; z-index: 1200; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; gap: 12px; padding: 0 30px; font-family: var(--hud-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--hud-grey); border-top: 1px solid var(--hud-line); background: rgba(4, 9, 24, .8); white-space: nowrap; overflow: hidden; }
.ticker b { color: var(--hud-red); }
.ticker #ticker { color: var(--hud-white); transition: opacity .35s; overflow: hidden; text-overflow: ellipsis; }
.ticker #ticker.fade { opacity: 0; }
@media (max-width: 760px) { .ticker { padding: 0 16px; font-size: 11px; } }

/* detail panel */
#panel { position: absolute; z-index: 1500; top: 24px; right: 24px; width: min(400px, calc(100% - 48px)); max-height: calc(100% - 118px); overflow-y: auto; background: rgba(4, 12, 30, .88); border: 1px solid var(--hud-line); border-radius: 8px; padding: 20px 22px 22px; box-shadow: 0 0 0 1px rgba(95,212,255,.08), 0 20px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(95,212,255,.05); backdrop-filter: blur(10px); animation: panelIn .35s ease; }
#panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--hud), transparent); }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { #panel { top: auto; bottom: 30px; left: 0; right: 0; width: 100%; max-height: 58%; border-radius: 12px 12px 0 0; animation: sheetIn .35s ease; } @keyframes sheetIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } } }
.panel-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hud-line); background: transparent; color: var(--hud); cursor: pointer; font-size: 14px; }
.panel-close:hover { background: rgba(95, 212, 255, .12); }
.p-kicker { font-family: var(--hud-font); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--hud); margin-right: 32px; }
.p-title { font-family: var(--hud-font); font-size: 26px; line-height: 1.05; margin: 6px 0 12px; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 0 16px rgba(95, 212, 255, .35); }
.p-plain { font-size: 15px; line-height: 1.55; margin: 0 0 14px; color: var(--hud-white); min-height: 2.2em; }
.p-h { font-family: var(--hud-font); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hud); margin: 16px 0 6px; padding-top: 10px; border-top: 1px dashed var(--hud-line); }
.p-stat-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.p-stat { flex: 1; min-width: 80px; text-align: center; border: 1px solid var(--hud-line); border-radius: 8px; padding: 10px 6px; }
.p-stat .n { font-family: var(--hud-font); font-size: 24px; font-weight: 700; line-height: 1; }
.p-stat .l { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--hud-grey); margin-top: 4px; }
.p-stat.fail .n { color: var(--hud-red); } .p-stat.warn .n { color: var(--hud-amber); } .p-stat.pass .n { color: var(--hud-green); }
.p-chips, .p-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip { font-family: var(--hud-font); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; color: var(--hud-white); background: rgba(95, 212, 255, .1); border: 1px solid var(--hud-line); border-radius: 4px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--hud); box-shadow: 0 0 10px var(--hud-dim); }
.p-live { display: grid; gap: 6px; }
.live { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; text-decoration: none; color: var(--hud-grey); font-size: 13px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--hud-line); background: rgba(4, 9, 24, .5); }
.live:hover { border-color: var(--hud); }
.live b { font-family: var(--hud-font); font-size: 20px; color: var(--hud-white); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.live.fail b { color: var(--hud-red); }
.live.pass b { color: var(--hud-green); }
.live.warn b { color: var(--hud-amber); }
.live i { font-style: normal; color: var(--hud-white); font-weight: 700; }
.p-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* tour bar */
.tour { position: absolute; z-index: 1500; left: 50%; bottom: 100px; transform: translateX(-50%); width: min(720px, calc(100% - 48px)); background: rgba(4, 12, 30, .9); border: 1px solid var(--hud-line); border-radius: 8px; padding: 14px 18px; display: none; gap: 12px; align-items: center; backdrop-filter: blur(10px); box-shadow: 0 16px 48px rgba(0,0,0,.6); }
body.touring .tour { display: flex; }
body.touring .hud-controls, body.touring .hint { display: none; }
body.touring #panel { display: none; }
.tour-say { flex: 1; font-size: 16px; line-height: 1.45; min-height: 2.9em; }
.tour-say::before { content: "▮ "; color: var(--hud-red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tour-ctl { display: flex; gap: 6px; align-items: center; }
.tour-ctl .btn-hud { padding: 7px 10px; }
#tour-count { font-family: var(--hud-font); font-size: 12px; color: var(--hud-grey); letter-spacing: .1em; min-width: 46px; text-align: center; }
@media (max-width: 760px) { .tour { flex-direction: column; align-items: stretch; bottom: 40px; } .tour-say { font-size: 14px; } }

/* boot */
#boot { position: absolute; inset: 0; z-index: 2000; background: var(--bg); display: grid; place-items: center; transition: opacity .7s; cursor: pointer; }
#boot.out { opacity: 0; pointer-events: none; }
#boot[hidden] { display: none; }
.boot-box { font-family: var(--hud-font); text-transform: uppercase; letter-spacing: .2em; color: var(--hud); width: min(520px, 90%); }
.boot-ring { width: 120px; height: 120px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--hud-dim); border-top-color: var(--hud); animation: spinb 1.4s linear infinite; display: grid; place-items: center; }
.boot-ring svg { width: 46px; height: 46px; }
.boot-line { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; font-size: 13px; margin: 4px 0; display: flex; justify-content: space-between; gap: 14px; }
.boot-line.on { opacity: 1; transform: none; }
.boot-line span:last-child { color: var(--hud-green); }
.boot-skip { margin-top: 18px; font-size: 11px; color: var(--hud-grey); text-align: center; }
@media (prefers-reduced-motion: reduce) { .boot-ring, #reticle::before, .tour-say::before { animation: none; } }

/* below the stage */
.cat-about { background: #060e26; color: var(--hud-white); border-top: 1px solid var(--hud-line); }
.cat-about .wrap { padding-block: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
@media (max-width: 860px) { .cat-about .wrap { grid-template-columns: 1fr; } }
.cat-about h2 { font-family: var(--hud-font); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; font-size: 24px; }
.cat-about p { color: var(--hud-grey); margin: 0 0 12px; font-size: 15px; }
.cat-about a { color: var(--hud); }
.legend-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; color: var(--hud-grey); }
.legend-row span { display: inline-flex; align-items: center; gap: 7px; }
.legend-row i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#text-version { background: #060e26; color: var(--hud-white); border-top: 1px solid var(--hud-line); }
#text-version .wrap { padding-block: 36px 48px; }
#text-version h2 { font-family: var(--hud-font); text-transform: uppercase; letter-spacing: .06em; }
#text-version h3 { font-family: var(--hud-font); text-transform: uppercase; letter-spacing: .04em; color: var(--hud); margin: 26px 0 6px; }
#text-version .tv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.noscript-box { background: #FFF4D9; color: #5C3C00; padding: 12px 16px; border-radius: 10px; margin: 16px 20px; }
body.catpage .site-footer { margin-top: 0; }