/* shared WRECKCHORD web theme (account + profile pages) */
:root { --bg:#0b1120; --panel:#131c34; --line:#3a4f7e; --txt:#e2eafb; --dim:#9db0d8;
        --cyan:#43e8ff; --gold:#ffd257; --pink:#ff4bc1; --purple:#b06bff; }
* { margin:0; box-sizing:border-box; }
/* solid dark base on html+body so mobile overscroll / fixed-canvas repaint never flashes white.
   The starfield canvas (stars.js, z-index:0) sits ON TOP of this base and paints the stars;
   panels/cards have their own solid fills so text stays readable over the moving stars. */
html { background:#06080f; }
body { background:#06080f; color:var(--txt); font-family:Consolas,'Courier New',monospace; overscroll-behavior:none; }
.wrap { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px 60px; }
.topnav { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
.topnav .brand { color:var(--cyan); text-decoration:none; letter-spacing:.2em; font-size:18px;
                 filter:drop-shadow(0 0 12px rgba(67,232,255,.4)); }
.topnav .links a { color:var(--dim); text-decoration:none; margin-left:18px; font-size:13px; letter-spacing:.1em; }
.topnav .links a:hover { color:var(--txt); }
h1 { color:var(--cyan); letter-spacing:.25em; font-size:22px; margin:26px 0 6px; }
.sub { color:var(--dim); font-size:13px; margin-bottom:22px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:16px; }
.panel h3 { color:var(--gold); font-size:11px; letter-spacing:.25em; margin-bottom:14px; }
label { display:block; color:var(--dim); font-size:11px; letter-spacing:.15em; margin:14px 0 6px; }
input[type=text], input[type=password] { width:100%; padding:11px; background:#0a1226; border:1px solid var(--line);
     border-radius:5px; color:var(--txt); font-family:inherit; font-size:14px; }
.btn { display:inline-block; margin-top:18px; padding:11px 28px; background:transparent; border:1px solid var(--cyan);
       color:var(--cyan); border-radius:5px; cursor:pointer; font-family:inherit; letter-spacing:.12em; font-size:13px; text-decoration:none; }
.btn:hover { background:rgba(67,232,255,.08); }
.err { color:#ff6a6a; font-size:13px; margin-top:12px; }
.ok  { color:#5cff9d; font-size:13px; margin-top:12px; }
.linkcode { font-size:44px; letter-spacing:.35em; color:var(--gold); text-align:center; padding:18px 0 8px;
            filter:drop-shadow(0 0 16px rgba(255,210,87,.35)); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.card { background:#080c18; border:1px solid var(--line); border-radius:7px; padding:14px; }
.card .v { color:var(--cyan); font-size:22px; } .card .l { color:var(--dim); font-size:10px; letter-spacing:.18em; margin-top:5px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--dim); font-size:10px; letter-spacing:.18em; padding:8px; border-bottom:1px solid var(--line); }
td { padding:8px; border-bottom:1px solid rgba(58,79,126,.5); }
td.n { text-align:right; color:var(--cyan); }
.dim { color:var(--dim); }

/* ---------- the captain's hangar ---------- */
.hangar-hero { display:flex; align-items:center; gap:22px; margin:20px 0 8px; padding:26px 24px;
  background:linear-gradient(135deg,rgba(67,232,255,.08),rgba(176,107,255,.06) 60%,transparent);
  border:1px solid var(--line); border-radius:12px; position:relative; overflow:hidden; }
.hangar-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1px 1px at 30% 40%,rgba(255,255,255,.5),transparent),
             radial-gradient(1px 1px at 70% 60%,rgba(150,200,255,.5),transparent),
             radial-gradient(1.5px 1.5px at 85% 25%,rgba(255,255,255,.4),transparent);
  background-size:180px 180px; opacity:.6; }
.emblem { flex:0 0 92px; width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%,rgba(67,232,255,.22),rgba(11,17,32,.9)); border:2px solid var(--cyan);
  box-shadow:0 0 26px rgba(67,232,255,.3), inset 0 0 18px rgba(67,232,255,.15); position:relative; z-index:1; }
.emblem svg { width:52px; height:52px; }
.hero-text { position:relative; z-index:1; }
.rank-tag { color:var(--gold); letter-spacing:.42em; font-size:12px; }
.callsign { color:var(--txt); letter-spacing:.14em; font-size:30px; margin:4px 0 6px;
  text-shadow:0 0 22px rgba(67,232,255,.35); }
.hero-sub { color:var(--dim); font-size:12.5px; letter-spacing:.06em; line-height:1.7; }
.hero-sub a { color:var(--cyan); text-decoration:none; }
.cloud-note { margin-top:10px; display:inline-block; color:#8fe9c0; font-size:11.5px; letter-spacing:.08em;
  border:1px solid rgba(92,255,157,.4); border-radius:20px; padding:5px 13px; background:rgba(92,255,157,.06); }
.card .v { color:var(--cyan); font-size:26px; font-weight:600; }
.card .l { color:var(--dim); font-size:10px; letter-spacing:.18em; margin-top:6px; }
.achgrid { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.ach { width:88px; text-align:center; opacity:.32; filter:grayscale(.45); }
.ach.on { opacity:1; filter:none; }
.ach span { display:block; font-size:9px; letter-spacing:.1em; color:var(--dim); margin-top:5px; line-height:1.4; }
.ach.on span { color:var(--txt); }
.relink { background:linear-gradient(135deg,rgba(255,210,87,.05),transparent); }
@media (max-width:520px){ .hangar-hero{ flex-direction:column; text-align:center; } .callsign{ font-size:24px; } }