:root{
  --bg:#0e0d0b;
  --bg-2:#141310;
  --glass:rgba(255,252,240,.035);
  --glass-strong:rgba(255,252,240,.06);
  --line:rgba(235,220,180,.09);
  --line-strong:rgba(235,220,180,.18);
  --gold:#d4b06a;
  --gold-bright:#e8cd8f;
  --gold-dim:rgba(212,176,106,.45);
  --text:#f2ede1;
  --dim:rgba(242,237,225,.45);
  --dim-2:rgba(242,237,225,.28);
  --free:#a3bd8e;
  --shadow:0 20px 60px rgba(0,0,0,.5);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:
    radial-gradient(80% 50% at 50% -10%,rgba(212,176,106,.07),transparent 60%),
    radial-gradient(50% 30% at 90% 110%,rgba(212,176,106,.04),transparent 60%);
  background-attachment:fixed;
  color:var(--text);
  font-family:"SF Pro Display","PingFang SC","HarmonyOS Sans SC","Noto Sans SC",-apple-system,sans-serif;
  min-height:100dvh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:.01em;
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ================= 首启 gate ================= */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#181510 0%,#0c0b09 70%);
  animation:fadeIn .8s var(--ease)}
.gate-inner{text-align:center;max-width:400px;width:100%;animation:riseIn 1s var(--ease)}
.gate-logo{
  font-size:56px;font-weight:600;letter-spacing:.42em;text-indent:.42em;
  background:linear-gradient(160deg,#f4e4bb 10%,var(--gold) 50%,#9a7c3e 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.gate-sub{color:var(--dim);margin:14px 0 52px;font-size:13px;letter-spacing:.24em;text-indent:.24em;font-weight:300}
.gate-q{font-size:22px;font-weight:500;margin-bottom:28px;letter-spacing:.06em}
.gate-choices{display:flex;flex-direction:column;gap:14px}
.gate-choice{
  display:flex;flex-direction:column;gap:5px;align-items:center;padding:26px 16px;
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .35s var(--ease),border-color .35s,background .35s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow);
}
.gate-choice:active{transform:scale(.97)}
.gate-choice:hover{border-color:var(--gold-dim);background:var(--glass-strong)}
.gc-icon{font-size:28px;opacity:.95}
.gc-title{font-size:19px;font-weight:600;letter-spacing:.04em}
.gc-desc{font-size:12.5px;color:var(--dim);font-weight:300}
.gate-note{margin-top:30px;font-size:11.5px;color:var(--dim-2);letter-spacing:.08em}

/* ================= 顶栏 ================= */
#topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:rgba(14,13,11,.72);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.topbar-title{
  font-size:17px;font-weight:600;letter-spacing:.34em;text-indent:.34em;
  background:linear-gradient(160deg,#f4e4bb,var(--gold) 60%,#9a7c3e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-btn{
  color:var(--dim);padding:8px 18px;border-radius:22px;font-size:13px;font-weight:500;
  border:1px solid transparent;transition:all .3s var(--ease);
}
.nav-btn.active{border-color:var(--gold-dim);color:var(--gold-bright);background:rgba(212,176,106,.08)}

.view{max-width:640px;margin:0 auto;padding:26px 20px 110px;animation:viewIn .5s var(--ease)}

/* ================= 地图 ================= */
.map-head{margin-bottom:28px}
.badge-row{display:flex;gap:10px;align-items:center}
.level-badge{
  background:linear-gradient(135deg,var(--gold-bright),#a8853f);
  color:#171408;font-weight:600;font-size:12px;padding:6px 16px;border-radius:18px;letter-spacing:.05em;
  box-shadow:0 4px 18px rgba(212,176,106,.25);
}
.mode-chip{font-size:11.5px;color:var(--dim);border:1px solid var(--line);padding:5px 12px;border-radius:16px;letter-spacing:.05em}
.map-sub{color:var(--dim);font-size:13px;margin-top:14px;font-weight:300;letter-spacing:.03em}
.station{margin-bottom:34px}
.station-head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:16px;position:relative}
.station-head::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent 70%)}
.station-lv{color:var(--gold-bright);font-size:15px;font-weight:600;white-space:nowrap;letter-spacing:.04em}
.station-era{color:var(--dim-2);font-size:11.5px;letter-spacing:.06em}
.piece-card{
  display:flex;align-items:center;gap:16px;padding:18px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:10px;width:100%;text-align:left;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.piece-card:active{transform:scale(.98)}
.piece-card:hover{border-color:var(--line-strong);background:var(--glass-strong)}
.pc-key{
  width:13px;height:54px;border-radius:3px 3px 6px 6px;flex:none;
  background:linear-gradient(#f8f3e6,#cfc3a4);
  box-shadow:0 4px 12px rgba(0,0,0,.55),inset 0 -6px 8px -6px rgba(0,0,0,.28);
  transition:transform .3s var(--ease);
}
.piece-card:hover .pc-key{transform:translateY(-2px)}
.piece-card.locked .pc-key{background:linear-gradient(#3d392f,#2b2820);box-shadow:none}
.pc-composer{font-size:11.5px;color:var(--dim);letter-spacing:.05em;font-weight:400}
.pc-title{font-size:16px;font-weight:600;margin:3px 0 4px;letter-spacing:.02em}
.pc-focus{font-size:11.5px;color:rgba(212,176,106,.75);font-weight:300;letter-spacing:.02em}
.piece-card.locked{opacity:.45}
.pc-state{margin-left:auto;font-size:11px;color:var(--dim-2);white-space:nowrap;letter-spacing:.06em;font-weight:400}
.piece-card.free .pc-state{color:var(--free)}

/* ================= 音色空间 ================= */
.space-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.back-btn{
  color:var(--text);width:40px;height:40px;border-radius:50%;font-size:17px;flex:none;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);transition:all .3s var(--ease);
}
.back-btn:hover{border-color:var(--gold-dim)}
.piece-title{font-size:20px;font-weight:600;letter-spacing:.02em}
.piece-meta{font-size:12px;color:var(--dim);margin-top:4px;font-weight:300;letter-spacing:.03em}

.visualizer-wrap{
  position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#scope{display:block;width:100%;height:96px}
.scope-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--dim-2);font-size:12px;letter-spacing:.14em;pointer-events:none;transition:opacity .6s;font-weight:300}

/* 五线谱卡 */
.score-card,.markings-card,.params,.me-card{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.score-card{padding:18px;margin-bottom:14px}
.score-title{font-size:11.5px;color:var(--gold);letter-spacing:.2em;margin-bottom:14px;font-weight:500}
#scoreCanvas{width:100%;height:150px;display:block;border-radius:8px;
  box-shadow:0 8px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.06)}
.score-cap{font-size:10.5px;color:var(--dim-2);margin-top:10px;text-align:center;letter-spacing:.08em;font-weight:300}
.markings-card{padding:18px;margin-bottom:14px}
#markingsRow{display:flex;flex-wrap:wrap;gap:9px}
.marking{
  display:inline-flex;flex-direction:column;align-items:center;
  background:var(--glass-strong);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 16px;min-width:82px;transition:border-color .3s;
}
.marking:hover{border-color:var(--gold-dim)}
.marking .mk-sym{font-style:italic;font-size:14px;color:var(--gold-bright);letter-spacing:.02em}
.marking .mk-zh{font-size:11.5px;color:var(--text);margin-top:4px;font-weight:400}
.marking .mk-tip{font-size:10px;color:var(--dim-2);margin-top:3px;text-align:center;font-weight:300;max-width:130px}

/* 琴键 */
.keyboard{display:flex;height:176px;user-select:none;touch-action:none;filter:drop-shadow(0 14px 28px rgba(0,0,0,.5))}
.wkey{
  flex:1;background:linear-gradient(#faf6ea 0%,#e9e2cd 82%,#d6cdae 100%);
  border:1px solid #1c1a15;border-radius:0 0 7px 7px;position:relative;margin:0 1.5px;
  transition:background .08s;
}
.wkey:active,.wkey.on{background:linear-gradient(#efe1b4,#d3ae52);box-shadow:inset 0 -5px 12px rgba(154,124,62,.55)}
.wkey .kname{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:9.5px;color:#8a7f65;letter-spacing:.03em}
.bkey{
  position:absolute;width:6.4%;height:60%;
  background:linear-gradient(#443f34 0%,#211e17 40%,#12100c 100%);
  border-radius:0 0 5px 5px;z-index:2;margin:0 1.5px;
  box-shadow:0 6px 14px rgba(0,0,0,.6);
}
.bkey:active,.bkey.on{background:linear-gradient(#a07f37,#5b451a)}
.kb-hint{font-size:12px;color:var(--dim);margin:14px 0 18px;text-align:center;font-weight:300;letter-spacing:.06em}
.mini-btn{color:var(--gold-bright);border:1px solid var(--gold-dim);border-radius:18px;padding:5px 16px;font-size:12px;
  transition:all .3s var(--ease);margin-left:6px}
.mini-btn:hover{background:rgba(212,176,106,.1)}

/* 参数 */
.params{display:flex;flex-direction:column;gap:18px;padding:20px}
.param-label{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:10px;color:var(--text);font-weight:400;letter-spacing:.04em}
.param-val{color:var(--gold-bright);font-variant-numeric:tabular-nums;font-weight:500}
input[type=range]{
  width:100%;height:28px;accent-color:var(--gold);cursor:pointer;
  -webkit-appearance:none;background:linear-gradient(90deg,var(--gold-dim),var(--gold-dim)) no-repeat,
  rgba(255,252,240,.08) no-repeat;
  background-size:var(--fill,50%) 3px,100% 3px;background-position:0 center,0 center;border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6ead0,#d4b06a 60%,#8a6e34);
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 1px rgba(212,176,106,.3);
  transition:transform .15s var(--ease);
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}

/* A/B 行 */
.ab-row{display:flex;gap:10px;margin-top:18px}
.ab-btn{
  flex:1;padding:14px 6px;color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;font-weight:500;letter-spacing:.04em;
  background:var(--glass);backdrop-filter:blur(10px);
  transition:all .3s var(--ease);
}
.ab-btn:hover{border-color:var(--line-strong)}
.ab-btn.primary{
  background:linear-gradient(160deg,var(--gold-bright),#b08c46);color:#171408;font-weight:600;
  box-shadow:0 8px 26px rgba(212,176,106,.3);
}
.ab-btn.primary:active{transform:scale(.97)}
.master-btn{
  flex:1.1;padding:14px 6px;color:var(--gold-bright);border:1px solid var(--gold-dim);
  border-radius:var(--r-sm);font-size:13px;letter-spacing:.04em;font-weight:500;
  transition:all .3s var(--ease);
}
.master-btn:hover{background:rgba(212,176,106,.08)}
.ab-status{text-align:center;font-size:12px;color:var(--dim);margin-top:12px;min-height:18px;font-weight:300;letter-spacing:.04em}

/* 音色美学 */
.aesthetics-card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(212,176,106,.10),rgba(212,176,106,.02) 45%,var(--glass) 100%);
  border:1px solid var(--gold-dim);border-radius:var(--r-lg);
  padding:22px;margin-top:18px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
}
.aesthetics-card::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.aesthetics-text{font-size:14px;line-height:2;color:var(--text);font-weight:300;text-align:justify}
.aesthetics-text .aes-em{color:var(--gold-bright);font-weight:500}
.aesthetics-text b{color:var(--gold-bright);font-weight:500}
.preset-btn{
  margin-top:18px;width:100%;padding:14px;border:1px solid var(--gold);color:var(--gold-bright);
  border-radius:var(--r-sm);font-size:13.5px;letter-spacing:.08em;font-weight:500;
  transition:all .35s var(--ease);
}
.preset-btn:hover{background:rgba(212,176,106,.12);box-shadow:0 6px 22px rgba(212,176,106,.18)}
.preset-btn:active{transform:scale(.98)}

/* ================= 我的 ================= */
.me-head{font-size:26px;font-weight:600;margin-bottom:24px;letter-spacing:.03em}
.me-card{padding:20px;margin-bottom:14px}
.me-label{font-size:11.5px;color:var(--dim);margin-bottom:14px;letter-spacing:.22em;font-weight:500}
.mode-switch{
  background:var(--glass-strong);border:1px solid var(--gold-dim);color:var(--gold-bright);
  border-radius:var(--r-sm);padding:12px 18px;font-size:13.5px;font-weight:500;
  transition:all .3s var(--ease);width:100%;
}
.mode-switch:hover{background:rgba(212,176,106,.1)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;margin-bottom:16px}
.stat-num{font-size:30px;color:var(--gold-bright);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-name{font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:.1em;font-weight:300}
#chart{width:100%;height:140px;border-radius:8px}
.chart-cap{text-align:center;font-size:10.5px;color:var(--dim-2);margin-top:8px;letter-spacing:.1em;font-weight:300}
.member-status{font-size:13.5px;margin-bottom:14px;font-weight:300;letter-spacing:.03em}
.pay-btn{
  width:100%;padding:15px;
  background:linear-gradient(160deg,var(--gold-bright),#b08c46);color:#171408;
  font-weight:600;border-radius:var(--r-sm);font-size:14.5px;letter-spacing:.04em;
  box-shadow:0 8px 26px rgba(212,176,106,.28);transition:all .3s var(--ease);
}
.pay-btn:active{transform:scale(.98)}
.pay-note{font-size:10.5px;color:var(--dim-2);margin-top:12px;text-align:center;letter-spacing:.06em;font-weight:300}

/* ================= 弹层 / toast ================= */
.modal{position:fixed;inset:0;background:rgba(8,7,5,.66);display:flex;align-items:center;justify-content:center;
  z-index:60;padding:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .25s var(--ease)}
.modal-box{
  background:rgba(30,27,22,.9);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:30px;max-width:380px;width:100%;text-align:center;
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);
  animation:sheetIn .4s var(--ease);
}
.modal-title{font-size:19px;font-weight:600;margin-bottom:14px;letter-spacing:.04em}
.modal-text{font-size:14px;line-height:1.9;color:var(--text);margin-bottom:20px;font-weight:300}
.modal-text b{color:var(--gold-bright);font-weight:600}
.modal-close{color:var(--dim);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 26px;margin-top:10px;font-size:13px;
  transition:all .3s}
.modal-close:hover{border-color:var(--line-strong);color:var(--text)}
.toast{
  position:fixed;bottom:76px;left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(30,27,22,.92);border:1px solid var(--gold-dim);color:var(--text);
  padding:11px 24px;border-radius:24px;font-size:13px;z-index:70;font-weight:400;letter-spacing:.03em;
  backdrop-filter:blur(20px);box-shadow:var(--shadow);
  opacity:0;transition:all .4s var(--ease);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= 动效 ================= */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}