/* neon cockpit theme: B612 / B612 Mono over the retro-gaming palette
   (CRT scanlines, starfield, neon glow) */
@font-face { font-family:'B612'; src:url('/assets/fonts/b612-regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'B612'; src:url('/assets/fonts/b612-bold.woff2') format('woff2'); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:'B612'; src:url('/assets/fonts/b612-italic.woff2') format('woff2'); font-style:italic; font-weight:400; font-display:swap; }
@font-face { font-family:'B612 Mono'; src:url('/assets/fonts/b612mono-regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'B612 Mono'; src:url('/assets/fonts/b612mono-bold.woff2') format('woff2'); font-style:normal; font-weight:700; font-display:swap; }
:root {
	color-scheme: dark;
	--bg:#0a0a1a; --bg-secondary:#10102a;
	--panel:#12122e; --surface-elevated:#1a1a3e; --surface-hover:#22224e;
	/* --primary tints the whole interface: VFD-tube cyan by default,
	   overridable per user via the theme <style> injected below */
	--primary:#38dcf0; --secondary:#ff00ff; --accent:#ffff00;
	--glow-strong:color-mix(in srgb, var(--primary) 55%, transparent);
	--glow:color-mix(in srgb, var(--primary) 38%, transparent);
	--glow-soft:color-mix(in srgb, var(--primary) 22%, transparent);
	--glow-faint:color-mix(in srgb, var(--primary) 14%, transparent);
	--glow-dim:color-mix(in srgb, var(--primary) 7%, transparent);
	--ink:#e6e8f5; --muted:#a0a0cc; --faint:#6868a0;
	--line:#2a2a5a; --line-hover:#3a3a7a;
	--success:#00ff88; --success-bg:rgba(0,255,136,.08); --success-border:rgba(0,255,136,.35);
	--bad:#ff3366; --error-bg:rgba(255,51,102,.08); --error-border:rgba(255,51,102,.35);
	--info:#00ccff; --info-bg:rgba(0,204,255,.08); --info-border:rgba(0,204,255,.35);
	--font-sans:'B612', system-ui, sans-serif;
	--font-mono:'B612 Mono', ui-monospace, monospace;
	--shadow-md:0 4px 0 rgba(0,0,0,.55), 0 0 16px var(--glow-dim);
	--shadow-lg:0 6px 0 rgba(0,0,0,.55), 0 0 28px var(--glow-faint);
}
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:15px; line-height:1.7; }
/* CRT scanline overlay, subtle enough for body text */
body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.09) 3px, rgba(0,0,0,.09) 6px); pointer-events:none; z-index:9000; }
/* vignette */
body::after { content:''; position:fixed; inset:0; background:radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.38) 100%); pointer-events:none; z-index:8999; }
::selection { background:var(--primary); color:var(--bg); }
.retro-stars { position:fixed; inset:0; z-index:0; pointer-events:none; background:
	radial-gradient(1px 1px at 10% 15%, var(--primary), transparent),
	radial-gradient(1px 1px at 30% 45%, var(--accent), transparent),
	radial-gradient(1px 1px at 55% 20%, var(--secondary), transparent),
	radial-gradient(1px 1px at 70% 65%, var(--info), transparent),
	radial-gradient(1px 1px at 85% 30%, var(--primary), transparent),
	radial-gradient(1px 1px at 15% 75%, var(--accent), transparent),
	radial-gradient(1px 1px at 45% 85%, var(--secondary), transparent),
	radial-gradient(1px 1px at 90% 80%, var(--primary), transparent),
	radial-gradient(1px 1px at 25% 55%, var(--info), transparent),
	radial-gradient(1px 1px at 60% 50%, var(--accent), transparent),
	radial-gradient(1px 1px at 5% 40%, var(--bad), transparent),
	radial-gradient(1px 1px at 75% 10%, var(--accent), transparent),
	radial-gradient(1px 1px at 40% 30%, var(--primary), transparent),
	radial-gradient(1px 1px at 95% 55%, var(--secondary), transparent),
	radial-gradient(1px 1px at 50% 70%, var(--primary), transparent),
	radial-gradient(1px 1px at 20% 90%, var(--info), transparent);
	animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { 0% { opacity:.35; } 100% { opacity:.7; } }
a { color:var(--primary); text-decoration:none; transition:color .12s ease; }
a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-shadow:0 0 8px rgba(255,255,0,.45); }
.site-shell { min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; }
.topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.4rem clamp(.75rem, 3vw, 2rem); background:rgba(16,16,42,.92); backdrop-filter:blur(8px); border-bottom:2px solid var(--primary); box-shadow:0 2px 0 rgba(0,0,0,.5), 0 6px 24px var(--glow-faint); }
.brand { display:inline-flex; align-items:center; color:var(--primary); line-height:0; }
.brand:hover { color:var(--primary); text-decoration:none; }
.brand-logo { display:block; width:320px; height:64px; max-width:min(320px, 44vw); object-fit:contain; filter:drop-shadow(0 0 10px var(--glow-strong)); }
.nav, .nav-primary { display:flex; gap:.25rem; align-items:center; font-family:var(--font-mono); }
.nav a { color:var(--muted); padding:.5rem .7rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; border:1px solid transparent; border-radius:4px; transition:all .12s ease; }
.nav a:hover, .nav a.active { color:var(--accent); border-color:var(--line-hover); background:var(--surface-hover); text-decoration:none; text-shadow:0 0 8px rgba(255,255,0,.4); }
.nav a.active { border-color:rgba(255,255,0,.35); }
.nav form { margin:0; } .nav-button { background:none; border:1px solid transparent; border-radius:4px; color:var(--muted); padding:.5rem .7rem; font-family:var(--font-mono); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; line-height:1.7; cursor:pointer; box-shadow:none; transition:all .12s ease; } .nav-button:hover { color:var(--accent); border-color:var(--line-hover); background:var(--surface-hover); text-shadow:0 0 8px rgba(255,255,0,.4); transform:none; box-shadow:none; }
.nav-more { position:relative; }
.nav-more summary { display:flex; align-items:center; gap:.45rem; list-style:none; cursor:pointer; color:var(--muted); padding:.5rem .7rem; border:1px solid transparent; border-radius:4px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.nav-more summary::-webkit-details-marker { display:none; }
.nav-more summary:hover, .nav-more summary.active, .nav-more[open] summary { color:var(--accent); border-color:var(--line-hover); background:var(--surface-hover); text-shadow:0 0 8px rgba(255,255,0,.4); }
.nav-menu-icon { display:grid; gap:3px; width:15px; }
.nav-menu-icon i { display:block; height:2px; background:currentColor; }
.nav-menu-panel { position:absolute; z-index:120; right:0; top:calc(100% + .55rem); display:grid; width:min(18rem, calc(100vw - 1.5rem)); max-height:calc(100vh - 6rem); overflow:auto; padding:.55rem; border:1px solid var(--line-hover); border-top:2px solid var(--primary); border-radius:6px; background:rgba(16,16,42,.98); box-shadow:var(--shadow-lg); }
.nav-menu-panel a, .nav-menu-panel .nav-button { width:100%; justify-content:flex-start; }
.nav-menu-label { padding:.65rem .7rem .25rem; color:var(--faint); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.content { width:min(1040px, calc(100vw - 2rem)); margin:0 auto; padding:2rem 0 3.5rem; flex:1; }
h1, h2, h3, h4, h5, h6 { font-family:var(--font-mono); font-weight:700; text-transform:uppercase; line-height:1.35; }
h1 { font-size:clamp(1.4rem, 3.2vw, 1.9rem); letter-spacing:.05em; color:var(--primary); text-shadow:0 0 14px var(--glow); padding:0 0 .6rem; border-bottom:3px double var(--primary); margin:0 0 1.25rem; }
h1::before { content:'\25BA'; margin-right:.55rem; color:var(--accent); animation:blink-cursor 1.2s step-end infinite; }
@keyframes blink-cursor { 0%, 100% { opacity:1; } 50% { opacity:0; } }
h2 { font-size:1.05rem; letter-spacing:.06em; color:var(--info); text-shadow:0 0 10px rgba(0,204,255,.35); margin:0 0 .7rem; }
h3, h4, h5, h6 { font-size:.9rem; letter-spacing:.06em; color:var(--secondary); text-shadow:0 0 10px rgba(255,0,255,.3); margin:0 0 .6rem; }
p { color:var(--muted); line-height:1.75; margin:0 0 .8rem; }
.lede { font-size:1.05rem; color:var(--ink); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.1rem; margin-top:1.5rem; }
.card, .panel, .form-card { background:linear-gradient(180deg, var(--surface-elevated), var(--panel) 3.5rem); border:1px solid var(--line); border-radius:8px; padding:1.15rem 1.25rem; box-shadow:var(--shadow-md); position:relative; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card::before, .panel::before, .form-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); filter:drop-shadow(0 0 4px var(--glow-strong)); }
.card:hover, .panel:hover, .form-card:hover { border-color:var(--line-hover); box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.form-card { max-width:720px; margin:0 auto; }
label { display:block; font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; margin:1rem 0 .4rem; }
input, textarea, select { width:100%; border:1px solid var(--line); border-radius:6px; background:#0b0b20; color:var(--ink); padding:.65rem .8rem; font-family:var(--font-mono); font-size:.9rem; line-height:1.6; caret-color:var(--primary); transition:border-color .12s ease, box-shadow .12s ease; }
textarea { min-height:280px; resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--faint); opacity:1; }
input[type="color"] { height:3.2rem; padding:.3rem; cursor:pointer; }
input[type="color"]::-webkit-color-swatch { border:1px solid var(--line); border-radius:4px; }
input[type="color"]::-moz-color-swatch { border:1px solid var(--line); border-radius:4px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 0 14px var(--glow-soft); }
/* base for every button; nav + reaction buttons restyle from here */
button, .button { display:inline-flex; justify-content:center; align-items:center; gap:.4rem; padding:.55rem 1.15rem; border:2px solid var(--primary); background:rgba(0,255,136,.06); color:var(--primary); font-family:var(--font-mono); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; transition:all .12s ease; text-decoration:none; }
/* chamfered sci-fi buttons (SC2-inspired): angular cuts on the top-left
   and bottom-right corners. clip-path clips box-shadows, so the edge is
   its own layer (::after) under an inset fill (::before); the variant
   colors ride on --btn-edge / --btn-fill so hover states compose. */
@property --lb-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
button:not(.nav-button):not(.reaction-button), .button { --btn-edge:linear-gradient(160deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000)); --btn-fill:linear-gradient(180deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--primary) 4%, transparent) 55%, transparent); position:relative; z-index:0; border:0; border-radius:0; background:transparent; padding:.6rem 1.35rem; clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition:color .1s ease, transform .1s ease, filter .1s ease, text-shadow .1s ease; }
button:not(.nav-button):not(.reaction-button)::after, .button::after { content:''; position:absolute; inset:0; z-index:-2; background:var(--btn-edge); transition:filter .1s ease; }
button:not(.nav-button):not(.reaction-button)::before, .button::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--btn-fill), #0c0c22; clip-path:polygon(10px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 10px), calc(100% - 10px) calc(100% - 2px), 2px calc(100% - 2px), 2px 10px); transition:opacity .1s ease, filter .1s ease; }
/* hover: instant energize — brightness flash, a light beam racing around
   the chamfered frame, glowing text, slight lift; pressing collapses the
   fill so the solid edge face flashes through as click feedback */
button:not(.nav-button):not(.reaction-button):hover, .button:hover { color:#f4fff9; text-shadow:0 0 9px currentColor, 0 0 22px rgba(255,255,255,.3); text-decoration:none; transform:translateY(-1px); }
button:not(.nav-button):not(.reaction-button):hover::before, .button:hover::before { filter:brightness(1.7); }
button:not(.nav-button):not(.reaction-button):hover::after, .button:hover::after { background:conic-gradient(from var(--lb-a) at 50% 50%, transparent 0deg 270deg, rgba(255,255,255,.95) 316deg, transparent 356deg), var(--btn-edge); filter:brightness(1.28) saturate(1.15); animation:btn-flash .28s ease-out, btn-beam 1.1s linear infinite; }
button:not(.nav-button):not(.reaction-button):active, .button:active { transform:translateY(1px); color:var(--bg); text-shadow:none; }
button:not(.nav-button):not(.reaction-button):active::before, .button:active::before { opacity:0; }
button:not(.nav-button):not(.reaction-button):focus-visible, .button:focus-visible { filter:brightness(1.4); }
@keyframes btn-beam { to { --lb-a:360deg; } }
@keyframes btn-flash { 0% { filter:brightness(2.2) saturate(1.8); } 100% { filter:brightness(1.28) saturate(1.15); } }
@media (prefers-reduced-motion: reduce) {
	button:not(.nav-button):not(.reaction-button):hover::after, .button:hover::after { animation:none; }
	button:not(.nav-button):not(.reaction-button):hover, .button:hover { transform:none; }
}
.button.secondary, button.secondary { --btn-edge:linear-gradient(160deg, var(--secondary), rgba(204,0,204,.85)); --btn-fill:linear-gradient(180deg, rgba(255,0,255,.16), rgba(255,0,255,.03) 55%, rgba(255,0,255,0)); color:var(--secondary); }
.button.danger, button.danger { --btn-edge:linear-gradient(160deg, var(--bad), rgba(204,26,71,.85)); --btn-fill:linear-gradient(180deg, rgba(255,51,102,.16), rgba(255,51,102,.03) 55%, rgba(255,51,102,0)); color:var(--bad); }
.actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.2rem; align-items:center; }
.entry-form { display:grid; gap:1.25rem; }
.entry-form select, .entry-form .actions > button, .entry-form .actions > .button { min-height:44px; }
.entry-form-section { min-width:0; margin:0; padding:1rem; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.018); }
.entry-form-section legend { padding:0 .45rem; color:var(--accent); font-family:var(--font-mono); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.form-help { margin:0 0 .9rem; color:var(--faint); font-size:.84rem; }
.entry-form-summary { min-height:110px; }
.entry-form-advanced { border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.018); }
.entry-form-advanced summary { display:flex; min-height:44px; align-items:center; padding:.7rem 1rem; cursor:pointer; color:var(--muted); font-family:var(--font-mono); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.entry-form-advanced[open] summary { color:var(--accent); border-bottom:1px solid var(--line); }
.entry-form-advanced-fields { padding:0 1rem 1rem; }
.tabs { display:flex; gap:.15rem; margin:0 0 1.4rem; overflow-x:auto; border-bottom:1px solid var(--line); font-family:var(--font-mono); }
.tab { flex:0 0 auto; padding:.6rem .85rem; border-bottom:3px solid transparent; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.tab:hover, .tab.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--glow-dim); text-decoration:none; text-shadow:0 0 8px rgba(255,255,0,.35); }
.notice { font-family:var(--font-mono); font-size:.82rem; padding:.7rem .9rem; border:1px solid var(--info-border); border-left-width:4px; border-radius:6px; margin:0 0 1rem; background:var(--info-bg); color:var(--info); }
.notice-error { border-color:var(--error-border); background:var(--error-bg); color:var(--bad); }
.notice-success { border-color:var(--success-border); background:var(--success-bg); color:var(--success); }
.badge { display:inline-block; font-family:var(--font-mono); font-weight:700; border:1px solid var(--accent); border-radius:4px; padding:.12rem .5rem; color:var(--accent); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; box-shadow:0 0 8px rgba(255,255,0,.15); }
.notification-badge { display:inline-flex; min-width:1.25rem; height:1.25rem; align-items:center; justify-content:center; margin-left:.35rem; padding:0 .35rem; border-radius:999px; background:var(--bad); color:white; font-size:.68rem; line-height:1; }
.notification-badge.is-empty { display:none; }
.notification-unread { border-color:var(--accent); }
.muted, .meta { color:var(--faint); } .meta { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
.blog-list { display:grid; gap:1.1rem; margin-top:1.25rem; } .blog-card { display:grid; gap:.6rem; } .blog-card h2, .blog-post h1 { margin-bottom:.35rem; }
.blog-post, .comments-panel { z-index:1; overflow:visible; }
.blog-post { z-index:2; }
.post-summary-row { display:grid; grid-template-columns:minmax(0, 1fr) max-content; gap:1rem; align-items:start; }
.post-summary-row p { margin:0; }
.post-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem .55rem; max-width:18rem; }
.tag-link { font-family:var(--font-mono); color:var(--faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.tag-link:hover { color:var(--muted); text-shadow:none; }
.blog-cover { width:100%; max-height:360px; object-fit:cover; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.blog-toolbar { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:.75rem; align-items:end; margin-top:1rem; } @media (max-width:720px) { .blog-toolbar { grid-template-columns:1fr; } }
.markdown { margin-top:1.5rem; } .markdown p, .markdown li { color:var(--ink); line-height:1.8; } .markdown img { max-width:100%; border:1px solid var(--line); border-radius:8px; }
.markdown pre { overflow:auto; padding:.9rem 1rem; background:#0b0b20; border:1px solid var(--line); border-radius:8px; color:var(--primary); font-family:var(--font-mono); font-size:.85rem; line-height:1.6; }
.markdown code { background:#0b0b20; border:1px solid var(--line); border-radius:4px; padding:.1rem .35rem; color:var(--primary); font-family:var(--font-mono); font-size:.85em; } .markdown pre code { border:0; padding:0; }
.markdown blockquote { margin:0 0 .8rem; padding:.55rem .9rem; border-left:3px solid var(--secondary); border-radius:0 6px 6px 0; background:var(--bg-secondary); }
.comments-panel { margin-top:1.25rem; } .comments-list { display:grid; gap:.85rem; margin-top:1rem; }
.comment { border:1px solid var(--line); border-left:4px solid var(--secondary); border-radius:8px; background:rgba(18,18,46,.72); padding:.9rem; }
.comment-depth-1 { margin-left:1.2rem; } .comment-depth-2 { margin-left:2.4rem; } .comment-depth-3 { margin-left:3.6rem; } .comment-depth-4 { margin-left:4.8rem; }
.comment-body { margin-top:.65rem; } .comment-form textarea { min-height:8rem; }
.reply-box { margin-top:.65rem; } .reply-box summary { cursor:pointer; color:var(--accent); font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; }
.reaction-bar { position:relative; z-index:30; overflow:visible; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin:.8rem 0; }
.reaction-bar form { margin:0; } .reaction-button { padding:.25rem .5rem; min-height:0; border-width:1px; border-color:var(--line); color:var(--muted); background:rgba(255,255,255,.03); box-shadow:none; font-size:.85rem; line-height:1.2; letter-spacing:0; text-transform:none; }
.reaction-button:hover, .reaction-button.active { border-color:var(--accent); color:var(--accent); background:rgba(255,255,0,.08); transform:none; box-shadow:0 0 10px rgba(255,255,0,.15); }
.reaction-button.disabled { display:inline-flex; cursor:default; }
.reaction-pill { position:relative; display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); }
.reaction-pill .reaction-button { border:0; border-radius:999px; background:transparent; }
.reaction-like { padding-left:.65rem; }
.reaction-picker { position:relative; }
.reaction-picker[open] { z-index:300; }
.reaction-picker summary { list-style:none; height:100%; display:inline-flex; align-items:center; border-left:1px solid var(--line); border-radius:0 999px 999px 0; cursor:pointer; }
.reaction-picker summary::-webkit-details-marker { display:none; }
.reaction-picker[open] summary { color:var(--accent); background:rgba(255,255,0,.08); }
.reaction-picker-panel { position:absolute; z-index:200; left:0; top:calc(100% + .4rem); width:min(21rem, calc(100vw - 2rem)); padding:.7rem; border:1px solid var(--line-hover); border-radius:8px; background:var(--surface-elevated); box-shadow:var(--shadow-lg); }
.reaction-search-label { margin:0 0 .55rem; }
.reaction-search { padding:.45rem .55rem; font-size:.78rem; }
.reaction-grid { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:.25rem; max-height:12rem; overflow:auto; }
.reaction-grid form[hidden] { display:none; }
.reaction-grid .reaction-button { width:100%; justify-content:center; padding:.45rem .25rem; font-size:1rem; }
.reaction-custom { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.35rem; margin-top:.6rem !important; }
.reaction-custom input { padding:.45rem .55rem; font-size:.82rem; }
.admin-table { width:100%; border-collapse:separate; border-spacing:0; margin-top:1rem; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.admin-table th, .admin-table td { text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.85rem; }
.admin-table th { font-family:var(--font-mono); background:var(--surface-elevated); color:var(--accent); text-transform:uppercase; letter-spacing:.07em; font-size:.72rem; border-bottom:2px solid rgba(255,255,0,.5); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:var(--glow-dim); }
.results-table-wrap { overflow-x:auto; } .results-table { min-width:50rem; margin-top:0; }
.entry-table { min-width:40rem; margin-top:0; }
.result-scores { display:grid; grid-template-columns:repeat(4, minmax(6.5rem, 1fr)); gap:.35rem; min-width:31rem; }
.result-score { display:flex; justify-content:space-between; gap:.5rem; padding:.3rem .45rem; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.025); font-family:var(--font-mono); font-size:.7rem; } .result-score span { color:var(--faint); text-transform:uppercase; } .result-score strong { color:var(--ink); }
.result-score-summary { display:block; margin-top:.4rem; color:var(--faint); font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; }
.site-footer { font-family:var(--font-mono); font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; border-top:1px solid var(--line); background:rgba(16,16,42,.6); padding:.9rem clamp(.75rem, 3vw, 2rem); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; }
.site-footer::before { content:'// '; color:var(--faint); }
.site-footer a { color:var(--muted); } .site-footer a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media (max-width: 860px) {
	.topbar { flex-wrap:wrap; gap:.15rem .5rem; padding-bottom:.45rem; }
	.brand-logo { width:220px; height:44px; }
	.nav { width:100%; justify-content:space-between; }
	.nav-primary { flex:1; justify-content:space-between; }
	.nav a, .nav-button, .nav-more summary { min-height:44px; }
	.nav-menu-panel { position:fixed; top:6.2rem; right:.75rem; max-height:calc(100vh - 7rem); }
	.content { padding:1.25rem 0 2.5rem; }
	.post-summary-row { grid-template-columns:1fr; }
	.post-tags { justify-content:flex-start; max-width:none; }
}
@media (max-width: 600px) {
	.tabs { flex-wrap:wrap; gap:.25rem; overflow:visible; border-bottom:0; }
	.tab { flex:1 1 calc(50% - .25rem); min-width:0; min-height:44px; padding:.55rem .4rem; text-align:center; border:1px solid var(--line); border-bottom:3px solid transparent; }
	.tab:hover, .tab.active { border-color:var(--line-hover); border-bottom-color:var(--accent); }
	.tag-link { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:.4rem .3rem; }
	button:not(.reaction-button), .button { min-height:44px; }
	select { min-height:44px; }
}
@media (max-width: 420px) {
	.nav-menu-panel { top:6.6rem; }
}
@media print {
	.topbar, .retro-stars, .site-footer { display:none; }
	body::before, body::after { display:none; }
	* { background:white !important; color:black !important; box-shadow:none !important; text-shadow:none !important; }
}

/* Chat owns the remaining viewport: only its transcript scrolls. */
.site-shell:has(.chat-page) { height:100dvh; min-height:0; overflow:hidden; }
.site-shell:has(.chat-page) .content { display:flex; width:min(1180px, calc(100vw - 2rem)); min-height:0; padding:.75rem 0; }
.site-shell:has(.chat-page) .site-footer { display:none; }
.chat-page { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg, var(--surface-elevated), var(--panel) 5rem); box-shadow:var(--shadow-md); }
.chat-header { display:flex; flex:0 0 auto; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem .35rem; }
.chat-header h1 { margin:0; padding:0; border:0; font-size:1.2rem; }
.chat-header p { margin:.15rem 0 0; font-size:.8rem; }
.chat-status { flex:0 0 auto; color:var(--faint); font-family:var(--font-mono); font-size:.72rem; }
.chat-channels { flex:0 0 auto; margin:0; padding:0 1rem; }
.chat-log { flex:1; min-height:0; margin:0; padding:.5rem 1rem 1rem; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; list-style:none; }
.chat-message { display:grid; grid-template-columns:2.25rem minmax(0, 1fr); gap:.7rem; padding:.55rem .35rem; border-radius:6px; }
.chat-message:hover { background:rgba(255,255,255,.025); }
.chat-avatar { display:flex; width:2.25rem; height:2.25rem; align-items:center; justify-content:center; border:1px solid var(--line-hover); border-radius:50%; background:var(--bg-secondary); font-family:var(--font-mono); font-weight:700; }
.chat-message-content { min-width:0; }
.chat-message-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem; line-height:1.3; }
.chat-message-meta a { font-weight:700; }
.chat-message-meta time { color:var(--faint); font-family:var(--font-mono); font-size:.65rem; }
.chat-message-body { overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.5; }
.chat-composer { flex:0 0 auto; padding:.7rem 1rem .65rem; border-top:1px solid var(--line); background:rgba(10,10,26,.94); }
.chat-composer form { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.65rem; align-items:end; }
.chat-input-wrap { position:relative; min-width:0; }
.chat-composer textarea { min-height:44px; max-height:144px; resize:none; padding:.55rem .75rem; }
.chat-composer button { min-height:44px; }
.chat-composer-help { margin:.25rem 0 0; color:var(--faint); font-size:.68rem; }
.chat-suggestions { position:absolute; z-index:200; left:0; bottom:calc(100% + .35rem); display:grid; width:min(28rem, 100%); max-height:16rem; overflow:auto; padding:.35rem; border:1px solid var(--line-hover); border-radius:7px; background:var(--surface-elevated); box-shadow:var(--shadow-lg); }
.chat-suggestions[hidden] { display:none; }
.chat-suggestion { display:flex !important; width:100%; min-height:40px; justify-content:space-between !important; padding:.45rem .65rem !important; clip-path:none !important; border:0 !important; background:transparent !important; color:var(--ink) !important; text-transform:none !important; letter-spacing:0 !important; }
.chat-suggestion::before, .chat-suggestion::after { display:none !important; }
.chat-suggestion span { color:var(--muted); font-weight:400; }
.chat-suggestion[aria-selected="true"], .chat-suggestion:hover { background:var(--surface-hover) !important; color:var(--accent) !important; transform:none !important; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
@media (max-width:600px) {
	.site-shell:has(.chat-page) .content { width:100%; padding:0; }
	.chat-page { border-width:1px 0 0; border-radius:0; }
	.chat-header { padding:.6rem .75rem .2rem; }
	.chat-header > div > p, .chat-composer-help { display:none; }
	.chat-channels { padding:0 .5rem; }
	.chat-log { padding:.35rem .5rem .75rem; }
	.chat-message { grid-template-columns:2rem minmax(0, 1fr); gap:.55rem; padding:.45rem .25rem; }
	.chat-avatar { width:2rem; height:2rem; }
	.chat-composer { padding:.55rem; }
	.chat-composer form { gap:.45rem; }
	.chat-composer button { padding:.55rem .8rem; }
}

/* Contextual administrator controls stay visually subordinate to public content. */
.admin-context { margin-top:.65rem; padding-top:.65rem; border-top:1px dashed var(--line); }
.admin-context > summary { display:flex; align-items:center; min-height:44px; color:var(--accent); }
.environment-badge { display:inline-flex; align-items:center; min-height:1.7rem; margin-left:.45rem; padding:.1rem .45rem; border:1px solid var(--warning); color:var(--warning); font:700 .68rem var(--font-mono); letter-spacing:.08em; vertical-align:middle; }
.settings-list { display:grid; gap:.75rem; margin:1rem 0; }
.feature-setting { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0; cursor:pointer; }
.feature-setting span { display:grid; gap:.3rem; }
.feature-setting small { color:var(--muted); font-weight:400; }
.feature-setting input { width:1.5rem; height:1.5rem; flex:0 0 auto; accent-color:var(--accent); }
@media (max-width:600px) { .feature-setting { align-items:flex-start; } .feature-setting input { width:44px; height:44px; } }
.chat-empty { display:grid; place-content:center; min-height:100%; text-align:center; color:var(--muted); }
.chat-empty strong { color:var(--ink); }
.chat-empty span { display:block; margin-top:.25rem; }