:root { --bg:#0b1220; --panel:#111a2e; --panel2:#16213a; --line:rgba(255,255,255,.08); --text:#e2e8f0; --mute:#94a3b8; --acc:#00d4be; --acc2:#22c55e; --bad:#f43f5e; --gold:#fbbf24; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(1200px 600px at 50% -200px, #12305a 0, var(--bg) 60%) fixed var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:1.5rem; margin:0 0 14px; } h2 { font-size:1.05rem; margin:0 0 10px; color:#f1f5f9; } p { margin:0 0 10px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 18px; background:rgba(8,13,24,.85); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(8px); }
.brand { color:#fff; font-size:1.1rem; } .brand small { color:var(--acc); margin-left:8px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.res { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:.9rem; color:var(--mute); } .res b { color:#fff; }
.energy { position:relative; width:130px; height:20px; background:#1e293b; border-radius:999px; overflow:hidden; }
.energy i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#f59e0b,#22c55e); }
.energy em { position:relative; display:block; text-align:center; font-style:normal; font-size:.75rem; line-height:20px; color:#fff; font-weight:700; text-shadow:0 1px 2px #000; }
.wrap { display:flex; gap:18px; max-width:1180px; margin:18px auto; padding:0 16px; align-items:flex-start; }
.menu { flex:0 0 190px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px; position:sticky; top:64px; }
.menu a, .menu .linklike { display:flex; gap:8px; align-items:center; width:100%; padding:8px 10px; border-radius:9px; color:var(--text); font-size:.92rem; }
.menu a:hover, .menu .linklike:hover { background:rgba(255,255,255,.06); text-decoration:none; }
.menu a.on { background:rgba(0,212,190,.12); color:var(--acc); font-weight:700; }
.menu form { margin:6px 0 0; border-top:1px solid var(--line); padding-top:6px; }
.linklike { background:none; border:0; cursor:pointer; font:inherit; text-align:left; }
.badge { background:var(--bad); color:#fff; border-radius:999px; padding:0 7px; font-size:.72rem; margin-left:auto; }
main { flex:1; min-width:0; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.cols { display:grid; gap:16px; grid-template-columns:minmax(0,300px) minmax(0,1fr); }
.tile { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.tile h3 { margin:0; font-size:1rem; } .tile .sp { flex:1; }
.mute { color:var(--mute); } .small { font-size:.84rem; } .right { text-align:right; } .center { text-align:center; }
.flash { padding:10px 14px; border-radius:10px; margin-bottom:12px; border:1px solid; }
.flash.ok { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.35); color:#86efac; }
.flash.err { background:rgba(244,63,94,.1); border-color:rgba(244,63,94,.35); color:#fda4af; }
.activity { padding:10px 14px; border-radius:10px; margin-bottom:12px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.3); color:#fde68a; }
.btn { display:inline-block; padding:8px 14px; border-radius:9px; border:1px solid rgba(0,212,190,.4); background:rgba(0,212,190,.14); color:var(--acc); font:inherit; font-weight:700; cursor:pointer; }
.btn:hover { background:rgba(0,212,190,.24); text-decoration:none; } .btn[disabled] { opacity:.4; cursor:not-allowed; }
.btn.gold { border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.12); color:var(--gold); }
.btn.red { border-color:rgba(244,63,94,.45); background:rgba(244,63,94,.1); color:#fb7185; }
.btn.sm { padding:4px 10px; font-size:.82rem; } form.inline { display:inline; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea { width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:#0d1526; color:var(--text); font:inherit; }
textarea { min-height:90px; resize:vertical; } label { display:block; font-size:.82rem; color:var(--mute); margin:10px 0 4px; }
table { width:100%; border-collapse:collapse; } th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--mute); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
tr.me td { background:rgba(0,212,190,.07); }
.bar { height:8px; background:#1e293b; border-radius:999px; overflow:hidden; } .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--acc),#3b82f6); }
.skill { display:grid; grid-template-columns:110px 1fr 70px auto; gap:10px; align-items:center; padding:6px 0; }
.skill .v b { color:#fff; } .skill .v small { color:var(--acc2); }
.avatar { display:block; margin:0 auto; }
.avbox { background:linear-gradient(180deg,#14532d,#166534 55%,#0f3d24); border-radius:12px; padding:10px; border:1px solid var(--line); }
.chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(255,255,255,.07); color:var(--mute); }
.chip.t1{color:#cbd5e1}.chip.t2{color:#86efac}.chip.t3{color:#7dd3fc}.chip.t4{color:#c4b5fd}.chip.t5{color:#fdba74}.chip.t6{color:#fde047}
.swatch { display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; border:1px solid rgba(255,255,255,.3); }
.score { font-size:2.4rem; font-weight:800; text-align:center; } .score small { display:block; font-size:.9rem; color:var(--mute); font-weight:400; }
.log { list-style:none; margin:0; padding:0; } .log li { padding:6px 0; border-bottom:1px dashed var(--line); } .log li.goal { color:#86efac; font-weight:700; }
.opts { display:flex; gap:8px; flex-wrap:wrap; } .opts label { margin:0; display:flex; align-items:center; gap:5px; color:var(--text); cursor:pointer; }
.hero { text-align:center; padding:30px 16px 10px; } .hero h1 { font-size:2.2rem; } .hero p { color:var(--mute); max-width:640px; margin:0 auto 10px; }
footer { text-align:center; color:#64748b; font-size:.78rem; padding:20px 16px 30px; }
@media (max-width:820px) {
  .wrap { flex-direction:column; } .menu { position:static; flex:none; width:100%; display:flex; flex-wrap:wrap; gap:2px; }
  .menu a, .menu .linklike { width:auto; padding:7px 9px; font-size:.85rem; } .menu form { border:0; margin:0; padding:0; }
  .cols { grid-template-columns:1fr; } .skill { grid-template-columns:90px 1fr 60px auto; } .energy { width:100px; }
}