/* ====== 珠宝外贸英语 — V4 Dashboard Dark Theme ====== */
:root {
  --bg: #0D0D28;
  --bg-card: #18183C;
  --bg-card2: #1C1C42;
  --bg-input: #15153A;
  --text: #FFFFFF;
  --text2: #8B8BA8;
  --text3: #5E5E7E;
  --accent: #5E5CF6;
  --accent-soft: rgba(94,92,246,0.12);
  --cyan: #64CFF6;
  --cyan-soft: rgba(100,207,246,0.12);
  --green: #34D399;
  --green-soft: rgba(52,211,153,0.12);
  --orange: #F59E0B;
  --red: #F87171;
  --border: #1E1E48;
  --border-l: #1A1A42;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font);
  background: #0A0A20; color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.nav-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(13,13,40,0.92); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(94,92,246,0.08);
  position:sticky; top:0; z-index:100;
}
.hdr-title { font-size:17px; font-weight:700; letter-spacing:1.2px;
  background:linear-gradient(135deg,#fff,#C8C4FF,#8B8BFF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hdr-sub { font-size:12px; color:var(--accent); display:none; margin-left:8px; }
.hdr-sub.on { display:inline; }
.hdr-badge { font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(94,92,246,0.15);
  padding:5px 12px; border-radius:16px; cursor:pointer; }

/* Tab bar */
.tab-bar {
  display:flex; justify-content:space-around;
  background:rgba(13,13,40,0.94); backdrop-filter:blur(20px);
  border-top:1px solid rgba(94,92,246,0.08);
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  padding:4px; padding-bottom:env(safe-area-inset-bottom);
}
.tab-item { display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 10px; border:none; background:none; cursor:pointer; }
.tab-svg { width:20px; height:20px; stroke:#4A4A72; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tab-item.active .tab-svg { stroke:var(--accent); }
.tab-label { font-size:10px; font-weight:600; color:#4A4A72; }
.tab-item.active .tab-label { color:var(--accent); }

/* Views */
.view { display:none; padding:0 16px 100px; }
.view.active { display:block; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(3px);} to{opacity:1;transform:translateY(0);} }

/* Home Dashboard */
.greet-row { display:flex; align-items:baseline; justify-content:space-between; margin:16px 0; }
.greet-en { font-family:'Playfair Display', Georgia, serif; font-size:30px; font-weight:500;
  font-style:italic; letter-spacing:0.6px; color:var(--text); display:block; }
.greet-cn { font-size:15px; color:var(--text2); letter-spacing:1.5px; }
.streak-tag { font-size:11px; font-weight:600; color:var(--cyan);
  background:var(--cyan-soft); border:1px solid rgba(100,207,246,0.15);
  padding:4px 10px; border-radius:14px; }
.kpi-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px; }
.kpi-box { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius); padding:14px 12px; text-align:center; }
.kpi-val { font-size:26px; font-weight:900; letter-spacing:-1px; display:block; }
.clr-accent { color:var(--accent); } .clr-cyan { color:var(--cyan); } .clr-green { color:var(--green); }
.kpi-lbl { font-size:10px; color:var(--text3); margin-top:4px; display:block; }

.donut-card { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-lg); padding:18px 16px; margin-bottom:14px;
  display:flex; align-items:center; gap:16px; }
.donut-ring { position:relative; width:100px; height:100px; flex-shrink:0; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.dc-num { font-size:28px; font-weight:900; color:var(--cyan); }
.dc-lbl { font-size:10px; color:var(--text3); }
.donut-meta h3 { font-size:14px; font-weight:700; margin-bottom:3px; }
.donut-meta p { font-size:11px; color:var(--text3); margin-bottom:10px; }
.legend-row { display:flex; align-items:center; gap:6px; font-size:11px; margin-bottom:5px; }
.leg-dot { width:7px; height:7px; border-radius:2px; }
.leg-dot.accent { background:var(--accent); } .leg-dot.cyan { background:var(--cyan); }
.leg-val { color:var(--text); font-weight:700; margin-left:auto; }

.sec-head { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; }
.sec-head span { font-size:12px; font-weight:700; text-transform:uppercase;
  color:var(--text2); letter-spacing:0.5px; }

.dim-bars { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; }
.dim-row { display:flex; align-items:center; gap:10px; padding:7px 0; }
.dim-row+ .dim-row { border-top:1px solid rgba(255,255,255,0.03); }
.dim-name { width:56px; font-size:11px; font-weight:600; color:var(--text2); text-align:right; }
.dim-track { flex:1; height:5px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.dim-fill { height:100%; border-radius:3px; }
.dim-fill.hi { background:linear-gradient(90deg,var(--accent),#7C7AF8); }
.dim-fill.mi { background:linear-gradient(90deg,var(--accent),var(--orange)); }
.dim-val { width:30px; font-size:12px; font-weight:800; text-align:right; }
.dim-val.hi { color:var(--accent); } .dim-val.mi { color:var(--orange); }

.trend-card { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; }
.trend-hdr { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.trend-total { font-size:26px; font-weight:900; color:var(--accent); }
.trend-unit { font-size:11px; color:var(--text3); }
.trend-delta { font-size:11px; font-weight:700; padding:3px 8px; border-radius:8px; }
.trend-delta.up { background:var(--green-soft); color:var(--green); }
.trend-bars { display:flex; align-items:flex-end; gap:5px; height:70px; }
.trend-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  height:100%; justify-content:flex-end; }
.trend-bar { width:100%; border-radius:3px 3px 1px 1px; }
.trend-bar.d { background:rgba(94,92,246,0.15); }
.trend-bar.h { background:var(--accent); box-shadow:0 0 8px rgba(94,92,246,0.4); }
.trend-bar-lbl { font-size:10px; color:var(--text3); }

.task-list { margin-bottom:8px; }
.task-row { display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.03); cursor:pointer; }
.task-dot { width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(94,92,246,0.3); display:flex; align-items:center;
  justify-content:center; }
.task-row.done .task-dot { background:var(--accent); border-color:var(--accent); }
.task-row.done .task-dot::after { content:'✓'; font-size:10px; font-weight:800; color:#fff; }
.task-body { flex:1; }
.task-title { font-size:13px; font-weight:500; }
.task-row.done .task-title { color:var(--text3); text-decoration:line-through; }
.task-sub { font-size:10px; color:var(--text3); }

.btn-resume { display:block; width:100%; margin-top:14px; padding:13px;
  background:linear-gradient(135deg,var(--accent),#7C6FF7); border:none;
  color:#fff; font-size:14px; font-weight:700; cursor:pointer;
  border-radius:var(--radius); box-shadow:0 4px 20px rgba(94,92,246,0.3); }
.btn-resume:active { opacity:0.9; }

/* Practice */
.practice-empty { display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:55vh; text-align:center; }
.empty-h { font-size:19px; font-weight:700; margin-bottom:5px; }
.empty-p { font-size:13px; color:var(--text3); margin-bottom:20px; }
.btn-gold-outline { padding:10px 22px; background:transparent;
  border:1.5px solid var(--accent); color:var(--accent); font-size:13px;
  font-weight:600; cursor:pointer; border-radius:var(--radius); }
.btn-gold-outline:active { background:var(--accent); color:#fff; }
.practice-empty.hidden, .phase-see, .phase-try, .phase-analyze { display:none; }
.practice-empty.hidden+.phase-see, .phase-see.on, .phase-try.on, .phase-analyze.on { display:block; }

.phase-tag { display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.8px;
  text-transform:uppercase; padding:3px 9px; border-radius:4px; margin-bottom:10px; }
.phase-tag.see { background:rgba(94,92,246,0.12); color:var(--accent); }
.phase-tag.try { background:var(--cyan-soft); color:var(--cyan); }
.phase-tag.analyze { background:rgba(167,139,250,0.12); color:#A78BFA; }

.see-title { font-size:18px; font-weight:800; margin-bottom:10px; }
.see-setting { background:var(--bg-card); padding:12px 14px; border-radius:var(--radius-sm);
  font-size:12px; color:var(--text2); border-left:2px solid var(--accent); margin-bottom:14px; }
.see-dialogues { margin-bottom:14px; }
.demo-msg { padding:9px 13px; border-radius:10px; font-size:12px; margin-bottom:7px;
  line-height:1.5; max-width:88%; }
.demo-msg.client { background:var(--bg-card); border:1px solid var(--border-l); }
.demo-msg.you { background:rgba(94,92,246,0.15); border:1px solid rgba(94,92,246,0.2);
  margin-left:auto; }
.demo-role { font-size:10px; font-weight:600; color:var(--text3); margin-bottom:2px; }
.demo-cn { font-size:11px; color:var(--text3); margin-top:4px;
  padding-top:4px; border-top:1px solid rgba(255,255,255,0.04); }

.key-sentences { margin-bottom:10px; }
.ks-item { padding:8px 12px; border-left:2px solid var(--accent);
  background:rgba(94,92,246,0.08); border-radius:0 6px 6px 0;
  font-size:12px; margin-bottom:4px; }
.ks-en { font-weight:600; } .ks-cn { font-size:11px; color:var(--text3); }

.btn-start { display:block; width:100%; padding:13px;
  background:linear-gradient(135deg,var(--accent),#7C6FF7); border:none;
  color:#fff; font-size:14px; font-weight:700; cursor:pointer;
  border-radius:var(--radius); box-shadow:0 4px 20px rgba(94,92,246,0.3);
  position:sticky; bottom:0; }
.btn-start:active { opacity:0.85; }

/* Chat TRY */
.round-cnt { display:block; text-align:center; font-size:10px; color:var(--text3); margin:4px 0; }
.chat-stream { display:flex; flex-direction:column; gap:10px; padding-bottom:4px; }
.chat-msg { display:flex; flex-direction:column; max-width:84%; }
.chat-msg.client { align-self:flex-start; } .chat-msg.you { align-self:flex-end; }
.chat-role { font-size:10px; font-weight:600; color:var(--text3); margin-bottom:2px; }
.chat-msg.you .chat-role { text-align:right; }
.chat-bubble { padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; }
.chat-msg.client .chat-bubble { background:var(--bg-card); border:1px solid var(--border-l);
  border-bottom-left-radius:3px; }
.chat-msg.you .chat-bubble { background:linear-gradient(135deg,var(--accent),#7C6FF7);
  color:#fff; border-bottom-right-radius:3px; }

.chat-bar { display:flex; align-items:flex-end; gap:8px; padding:10px 0;
  position:sticky; bottom:0; background:var(--bg); }
.chat-bar textarea { flex:1; padding:10px 14px; border:1px solid var(--border);
  border-radius:18px; font-size:14px; font-family:var(--font); color:var(--text);
  background:var(--bg-input); outline:none; resize:none; line-height:1.4; }
.chat-bar textarea:focus { border-color:var(--accent); }
.btn-mic { width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-card); font-size:16px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; }
.btn-mic.listening { background:var(--red); border-color:var(--red); }
.btn-send { width:40px; height:40px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:18px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; }
.btn-eval { display:block; width:100%; padding:11px; margin:8px 0;
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius);
  font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 16px rgba(94,92,246,0.3); }

/* Analyze */
.score-big { display:block; text-align:center; font-size:52px; font-weight:900;
  color:var(--accent); margin:14px 0 16px; }
.assess-cards { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.assess-card { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-sm); padding:11px 13px; }
.assess-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.assess-dim { font-size:12px; font-weight:600; }
.assess-score { font-size:17px; font-weight:900; }
.assess-score.high { color:var(--green); } .assess-score.mid { color:var(--orange); } .assess-score.low { color:var(--red); }
.assess-bar { height:3px; background:rgba(255,255,255,0.05); border-radius:2px; margin-bottom:3px; }
.assess-bar-fill { height:100%; border-radius:2px; }
.assess-bar-fill.high { background:var(--green); } .assess-bar-fill.mid { background:var(--orange); }
.assess-note { font-size:10px; color:var(--text3); }

.tip-box { background:rgba(94,92,246,0.08); border-radius:var(--radius-sm);
  padding:11px 13px; margin:10px 0; border-left:2px solid var(--accent);
  font-size:11px; color:var(--text2); line-height:1.5; }
.tip-box strong { display:block; font-size:10px; font-weight:700; color:var(--accent);
  text-transform:uppercase; margin-bottom:2px; }
.analyze-actions { display:flex; gap:8px; position:sticky; bottom:0;
  background:var(--bg); padding:10px 0; }
.btn-again { flex:1; padding:11px; background:transparent; border:1.5px solid var(--border);
  color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; border-radius:var(--radius); }
.btn-next { flex:1; padding:11px; background:var(--accent); color:#fff; border:none;
  font-size:12px; font-weight:700; cursor:pointer; border-radius:var(--radius); }

/* Flashcard */
.fc-wrap { display:flex; flex-direction:column; align-items:center; padding:16px 0; }
.fc-card { width:100%; height:310px; position:relative; cursor:pointer;
  perspective:1200px; margin-bottom:20px; }
.fc-inner { width:100%; height:100%; position:relative;
  transition:transform 0.6s; transform-style:preserve-3d; }
.fc-card.flipped .fc-inner { transform:rotateY(180deg); }
.fc-face { position:absolute; width:100%; height:100%; backface-visibility:hidden;
  border-radius:var(--radius-lg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px; text-align:center; }
.fc-front { background:linear-gradient(145deg,var(--bg-card),#1A1A42);
  border:1px solid var(--border); box-shadow:0 4px 30px rgba(0,0,0,0.3); }
.fc-back { background:linear-gradient(145deg,#1D1D45,var(--bg-card));
  border:1px solid rgba(94,92,246,0.2); transform:rotateY(180deg);
  box-shadow:0 4px 30px rgba(0,0,0,0.3); }
.fc-word { font-size:32px; font-weight:800; }
.fc-phonetic { font-size:12px; color:var(--text3); margin:5px 0 14px; }
.fc-hint { font-size:10px; color:var(--text3); border:1px dashed var(--border);
  padding:4px 12px; border-radius:14px; }
.fc-meaning { font-size:24px; font-weight:800; }
.fc-example { font-size:14px; color:var(--accent); margin-top:8px; }
.fc-example-cn { font-size:11px; color:var(--text3); }
.fc-nav { display:flex; align-items:center; gap:22px; margin-bottom:14px; }
.fc-arrow { width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-card); font-size:14px; color:var(--text2); cursor:pointer; }
.fc-arrow:active { background:var(--bg-card2); border-color:var(--accent); }
.fc-cnt { font-size:12px; font-weight:600; color:var(--text3); }
.fc-rates { display:flex; gap:5px; }
.rate-btn { padding:7px 14px; border-radius:16px; border:1px solid var(--border);
  background:var(--bg-card); font-size:11px; font-weight:600; color:var(--text2);
  cursor:pointer; }
.rate-btn.forget { border-color:rgba(248,113,113,0.3); color:var(--red); }
.rate-btn.vague { border-color:rgba(245,158,11,0.3); color:var(--orange); }
.rate-btn.master { border-color:rgba(52,211,153,0.3); color:var(--green); }

/* Plan */
.plan-hero { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-lg); padding:18px; margin-bottom:16px; }
.plan-badge { display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.5px;
  text-transform:uppercase; padding:3px 8px; border-radius:3px;
  background:var(--accent-soft); color:var(--accent); margin-bottom:8px; }
.plan-name { font-size:18px; font-weight:800; margin-bottom:2px; }
.plan-meta { font-size:11px; color:var(--text3); margin-bottom:12px; }
.plan-track { height:5px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.plan-fill { height:100%; background:linear-gradient(90deg,var(--accent),#7C6FF7); }
.plan-nums { display:flex; justify-content:space-between; font-size:10px; font-weight:600;
  color:var(--text3); margin-top:5px; }
.outcome-box { background:var(--accent-soft); border:1px solid rgba(94,92,246,0.1);
  padding:12px 14px; border-radius:var(--radius); margin-bottom:16px; }
.outcome-box h4 { font-size:10px; font-weight:700; color:var(--accent);
  text-transform:uppercase; margin-bottom:3px; }
.outcome-box p { font-size:12px; color:var(--text2); line-height:1.6; }
.timeline { }
.tl-row { display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.02); }
.tl-dot { width:9px; height:9px; border-radius:50%; }
.tl-dot.done { background:var(--accent); }
.tl-dot.current { background:var(--cyan); box-shadow:0 0 0 4px rgba(100,207,246,0.15); }
.tl-dot.next { background:rgba(255,255,255,0.08); }
.tl-body { flex:1; }
.tl-day { font-size:9px; font-weight:700; color:var(--text3); }
.tl-task-title { font-size:12px; font-weight:600; }
.tl-task-desc { font-size:10px; color:var(--text3); }
.tl-st { font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; }
.tl-st.done { background:var(--accent-soft); color:var(--accent); }
.tl-st.current { background:var(--cyan-soft); color:var(--cyan); }
.tl-st.next { background:rgba(255,255,255,0.03); color:var(--text3); }
.tl-row.done { opacity:0.35; }
.plan-foot { text-align:center; padding:12px 0; font-size:11px; font-weight:600; color:var(--text3); }

/* Stats */
.stats-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.stat-cell { background:var(--bg-card); border:1px solid var(--border-l);
  padding:15px; border-radius:var(--radius); text-align:center; }
.st-val { font-size:26px; font-weight:900; color:var(--accent); display:block; }
.st-lbl { font-size:10px; color:var(--text3); display:block; margin-top:2px; }
.chart-card { background:var(--bg-card); border:1px solid var(--border-l);
  padding:16px; border-radius:var(--radius-lg); margin-bottom:16px; }
.chart-card h4 { font-size:11px; font-weight:700; color:var(--text2); margin-bottom:12px; }
.wp-row { display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-sm); margin-bottom:4px; }
.wp-row h5 { font-size:12px; font-weight:600; } .wp-row p { font-size:10px; color:var(--text3); }
.wp-pct { font-size:14px; font-weight:800; color:var(--accent); }

/* Sheet */
.sheet-mask { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .3s; }
.sheet-mask.open { opacity:1; pointer-events:auto; }
.sheet-panel { position:fixed; bottom:0; left:0; right:0;
  transform:translateY(100%); max-height:78vh; background:var(--bg-card);
  border-radius:16px 16px 0 0; z-index:201;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 -8px 50px rgba(0,0,0,0.6); }
.sheet-panel.open { transform:translateY(0); }
.sheet-grip { width:30px; height:4px; background:rgba(94,92,246,0.2);
  border-radius:2px; margin:12px auto 10px; }
.sheet-body { padding:0 16px 24px; }
.sheet-body h3 { font-size:17px; font-weight:700; margin-bottom:10px; }
.sheet-srch { width:100%; padding:10px 14px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:10px; font-size:13px;
  color:var(--text); outline:none; font-family:var(--font); margin-bottom:10px; }
.level-row { display:flex; gap:5px; padding:8px 0; overflow-x:auto; }
.lv-chip { padding:5px 13px; border-radius:14px; border:1px solid var(--border);
  background:var(--bg-card); font-size:11px; color:var(--text2); cursor:pointer;
  white-space:nowrap; }
.lv-chip.sel { background:var(--accent); border-color:var(--accent); color:#fff; }
.scene-list { max-height:45vh; overflow-y:auto; }
.scene-row { padding:12px 14px; margin:6px 0; background:var(--bg-card);
  border:1px solid var(--border-l); border-radius:var(--radius-sm); cursor:pointer; }
.scene-row:active { border-color:var(--accent); }
.scene-row-top { display:flex; justify-content:space-between; margin-bottom:2px; }
.scene-lv { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px;
  background:rgba(94,92,246,0.1); color:var(--accent); }
.scene-title { font-size:13px; font-weight:600; }
.scene-en { font-size:11px; color:var(--text3); }

/* Toast */
.toast { position:fixed; top:46px; left:50%; transform:translateX(-50%);
  background:var(--bg-card2); color:#fff; border:1px solid var(--accent);
  padding:8px 18px; border-radius:18px; font-size:12px; font-weight:600;
  z-index:500; opacity:0; pointer-events:none; transition:all .25s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(2px); }

/* Loading */
.loading-text { color:var(--text3); text-align:center; padding:20px; }

/* Responsive */
@media (max-width:768px) {
  body { padding-bottom:60px; }
}
/* Settings */
.settings-card { background:var(--bg-card); border:1px solid var(--border-l);
  border-radius:var(--radius-lg); padding:18px; }
.settings-card h3 { font-size:18px; font-weight:800; margin-bottom:4px; }
.settings-card h4 { font-size:14px; font-weight:700; color:var(--text); }
.settings-sub { font-size:12px; color:var(--text3); margin-bottom:14px; display:block; }
.settings-card label { font-size:11px; font-weight:600; color:var(--text2); display:block; margin-top:12px; margin-bottom:4px; }
.settings-input { width:100%; padding:10px 14px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:10px; font-size:13px;
  color:var(--text); outline:none; font-family:var(--font); }
.settings-input:focus { border-color:var(--accent); }
.settings-hint { font-size:10px; color:var(--text3); margin-top:4px; }
.settings-feedback { font-size:12px; margin-top:8px; text-align:center; }

/* Diagnostics overlay */
.diag-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:300; display:none; align-items:center; justify-content:center; }
.diag-overlay.on { display:flex; }
.diag-panel { background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px; width:90%; max-width:400px;
  max-height:80vh; overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,0.5); }
.diag-panel h3 { font-size:18px; font-weight:800; }
.diag-close { background:none; border:none; color:var(--text2); font-size:18px; cursor:pointer; }
.diag-summary { text-align:center; padding:16px 0; }
.diag-summary .diag-icon { font-size:48px; display:block; }
.diag-summary .diag-status { font-size:15px; font-weight:700; margin-top:4px; }
.diag-summary .diag-meta { font-size:11px; color:var(--text3); }
.diag-item { display:flex; align-items:flex-start; gap:10px; padding:12px;
  background:var(--bg-input); border-radius:var(--radius-sm); margin-bottom:6px; }
.diag-item .diag-dot { width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; }
.diag-item .diag-dot.ok { background:var(--green-soft); color:var(--green); }
.diag-item .diag-dot.err { background:var(--red-soft); color:var(--red); }
.diag-item .diag-dot.warn { background:var(--orange-soft); color:var(--orange); }
.diag-item-info { flex:1; }
.diag-item-info strong { font-size:12px; display:block; }
.diag-item-info span { font-size:10px; color:var(--text3); display:block; }
.diag-item-ms { font-size:10px; color:var(--text3); }
.diag-fix { margin-top:12px; padding:12px; background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.15); border-radius:var(--radius-sm);
  font-size:11px; color:var(--text2); display:none; }
.diag-fix.on { display:block; }
.diag-fix strong { color:var(--red); display:block; margin-bottom:4px; }

@media (min-width:769px) {
  body { max-width:430px; margin:0 auto;
    box-shadow:0 0 100px rgba(0,0,0,0.6); min-height:100vh; }
}