/* 纸张风格 · 现代简约 · 无卡通 */
:root{
  --paper:#f4efe4; --card:#fffdf6; --ink:#2b2b26; --ink-soft:#7a766a;
  --line:#ddd3bd; --rule:#e8dfc9;
  --blue:#1f3a5f; --blue-soft:#eef2f6;
  --ok:#2f6b4f; --ok-bg:#e9f2ec;
  --bad:#b3372f; --bad-bg:#f8ecea;
  --serif:'Noto Serif SC','Source Han Serif SC','Songti SC',Georgia,'Times New Roman',serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 500px at 50% -100px, rgba(31,58,95,.05), transparent),
    var(--paper);
  color:var(--ink); font-family:var(--serif);
  min-height:100vh;
}
.view{ max-width:860px; margin:0 auto; padding:0 16px 60px; }
.view.narrow, .sheet.narrow{ max-width:640px; margin:0 auto; }

/* 顶栏 */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 2px 10px; border-bottom:2px solid var(--ink);
  margin-bottom:22px;
}
.tb-title{ font-size:21px; font-weight:700; letter-spacing:2px; }
.tb-user{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:12px; align-items:center; }
.text-btn{
  border:0; background:none; font-family:inherit; font-size:13.5px; color:var(--ink-soft);
  cursor:pointer; padding:2px 4px; border-bottom:1px dashed var(--ink-soft);
}
.text-btn:hover{ color:var(--blue); border-color:var(--blue); }

/* 纸片卡 */
.paper-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 1px 0 rgba(43,43,38,.06), 0 10px 26px -18px rgba(43,43,38,.35);
  padding:26px 28px;
  margin-bottom:18px;
  position:relative;
}
.paper-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue); opacity:.85; border-radius:4px 0 0 4px;
}
.sec-title{ margin:0 0 14px; font-size:15px; letter-spacing:3px; color:var(--blue); font-weight:700; }
.rule{ height:1px; background:var(--rule); margin:14px 0 4px; }

/* 登录 */
#v-login{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{ width:min(92vw,400px); padding:40px 36px 30px; }
.brand{ margin:0; font-size:30px; letter-spacing:6px; text-align:center; font-weight:700; }
.brand-sub{ text-align:center; color:var(--ink-soft); font-size:13px; margin:8px 0 0; letter-spacing:1px; }
.fld{ display:block; margin:22px 0 0; }
.fld span{ display:block; font-size:12.5px; color:var(--ink-soft); letter-spacing:2px; margin-bottom:4px; }
.fld input, .set-row select{
  width:100%; border:0; border-bottom:1.5px solid var(--line); background:transparent;
  font-family:inherit; font-size:16px; padding:7px 2px; outline:none; color:var(--ink);
  transition:border-color .2s;
}
.fld input:focus{ border-color:var(--blue); }
.err{ color:var(--bad); font-size:13px; min-height:20px; margin-top:10px; text-align:center; }
.hint{ color:var(--ink-soft); font-size:12.5px; text-align:center; margin:16px 0 0; line-height:1.7; }

/* 按钮 */
.ink-btn{
  display:block; width:100%; margin-top:24px;
  background:var(--blue); color:#fdfcf8; border:0; border-radius:3px;
  font-family:inherit; font-size:16px; letter-spacing:8px; text-indent:8px;
  padding:13px; cursor:pointer; transition:.18s;
  box-shadow:0 2px 0 rgba(31,58,95,.35);
}
.ink-btn:hover{ filter:brightness(1.12); }
.ink-btn:active{ transform:translateY(1px); box-shadow:none; }
.ink-btn:disabled{ opacity:.55; cursor:wait; }
.ink-btn.big{ font-size:17px; padding:15px; }
.ghost-btn{
  background:none; border:1.5px solid var(--line); border-radius:3px; color:var(--ink-soft);
  font-family:inherit; font-size:13px; padding:8px 18px; cursor:pointer; transition:.18s;
}
.ghost-btn:hover{ border-color:var(--blue); color:var(--blue); }

/* 今日卡 */
.date-line{ font-size:13px; color:var(--ink-soft); letter-spacing:2px; }
.today-title{ margin:6px 0 18px; font-size:24px; letter-spacing:3px; }
.plan-bars{ margin:0 0 6px; }
.plan-row{ display:flex; align-items:center; gap:14px; margin:10px 0; }
.plan-lb{ width:42px; font-size:14px; letter-spacing:2px; }
.bar{ flex:1; height:8px; background:var(--rule); border-radius:99px; overflow:hidden; }
.bar i{ display:block; height:100%; width:0; background:var(--blue); border-radius:99px; transition:width .4s; }
.bar.thin{ height:5px; }
.plan-num{ width:70px; text-align:right; font-size:13.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.stats-line{ text-align:center; color:var(--ink-soft); font-size:13px; margin-top:14px; letter-spacing:1px; }

/* 计划设置 */
.set-row{ display:flex; gap:18px; align-items:end; flex-wrap:wrap; }
.set-row label{ font-size:13px; color:var(--ink-soft); letter-spacing:1px; flex:1; min-width:150px; }
.set-row select{
  border:1px solid var(--line); background:#fff; border-radius:3px; margin-top:6px;
  padding:8px 10px; font-family:inherit; font-size:14px; cursor:pointer;
}
.set-row .ghost-btn{ flex:0 0 auto; margin-bottom:2px; }

/* 书架（书本卡片，纸张书脊风） */
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.book-item{
  border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:3px;
  background:linear-gradient(180deg,#fffef9, #faf6ea); padding:16px 16px 12px; cursor:pointer;
  transition:.18s; position:relative;
}
.book-item:hover{ border-color:var(--blue); box-shadow:0 6px 18px -10px rgba(31,58,95,.4); }
.book-item.on{ box-shadow:inset 0 0 0 1.5px var(--blue); }
.book-item .b-name{ font-weight:700; font-size:15.5px; line-height:1.5; }
.book-item .b-desc{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.book-item .b-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; }
.book-item .b-badge{
  position:absolute; right:10px; top:10px; font-size:11px; color:var(--ok);
  border:1px solid var(--ok); border-radius:2px; padding:1px 6px; background:var(--ok-bg);
}

/* 单元格 */
.unit-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.unit-item{
  border:1px solid var(--line); border-radius:3px; padding:12px 14px; cursor:pointer;
  background:#fff; transition:.15s; position:relative;
}
.unit-item:hover{ border-color:var(--blue); }
.unit-item.on{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.unit-item .u-name{ font-weight:700; font-size:14.5px; }
.unit-item .u-num{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.unit-item .u-bar{ height:4px; background:var(--rule); border-radius:99px; margin-top:8px; overflow:hidden; }
.unit-item .u-bar i{ display:block; height:100%; background:var(--ok); }

/* 学习页 */
.session-line{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
.session-line .bar{ flex:1; }
.round-dots{ display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.round-dots i{
  width:26px; height:6px; border-radius:99px; background:var(--rule); transition:.25s;
}
.round-dots i.past{ background:var(--ok); }
.round-dots i.cur{ background:var(--blue); }
.study-card{ min-height:320px; display:flex; flex-direction:column; }
.round-tag{
  align-self:flex-start; font-size:12px; letter-spacing:2px; color:var(--blue);
  border:1px solid var(--blue); padding:3px 12px; border-radius:2px; margin-bottom:16px;
}
.q-en{ font-size:38px; font-weight:700; text-align:center; letter-spacing:1px; margin:6px 0 2px; }
.q-pos{ text-align:center; color:var(--ink-soft); font-size:14px; font-style:italic; }
.q-ex{
  text-align:center; font-size:17px; line-height:1.9; margin:18px auto 0; max-width:480px;
  color:#3d3a30;
}
.q-ex b{ color:var(--blue); border-bottom:2px solid var(--blue); padding:0 2px; }
.q-zh{ font-size:26px; text-align:center; font-weight:700; margin:10px 0 2px; }
.speak-btn{
  display:block; margin:14px auto 0; background:var(--blue-soft); color:var(--blue);
  border:1px solid var(--blue); border-radius:3px; font-family:inherit; font-size:14px;
  padding:9px 26px; cursor:pointer; letter-spacing:2px;
}
.speak-btn:hover{ background:#e0e8f0; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.opt{
  border:1.5px solid var(--line); background:#fff; border-radius:3px; text-align:left;
  font-family:inherit; font-size:15.5px; padding:13px 14px 13px 40px; cursor:pointer;
  position:relative; transition:.15s; color:var(--ink); line-height:1.5;
}
.opt .abc{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:12.5px; color:var(--ink-soft); border:1px solid var(--line); border-radius:50%;
  width:19px; height:19px; line-height:17px; text-align:center;
}
.opt:hover{ border-color:var(--blue); }
.opt.right{ border-color:var(--ok); background:var(--ok-bg); }
.opt.wrong{ border-color:var(--bad); background:var(--bad-bg); }
.opts.single{ grid-template-columns:1fr; }

/* 拼写输入 */
.spell-row{ display:flex; gap:10px; margin-top:26px; }
.spell-row input{
  flex:1; border:0; border-bottom:2px solid var(--line); background:transparent;
  font-family:inherit; font-size:20px; padding:8px 4px; outline:none; letter-spacing:2px;
}
.spell-row input:focus{ border-color:var(--blue); }
.spell-row .ink-btn{ width:auto; margin-top:0; padding:10px 22px; letter-spacing:3px; text-indent:3px; font-size:14px; }
.spell-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:12px; }

/* 判定反馈 */
.verdict{
  margin-top:18px; padding:12px 16px; border-radius:3px; font-size:14.5px; line-height:1.8;
  display:none;
}
.verdict.ok{ display:block; background:var(--ok-bg); color:var(--ok); border:1px solid #cfe3d6; }
.verdict.bad{ display:block; background:var(--bad-bg); color:var(--bad); border:1px solid #ecd2cf; }
.next-btn{
  display:block; width:100%; margin-top:14px; background:var(--ink); color:#fdfcf8;
  border:0; border-radius:3px; padding:11px; font-family:inherit; font-size:14.5px;
  letter-spacing:4px; cursor:pointer;
}

/* 完成页 */
.done-card{ text-align:center; padding:44px 30px; }
.done-card h2{ letter-spacing:4px; margin:0 0 8px; }
.done-stats{ margin:22px 0; font-size:15px; line-height:2.2; color:var(--ink); }
.done-stats b{ font-size:22px; color:var(--blue); }

/* toast */
#toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fdfcf8; padding:11px 24px; border-radius:3px;
  font-size:14px; letter-spacing:1px; transition:.3s; z-index:99; opacity:0;
}
#toast.on{ transform:translateX(-50%) translateY(0); opacity:1; }

@media (max-width:560px){
  .paper-card{ padding:20px 18px; }
  .q-en{ font-size:30px; }
  .opts{ grid-template-columns:1fr; }
  .view{ padding:0 10px 50px; }
}