/* ============================================================
   全学段古诗文记诵卡 — 东方古风·经典典雅
   宣纸绢本 · 水墨氤氲 · 朱砂印鉴 · 泥金点缀
   ============================================================ */
:root {
  --paper: #f7f0e0;
  --paper-warm: #efe3cc;
  --paper-dark: #e8d9ba;
  --paper-light: #fdf9f2;
  --ink: #2c2416;
  --ink-light: #5c4a32;
  --ink-muted: #8b7758;
  --cinnabar: #c23b22;
  --cinnabar-light: #d4735a;
  --cinnabar-dark: #8b1a0a;
  --indigo: #2e5a88;
  --indigo-light: #4a7db5;
  --gold: #b8860b;
  --gold-light: #d4a843;
  --gold-pale: #f0dcb0;
  --jade: #5b8c5a;
  --jade-light: #7ab87a;
  --again: #c0392b;
  --hard: #d4a017;
  --good: #4a8c5c;
  --easy: #4a6fa5;
  --radius: 10px;
  --shadow-card: 0 8px 32px rgba(44,36,22,.15), 0 2px 8px rgba(44,36,22,.08);
  --shadow-float: 0 16px 48px rgba(44,36,22,.18);
  --font-serif: 'Noto Serif SC','Source Han Serif SC','STSong','SimSun','KaiTi',serif;
  --font-sans: 'PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  --overlay-bg: rgba(44,36,22,.6);
  --toast-bg: var(--ink);
  --toast-color: var(--paper-light);
  --toast-shadow: 0 8px 24px rgba(44,36,22,.3);
  --input-bg: var(--paper-light);
  --card-bg-front: linear-gradient(175deg, #fdf8ef 0%, #f5ecd5 15%, #efe0c0 50%, #e8d5aa 100%);
  --card-bg-back: linear-gradient(170deg, #fdf9f2 0%, #f7f0e0 30%, #f2e8d0 100%);
  --card-border: var(--paper-dark);
  --seal-border: var(--cinnabar);
  --seal-color: var(--cinnabar);
  --seal-shadow: inset 0 0 0 1px rgba(194,59,34,.2), 1px 1px 3px rgba(0,0,0,.1);
  --seal-bg: rgba(194,59,34,.03);
  --seal-inner-border: rgba(194,59,34,.15);
  --frame-border1: rgba(139,119,88,.25);
  --frame-border2: rgba(139,119,88,.12);
  --frame-accent: rgba(194,59,34,.3);
  --card-back-line: rgba(194,59,34,.08);
  --card-back-border-bottom: var(--paper-dark);
  --disabled-opacity: .3;
  --stat-card-bg: var(--paper-light);
  --stat-card-shadow: 0 2px 8px rgba(44,36,22,.06);
  --resume-bg: var(--paper-light);
  --resume-border: var(--gold-pale);
  --btn-start-shadow: 0 6px 24px rgba(194,59,34,.25);
  --btn-start-active-shadow: 0 4px 16px rgba(194,59,34,.35);
  --cinnabar-shadow-again: rgba(192,57,43,.25);
  --cinnabar-shadow-hard: rgba(212,160,23,.25);
  --cinnabar-shadow-good: rgba(74,140,92,.25);
  --cinnabar-shadow-easy: rgba(74,111,165,.25);
  --text-shadow-front: 1px 1px 0 rgba(255,255,255,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--font-sans);background:var(--paper);color:var(--ink);overflow:hidden}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    var(--texture-noise),
    radial-gradient(ellipse at 50% 0%, rgba(184,134,11,.04) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(44,36,22,.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 30%, var(--paper-warm) 100%);
}
.app{display:flex;flex-direction:column;height:100%;max-width:520px;margin:0 auto;padding:8px 12px;position:relative;z-index:1}

.top-bar{display:flex;align-items:center;gap:6px;padding:4px 0;flex-shrink:0;border-bottom:2px solid var(--ink);position:relative}
.top-bar::after{
  content:'';position:absolute;bottom:-5px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
}
.top-bar .title{font-size:14px;font-weight:700;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:2px;font-family:var(--font-serif)}
.top-bar .title span{font-weight:400;color:var(--ink-muted);font-size:10px;margin-left:6px;letter-spacing:1px}
.icon-btn{width:32px;height:32px;border:1px solid var(--paper-dark);border-radius:6px;background:var(--paper-light);color:var(--ink-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;font-family:var(--font-sans)}
.icon-btn:hover{background:var(--paper-warm);color:var(--ink);border-color:var(--ink-muted)}
.icon-btn:active{transform:scale(.92)}
.bar-sep{color:var(--ink-muted);opacity:.35;font-size:14px;line-height:1;flex-shrink:0;align-self:center;user-select:none}
.icon-btn:focus-visible,.filter-tag:focus-visible,.util-btn:focus-visible,.btn-row button:focus-visible,.resume-bar button:focus-visible,.modal-close:focus-visible,.btn-start:focus-visible,.btn-import-csv:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}

.filter-summary{flex-shrink:0;display:none;align-items:center;gap:6px;padding:4px 0;margin-bottom:2px;position:relative;z-index:2}
.filter-summary.on{display:flex}
.filter-summary-text{flex:1;font-size:11px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-serif)}
.filter-summary-text b{font-weight:600;color:var(--ink-light)}
.filter-summary-toggle{padding:3px 12px;border:1px solid var(--paper-dark);border-radius:12px;background:transparent;color:var(--ink-muted);font-size:10px;cursor:pointer;transition:all .18s;font-family:var(--font-serif);display:inline-flex;align-items:center;gap:3px}
.filter-summary-toggle::after{content:'▾';font-size:8px;transition:transform .2s ease}
.filter-summary-toggle.on::after{transform:rotate(180deg)}
.filter-summary-toggle:active{border-color:var(--ink-muted);color:var(--ink);background:var(--paper-warm)}

.mode-btn.on{background:var(--ink)!important;color:var(--paper-light)!important;border-color:var(--ink)!important}

.auto-dark-bar{display:none;align-items:center;gap:6px;padding:3px 0;flex-shrink:0;width:100%}
.auto-dark-bar.show{display:flex}
.auto-dark-label{font-size:10px;color:var(--ink-muted);font-family:var(--font-serif);letter-spacing:.5px}
.auto-dark-bar select{padding:2px 4px;border:1px solid var(--paper-dark);border-radius:4px;background:var(--paper-light);color:var(--ink);font-size:10px;font-family:var(--font-serif);cursor:pointer}
.auto-dark-sep{color:var(--ink-muted);font-size:10px}

.filter-panel{flex-shrink:0;max-height:0;overflow:hidden;transition:max-height .32s ease,opacity .22s ease;opacity:0}
.filter-panel.on{max-height:400px;opacity:1;margin:2px 0}
.filter-panel-label{font-size:9px;color:var(--ink-muted);padding:4px 0 2px;letter-spacing:.8px;font-family:var(--font-serif)}
.filter-panel-label:first-child{padding-top:0}
.filter-tags{display:flex;flex-wrap:wrap;gap:4px}
.filter-tag{padding:4px 12px;border:1px solid var(--paper-dark);border-radius:12px;background:transparent;color:var(--ink-muted);font-size:10px;cursor:pointer;white-space:nowrap;transition:all .18s;font-family:var(--font-sans);line-height:1.3}
.filter-tag:active{transform:scale(.95)}
.filter-tag.on{background:var(--ink);border-color:var(--ink);color:var(--paper-light);font-weight:600}
.filter-summary .filter-tag{padding:3px 12px}

.progress-wrap{flex-shrink:0;padding:2px 0;position:relative;z-index:2}
.progress-info{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--ink-muted);font-family:var(--font-serif)}
.progress-info .remain{font-family:var(--font-serif);font-weight:600;color:var(--ink-light)}
.progress-bar{height:3px;background:var(--paper-dark);border-radius:2px;overflow:hidden;margin-top:1px;position:relative}
.progress-bar::after{content:'';position:absolute;inset:0;background:var(--texture-noise);pointer-events:none}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--cinnabar-dark),var(--cinnabar),var(--gold));border-radius:2px;transition:width .4s ease}
.stats{display:flex;gap:8px;font-size:10px;color:var(--ink-muted);padding:2px 0;font-family:var(--font-serif)}
.stats span{display:flex;align-items:center;gap:2px}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.dot-again{background:var(--again)}.dot-hard{background:var(--hard)}.dot-good{background:var(--good)}.dot-easy{background:var(--easy)}

.search-wrap{flex-shrink:0;padding:0 0 4px;display:none;position:relative;z-index:2}
.search-wrap.show{display:block}
.search-inner{position:relative;display:flex;align-items:center}
.search-input{width:100%;padding:6px 28px 6px 10px;border:1px solid var(--paper-dark);border-radius:6px;background:var(--input-bg);color:var(--ink);font-size:12px;outline:none;font-family:var(--font-serif)}
.search-clear{position:absolute;right:6px;width:18px;height:18px;border:none;border-radius:50%;background:var(--paper-dark);color:var(--ink-muted);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;opacity:0;pointer-events:none}
.search-clear.visible{opacity:1;pointer-events:auto}
.search-clear:hover{background:var(--ink-muted);color:var(--paper-light)}
.search-input::placeholder{color:var(--ink-muted);opacity:.6}
.search-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-pale)}

.search-hl{background:var(--gold-pale);color:var(--ink);border-radius:2px;padding:0 1px}

.card-area{flex:1;display:flex;align-items:flex-start;justify-content:center;perspective:1200px;padding:8px 0;min-height:0;overflow:hidden}
.card-container{width:100%;max-width:420px;height:100%;max-height:680px;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.card-container:active{transform:scale(.985)}
.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.2,.2,1)}
.card-inner.flipped{transform:rotateX(180deg)}

.card-container.slide-left .card-inner{animation:slideLeft .25s ease}
.card-container.slide-right .card-inner{animation:slideRight .25s ease}
@keyframes slideLeft{0%{transform:translateX(30px);opacity:.3}100%{transform:translateX(0);opacity:1}}
@keyframes slideRight{0%{transform:translateX(-30px);opacity:.3}100%{transform:translateX(0);opacity:1}}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:box-shadow .3s ease}
.card-container:active .card-face{box-shadow:var(--shadow-float)}

.card-front{
  background:
    var(--texture-noise),
    var(--card-bg-front);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 24px;text-align:center;position:relative;
  border:1px solid var(--card-border);
}
.card-front .border-frame{
  position:absolute;inset:10px;
  border:1px solid var(--frame-border1);border-radius:6px;pointer-events:none;
}
.card-front .border-frame::before{
  content:'';position:absolute;inset:3px;border:1px solid var(--frame-border2);border-radius:4px;
}
.card-front .border-frame::after{
  content:'';position:absolute;left:12px;right:12px;top:12px;height:1px;
  background:linear-gradient(90deg,transparent,var(--frame-accent),transparent);
}

.card-front .seal{
  position:absolute;top:14px;left:14px;
  width:38px;height:38px;
  border:2px solid var(--seal-border);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--seal-color);font-weight:700;
  transform:rotate(-7deg);
  font-family:var(--font-serif);letter-spacing:2px;
  box-shadow:var(--seal-shadow);
  background:var(--seal-bg);
}
.card-front .seal::after{
  content:'';position:absolute;inset:3px;border:1px dashed var(--seal-inner-border);border-radius:1px;
}

.card-front .badge-group{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.card-front .badge{
  font-size:9px;padding:3px 8px;border-radius:2px;
  background:var(--paper-light);
  color:var(--ink-muted);
  border:1px solid var(--paper-dark);
  letter-spacing:1px;font-family:var(--font-serif);
}

.card-front .poem-title{
  font-size:clamp(22px,5.5vw,36px);font-weight:700;
  color:var(--ink);font-family:var(--font-serif);
  margin-bottom:8px;z-index:1;line-height:1.4;
  text-shadow:var(--text-shadow-front);
  letter-spacing:3px;
}
.card-front .poem-author{
  font-size:clamp(13px,3vw,18px);color:var(--ink-light);
  font-family:var(--font-serif);z-index:1;letter-spacing:2px;
}
.card-front .poem-dynasty{
  font-size:11px;color:var(--ink-muted);margin-top:8px;
  font-family:var(--font-serif);z-index:1;letter-spacing:2px;
}
.card-front .poem-genre-label{
  font-size:10px;color:var(--ink-muted);margin-top:2px;opacity:.6;
  font-family:var(--font-serif);z-index:1;letter-spacing:1px;
}
.card-front .review-countdown{
  font-size:10px;color:var(--ink-muted);margin-top:6px;opacity:.6;
  font-family:var(--font-serif);z-index:1;letter-spacing:.5px;
}
.card-front .tap-hint{
  position:absolute;bottom:14px;
  font-size:10px;color:var(--ink-muted);opacity:.4;
  font-family:var(--font-serif);letter-spacing:1px;
}

.card-back{
  background:
    var(--texture-noise),
    var(--card-bg-back);
  transform:rotateX(180deg);padding:0;
  border:1px solid var(--card-border);
  display:flex;flex-direction:column;
}
.card-back::before{
  content:'';position:absolute;left:22px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--card-back-line) 20%,var(--card-back-line) 80%,transparent);
  pointer-events:none;
}
.card-back .card-back-top{
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;
  padding:18px 16px 10px;
  border-bottom:1px solid var(--card-back-border-bottom);
}
.card-back .card-back-title{font-size:13px;font-weight:600;color:var(--ink);font-family:var(--font-serif);letter-spacing:2px}
.card-back .card-back-author{font-size:11px;color:var(--ink-muted);font-family:var(--font-serif);letter-spacing:1px}
.card-back .poem-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 16px}
.card-back .poem-text{
  color:var(--ink);font-family:var(--font-serif);
  position:relative;
  letter-spacing:0.8px;
}
.poem-text .mode-poetry{
  display:flex;flex-direction:column;align-items:center;
  padding:0;
}
.poem-text .mode-poetry .pblk{
  display:inline-block;text-align:left;white-space:normal;
  font-size:clamp(15px,4.2vw,20px);line-height:2.3;
}
.poem-text .mode-poetry .pblk .pl{display:block}
.poem-text .mode-ciqu{
  display:flex;flex-direction:column;align-items:center;
  padding:0 12px;gap:0;
}
.poem-text .mode-ciqu .ciq-line{
  display:flex;flex-direction:column;align-items:center;gap:0;width:100%;
}
.poem-text .mode-ciqu .ciq-seg{
  font-size:clamp(15px,4.2vw,20px);line-height:2.4;
  font-family:var(--font-serif);color:var(--ink);
  text-align:center;white-space:normal;word-break:break-word;
  letter-spacing:0.5px;max-width:100%;
}
.poem-text .mode-ciqu .ci-sep{
  height:16px;flex-shrink:0;
}
.poem-text .mode-ciqu .ci-sep-inner{
  height:4px;flex-shrink:0;
}
.poem-text .mode-yuefu{
  display:flex;flex-direction:column;align-items:center;
  padding:0;
}
.poem-text .mode-yuefu .pblk{
  display:inline-block;text-align:left;white-space:normal;
  font-size:clamp(15px,4.2vw,20px);line-height:2.3;
}
.poem-text .mode-yuefu .pblk .pl{display:block}
.poem-text .mode-prose{
  display:block;text-align:justify;white-space:normal;padding:0 8px;
  font-size:clamp(15px,4vw,20px);line-height:2.4;
}
.poem-text .mode-prose .pr{
  text-indent:2em;margin-bottom:0.8em;display:block;
  line-height:2.4;text-align:justify;
}

.btn-area{flex-shrink:0;padding:8px 0 10px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}
.btn-row{display:flex;gap:6px}
.btn-row button{
  flex:1;padding:10px 0;border:1px solid transparent;border-radius:6px;
  font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;
  font-family:var(--font-serif);letter-spacing:1px;
  position:relative;overflow:hidden;
}
.btn-row button::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);opacity:0;transition:opacity .2s}
.btn-row button:active::after{opacity:1}
.btn-row button:active{transform:scale(.95)}
.btn-row button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed;transform:none}

.btn-again{background:var(--again);color:#fff;box-shadow:0 2px 8px var(--cinnabar-shadow-again)}
.btn-hard{background:var(--hard);color:#fff;box-shadow:0 2px 8px var(--cinnabar-shadow-hard)}
.btn-good{background:var(--good);color:#fff;box-shadow:0 2px 8px var(--cinnabar-shadow-good)}
.btn-easy{background:var(--easy);color:#fff;box-shadow:0 2px 8px var(--cinnabar-shadow-easy)}

.util-row{display:flex;gap:6px;margin-top:6px;justify-content:center}
.util-btn{
  padding:6px 14px;border:1px solid var(--paper-dark);border-radius:6px;
  background:var(--paper-light);color:var(--ink-muted);
  font-size:11px;cursor:pointer;transition:all .2s;
  font-family:var(--font-serif);letter-spacing:1px;
}
.util-btn:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-pale)}
.util-btn:active{transform:scale(.95)}

.resume-bar{
  display:none;align-items:center;gap:8px;
  padding:8px 12px;margin-bottom:4px;flex-shrink:0;
  background:var(--resume-bg);border:1px solid var(--resume-border);border-radius:6px;
  font-size:11px;color:var(--ink-light);font-family:var(--font-serif);
  position:relative;z-index:2;
}
.resume-bar.show{display:flex}
.resume-bar .resume-actions{margin-left:auto;display:flex;gap:6px}
.resume-bar button{padding:4px 12px;border:none;border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;font-family:var(--font-serif);letter-spacing:1px}
.resume-yes{background:var(--ink);color:var(--paper-light)}
.resume-no{background:var(--paper-dark);color:var(--ink-muted)}

.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 24px;text-align:center}
.welcome .welcome-icon{font-size:52px;margin-bottom:16px;opacity:.85}
.welcome h2{font-size:22px;font-family:var(--font-serif);color:var(--ink);margin-bottom:10px;letter-spacing:3px}
.welcome p{font-size:12px;color:var(--ink-muted);line-height:2;margin-bottom:3px;font-family:var(--font-serif)}
.welcome .btn-start{
  margin-top:22px;padding:14px 56px;border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--cinnabar-dark),var(--cinnabar));
  color:#fff;font-size:16px;font-weight:700;cursor:pointer;
  transition:all .2s;font-family:var(--font-serif);letter-spacing:3px;
  box-shadow:var(--btn-start-shadow);
}
.welcome .btn-start:active{transform:scale(.96);box-shadow:var(--btn-start-active-shadow)}
.welcome .btn-import-csv{margin-top:12px;padding:9px 28px;border:1px solid var(--paper-dark);border-radius:10px;background:transparent;color:var(--ink-muted);font-size:12px;cursor:pointer;transition:all .18s;font-family:var(--font-serif);letter-spacing:1px}
.welcome .btn-import-csv:active{border-color:var(--gold);color:var(--ink);background:var(--gold-pale)}
.csv-input{display:none}

.complete-screen{display:none;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 24px;text-align:center}
.complete-screen.show{display:flex}
.complete-screen h2{font-size:24px;font-family:var(--font-serif);color:var(--ink);margin-bottom:6px;letter-spacing:3px}
.complete-screen p{font-family:var(--font-serif);color:var(--ink-muted)}
.complete-screen .stats-grid{display:flex;gap:16px;margin:12px 0;flex-wrap:wrap;justify-content:center}
.complete-screen .stat-card{
  padding:10px 16px;border-radius:4px;min-width:70px;
  background:var(--stat-card-bg);border:1px solid var(--paper-dark);
  box-shadow:var(--stat-card-shadow);
}
.complete-screen .stat-card .num{font-size:20px;font-weight:700;color:var(--ink);font-family:var(--font-serif)}
.complete-screen .stat-card .label{font-size:10px;color:var(--ink-muted);margin-top:2px;letter-spacing:1px}
.complete-screen .study-time{font-size:12px;color:var(--ink-muted);margin-top:8px;font-family:var(--font-serif);letter-spacing:1px}

.empty-msg{display:none;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center;color:var(--ink-muted);font-size:13px;font-family:var(--font-serif)}
.empty-msg.show{display:flex}

.modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay-bg);z-index:100;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal{
  background:var(--paper-light);border:1px solid var(--paper-dark);
  border-radius:var(--radius);padding:16px;max-width:340px;width:100%;
  max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-float);
  -webkit-overflow-scrolling:touch;
}
.modal::-webkit-scrollbar{width:4px}
.modal::-webkit-scrollbar-thumb{background:var(--ink-muted);border-radius:2px}
.modal h3{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;font-family:var(--font-serif);letter-spacing:2px}
.modal p{font-size:12px;color:var(--ink-muted);line-height:1.7;margin-bottom:6px;font-family:var(--font-serif)}
.modal .shortcut-list{list-style:none;margin:8px 0}
.modal .shortcut-list li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--paper-dark);font-size:12px;color:var(--ink);font-family:var(--font-serif)}
.modal .shortcut-list .key-badge{background:var(--paper-warm);color:var(--ink);padding:1px 6px;border-radius:3px;font-family:monospace;font-size:10px;border:1px solid var(--paper-dark)}
.modal-close{margin-top:10px;width:100%;padding:8px;border:none;border-radius:6px;background:var(--ink);color:var(--paper-light);font-weight:600;cursor:pointer;font-size:12px;font-family:var(--font-serif);letter-spacing:1px}

.stats-actions{display:flex;gap:8px;margin-top:8px;justify-content:center}

.mastery-bar{height:6px;background:var(--paper-dark);border-radius:3px;overflow:hidden;margin:4px 0 8px}
.mastery-fill{height:100%;background:linear-gradient(90deg,var(--cinnabar-dark),var(--cinnabar),var(--gold));border-radius:3px;transition:width .4s ease}

.stats-grid-modal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0;justify-items:center}
.stats-grid-modal .stat-card{padding:6px 4px;width:100%;text-align:center}
.stats-grid-modal .stat-card .num{font-size:14px}
.stats-grid-modal .stat-card .label{font-size:8px}

.heatmap-wrap{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.heatmap-cell{
  width:12px;height:12px;border-radius:2px;
  background:var(--paper-dark);transition:background .2s;
}
.heatmap-cell.l1{background:rgba(194,59,34,.2)}
.heatmap-cell.l2{background:rgba(194,59,34,.4)}
.heatmap-cell.l3{background:rgba(194,59,34,.65)}
.heatmap-cell.l4{background:rgba(194,59,34,.9)}
.heatmap-cell[title]{cursor:default}
.dark .heatmap-cell.l1{background:rgba(224,90,71,.2)}
.dark .heatmap-cell.l2{background:rgba(224,90,71,.4)}
.dark .heatmap-cell.l3{background:rgba(224,90,71,.65)}
.dark .heatmap-cell.l4{background:rgba(224,90,71,.9)}

.weak-list{max-height:160px;overflow-y:auto;margin:6px 0;font-size:11px;font-family:var(--font-serif)}
.weak-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--paper-dark)}
.weak-item-title{color:var(--ink);font-weight:600}
.weak-item-author{color:var(--ink-muted);font-size:10px}
.weak-item-count{color:var(--cinnabar);font-size:10px;font-weight:600}

.trend-chart{width:100%;height:80px;margin:6px 0}
.trend-chart svg{width:100%;height:100%}
.trend-line{fill:none;stroke:var(--cinnabar);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trend-area{fill:url(#trendGrad);opacity:.3}
.trend-dot{fill:var(--cinnabar);r:3}
.trend-grid{stroke:var(--paper-dark);stroke-width:.5;stroke-dasharray:2,2}
.trend-label{font-size:8px;fill:var(--ink-muted);font-family:var(--font-serif)}

.sw-notice{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--paper-light);font-size:12px;z-index:300;box-shadow:var(--toast-shadow);font-family:var(--font-serif);letter-spacing:1px;align-items:center;gap:8px;max-width:90vw}
.sw-notice.show{display:flex}
.sw-notice-btn{border:none;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;background:var(--cinnabar);color:#fff;font-family:var(--font-serif);white-space:nowrap}
.sw-notice.offline{background:#666}

.welcome-insights{display:flex;gap:10px;margin:16px 0 4px;justify-content:center}
.insight-card{padding:10px 14px;border-radius:6px;background:var(--paper-light);border:1px solid var(--paper-dark);text-align:center;min-width:72px;box-shadow:var(--stat-card-shadow)}
.insight-num{font-size:20px;font-weight:700;color:var(--ink);font-family:var(--font-serif)}
.insight-label{font-size:9px;color:var(--ink-muted);margin-top:2px;letter-spacing:.5px;font-family:var(--font-serif)}

/* ============================================================
   深色模式 — 仅重定义变量，组件自动适配
   ============================================================ */
.dark{
  --paper:#000;
  --paper-warm:#0a0a0a;
  --paper-dark:#1a1a1a;
  --paper-light:#000;
  --ink:#f0ebe0;
  --ink-light:#d4cdbf;
  --ink-muted:#a09888;
  --cinnabar:#e05a47;
  --cinnabar-light:#e88070;
  --cinnabar-dark:#b03020;
  --indigo:#5a9ad0;
  --indigo-light:#7ab5e8;
  --gold:#d4a843;
  --gold-light:#e0c060;
  --gold-pale:#3a3020;
  --jade:#6aad6a;
  --jade-light:#88cc88;
  --again:#e05050;
  --hard:#d4a017;
  --good:#5aad6a;
  --easy:#5a8ad0;
  --shadow-card:0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --shadow-float:0 16px 48px rgba(0,0,0,.5);
  --overlay-bg:rgba(0,0,0,.7);
  --toast-bg:#1a1a1a;
  --toast-color:#f0ebe0;
  --toast-shadow:0 8px 24px rgba(0,0,0,.5);
  --input-bg:#1a1a1a;
  --card-bg-front:linear-gradient(175deg, #0a0a0a 0%, #050505 15%, #000 50%, #000 100%);
  --card-bg-back:linear-gradient(170deg, #000 0%, #050505 30%, #000 100%);
  --card-border:#1a1a1a;
  --seal-shadow:inset 0 0 0 1px rgba(224,90,71,.15), 1px 1px 3px rgba(0,0,0,.3);
  --seal-bg:rgba(224,90,71,.05);
  --seal-inner-border:rgba(224,90,71,.1);
  --frame-border1:rgba(138,128,112,.2);
  --frame-border2:rgba(138,128,112,.1);
  --frame-accent:rgba(224,90,71,.2);
  --card-back-line:rgba(224,90,71,.06);
  --card-back-border-bottom:#1a1a1a;
  --disabled-opacity:.2;
  --stat-card-bg:#1a1a1a;
  --stat-card-shadow:0 2px 8px rgba(0,0,0,.2);
  --resume-bg:#1a1a1a;
  --btn-start-shadow:0 6px 24px rgba(224,90,71,.25);
  --btn-start-active-shadow:0 4px 16px rgba(224,90,71,.35);
  --text-shadow-front:1px 1px 0 rgba(0,0,0,.3);
}
.dark body::before{
  background:
    var(--texture-noise),
    radial-gradient(ellipse at 50% 0%, rgba(212,168,67,.03) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.05) 0%, transparent 50%),
    linear-gradient(180deg, #000 0%, #0a0a0a 30%, #000 100%);
}

.recite-hint{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--ink-muted);
  font-family:var(--font-serif);letter-spacing:2px;cursor:pointer;
}
.recite-hint-icon{font-size:40px;margin-bottom:10px;opacity:.6}
.recite-hint-text{font-size:13px}

.recite-body{display:flex;flex-direction:column;align-items:center;padding:12px 0;width:100%}
.recite-line{
  display:flex;align-items:baseline;gap:2px;cursor:pointer;
  padding:4px 0;transition:all .2s;font-family:var(--font-serif);
  font-size:clamp(15px,4.2vw,20px);line-height:2.2;
}
.recite-char{color:var(--cinnabar);font-weight:700}
.recite-hidden{
  color:transparent;background:linear-gradient(90deg,var(--ink-muted),var(--ink-muted));
  -webkit-background-clip:text;background-clip:text;
  filter:blur(4px);transition:all .3s;user-select:none;
}
.recite-line.revealed .recite-hidden{
  color:var(--ink);filter:none;background:none;-webkit-background-clip:unset;
}
.recite-line:hover{background:var(--paper-warm);border-radius:4px}
.recite-actions{margin-top:16px}
.recite-reveal-btn{
  padding:6px 20px;border:1px solid var(--paper-dark);border-radius:6px;
  background:var(--paper-light);color:var(--ink-muted);font-size:11px;
  cursor:pointer;font-family:var(--font-serif);letter-spacing:1px;transition:all .2s;
}
.recite-reveal-btn:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-pale)}

.recite-result{display:flex;flex-direction:column;align-items:center;padding:12px 0;width:100%}
.recite-score{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;font-family:var(--font-serif)}
.recite-detail{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;padding:8px;margin-bottom:8px}
.recite-char-result{display:inline-block;padding:2px 4px;border-radius:3px;font-size:14px;font-family:var(--font-serif)}
.recite-char-result.correct{background:rgba(74,140,92,.15);color:var(--good)}
.recite-char-result.wrong{background:rgba(192,57,43,.15);color:var(--again);text-decoration:line-through}

.speak-highlight{background:rgba(194,59,34,.18);border-radius:4px;padding:3px 6px;margin:-3px -6px;transition:all .25s ease;box-shadow:inset 0 0 0 1.5px rgba(194,59,34,.35),0 0 8px rgba(194,59,34,.1);transform:scale(1.02)}
.dark .speak-highlight{background:rgba(224,90,71,.22);box-shadow:inset 0 0 0 1.5px rgba(224,90,71,.4),0 0 10px rgba(224,90,71,.15);transform:scale(1.02)}
@keyframes speakPulse{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(194,59,34,.35),0 0 8px rgba(194,59,34,.1)}50%{box-shadow:inset 0 0 0 2px rgba(194,59,34,.5),0 0 14px rgba(194,59,34,.2)}}
.speak-highlight-pulse{animation:speakPulse 1.5s ease-in-out infinite}

.annotation-outer{flex-shrink:0;border-top:1px solid var(--paper-dark);margin-top:4px}
.annotation-wrapper{border-top:none;max-height:160px;overflow-y:auto}
.annotation-toggle{padding:8px 12px;font-size:11px;color:var(--ink-muted);cursor:pointer;font-family:var(--font-serif);letter-spacing:1px;transition:color .2s}
.annotation-toggle:hover{color:var(--ink)}
.fav-bar{flex-shrink:0;padding:6px 0 2px;text-align:center;border-top:1px solid var(--paper-dark);margin-top:auto}
.fav-btn{padding:6px 16px;border:1px solid var(--paper-dark);border-radius:6px;background:transparent;color:var(--ink-muted);font-size:11px;cursor:pointer;transition:all .2s;font-family:var(--font-serif);letter-spacing:1px}
.fav-btn:hover{border-color:var(--gold);color:var(--ink)}
.fav-btn.starred{background:var(--gold-pale);border-color:var(--gold);color:var(--gold)}
#annotationWrapper .annotation-content{display:none;padding:0 12px 10px;font-size:11px;color:var(--ink-muted);font-family:var(--font-serif);line-height:1.8}
.annotation-content.show{display:block!important}

/* Dynasty timeline */
.dynasty-timeline{margin-top:6px;padding:4px 0}
.timeline-labels{display:flex;justify-content:space-between;font-size:8px;color:var(--ink-muted);font-family:var(--font-serif);margin-bottom:2px;overflow-x:auto;white-space:nowrap;gap:2px}
.timeline-labels span{flex-shrink:0;text-align:center;min-width:24px;cursor:pointer;padding:1px 2px;border-radius:2px;transition:color .2s}
.timeline-labels span:hover{color:var(--ink)}
.timeline-labels span.active{color:var(--cinnabar);font-weight:600}
.timeline-track{position:relative;height:32px;display:flex;align-items:center}
.timeline-track::before{content:'';position:absolute;left:0;right:0;height:3px;background:var(--paper-dark);border-radius:2px;top:50%;transform:translateY(-50%)}
.timeline-range{position:absolute;height:3px;background:var(--cinnabar);border-radius:2px;top:50%;transform:translateY(-50%);pointer-events:none}
.timeline-input{position:absolute;width:100%;height:32px;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}
.timeline-input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cinnabar);border:2px solid var(--paper-light);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;pointer-events:auto;position:relative;z-index:2}
.timeline-input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cinnabar);border:2px solid var(--paper-light);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;pointer-events:auto}
.timeline-hint{text-align:center;font-size:9px;color:var(--ink-muted);margin-top:2px;font-family:var(--font-serif)}

.annotation-wrapper::-webkit-scrollbar{width:4px}
.annotation-wrapper::-webkit-scrollbar-thumb{background:var(--ink-muted);border-radius:2px}
.annotation-wrapper::-webkit-scrollbar-track{background:transparent}

/* 朗读提示样式 */
.langdu-header{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.ann-reading .mood{display:inline-block;padding:2px 6px;background:var(--cinnabar);color:#fff;border-radius:4px;font-size:10px}
.ann-reading .speed{display:inline-block;padding:2px 6px;background:var(--ink-muted);color:#fff;border-radius:4px;font-size:10px}
.ann-reading .pause{display:inline-block;padding:2px 6px;background:var(--gold);color:#fff;border-radius:4px;font-size:10px}
.ann-reading .emphasis{display:inline-block;padding:2px 6px;background:var(--jade);color:#fff;border-radius:4px;font-size:10px}
.langdu-text{font-size:12px;line-height:2;color:var(--ink);font-family:var(--font-serif);padding:6px 0}
.pause-small{color:var(--cinnabar);font-weight:700;margin:0 1px}
.pause-big{color:var(--cinnabar);font-weight:700;margin:0 2px}
.ann-explain{margin-top:6px;padding:6px 8px;background:var(--paper-dark);border-radius:4px;font-size:10px;color:var(--ink-muted);line-height:1.6}

/* Mobile optimizations */
@media(max-width:380px){
  .top-bar .title{font-size:12px;letter-spacing:1px}
  .top-bar .title span{display:none}
  .icon-btn{width:28px;height:28px;font-size:12px}
  .filter-tag{padding:3px 8px;font-size:9px}
  .btn-row button{padding:8px 0;font-size:10px}
  .welcome h2{font-size:18px}
  .welcome .btn-start{padding:12px 40px;font-size:14px}
}
@media(max-height:500px){
  .welcome-insights{display:none}
  .welcome h2{font-size:16px;margin-bottom:4px}
  .welcome p{margin-bottom:1px;line-height:1.6}
  .welcome .btn-start{margin-top:12px;padding:10px 36px}
  .card-area{padding:4px 0}
}
.poem-scroll::-webkit-scrollbar{width:3px}
.poem-scroll::-webkit-scrollbar-thumb{background:var(--ink-muted);border-radius:2px}
.poem-scroll::-webkit-scrollbar-track{background:transparent}