:root { --bg:#0d1017; --panel:#161b26; --panel2:#1d2433; --line:#2a3345; --text:#e8ecf3; --dim:#93a0b5; --accent:#5aa2ff; --danger:#ff6b6b; --ok:#4fd18b;
  --platinum:#b9d4f5; --gold:#e8b93c; --silver:#c2c8d2; --bronze:#c98552; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:26px; margin:0 0 6px; } h2 { font-size:18px; margin:0; } h3 { font-size:15px; margin:0; }
p { margin:0 0 10px; } .dim { color:var(--dim); } .small { font-size:13px; }
#top { display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
#top .brand { font-weight:700; font-size:18px; color:var(--text); display:flex; align-items:center; gap:8px; }
#top .brand .cup { color:var(--gold); }
#top nav { display:flex; gap:14px; margin-left:auto; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
#top nav a { color:var(--dim); } #top nav a.on, #top nav a:hover { color:var(--text); text-decoration:none; }
main { max-width:980px; margin:0 auto; padding:20px 16px 60px; }
button, .btn { font:inherit; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 13px; cursor:pointer; display:inline-block; }
button:hover, .btn:hover { border-color:var(--accent); text-decoration:none; }
button.primary { background:var(--accent); border-color:var(--accent); color:#06121f; font-weight:600; }
button.danger { color:var(--danger); } button.mini { padding:3px 9px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }
input, textarea, select { font:inherit; color:var(--text); background:#0f141d; border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; }
input[type=checkbox] { width:auto; } textarea { min-height:70px; resize:vertical; }
label { display:block; margin:0 0 12px; } label > span { display:block; color:var(--dim); font-size:13px; margin-bottom:4px; }
label.check { display:flex; gap:8px; align-items:flex-start; } label.check > span { margin:0; color:var(--text); font-size:15px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 16px; }
.narrow { max-width:420px; margin:40px auto; }
.bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 14px; } .bar .grow { flex:1; min-width:160px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; color:var(--text); display:block; }
.card:hover { border-color:var(--accent); text-decoration:none; }
.cover { aspect-ratio:920/430; background:linear-gradient(135deg,#1c2740,#2b1d40); display:flex; align-items:center; justify-content:center; color:#ffffff30; font-size:42px; overflow:hidden; }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.card .body { padding:10px 12px; } .card .body .t { font-weight:600; display:flex; gap:8px; align-items:center; }
.tag { font-size:11px; font-weight:700; letter-spacing:.5px; padding:1px 7px; border-radius:20px; border:1px solid var(--line); color:var(--dim); white-space:nowrap; }
.tag.beta { color:#ffb347; border-color:#ffb34766; } .tag.draft { color:var(--dim); } .tag.done { color:var(--ok); border-color:#4fd18b66; }
.meter { height:6px; background:#0f141d; border-radius:6px; overflow:hidden; margin-top:8px; } .meter i { display:block; height:100%; background:var(--accent); }
.meter.full i { background:var(--ok); }
.hero { display:grid; grid-template-columns:minmax(0, 360px) 1fr; gap:18px; align-items:start; margin-bottom:18px; }
.hero .cover { border-radius:12px; border:1px solid var(--line); }
.list-head { display:flex; align-items:center; gap:10px; margin:22px 0 8px; } .list-head .n { margin-left:auto; color:var(--dim); }
.trophy { display:flex; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.trophy.locked { opacity:.62; } .trophy .ico { width:56px; height:56px; border-radius:8px; background:#0f141d; flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden; }
.trophy .ico img { width:100%; height:100%; display:block; } .trophy .mid { flex:1; min-width:0; } .trophy .name { font-weight:600; }
.trophy .side { text-align:right; font-size:13px; color:var(--dim); flex:none; } .trophy .acts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tier { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
.tier.platinum, .c-platinum { background:var(--platinum); } .tier.gold { background:var(--gold); } .tier.silver { background:var(--silver); } .tier.bronze { background:var(--bronze); }
.trophy.t-platinum { border-color:#b9d4f566; } .cupc.platinum { color:var(--platinum); } .cupc.gold { color:var(--gold); } .cupc.silver { color:var(--silver); } .cupc.bronze { color:var(--bronze); }
.tiers { display:flex; gap:18px; flex-wrap:wrap; font-size:18px; font-weight:600; } .tiers span { display:flex; align-items:center; gap:6px; }
.row { display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); flex-wrap:wrap; } .row:first-child { border-top:0; } .row .grow { flex:1; min-width:140px; }
.code { font:600 30px/1 ui-monospace, monospace; letter-spacing:4px; text-align:center; text-transform:uppercase; }
.secret { font-family:ui-monospace, monospace; background:#0f141d; border:1px dashed var(--line); border-radius:8px; padding:10px; word-break:break-all; user-select:all; }
.tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; } .tabs button.on { border-color:var(--accent); color:var(--accent); }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:18px; width:min(480px, calc(100vw - 24px)); }
dialog::backdrop { background:#000a; } dialog h2 { margin-bottom:14px; } dialog .foot { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line); padding:10px 16px; border-radius:10px; z-index:20; max-width:90vw; }
#toast.bad { border-color:var(--danger); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .hero { grid-template-columns:1fr; } .two { grid-template-columns:1fr; } .trophy { flex-wrap:wrap; } .trophy .side { width:100%; text-align:left; } .trophy .acts { justify-content:flex-start; } h1 { font-size:22px; } }