/* ===== 基础 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #12071f;
  color:#fff;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.app { max-width:480px; margin:0 auto; min-height:100vh; position:relative; }

/* ===== 主界面（深色科技风） ===== */
#mainView {
  background: radial-gradient(circle at 50% 30%, #2a1450 0%, #15092a 45%, #0d0418 100%);
  padding: 20px 24px 40px;
  display:flex; flex-direction:column;
}

/* 顶部 */
.topbar { display:flex; align-items:flex-start; justify-content:space-between; }
.brand h1 { font-size:26px; font-weight:800; letter-spacing:1px;
  background:linear-gradient(135deg,#c084fc,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sub { font-size:12px; color:#9a8ec8; letter-spacing:2px; }
.icon-btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  color:#e0d8ff; width:40px; height:40px; border-radius:12px; font-size:20px; cursor:pointer;}

/* 剩余次数 */
.quota { text-align:center; margin-top:12px; font-size:13px; color:#c3b6ec; }
.quota b { color:#4ade80; font-size:16px; }

/* 声波区 */
.wave-section { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 10px 0 0; min-height:330px; }
#waveCanvas { width:260px; height:260px; display:block; }
.wave-hint { font-size:13px; color:#b9acdf; text-align:center; margin-top:8px; line-height:1.6; padding:0 20px;}

/* 来源选择 */
.source-row { display:flex; gap:12px; justify-content:center; margin:14px 0; }
.chip { display:flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.04); font-size:14px; color:#fff; cursor:pointer; border:1.5px solid transparent;}
.chip .dot { width:8px; height:8px; border-radius:50%; }
.chip-green.active,.chip-green:hover { border-color:#4ade80; }
.chip-green .dot { background:#4ade80; }
.chip-orange.active,.chip-orange:hover { border-color:#fb923c; }
.chip-orange .dot { background:#fb923c; }

/* 性别选择 */
.voice-select { display:flex; gap:14px; justify-content:center; margin:6px 0 4px; }
.voice-btn { flex:1; max-width:180px; padding:13px 0; border-radius:14px; font-size:16px; font-weight:600;
  background:rgba(255,255,255,.05); color:#fff; cursor:pointer; border:2px solid transparent; transition:.2s;}
.female-btn { border-color:#f472b6; }
.female-btn:hover,.female-btn.selected { background:#f472b6; box-shadow:0 4px 18px rgba(244,114,182,.4); }
.male-btn { border-color:#60a5fa; }
.male-btn:hover,.male-btn.selected { background:#60a5fa; box-shadow:0 4px 18px rgba(96,165,250,.4); }

.tip { text-align:center; font-size:13px; color:#ffb37a; min-height:20px; margin:8px 0; }

/* 录音区 */
.record-area { display:flex; flex-direction:column; align-items:center; margin-top:6px; }
.timer { font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; letter-spacing:2px; }
.record-btn { width:84px; height:84px; border-radius:50%; border:none; cursor:pointer; margin-top:16px;
  background:linear-gradient(145deg,#c084fc,#7c3aed);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 0 0 8px rgba(168,85,247,.18), 0 8px 30px rgba(124,58,237,.5); transition:.15s;}
.record-btn.recording { background:linear-gradient(145deg,#f87171,#dc2626); box-shadow:0 0 0 8px rgba(239,68,68,.25); animation:pulse 1.2s infinite; }
.record-btn svg { width:34px; height:34px; fill:#fff; stroke:#fff; stroke-width:1.6; }
.record-btn span { font-size:11px; color:#fff; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

/* ===== 结果页（粉蓝渐变软萌风） ===== */
#resultView {
  background: linear-gradient(160deg,#f9cbee 0%,#dbeafe 50%,#c7d2fe 100%);
  color:#4a3270; padding:20px 20px 40px;
}
#resultView .brand h1 { background:linear-gradient(135deg,#7c3aed,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent;}
#resultView .icon-btn { color:#7c3aed; border-color:rgba(124,58,237,.3); }

.card { background:rgba(255,255,255,.7); border-radius:20px; padding:20px;
  box-shadow:0 6px 24px rgba(124,58,237,.12); margin-bottom:16px; backdrop-filter:blur(8px);}

/* 加载 */
.loading { text-align:center; padding:60px 20px; color:#7c3aed; }
.spinner { width:48px; height:48px; border-radius:50%; border:4px solid rgba(124,58,237,.15);
  border-top-color:#7c3aed; margin:0 auto 18px; animation:spin 1s linear infinite;}
@keyframes spin { to{transform:rotate(360deg);} }

/* 结果主卡 */
.result-main { text-align:center; position:relative; padding-top:30px;}
.seal { position:absolute; top:14px; right:14px; background:#ef4444; color:#fff; border-radius:8px;
  padding:6px 10px; font-size:11px; font-weight:700; transform:rotate(6deg); font-family:serif;}
.seal span{ display:block; font-size:9px; opacity:.9;}
.result-icon { font-size:52px; display:flex; justify-content:center;
  background:radial-gradient(circle at 50% 40%,#fff,#e9d5ff); border-radius:50%; width:86px;height:86px; margin:0 auto 12px; align-items:center; box-shadow:0 8px 24px rgba(124,58,237,.25);}
.result-voice { font-size:36px; font-weight:800; color:#7c3aed; }
.result-meta { display:flex; gap:8px; justify-content:center; margin:12px 0 18px; flex-wrap:wrap;}
.meta-tag { background:#ede9fe; color:#7c3aed; padding:4px 12px; border-radius:999px; font-size:13px;}
/* 评分环 */
.gauge { width:150px; height:150px; margin:6px auto 14px; border-radius:50%;
  background: conic-gradient(#f472b6 0%,#fb923c 25%,#facc15 45%,#4ade80 70%,#60a5fa 90%,#f472b6 100%);
  display:flex; align-items:center; justify-content:center; padding:10px;}
.gauge-num { background:#fff; width:130px;height:130px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; font-size:44px;font-weight:800;color:#7c3aed; line-height:1;}
.gauge small { font-size:13px; color:#9a8ec8; margin-top:4px;}
.result-desc { font-size:15px; color:#6b21a8; }

/* 分析卡 */
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.card-title{ font-size:15px; font-weight:700; color:#5b21b6;}
.tech { font-size:11px; background:#fde68a; color:#92400e; padding:3px 8px; border-radius:6px; font-weight:600;}
.feature-rows { display:grid; gap:8px; }
.frow { display:flex; justify-content:space-between; font-size:14px; color:#4a3270; padding:6px 0; border-bottom:1px dashed rgba(124,58,237,.15);}
.frow b{ color:#7c3aed; }
.conf-bar{ height:10px; background:#e9d5ff; border-radius:99px; overflow:hidden; margin-top:12px;}
.conf-fill { height:100%; background:linear-gradient(90deg,#4ade80,#34d399); border-radius:99px; transition:width 1s;}
.conf-label { text-align:right; font-size:12px; color:#4a3270; margin-top:5px;}

/* 特征标签 */
.tag-row { display:flex; gap:10px; flex-wrap:wrap; }
.tag-row span { padding:8px 14px; border-radius:999px; color:#fff; font-size:14px; font-weight:600;}
.tag-row span:nth-child(3n+1){ background:#ef4444; }
.tag-row span:nth-child(3n+2){ background:#22c55e; }
.tag-row span:nth-child(3n+3){ background:#a855f7; }

/* 完成按钮 */
.done-btn { width:100%; padding:15px; border:none; border-radius:16px; background:linear-gradient(135deg,#4ade80,#22c55e);
  color:#fff; font-size:17px; font-weight:700; cursor:pointer; box-shadow:0 8px 24px rgba(34,197,94,.35);}

.err { background:#fecaca; color:#991b1b; padding:20px; border-radius:16px; text-align:center; }