/* RHYTHM GAME RANKING 共通スタイル（配色=ゲーム内と同系: 黒/金=ランク/シアン=RATING・AP/青紫=ノーツ色） */
:root{
  --bg:#07070d; --panel:#101018; --panel2:#161624; --line:#26263a;
  --tx:#e8e8f2; --dim:#8a8aa0;
  --gold:#ffd44f; --cyan:#8ce6ff; --purple:#8c80ff; --green:#7dffa5; --red:#ff8ea6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.55}
.wrap{max-width:1080px;margin:0 auto;padding:18px 16px 60px}
header{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;padding:18px 2px 6px;border-bottom:1px solid var(--line)}
h1{font-size:26px;letter-spacing:.12em;font-weight:800}
h1 a{color:inherit;text-decoration:none}
h1 .accent{color:var(--purple)}
.updated{color:var(--dim);font-size:12px;margin-left:auto}
nav{display:flex;gap:8px;margin:14px 0 22px;flex-wrap:wrap}
nav a{color:var(--tx);text-decoration:none;font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
nav a.active{border-color:var(--purple);color:var(--purple)}
nav a.submit{margin-left:auto;border-color:#1d4a5c;color:var(--cyan)}
h2{font-size:16px;letter-spacing:.08em;color:var(--dim);margin:26px 0 10px;font-weight:600}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;color:var(--dim);text-align:left;font-weight:600;letter-spacing:.06em;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
td{padding:10px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.place{width:70px;font-weight:800;color:var(--dim);white-space:nowrap}
.p1 .place{color:var(--gold)} .p2 .place{color:#cfd6e4} .p3 .place{color:#e0a06a}
.up{color:var(--green);font-size:12px;font-weight:800;margin-left:5px}
.rating{color:var(--cyan);font-weight:800;font-size:16px}
.name{font-weight:600}
.name a{color:var(--tx);text-decoration:none;border-bottom:1px dotted var(--dim)}
.name a:hover{color:var(--purple);border-color:var(--purple)}
.sub{color:var(--dim);font-size:12px}
.tries{color:var(--dim);font-size:11px;margin-left:6px}
.songgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.song .head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line)}
.song .title{font-weight:700;font-size:15px}
.chip{font-size:11px;font-weight:800;border-radius:6px;padding:2px 8px;letter-spacing:.06em}
.chip.diff-h{background:#3a1220;color:var(--red)}
.chip.diff-n{background:#0e3226;color:var(--green)}
.chip.diff-e{background:#12203a;color:#8eb8ff}
.chip.lv{background:#221d46;color:var(--purple);font-size:12px}
.grade{font-weight:800;color:var(--gold);letter-spacing:.03em}
.grade.low{color:var(--dim)}
.ap{font-size:10px;font-weight:800;color:var(--cyan);border:1px solid #1d4a5c;border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.date{color:var(--dim);font-size:12px}
.profile .top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#221d46,#0e3226);display:flex;align-items:center;justify-content:center;font-size:22px}
.profile .pname{font-size:20px;font-weight:800}
.profile .prating{margin-left:auto;text-align:right}
.profile .prating .v{color:var(--cyan);font-weight:800;font-size:26px}
.profile .prating .l{color:var(--dim);font-size:11px;letter-spacing:.1em}
.statrow{display:flex;gap:26px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.stat .v{font-weight:800;font-size:16px}
.stat .l{color:var(--dim);font-size:11px}
.topmark{color:var(--purple);font-weight:800;font-size:11px}
.msgband{border-radius:8px;padding:10px 12px;font-size:13px;margin:14px 0;border:1px solid}
.msgband.warn{background:#3a2b00;color:var(--gold);border-color:#6b5200}
.msgband.err{background:#3a1220;color:var(--red);border-color:#6b2030}
.msgband.okb{background:#0e3226;color:var(--green);border-color:#1d5c3a}
textarea{width:100%;min-height:220px;background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:12px;font-family:Consolas,monospace;font-size:12px}
button{background:#221d46;color:var(--purple);border:1px solid var(--purple);border-radius:10px;padding:10px 22px;font-size:14px;font-weight:700;cursor:pointer}
button.primary{background:#0e2e3a;color:var(--cyan);border-color:#1d4a5c}
button:disabled{opacity:.4;cursor:default}
.steps{counter-reset:st}
.steps .step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0}
.steps .step::before{counter-increment:st;content:"手順 " counter(st);display:block;color:var(--purple);font-weight:800;font-size:12px;letter-spacing:.1em;margin-bottom:4px}
code,kbd{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-family:Consolas,monospace;font-size:12.5px}
footer{margin-top:34px;color:var(--dim);font-size:12px;border-top:1px solid var(--line);padding-top:14px}
footer b{color:var(--tx)}