:root{
  --bg:#0e1116; --panel:#151a22; --panel2:#1b212b; --line:#242c38;
  --fg:#e9e7e2; --dim:#93a0b0; --gold:#d4a017; --cyan:#4fc3f7; --ok:#4caf7d; --warn:#e05252;
  --radius:12px; --shadow:0 8px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.7rem;margin:0 0 .3em;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:1.6em 0 .5em}
.dim{color:var(--dim);font-size:.88em}
.empty{color:var(--dim);font-style:italic;padding:.6em 0}

.topbar{display:flex;align-items:center;gap:26px;padding:0 22px;height:60px;
  background:linear-gradient(180deg,#121821,#0f141b);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:700;letter-spacing:.02em}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--gold),#8c6a10);color:#12141a;font-size:.8rem;font-weight:800}
.tabs{display:flex;gap:4px;flex:1;overflow-x:auto}
.tabs a{padding:8px 12px;border-radius:8px;color:var(--dim);white-space:nowrap;font-size:.94rem}
.tabs a:hover{background:var(--panel);color:var(--fg);text-decoration:none}
.tabs a.on{background:var(--panel2);color:var(--fg);box-shadow:inset 0 -2px 0 var(--gold)}
.account{display:flex;align-items:center;gap:12px;font-size:.92rem}
.account .who{color:var(--fg)}
.linkbtn{background:none;border:0;color:var(--dim);cursor:pointer;font-size:.92rem;padding:0}
.linkbtn:hover{color:var(--fg)}

.wrap{max-width:1120px;margin:0 auto;padding:28px 22px 60px}
.hero{padding:34px 0 18px;border-bottom:1px solid var(--line);margin-bottom:26px}
.hero h1{font-size:2.1rem}
.lede{color:var(--dim);font-size:1.05rem;margin:.2em 0 1.2em}
.row{display:flex;gap:12px;flex-wrap:wrap}

.cta{display:inline-block;background:linear-gradient(180deg,#e0b02a,#c99a12);color:#12141a;
  font-weight:600;padding:10px 18px;border-radius:10px;border:1px solid #8c6a10}
.cta:hover{text-decoration:none;filter:brightness(1.06)}
.ghost{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:10px;color:var(--fg)}
.ghost:hover{border-color:var(--gold);text-decoration:none}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:760px){.grid.two{grid-template-columns:1fr}.tabs{gap:0}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card.link{display:block;color:inherit;transition:border-color .15s,transform .15s}
.card.link:hover{border-color:#3a4658;text-decoration:none;transform:translateY(-2px)}
.card h2{margin:.4em 0 .2em;font-size:1.05rem}
.card img{width:100%;border-radius:10px;display:block}
.card .icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;
  background:var(--panel2);border:2px solid var(--gold);color:var(--gold)}
.card .thumb{height:120px;border-radius:10px;background:linear-gradient(135deg,#1c2430,#121821)}

.list{list-style:none;padding:0;margin:0}
.list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.feed{list-style:none;padding:0;margin:0;display:grid;gap:14px}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;
  border:1px solid var(--line);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}

.detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.detail-head{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.player video{width:100%;border-radius:10px;background:#000}

.table{width:100%;border-collapse:collapse;font-size:.94rem}
.table th{text-align:left;color:var(--dim);font-weight:600;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;padding:10px 8px;border-bottom:1px solid var(--line)}
.table td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr.notes td{color:var(--dim);font-size:.9rem;padding-top:0}

.narrow{max-width:440px;margin:0 auto}
.form p{margin:0 0 14px}
.form input{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--line);
  background:#0b0f14;color:var(--fg);font-size:1rem}
.form ul.errorlist{color:var(--warn);list-style:none;padding:0;margin:4px 0;font-size:.86rem}
.form .helptext{color:var(--dim);font-size:.8rem}

.flashes{list-style:none;padding:0;margin:0 0 18px}
.flashes li{padding:10px 14px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);margin-bottom:8px}

.foot{display:flex;justify-content:space-between;max-width:1120px;margin:0 auto;
  padding:18px 22px 30px;color:var(--dim);font-size:.84rem;border-top:1px solid var(--line)}

.brand-logo{height:38px;width:auto;display:block}
@media(max-width:760px){.brand-logo{height:30px}}

.ghost.small,.cta.small{padding:6px 12px;font-size:.85rem}
.row{display:flex;gap:8px;align-items:center}
.row form{margin:0}
.chat{display:flex;flex-direction:column;gap:10px;margin:20px 0 24px}
.bubble{max-width:70%;padding:11px 14px;border-radius:14px;border:1px solid var(--line)}
.bubble p{margin:0 0 4px}
.bubble.mine{align-self:flex-end;background:#1d2a38;border-color:#2b3d50}
.bubble.theirs{align-self:flex-start;background:var(--panel)}
.composer{display:flex;gap:10px;align-items:flex-start}
.composer textarea{flex:1;padding:12px;border-radius:10px;border:1px solid var(--line);
  background:#0b0f14;color:var(--fg);font:inherit;resize:vertical}
.hero-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px}
.hero-logo{width:auto;max-width:min(620px,86vw);height:auto;display:block;filter:drop-shadow(0 6px 30px rgba(124,58,237,.35))}
.hero-hero .lede{margin:22px 0 18px;font-size:1.1rem}
.row.center{justify-content:center}

.card, .card h2, .card p, .card .dim, .card a{font-family:inherit}