/* =====================================================================
   Group4041 portal — "Black · Gold · White · Glass" theme
   Self-hosted fonts (CSP font-src 'self'), no inline styles anywhere,
   so the Content-Security-Policy can forbid 'unsafe-inline'.
   ===================================================================== */

@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* black */
  --black: #050505;
  --black-2: #0b0b0c;
  --ink: #000;
  /* gold — sampled from the Group4041 wordmark and badge */
  --gold: #f5cf6b;
  --gold-2: #d9a93f;
  --gold-3: #a8781f;
  --gold-pale: #fbe7a8;
  --gold-metal: linear-gradient(180deg, #fff1c2 0%, #f5cf6b 28%, #d9a93f 62%, #a8781f 100%);
  --gold-line: linear-gradient(90deg, transparent, rgba(245,207,107,.15) 8%, #f5cf6b 50%, rgba(245,207,107,.15) 92%, transparent);
  /* white */
  --white: #ffffff;
  --text: #f4f1ea;
  --muted: #a9a49a;
  /* clear glass */
  --glass: rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.075);
  --glass-hi: rgba(255,255,255,.14);
  --glass-edge: rgba(245,207,107,.30);
  --glass-edge-soft: rgba(255,255,255,.10);
  --blur: blur(16px) saturate(140%);
  /* states */
  --danger: #ff6b6b;
  --warn: #ffb547;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.6) inset, 0 24px 48px -28px rgba(0,0,0,.9);
  --glow: 0 0 0 1px rgba(245,207,107,.35), 0 0 24px -6px rgba(245,207,107,.45);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Orbitron", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--text); font: 15px/1.65 var(--font);
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(245,207,107,.16), transparent 70%),
    radial-gradient(420px 420px at 8% 22%, rgba(217,169,63,.07), transparent 70%),
    radial-gradient(520px 520px at 96% 38%, rgba(217,169,63,.06), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(245,207,107,.07), transparent 70%),
    linear-gradient(180deg, #0a0a0b 0%, var(--black) 40%, #000 100%);
  background-attachment: fixed;
}
/* faint bokeh specks, like light through glass */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background:
    radial-gradient(3px 3px at 12% 18%, rgba(255,231,160,.55), transparent 60%),
    radial-gradient(2px 2px at 27% 64%, rgba(255,231,160,.35), transparent 60%),
    radial-gradient(4px 4px at 71% 12%, rgba(255,231,160,.40), transparent 60%),
    radial-gradient(2px 2px at 88% 72%, rgba(255,231,160,.35), transparent 60%),
    radial-gradient(3px 3px at 54% 88%, rgba(255,231,160,.30), transparent 60%),
    radial-gradient(2px 2px at 40% 30%, rgba(255,255,255,.25), transparent 60%);
}
body > * { position: relative; z-index: 1; }

a { color: var(--gold); text-decoration-color: rgba(245,207,107,.45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-pale); text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.2; color: var(--white); }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.55rem, 2.4vw, 2.1rem); letter-spacing: .02em; }
h2 { font-family: var(--display); font-weight: 600; font-size: .98rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
h3 { font-size: .95rem; margin-top: 1.2rem; color: var(--gold-pale); }
p { margin: 0 0 .9rem; }
hr { border: 0; height: 1px; background: var(--gold-line); margin: 1.5rem 0; }
strong { color: var(--white); }
code, pre, .mono { font-family: var(--mono); }
code { background: rgba(255,255,255,.06); border: 1px solid var(--glass-edge-soft); border-radius: 6px; padding: .05em .4em; font-size: .88em; color: var(--gold-pale); }
pre { background: rgba(0,0,0,.65); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); padding: 1rem 1.1rem; overflow-x: auto; box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; }
pre code { background: none; border: 0; padding: 0; color: #f6eedb; }
::selection { background: rgba(245,207,107,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.main { flex: 1; padding: 2.2rem 0 3.5rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.tiny { font-size: .74rem; }
.center { text-align: center; }
.wrap-any { overflow-wrap: anywhere; word-break: break-word; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: #000; padding: .5rem 1rem; z-index: 50; font-weight: 700; }
.skip-link:focus { left: 1rem; }
.eyebrow { font-family: var(--display); color: var(--gold); font-size: .7rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; margin-bottom: .5rem; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--gold-pale); }
.lede { font-size: 1.06rem; color: #ddd7cb; max-width: 70ch; }
.gold-rule { height: 2px; background: var(--gold-line); }

/* Gold metallic headline text */
.gold-title, .page-head h1, .hero h1, .article h1, .auth-card h1, .narrow-form h1 {
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.75));
}

/* ------------------------------------------------------------------ glass */
.glass, .card, .auth-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,.02) 100%);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge-soft);
  border-top-color: rgba(255,255,255,.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding: 1.35rem 1.45rem; position: relative; overflow: hidden; }
/* gold hairline + specular sheen across the top of each glass pane */
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); opacity: .9;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card > * { position: relative; z-index: 1; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; }
.card-head a { font-family: var(--display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.narrow-form { max-width: 760px; margin-inline: auto; }

/* ------------------------------------------------------------------ header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(5,5,5,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-badge { width: 48px; height: 48px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)); }
.brand-wordmark { height: 34px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.header-user { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.user-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .65rem; border-radius: 999px;
  color: var(--white); text-decoration: none; font-weight: 600; font-size: .9rem;
  background: var(--glass); border: 1px solid var(--glass-edge-soft);
}
.user-chip:hover, .user-chip.is-active { border-color: var(--glass-edge); color: var(--white); }
.user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.user-role { font-family: var(--display); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.site-header .nav-toggle { display: none; }

.primary-nav {
  border-top: 1px solid rgba(245,207,107,.28); border-bottom: 1px solid rgba(245,207,107,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
}
.nav-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; }
.primary-nav a {
  position: relative; font-family: var(--display); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #e7e1d3; text-decoration: none; padding: .85rem 1.25rem;
}
.primary-nav a + a::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(245,207,107,.25); }
.primary-nav a:hover { color: var(--gold); }
.primary-nav a.is-active {
  color: #120d02; background: var(--gold-metal); font-weight: 700;
  box-shadow: 0 0 22px -4px rgba(245,207,107,.6), 0 1px 0 rgba(255,255,255,.6) inset;
}
.primary-nav a.is-active::before, .primary-nav a.is-active + a::before { display: none; }
.primary-nav .nav-admin:not(.is-active) { color: var(--gold); }
.primary-nav .nav-mobile-only { display: none; }
.nav-signout { padding: .6rem 1rem 1rem; }

/* control-panel sub navigation */
.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .45rem .55rem; margin: 0 0 1.5rem; border-radius: 999px; }
.subnav-label { font-family: var(--display); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); padding: 0 .8rem 0 .6rem; border-right: 1px solid rgba(245,207,107,.3); margin-right: .3rem; }
.subnav a { color: #e7e1d3; text-decoration: none; padding: .4rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 500; }
.subnav a:hover { color: var(--gold); background: var(--glass); }
.subnav a.is-active { color: #120d02; background: var(--gold-metal); font-weight: 700; }

/* ------------------------------------------------------------------ layout */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; padding-bottom: 1rem; position: relative; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(245,207,107,.7), rgba(245,207,107,.08) 60%, transparent); }
.page-head h1 { margin-bottom: .35rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.stack > * + * { margin-top: .9rem; }
.stack-lg > * + * { margin-top: 1.3rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  margin-bottom: 1.8rem; padding: 1.8rem 2rem;
}
.hero-badge { width: 150px; height: 150px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(245,207,107,.18)); }
.hero-stats { display: flex; gap: 0; flex-wrap: wrap; margin: 1.1rem 0 .6rem; }
.hero-stats > div { display: flex; flex-direction: column; padding: .2rem 1.6rem; border-left: 1px solid rgba(245,207,107,.25); }
.hero-stats > div:first-child { padding-left: 0; border-left: 0; }
.stat { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--gold); text-transform: lowercase; text-shadow: 0 0 18px rgba(245,207,107,.35); }

/* ------------------------------------------------------------------ forms */
label { display: block; font-size: .86rem; font-weight: 600; color: #ece6d8; letter-spacing: .01em; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=file], select, textarea {
  display: block; width: 100%; margin-top: .4rem; padding: .65rem .8rem; font: inherit; font-weight: 400;
  color: var(--white); background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.5) inset; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #77726a; }
input[type=file] { padding: .5rem; color: var(--muted); }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: .8rem; padding: .35rem .9rem; border-radius: 7px; cursor: pointer;
  color: var(--gold); background: transparent; border: 1px solid var(--glass-edge);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
select option { background: #111; color: var(--white); }
textarea { resize: vertical; min-height: 5rem; }
.mono-area { font-family: var(--mono); font-size: .9rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,207,107,.18), 0 2px 6px rgba(0,0,0,.5) inset; }
input:disabled, select:disabled { opacity: .55; }
fieldset { border: 1px solid var(--glass-edge-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 0; background: rgba(0,0,0,.25); }
legend { padding: 0 .4rem; font-family: var(--display); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
input[type=checkbox], input[type=radio] { accent-color: var(--gold); width: 1rem; height: 1rem; }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; margin: .35rem 0; }
.inline-radios label { display: inline-flex; align-items: center; gap: .45rem; margin-right: 1.4rem; font-weight: 400; }
.code-input { font-size: 1.4rem; letter-spacing: .35em; text-align: center; color: var(--gold); }
.search-row { display: flex; gap: .5rem; margin-bottom: 1.1rem; max-width: 560px; }
.search-row input { margin-top: 0; }
.inline-form { display: inline; }
.upload-form { margin-top: 1.1rem; display: grid; gap: .7rem; padding-top: 1rem; border-top: 1px dashed rgba(245,207,107,.25); }
.upload-form .btn { justify-self: start; }
.counter { text-align: right; margin-top: .25rem; }
.counter.over { color: var(--danger); }
.strength { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.strength::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--danger)); transition: width .2s; }
.strength.s1 { --w: 25%; --c: var(--danger); } .strength.s2 { --w: 50%; --c: var(--warn); }
.strength.s3 { --w: 75%; --c: var(--gold-2); } .strength.s4 { --w: 100%; --c: var(--gold); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); background: var(--glass-2); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: .7rem 1.35rem; transition: border-color .15s, color .15s, box-shadow .15s, transform .05s;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
.btn:hover { color: var(--gold); border-color: var(--glass-edge); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
/* metallic gold (primary) */
.btn-gold, .btn-primary {
  color: #120d02; background: var(--gold-metal); border-color: #f9dc85; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 0 rgba(120,80,10,.45) inset, 0 8px 22px -10px rgba(245,207,107,.7);
}
.btn-gold:hover, .btn-primary:hover { color: #000; border-color: #fff1c2; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 -2px 0 rgba(120,80,10,.45) inset, 0 10px 28px -8px rgba(245,207,107,.9); }
/* gold outline (like the "Request a quote" pill) */
.btn-outline, .btn-ghost { background: rgba(0,0,0,.35); color: var(--gold); border-color: rgba(245,207,107,.55); box-shadow: none; }
.btn-outline:hover, .btn-ghost:hover { color: var(--gold-pale); border-color: var(--gold); box-shadow: var(--glow); }
.btn-danger { color: #ffd4d4; background: rgba(120,20,20,.25); border-color: rgba(255,107,107,.5); box-shadow: none; }
.btn-danger:hover { color: #fff; border-color: var(--danger); box-shadow: 0 0 18px -6px var(--danger); }
.btn-small { padding: .42rem .9rem; font-size: .62rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ flash */
.flash { border-radius: var(--radius-sm); padding: .8rem 1.05rem; margin-bottom: 1.1rem; border: 1px solid; background: rgba(0,0,0,.5); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.flash-success { border-color: rgba(245,207,107,.55); box-shadow: inset 3px 0 0 var(--gold); }
.flash-info { border-color: rgba(255,255,255,.25); box-shadow: inset 3px 0 0 #fff; }
.flash-warning { border-color: rgba(255,181,71,.5); box-shadow: inset 3px 0 0 var(--warn); }
.flash-error { border-color: rgba(255,107,107,.55); box-shadow: inset 3px 0 0 var(--danger); }
.notice { border: 1px solid rgba(245,207,107,.3); border-left: 3px solid var(--gold); padding: .6rem .9rem; background: rgba(245,207,107,.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ------------------------------------------------------------------ badges */
.badge { display: inline-block; font-family: var(--display); font-size: .56rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: #ddd; vertical-align: middle; background: rgba(0,0,0,.35); }
.badge-admin, .badge-lead { color: #120d02; background: var(--gold-metal); border-color: #f9dc85; font-weight: 700; }
.badge-member, .badge-contributor, .badge-ok, .badge-accepted { color: var(--gold); border-color: rgba(245,207,107,.55); }
.badge-readonly, .badge-pending { color: #fff; border-color: rgba(255,255,255,.4); }
.badge-warn, .badge-expired { color: #ff9a4d; border-color: rgba(255,154,77,.55); background: rgba(80,30,0,.3); }
.badge-danger, .badge-revoked { color: var(--danger); border-color: rgba(255,107,107,.5); }
.tag { font-size: .72rem; padding: .08rem .5rem; border-radius: 999px; border: 1px solid rgba(245,207,107,.4); text-decoration: none; color: var(--gold); background: rgba(0,0,0,.3); }
.tag-org { color: #ddd; border-color: rgba(255,255,255,.25); }
.pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.2rem 0 0; }
.pill-list li { font-family: var(--display); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: .4rem .8rem; border-radius: 999px; color: var(--gold); border: 1px solid rgba(245,207,107,.35); background: rgba(255,255,255,.03); }

/* ------------------------------------------------------------------ lists & tables */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.list > li:last-child { border-bottom: 0; }
.list.compact > li { padding: .35rem 0; }
.list a { color: var(--white); text-decoration: none; font-weight: 600; }
.list a:hover { color: var(--gold); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-family: var(--display); font-weight: 500; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding: .6rem .7rem; border-bottom: 1px solid rgba(245,207,107,.35); }
.table td { padding: .7rem; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.table tbody tr:hover td { background: rgba(255,255,255,.03); }
.table td a { color: var(--white); font-weight: 600; text-decoration: none; }
.table td a:hover { color: var(--gold); }
.table.audit td { padding: .45rem .55rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); font-size: .84rem; }
.kv dd { margin: 0; }
.action-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem 1.3rem; min-height: 150px; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--glass-edge-soft); border-top-color: rgba(255,255,255,.2);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 55%);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text); text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gold-line); opacity: 0; transition: opacity .15s; }
.tile:hover { border-color: var(--glass-edge); box-shadow: var(--shadow), var(--glow); transform: translateY(-2px); color: var(--text); }
.tile:hover::before { opacity: 1; }
.tile-title { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .06em; color: var(--white); }
.tile-foot { margin-top: auto; }
.tile.is-archived { opacity: .55; }

.thread-list { list-style: none; padding: 0 !important; }
.thread-list > li { padding: .95rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.thread-list > li:last-child { border-bottom: 0; }
.thread-list > li:hover { background: rgba(255,255,255,.025); }
.thread-title { font-weight: 600; font-size: 1.02rem; color: var(--white); text-decoration: none; }
.thread-title:hover { color: var(--gold); }

.micro-list { list-style: none; margin: 0; padding: 0; }
.micro-item { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.micro-item:last-child { border-bottom: 0; }
.micro-meta { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; font-size: .86rem; }
.micro-body { margin: .35rem 0 .2rem; overflow-wrap: anywhere; color: #f1ece2; }
.micro-item .inline-form { display: inline-block; margin-top: .25rem; }

/* ------------------------------------------------------------------ articles (blog / forum / project posts) */
.article { padding: 2rem 2.2rem; }
.article h1 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.article-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid rgba(245,207,107,.2); flex-wrap: wrap; }
.prose { max-width: 78ch; overflow-wrap: anywhere; font-size: 1rem; color: #ece7dc; }
.prose p { margin: 0 0 1.05rem; }
.replies { margin: 1.3rem 0; display: grid; gap: 1rem; }
.reply { border-left: 2px solid rgba(245,207,107,.45); }
.reply .prose { margin-bottom: .4rem; }
.blog-card { padding: 1.5rem 1.7rem; }
.blog-card h2 { font-family: var(--display); text-transform: none; letter-spacing: .02em; font-size: 1.15rem; }
.blog-card h2 a { color: var(--white); text-decoration: none; }
.blog-card h2 a:hover { color: var(--gold); }

.edit-details { margin-top: 1.1rem; border-top: 1px dashed rgba(245,207,107,.25); padding-top: .9rem; }
.edit-details summary { cursor: pointer; color: var(--gold); font-family: var(--display); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem; }

.secret-box { display: flex; gap: .7rem; align-items: center; margin: .7rem 0; padding: .8rem 1rem; background: rgba(0,0,0,.6); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); }
.secret-box code { background: none; border: 0; flex: 1; }
.secret { font-size: 1.15rem; letter-spacing: .1em; color: var(--gold); }
.codes { font-size: 1.05rem; line-height: 2; columns: 2; color: var(--gold-pale); }
.steps li { margin-bottom: 1rem; }
.steps li::marker { color: var(--gold); font-family: var(--display); }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.6rem 0; }

/* ------------------------------------------------------------------ sign-in */
.auth-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; align-items: center; min-height: 64vh; }
.auth-wordmark { width: min(560px, 100%); height: auto; margin-bottom: 1.6rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.85)); }
.auth-intro h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 22ch; line-height: 1.3; }
.auth-card { padding: 2.2rem 2.2rem 1.8rem; position: relative; }
.auth-card h2 { text-align: center; margin-bottom: 1.3rem; }
.auth-card form + p { margin-top: 1.1rem; }
.auth-card.narrow { max-width: 480px; margin: 3rem auto; }
.auth-badge { display: block; margin: -.4rem auto .8rem; width: 104px; height: 104px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.9)); }
.error-card { max-width: 580px; margin: 4rem auto; text-align: center; }

/* ------------------------------------------------------------------ control panel accent */
.is-admin-area .page-head .eyebrow::before { content: "◆ "; }

/* ------------------------------------------------------------------ footer */
.site-footer { margin-top: auto; background: rgba(0,0,0,.6); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem 0; }
.footer-brand { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.footer-brand img { height: 28px; width: auto; opacity: .9; }
.footer-brand p { margin: 0; color: var(--muted); font-size: .84rem; }
.footer-meta { display: flex; gap: .4rem; font-size: .72rem; color: var(--muted); }
.footer-meta span + span::before { content: "◆"; color: var(--gold-3); margin-right: .4rem; font-size: .55rem; vertical-align: 1px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .grid-2, .grid-main, .auth-layout { grid-template-columns: 1fr; }
  .auth-layout { gap: 2rem; }
  .hero { grid-template-columns: 1fr; padding: 1.4rem; }
  .hero-badge { display: none; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2rem); }
  .header-inner { min-height: 64px; }
  .brand-badge { width: 40px; height: 40px; }
  .brand-wordmark { height: 24px; }
  .header-user { display: none; }
  .site-header .nav-toggle { display: inline-flex; margin-left: auto; }
  .primary-nav { display: none; }
  .primary-nav.open { display: block; }
  .nav-inner { flex-direction: column; padding: .4rem 0; }
  .primary-nav a { padding: .8rem 1rem; }
  .primary-nav a + a::before { display: none; }
  .primary-nav .nav-mobile-only { display: block; }
  .subnav { border-radius: var(--radius); }
  .subnav-label { width: 100%; border-right: 0; padding-bottom: .3rem; }
  .hero-stats > div { padding: .2rem 1rem; }
  .codes { columns: 1; }
  .article { padding: 1.4rem; }
  .footer-meta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .site-header, .site-footer, .btn, form, body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .card { background: #fff; border-color: #ccc; box-shadow: none; }
  .gold-title, .page-head h1, .article h1 { color: #000; background: none; filter: none; }
}