[hidden] { display: none !important; }
:root {
  --bg: #14161c; --panel: #1d2029; --panel2: #262a35; --text: #e8eaf0; --muted: #9aa1b2;
  --accent: #5b8cff; --good: #3ecf8e; --ok: #f5c451; --bad: #ff6b6b;
  --kick: #ff5d5d; --snare: #ff9f43; --hat: #f7d154; --tom: #4fb3ff; --cym: #b388ff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(20,22,28,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #2a2e3a; }
.brand { background: none; border: 0; font-weight: 700; font-size: 18px; cursor: pointer; padding: 0; }
.brand small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.conn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--panel2); color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.on { background: rgba(62,207,142,.15); color: var(--good); }
.btn { background: var(--panel2); border: 1px solid #343a48; border-radius: 10px; padding: 7px 14px; cursor: pointer; font-size: 14px; }
.btn:hover:not(:disabled) { border-color: #4a5266; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: transparent; }
.btn.big { padding: 10px 22px; font-size: 16px; font-weight: 600; }
.btn.small { padding: 2px 8px; font-size: 13px; }
.hint { margin: 10px 16px 0; padding: 10px 14px; border-radius: 10px; background: rgba(245,196,81,.12); border: 1px solid rgba(245,196,81,.35); font-size: 14px; }
.hint .btn { margin-left: 8px; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.view h2 { margin: 6px 0 4px; font-size: 22px; }
.back { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; }
.hero h1 { margin: 8px 0 6px; font-size: 26px; }
.hero p { color: var(--muted); margin: 0 0 16px; }
.lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lessons li button { width: 100%; text-align: left; background: var(--panel); border: 1px solid #2a2e3a; border-radius: 14px; padding: 14px 16px; cursor: pointer; display: block; }
.lessons li button:hover { border-color: var(--accent); }
.lessons .t { font-weight: 600; display: block; }
.lessons .g { color: var(--muted); font-size: 13px; display: block; margin-top: 4px; }
.lessons .s { font-size: 13px; margin-top: 6px; display: block; color: var(--ok); }
.home-extra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.goal { margin: 4px 0; font-size: 16px; }
.tips { color: var(--muted); font-size: 14px; margin: 6px 0 14px; padding-left: 20px; }
.stage { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 20px; align-items: start; }
.stage.single { grid-template-columns: minmax(260px, 420px); }
@media (max-width: 760px) { .stage { grid-template-columns: 1fr; } }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; aspect-ratio: 1; background: #0e0f13; padding: 10px; border-radius: 16px; border: 1px solid #2a2e3a; touch-action: none; user-select: none; }
.pad { --c: var(--tom); --v: 0; position: relative; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--c) 18%, #1b1e26); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 6px; text-align: left; transition: background .25s, box-shadow .25s, transform .08s; min-width: 0; }
.pad, .je-grid button { touch-action: manipulation; }
.pad .n { font-size: 11px; color: var(--muted); }
.pad .l { font-size: 12px; font-weight: 600; line-height: 1.2; color: color-mix(in srgb, var(--c) 70%, #fff); overflow-wrap: anywhere; }
.pad.g-kick { --c: var(--kick); } .pad.g-snare { --c: var(--snare); } .pad.g-hat { --c: var(--hat); } .pad.g-cym { --c: var(--cym); }
.pad.hit { transition: none; background: color-mix(in srgb, var(--c) calc(45% + var(--v) * 55%), #1b1e26); transform: scale(.96); }
.pad.cue { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 80%, #fff), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.pad.target { box-shadow: 0 0 0 3px #fff, 0 0 24px var(--c); animation: pulse 1s infinite; }
.pad.dim { opacity: .35; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 6px var(--c); } }
.pads.mini { max-width: 240px; margin: 10px 0; }
.pads.mini .pad .l { font-size: 10px; }
.feedback { text-align: center; font-size: 22px; font-weight: 700; min-height: 36px; margin-top: 10px; }
.feedback.perfect { color: var(--good); } .feedback.good { color: var(--ok); } .feedback.bad { color: var(--bad); } .feedback.info { color: var(--muted); font-size: 16px; font-weight: 500; }
.practice { min-width: 0; }
.tour { background: var(--panel); border-radius: 14px; padding: 16px; font-size: 18px; }
.bar-info { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
#combo { color: var(--ok); font-weight: 600; }
.grid { background: var(--panel); border-radius: 14px; padding: 10px; overflow-x: auto; }
.grid .row { display: grid; grid-template-columns: 92px repeat(16, minmax(14px, 1fr)); gap: 3px; align-items: center; margin-bottom: 3px; }
.grid .lane { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.grid .lane b { color: var(--c); font-weight: 600; }
.grid .count { font-size: 11px; color: var(--muted); text-align: center; }
.grid .count.beat { color: var(--text); font-weight: 700; }
.grid .cell { height: 26px; border-radius: 5px; background: #23262f; }
.grid .cell.b0 { margin-left: 3px; }
.grid .cell.note { background: color-mix(in srgb, var(--c) 55%, #23262f); }
.grid .cell.perfect { background: var(--good); }
.grid .cell.good { background: var(--ok); }
.grid .cell.miss { background: var(--bad); }
.grid .cell.now, .grid .count.now { outline: 2px solid #fff; outline-offset: -1px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.bpm output { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; font-size: 18px; }
.check { color: var(--muted); font-size: 14px; display: inline-flex; gap: 4px; align-items: center; }
.result { margin-top: 14px; background: var(--panel); border: 1px solid #2a2e3a; border-radius: 14px; padding: 14px 16px; }
.result .stars { font-size: 28px; color: var(--ok); letter-spacing: 4px; }
.result .stats { color: var(--muted); font-size: 14px; }
.result .controls { margin-top: 10px; }
.card { background: var(--panel); border: 1px solid #2a2e3a; border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { color: var(--muted); font-size: 14px; margin: 6px 0; }
.card .btn { margin: 6px 6px 0 0; }
.status { color: var(--text) !important; font-weight: 600; }
.help ul { padding-left: 20px; font-size: 14px; color: var(--muted); }
.help li { margin: 6px 0; }
input[type=range] { width: 100%; max-width: 320px; }

/* jubeat */
.jb-opt { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 12px; color: var(--muted); }
.jb-opt select { background: var(--panel2); color: var(--text); border: 1px solid #343a48; border-radius: 8px; padding: 5px 8px; font: inherit; }
.jb-songs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.jb-song { background: var(--panel); border: 1px solid #2a2e3a; border-radius: 14px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.jb-song-t { display: flex; flex-direction: column; }
.jb-song-t span { color: var(--muted); font-size: 13px; }
.jb-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-lv { --lc: var(--good); min-width: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; border-radius: 10px; cursor: pointer; background: color-mix(in srgb, var(--lc) 12%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--lc) 55%, transparent); }
.jb-lv:hover { background: color-mix(in srgb, var(--lc) 24%, var(--panel2)); }
.jb-lv.lv-advanced { --lc: var(--ok); } .jb-lv.lv-extreme { --lc: var(--bad); }
.jb-lv .name { font-weight: 800; letter-spacing: .5px; color: var(--lc); font-size: 14px; }
.jb-lv .cnt, .jb-lv .best { font-size: 12px; color: var(--muted); }
.jb-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; max-width: 520px; margin: 0 auto 8px; }
#jb-title { color: var(--muted); font-size: 14px; }
#jb-combo { font-weight: 800; color: var(--ok); }
#jb-score { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jb-stage { position: relative; max-width: 520px; margin: 0 auto; }
.jb-pause-overlay { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 16px; border: 1px solid #444b5c; border-radius: 16px; background: rgba(14,15,19,.92); text-align: center; backdrop-filter: blur(5px); }
.jb-pause-overlay[hidden] { display: none; }
.jb-pause-overlay h2, .jb-pause-overlay p { margin: 0; }
#jb-combo.jb-combo-pop { animation: jbcombopop .55s ease-out; }
@keyframes jbcombopop { 0% { transform: scale(.65); opacity: .5; } 55% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
.pads.jb .pad { overflow: hidden; }
.pads.jb .pad .l { display: none; }
.pads.jb.bg-neon { background-color: #03131d; }
.pads.jb.bg-neon .pad { background: rgba(0, 11, 20, .56); border: 1px solid #55f5ff; box-shadow: inset 0 0 9px rgba(40, 226, 255, .22), 0 0 8px rgba(40, 226, 255, .28); }
.pads.jb.bg-sunset { background-image: linear-gradient(135deg, #ff9a62 0%, #d4548d 48%, #5045a8 100%); }
.pads.jb.bg-sunset .pad { background: rgba(20, 11, 38, .38); border: 1px solid rgba(255, 238, 222, .58); }
.pads.jb.bg-stars { background-color: #030817; background-image: radial-gradient(2px 2px at 18px 24px, #fff 98%, transparent), radial-gradient(1.5px 1.5px at 50px 18px, #b8d8ff 98%, transparent), radial-gradient(1px 1px at 38px 55px, #fff 98%, transparent), radial-gradient(1px 1px at 8px 58px, #9ec8ff 98%, transparent); background-size: 68px 68px; }
.pads.jb.bg-stars .pad { background: rgba(5, 12, 32, .48); border: 1px solid rgba(194, 216, 255, .46); }
.pads.jb.bg-contrast { background: #000; }
.pads.jb.bg-contrast .pad { background: #000; border: 1px solid #fff; }
.pads.jb.bg-custom .pad { background: rgba(0, 0, 0, .52); border: 1px solid rgba(255, 255, 255, .76); }
.jb-mk { position: absolute; inset: 9%; border-radius: 8px; pointer-events: none; opacity: 0; border: 3px solid #fff; background: color-mix(in srgb, var(--c) calc(var(--p, 0) * 75%), transparent); transform: scale(calc(.12 + var(--p, 0) * .88)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(18px, 6vw, 40px); color: #fff; text-shadow: 0 1px 5px #000, 0 0 3px #000; }
.pad.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.pad.on .jb-mk { opacity: 1; }
.pad.late .jb-mk { border-color: var(--bad); }
.jb-j { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(11px, 2.6vw, 17px); letter-spacing: .5px; pointer-events: none; opacity: 0; text-shadow: 0 1px 4px #000; }
.jb-j.show { animation: jbpop .45s ease-out forwards; }
.jb-j.k-perfect { color: #ffd43b; } .jb-j.k-great { color: var(--good); } .jb-j.k-good { color: var(--tom); } .jb-j.k-poor { color: var(--cym); } .jb-j.k-miss { color: var(--bad); }
@keyframes jbpop { 0% { opacity: 1; transform: scale(1.25); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-6px); } }
.jb-controls { display: flex; justify-content: center; margin-top: 12px; }
#jb-result { max-width: 520px; margin: 14px auto 0; text-align: center; }
.jb-rank { font-size: 54px; font-weight: 900; line-height: 1.1; color: var(--ok); }
.jb-rank.r-EXC, .jb-rank.r-SSS { color: #ffd43b; text-shadow: 0 0 18px rgba(255,212,59,.5); }
.jb-rank.r-D, .jb-rank.r-E { color: var(--muted); }
.jb-final { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jb-final .new, .jb-final .fc { font-size: 12px; padding: 2px 8px; border-radius: 999px; vertical-align: middle; background: rgba(62,207,142,.15); color: var(--good); }
.jb-final .fc { background: rgba(255,212,59,.15); color: #ffd43b; }

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.pads.jb.skin-ring .jb-mk { inset: 14%; border-radius: 50%; border-width: 4px; background: radial-gradient(circle, color-mix(in srgb, var(--c) calc(var(--p) * 90%), transparent) calc(var(--p) * 60%), transparent 0); transform: scale(calc(2.2 - var(--p) * 1.2)); }
.pads.jb.skin-shutter .jb-mk { inset: 6%; border: 2px solid color-mix(in srgb, #fff 45%, transparent); background: linear-gradient(to bottom, var(--c) calc(var(--p) * 50%), transparent 0, transparent calc(100% - var(--p) * 50%), var(--c) 0); transform: none; }
.pads.jb.skin-cross .jb-mk { inset: 10%; border: 0; border-radius: 0; background: linear-gradient(var(--c), var(--c)) center / 18% 100% no-repeat, linear-gradient(var(--c), var(--c)) center / 100% 18% no-repeat; transform: rotate(calc((1 - var(--p)) * 270deg)) scale(calc(.3 + var(--p) * .7)); opacity: calc(.35 + var(--p) * .65); }
.pads.jb.skin-cross .pad:not(.on) .jb-mk { opacity: 0; }
.pads.jb.skin-clock .jb-mk { inset: 12%; border-radius: 50%; border: 3px solid #fff; background: conic-gradient(var(--c) calc(var(--p) * 360deg), transparent 0); transform: none; }
.pads.jb.skin-count .jb-mk { inset: 10%; border-radius: 50%; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) calc(var(--p) * 60%), transparent); transform: scale(calc(.55 + var(--p) * .45)); text-shadow: 0 2px 6px #000; }
.pads.jb.no-judge .jb-j { display: none; }
.jb-ord { position: absolute; top: 4px; right: 7px; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.jb-settings summary { cursor: pointer; font-weight: 700; }
.jb-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.jb-set-grid label:not(.check) { display: flex; flex-direction: column; gap: 3px; }
.jb-set-grid output { color: var(--text); font-weight: 700; }
.jb-set-grid select, .jb-form input, .jb-form select, #jb-paste { background: var(--panel2); color: var(--text); border: 1px solid #343a48; border-radius: 8px; padding: 5px 8px; font: inherit; }
.jb-sub { margin: 12px 0 6px !important; color: var(--text) !important; font-weight: 600; }
.jb-note { font-size: 13px !important; color: var(--muted); }
.jb-skins { display: flex; flex-wrap: wrap; gap: 10px; }
.jb-skin { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel2); border: 2px solid transparent; border-radius: 12px; padding: 8px; cursor: pointer; font-size: 13px; }
.jb-skin.sel { border-color: var(--accent); }
.jb-look { min-width: 0; }
.jb-look-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 68px; height: 68px; gap: 2px; padding: 3px; border-radius: 9px; }
.jb-look-preview .pad { position: relative; display: block; min-width: 0; min-height: 0; border-radius: 5px; overflow: hidden; padding: 0; border: 1px solid #343a48; animation: jbprev 1.6s linear infinite; }
.jb-look-preview .pad .jb-mk { font-size: 24px; }
.jb-bgs { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.jb-bg { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px; max-width: 100%; border: 2px solid transparent; border-radius: 12px; background: var(--panel2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.jb-bg.sel { border-color: var(--accent); }
.jb-bg-controls { justify-content: flex-start; }
.jb-preset-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-preset-actions .btn { flex: 1 1 128px; }
@keyframes jbprev { 0% { --p: 0; } 85% { --p: 1; } 100% { --p: 1; } }
.jb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.jb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jb-empty { color: var(--muted); padding: 12px; }
.jb-lv.lv-edit { --lc: var(--cym); }
.jb-lv:disabled { opacity: .5; cursor: default; }
.jb-drop { border: 2px dashed #3a4152; border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); }
.jb-drop.over { border-color: var(--accent); background: rgba(91,140,255,.08); }
#jb-paste { width: 100%; font-family: ui-monospace, monospace; }
.jb-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; margin: 10px 0; font-size: 14px; color: var(--muted); }
.jb-form label { display: flex; flex-direction: column; gap: 3px; }
.jb-form small { font-size: 12px; }
.jb-warn { color: var(--ok) !important; display: block; font-size: 12px; }
.jb-err { color: var(--bad) !important; }
.jb-charts { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.jb-barnav b { margin: 0 4px; }
.je-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.je-step { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 4px; border-radius: 8px; }
.je-step.beat { background: rgba(255,255,255,.04); color: var(--text); }
.je-grid { display: grid; grid-template-columns: repeat(4, 16px); gap: 2px; }
.je-grid button { width: 16px; height: 16px; padding: 0; border-radius: 3px; border: 1px solid #3a4152; background: var(--panel2); cursor: pointer; }
.je-grid button.on { background: var(--hat); border-color: var(--hat); }
.jb-recbar { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,107,107,.12); color: var(--text); font-weight: 600; }

@media (max-width: 600px) {
  main { padding: 12px; }
  .topbar .brand, .topbar .conn { width: 100%; }
  .topbar .conn { justify-content: flex-start; min-width: 0; flex-wrap: wrap; }
  .jb-song { flex-direction: column; align-items: stretch; }
  .jb-song-t, .jb-levels { width: 100%; min-width: 0; }
  .jb-preset-actions { width: 100%; }
  .jb-preset-actions .btn { min-width: 0; }
  .jb-lv { flex: 1 1 95px; min-width: 0; }
  .jb-set-grid, .jb-form { grid-template-columns: minmax(0, 1fr); }
  .jb-set-grid > *, .jb-form > * { min-width: 0; }
  .jb-look, .jb-bgs, .jb-skins { max-width: 100%; min-width: 0; }
  .jb-stage { width: 100%; max-width: none; }
  #pads-jb { width: min(calc(100vw - 24px), 62vh); aspect-ratio: 1; }
  .jb-hud { min-width: 0; }
  #jb-title { min-width: 0; overflow-wrap: anywhere; }
  .jb-controls { flex-wrap: wrap; }
}