/* HSK1 卡片学习 · 学生端 — 原站风格：深色页面 + 浅色卡片 + 橙色强调 */
:root{
  --paper:#10161d; --panel:#1b2631; --panel2:#111c26; --panel3:#263541;
  --ink:#edf2f5; --muted:#a0b0bd; --line:#34424f;
  --accent:#eb863e; --accent2:#f09853; --accent3:#efa363;
  --card:#f6f4ee; --card-ink:#172e40; --card-border:#d1d6d6;
  --card-hanzi:#172f42; --card-pinyin:#a35027; --card-meaning:#1e3a4f;
  --ok:#7fbf94; --ok-soft:rgba(127,191,148,.16);
  --bad:#e0705f; --bad-soft:rgba(224,112,95,.16);
  --gold:#e3b23c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",Inter,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.7; min-height:100vh;
}
h1,h2,h3,.brand{font-family:"Segoe UI",Inter,system-ui,"PingFang SC","Microsoft YaHei",sans-serif}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ===== 顶栏 ===== */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px;flex-wrap:wrap;
}
.brand{font-size:19px;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.brand .mark{
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:22px;font-weight:800;
  width:38px;height:42px;border-radius:8px 8px 12px 8px;
  background:var(--accent);color:#121c25;
  display:inline-flex;align-items:center;justify-content:center;
}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.5px}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav button{
  font-size:14.5px;font-weight:700;padding:7px 15px;border-radius:7px;color:var(--muted);
  min-height:40px;
}
.nav button.on{background:var(--accent);color:#14212a;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.nav button:hover:not(.on){color:var(--accent3)}
.userbox{display:flex;align-items:center;gap:10px;margin-left:auto}
.ub-name{font-size:14.5px;font-weight:800;color:var(--accent2);white-space:nowrap}
.ub-cls{font-size:12px;padding:3px 10px;border-radius:999px;background:#293846;color:#f3b27c;font-weight:800}
.ub-logout{font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:7px;color:var(--muted);min-height:34px;font-weight:700}
.ub-logout:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}

/* ===== 主容器 ===== */
main{max-width:1000px;margin:0 auto;padding:24px 20px 80px}
.view-head{margin-bottom:20px}
.view-head .kicker{font-size:12px;letter-spacing:2px;color:var(--accent2);font-weight:800;margin-bottom:6px}
.view-head h1{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1.2}
.view-head p{font-size:14.5px;color:var(--muted);margin-top:6px;font-weight:600}

/* ===== 登录（浅色卡片，像一张真卡片） ===== */
.login-wrap{max-width:420px;margin:9vh auto 0;padding:0 18px}
.login-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;
  box-shadow:0 15px 38px rgba(0,0,0,.3);
  padding:32px 34px 28px;color:var(--card-ink);
}
.login-card .lc-title{font-size:25px;font-weight:900;letter-spacing:-.5px}
.login-card .lc-sub{font-size:13px;color:#657885;margin-bottom:22px;font-weight:600}
.login-card label{display:block;font-size:13.5px;font-weight:800;margin:15px 0 6px;color:#506777}
.login-card input{
  width:100%;font-size:15px;padding:11px 13px;border:1px solid #cbd5d9;
  background:#fffef9;border-radius:7px;outline:none;min-height:46px;color:#172e40;font-weight:700;
}
.login-card input:focus{border-color:var(--accent)}
.login-card .btn{margin-top:22px;width:100%}
.login-err{color:#a6402e;font-size:14px;min-height:20px;margin-top:10px;font-weight:700}
.login-tip{font-size:12px;color:#71818a;margin-top:14px;line-height:1.7;font-weight:600}

/* ===== 按钮 ===== */
.btn{font-size:15.5px;font-weight:800;padding:11px 20px;border-radius:7px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.primary{background:var(--accent);color:#14212a}
.btn.primary:hover{background:#f4a05c}
.btn.ghost{border:1px solid var(--line);color:var(--muted);background:transparent}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent3);background:rgba(235,134,62,.12)}
.btn.small{font-size:13px;padding:5px 13px;min-height:32px}
.btn.big{font-size:18px;padding:15px 26px;min-height:58px}
.btn:disabled{opacity:.35;cursor:default}

/* ===== 主页入口（浅色卡片） ===== */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.entry-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;
  padding:22px 20px;text-align:left;display:block;color:var(--card-ink);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.entry-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.35);border-color:#e68a47}
.entry-card .ec-ico{font-size:28px;margin-bottom:8px}
.entry-card .ec-title{font-size:19px;font-weight:850;letter-spacing:-.3px}
.entry-card .ec-sub{font-size:13px;color:#71818a;margin-top:4px;line-height:1.5;font-weight:600}
.entry-card .ec-num{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:#a4572d}

/* ===== 卡片学习 ===== */
.card-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.card-tools input[type=search]{
  flex:1;min-width:160px;font-size:14.5px;padding:9px 12px;border:1px solid var(--line);
  background:var(--panel2);border-radius:7px;outline:none;min-height:42px;color:var(--ink);font-weight:600;
}
.card-tools input[type=search]:focus{border-color:var(--accent)}
.card-tools select{font-size:14px;padding:9px 12px;border:1px solid var(--line);background:var(--panel2);border-radius:7px;outline:none;min-height:42px;color:var(--ink);font-weight:700}
.single-stage{max-width:560px;margin:0 auto}
.flashcard{
  min-height:270px;background:var(--card);border:1px solid var(--card-border);border-radius:12px;
  box-shadow:0 15px 38px rgba(0,0,0,.3);color:var(--card-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:26px;cursor:pointer;user-select:none;text-align:center;position:relative;
  transition:border-color .2s,box-shadow .2s;
}
.flashcard:hover{border-color:#e68a47;box-shadow:0 15px 40px rgba(0,0,0,.4)}
.flashcard .fc-front{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:52px;font-weight:600;letter-spacing:2px;color:var(--card-hanzi)}
.flashcard .fc-pinyin{font-size:19px;color:var(--card-pinyin);font-weight:600}
.flashcard .fc-back{font-size:23px;color:var(--card-meaning);font-weight:800}
.flashcard .fc-example{border-top:1px solid #cbd4d6;margin-top:10px;padding-top:10px;font-size:16px;color:var(--card-meaning);font-weight:600}
.flashcard .fc-example .ex-id{font-size:12.5px;color:#71818a;margin-top:4px}
.card-audio-controls{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;flex-wrap:wrap}
.audio-button{
  display:inline-flex;justify-content:center;align-items:center;gap:6px;
  border:1px solid #d0dcc5;background:#f1f4e9;color:#52734c;border-radius:7px;
  font-size:12px;font-weight:800;min-height:34px;padding:7px 12px;
}
.audio-button:hover:not(:disabled){background:#e6eddc}
.card-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.card-nav button{
  font-size:14px;font-weight:800;border:1px solid #4b667b;border-radius:7px;
  padding:8px 18px;min-height:40px;background:var(--panel3);color:var(--accent3);
}
.card-nav button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#14212a}
.card-count{font-size:14px;color:#becfd9;font-weight:800}
.mark-btns{display:flex;gap:10px;margin-top:12px;justify-content:center}
.mark-btns button{
  flex:1;max-width:220px;font-size:15px;font-weight:800;border-radius:8px;padding:10px;
  border:1px solid #4a6274;min-height:44px;background:var(--panel3);color:#b5c9d5;
}
.mark-btns .mk-learned.on{background:#233e32;border-color:#649271;color:#c8e0c3}
.mark-btns .mk-missed.on{background:#4c3325;border-color:#b57e54;color:#f3c299}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.grid-item{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;
  cursor:pointer;min-height:92px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.grid-item:hover{border-color:var(--accent)}
.grid-item .gz{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:21px;font-weight:700;color:var(--ink)}
.grid-item .py{font-size:13px;color:var(--muted);font-weight:600}
.grid-item .me{font-size:14px;color:var(--accent3);font-weight:800}
.progress-line{font-size:13.5px;color:var(--muted);text-align:center;margin-top:14px;font-weight:600}

/* ===== 练习（浅色卡片，原站 practice-card） ===== */
.practice-card{
  max-width:660px;margin:0 auto;background:var(--card);border:1px solid var(--card-border);
  border-radius:12px;box-shadow:0 15px 38px rgba(0,0,0,.28);
  padding:26px 28px 22px;color:var(--card-ink);
}
.practice-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#657c8b;margin-bottom:12px;flex-wrap:wrap;font-weight:700}
.practice-head .eyebrow{font-size:11px;letter-spacing:1.7px;color:#a4572d;font-weight:850}
.autonext-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#71818a;cursor:pointer;user-select:none;font-weight:700}
.autonext-tag input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.practice-card h2{font-size:23px;font-weight:850;letter-spacing:-.5px;margin-bottom:6px;color:var(--card-hanzi)}
.practice-hint{font-size:13.5px;color:#758894;margin-bottom:14px;font-weight:600}
.quiz-hanzi{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:46px;font-weight:600;letter-spacing:2px;text-align:center;margin:10px 0 2px;color:var(--card-hanzi)}
.quiz-pinyin{font-size:19px;color:var(--card-pinyin);text-align:center;margin-bottom:12px;font-weight:600}
.choice-options{display:grid;gap:10px;margin:16px 0}
.choice-option{
  display:flex;align-items:center;gap:12px;text-align:left;font-size:15px;font-weight:700;
  border:1px solid #cbd5d9;background:#faf9f4;border-radius:8px;padding:12px 15px;min-height:52px;
  color:#2c475b;
}
.choice-option:hover:not(:disabled){background:#f0e5d7;border-color:#bb926f}
.choice-option.correct{background:#e0ebe0;border-color:#659168;color:#355f3b}
.choice-option.wrong{background:#f3e0ce;border-color:#bf8753;color:#8f542c}
.option-letter{
  flex:none;width:27px;height:29px;border-radius:5px;background:#e3e9eb;color:#526d7f;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.choice-option.correct .option-letter{background:#cadfca;color:#35643d}
.choice-option.wrong .option-letter{background:#e6c6a7;color:#8a4e24}
.practice-feedback{border-radius:8px;padding:12px 14px;font-size:14.5px;margin:14px 0;line-height:1.7;font-weight:600}
.practice-feedback.correct{background:#eef4e5;border:1px solid #dce8d0;color:#55704f}
.practice-feedback.correct strong{color:#3b713e}
.practice-feedback.wrong{background:#f7ede3;border:1px solid #eed7c6;color:#966c47}
.practice-feedback.wrong strong{color:#a05b27}
.practice-feedback strong{display:block;font-size:15.5px;margin-bottom:4px;font-weight:850}
.practice-feedback .fb-hz{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:22px;font-weight:700;margin-right:8px;color:#2c4858}
.practice-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.answer-line{display:flex;gap:8px;flex-wrap:wrap;min-height:54px;border:1px dashed #d4dfc9;border-radius:8px;padding:10px;background:#edf0eb;margin:8px 0 12px}
.answer-placeholder{color:#7d939f;font-size:13.5px;padding:6px;font-weight:600}
.word-tile{
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:18px;font-weight:600;
  border:1px solid #b6c9d0;background:#faf8f2;color:#1c3d53;
  border-radius:6px;padding:7px 13px;min-height:40px;box-shadow:0 2px 3px rgba(22,50,61,.05);
}
.word-tile:hover:not(:disabled){background:#f2dfc9;border-color:#c79054}
.word-tile.selected{background:#faf7f0;border-color:#aa835d}
.tile-label{font-size:11.5px;letter-spacing:1.5px;color:#6a8393;font-weight:800}
.sentence-prompt{font-size:19px;font-weight:750;margin:8px 0 4px;color:#405e72}
.word-bank{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.sentence-checks{display:flex;gap:10px;margin:6px 0 12px;flex-wrap:wrap}
.sentence-checks .btn{font-size:14px;padding:11px 20px}

/* ===== 结果页（浅色卡片） ===== */
.result-card{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 15px 38px rgba(0,0,0,.3);padding:30px;text-align:center;color:var(--card-ink)}
.result-score{font-size:52px;font-weight:900;color:#aa5e2c;letter-spacing:-2px;margin:8px 0 2px}
.result-score small{font-size:24px;color:#859cab;font-weight:800}
.result-pct{font-size:15px;color:#687d8b;margin-bottom:16px;font-weight:650}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.result-actions .btn{font-size:15px}

/* ===== 排名（深色面板） ===== */
.rank-tabs{display:flex;gap:10px;margin-bottom:16px}
.rank-tab{font-size:15px;font-weight:800;padding:9px 20px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:8px}
.rank-tab.on{background:var(--accent);border-color:var(--accent);color:#14212a}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.stat-box .sv{font-size:26px;font-weight:900;color:var(--accent2)}
.stat-box .sl{font-size:13px;color:var(--muted);margin-top:2px;font-weight:600}
.rank-list{display:flex;flex-direction:column;gap:9px}
.rank-row{position:relative;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.rank-row.first{border-color:#7a5c1e;background:linear-gradient(135deg,#2a2413,#1f1c10);box-shadow:0 4px 18px rgba(227,178,60,.2)}
.rank-row.me{border-color:var(--accent);background:rgba(235,134,62,.14)}
.rk-idx{width:40px;text-align:center;font-size:18px;flex:none;color:var(--muted);font-weight:800}
.rk-ico{font-size:26px}
.rk-num{font-weight:900;font-size:18px;color:var(--muted)}
.rk-medal{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:900;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rk-medal.silver{background:linear-gradient(135deg,#4a5058,#2c3138 55%,#1d2126);color:#c6ccd4;border:2px solid #565e68}
.rk-medal.bronze{background:linear-gradient(135deg,#5c4526,#3a2b16 55%,#241a0d);color:#e0a86a;border:2px solid #7a5a30}
.rk-name{flex:1;font-size:16.5px;min-width:0;color:var(--ink);font-weight:700}
.rk-me{display:inline-block;margin-left:8px;background:var(--accent);color:#14212a;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:800}
.rk-cls{display:inline-block;margin-right:6px;background:var(--accent);color:#14212a;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:900}
.rk-score{font-size:16px;color:var(--accent2)}
.rk-score b{font-size:20px;font-weight:900}
.rk-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;font-weight:600}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:confetti-fall 2.4s linear infinite}
.confetti i:nth-child(1){left:6%;background:#E3B23C;animation-delay:0s}
.confetti i:nth-child(2){left:22%;background:#eb863e;animation-delay:.3s;width:7px;height:11px}
.confetti i:nth-child(3){left:38%;background:#e0705f;animation-delay:.6s}
.confetti i:nth-child(4){left:55%;background:#7fbf94;animation-delay:1s;width:8px;height:12px}
.confetti i:nth-child(5){left:72%;background:#E3B23C;animation-delay:1.4s}
.confetti i:nth-child(6){left:88%;background:#93a1b0;animation-delay:1.8s;width:7px;height:10px}
@keyframes confetti-fall{0%{transform:translateY(-16px) rotate(0)}60%{transform:translateY(56px) rotate(160deg);opacity:1}100%{transform:translateY(112px) rotate(320deg);opacity:0}}

/* ===== 错题本（深色面板） ===== */
.wb-item{display:flex;gap:12px;align-items:flex-start;padding:13px 4px;border-bottom:1px solid var(--line)}
.wb-item:last-child{border-bottom:none}
.wb-kind{flex:none;font-size:12.5px;font-weight:800;background:#293846;color:#f3b27c;border-radius:999px;padding:2px 10px;margin-top:2px;white-space:nowrap}
.wb-body{flex:1;min-width:0}
.wb-prompt{font-size:16px;font-weight:700}
.wb-meta{font-size:13px;color:var(--muted);margin-top:3px;font-weight:600}
.wb-ans{margin-top:5px;font-size:14px;display:flex;gap:10px;flex-wrap:wrap;font-weight:600}
.wb-ans .bad{color:var(--bad);font-weight:800}
.wb-ans .good{color:var(--ok);font-weight:800}
.wb-del{color:var(--bad);font-size:13px;font-weight:800;flex:none}

/* ===== 空态/加载 ===== */
.loading{font-size:15px;color:var(--muted);padding:30px 0;text-align:center;font-weight:600}
.empty{font-size:14.5px;color:var(--muted);padding:24px;text-align:center;font-weight:600}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--panel3);color:var(--ink);font-size:14.5px;padding:11px 22px;border-radius:999px;
  z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.4);border:1px solid #435c6e;font-weight:700;
}
.toast.ok{background:#2f4a3a;border-color:#649271;color:#c8e0c3}
.toast.err{background:#4c3325;border-color:#b57e54;color:#f3c299}

@media (max-width:640px){
  main{padding:16px 12px 60px}
  .topbar{padding:8px 12px}
  .flashcard{min-height:220px}
  .flashcard .fc-front{font-size:42px}
  .practice-card{padding:20px 16px}
}