/* ═══════════════════════════════════════════════
   高项冲刺 · 默写训练 - 完整样式
   ═══════════════════════════════════════════════ */

:root {
  --bg: #F7F5F0;
  --card: #FFFFFF;
  --ink: #1C1917;
  --ink2: #78716C;
  --ink3: #A8A29E;
  --border: #E7E5E0;
  --accent: #4338CA;
  --accent-bg: #EEF2FF;
  --r1-bg: #FEF2F2; --r1: #991B1B;
  --r2-bg: #FFFBEB; --r2: #92400E;
  --r3-bg: #F0FDF4; --r3: #14532D;
  --r4-bg: #EEF2FF; --r4: #312E81;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --radius: 16px;
  --radius-sm: 10px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);max-width:430px;margin:0 auto;display:flex;flex-direction:column;position:relative}

/* ── SCREENS ── */
.screen{display:none;flex:1;flex-direction:column;height:100%;overflow:hidden;opacity:0;transition:opacity .1s ease}
.screen.on{display:flex;opacity:1}

/* ── SCROLL AREAS ── */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}
.scroll::-webkit-scrollbar{display:none}

/* ── HOME ── */
.home-top{padding:20px 20px 0}
.home-greeting{font-size:13px;color:var(--ink2);margin-bottom:4px}
.home-title{font-size:22px;font-weight:700;letter-spacing:-.3px}

.streak-card{
  margin:16px 20px 0;
  background:linear-gradient(135deg,#312E81,#4338CA,#6366F1);
  border-radius:var(--radius);padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;
}
.streak-left{}
.streak-num{font-size:42px;font-weight:800;line-height:1;letter-spacing:-2px}
.streak-label{font-size:12px;opacity:.75;margin-top:3px}
.streak-right{text-align:right}
.streak-due-num{font-size:36px;font-weight:700;line-height:1}
.streak-due-label{font-size:12px;opacity:.75;margin-top:3px}

.home-btns{padding:14px 20px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-start{
  grid-column:1/-1;
  background:var(--ink);color:#fff;
  border:none;border-radius:var(--radius-sm);
  padding:15px;font-size:15px;font-weight:600;
  cursor:pointer;letter-spacing:.3px;
  transition:transform .1s,opacity .1s;
}
.btn-start:active{transform:scale(.98);opacity:.9}
.btn-start.dim{background:#D6D3CE;color:var(--ink2)}
.btn-domain-start{
  background:var(--card);color:var(--ink);
  border:.5px solid var(--border);border-radius:var(--radius-sm);
  padding:12px;font-size:13px;font-weight:500;
  cursor:pointer;transition:transform .1s;
  box-shadow:var(--shadow-sm);
}
.btn-domain-start:active{transform:scale(.97)}

.section-label{padding:20px 20px 8px;font-size:11px;font-weight:600;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}

.domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}
.domain-card{
  background:var(--card);border-radius:var(--radius-sm);
  padding:14px 14px 12px;cursor:pointer;
  box-shadow:var(--shadow-sm);border:.5px solid var(--border);
  position:relative;overflow:hidden;
  transition:transform .1s;
}
.domain-card:active{transform:scale(.97)}
.domain-card::after{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:var(--dc,#999);border-radius:0 3px 3px 0;
}
.dc-name{font-size:13px;font-weight:600;padding-left:8px}
.dc-bar{height:3px;background:var(--border);border-radius:2px;margin:9px 0 5px}
.dc-fill{height:100%;border-radius:2px;background:var(--dc,#999);transition:width .4s}
.dc-stat{font-size:11px;color:var(--ink3);padding-left:8px}

/* ── PERF DOMAINS BANNER ── */
.perf-banner{
  margin:12px 20px 0;
  background:linear-gradient(135deg,#F59E0B,#F97316,#EF4444);
  border-radius:var(--radius);padding:16px 20px;
  cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .1s;
}
.perf-banner:active{transform:scale(.98)}
.perf-banner-left{display:flex;flex-direction:column;gap:4px}
.perf-banner-title{font-size:16px;font-weight:700}
.perf-banner-sub{font-size:12px;opacity:.8}
.perf-banner-arrow{font-size:20px;opacity:.8}

.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}
.perf-card{
  background:var(--card);border-radius:var(--radius-sm);
  padding:14px;cursor:pointer;
  box-shadow:var(--shadow-sm);border:.5px solid var(--border);
  position:relative;overflow:hidden;
  transition:transform .1s;
}
.perf-card:active{transform:scale(.97)}
.perf-card-icon{font-size:24px;margin-bottom:6px}
.perf-card-name{font-size:13px;font-weight:600;line-height:1.3}

/* ── STUDY ── */
.study-nav{
  padding:12px 20px;display:flex;
  align-items:center;gap:12px;flex-shrink:0;
}
.btn-close{
  background:none;border:none;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;color:var(--ink2);font-size:18px;
  transition:background .15s;
}
.btn-close:hover{background:var(--border)}
.prog-wrap{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.prog-label{font-size:12px;color:var(--ink3);white-space:nowrap;min-width:40px;text-align:right}

.card-wrap{flex:1;padding:0 16px;overflow:hidden;display:flex;flex-direction:column;perspective:1000px}
.flash-card{
  flex:1;background:var(--card);border-radius:20px;
  padding:24px 20px;overflow-y:auto;
  box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
  transition:opacity .15s,transform .5s;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.flash-card::-webkit-scrollbar{display:none}
.flash-card.flip-out{
  transform:rotateY(-90deg);
  opacity:0;
}
.flash-card.flip-in{
  transform:rotateY(0deg);
  opacity:1;
}

.card-meta{display:flex;gap:6px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.tag{display:inline-flex;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.tag-group{background:var(--border);color:var(--ink2);font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500}
.tag-key{background:#FEF3C7;color:#92400E;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700}

.card-q{font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1.25;color:var(--ink)}
.card-think{
  margin-top:auto;padding-top:24px;
  font-size:13px;color:var(--ink3);
  display:flex;align-items:center;gap:6px;
}
.think-dot{width:5px;height:5px;border-radius:50%;background:var(--ink3);animation:blink 1.4s ease-in-out infinite}
.think-dot:nth-child(2){animation-delay:.2s}
.think-dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* Answer */
.itto-section{margin-top:20px;padding-top:18px;border-top:.5px solid var(--border)}
.itto-block{margin-bottom:16px}
.itto-badge{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.06em;padding:3px 8px;border-radius:6px;margin-bottom:8px;
}
.badge-i{background:#DBEAFE;color:#1E3A8A}
.badge-t{background:#DCFCE7;color:#14532D}
.badge-o{background:#FEE2E2;color:#7F1D1D}

.itto-item{
  font-size:13px;color:var(--ink2);
  padding:5px 0 5px 12px;
  border-left:2px solid var(--border);
  margin-bottom:4px;line-height:1.55;
  transition:border-color .2s;
}
.itto-item.key{
  color:var(--ink);font-weight:500;
  border-left-color:var(--dc,var(--accent));
}
.itto-item.key .star{color:#F59E0B;font-size:10px;margin-left:3px}

/* Actions */
.card-actions{padding:12px 16px max(env(safe-area-inset-bottom),16px);flex-shrink:0}
.btn-reveal{
  width:100%;padding:15px;
  background:var(--ink);color:#fff;
  border:none;border-radius:14px;
  font-size:16px;font-weight:600;
  cursor:pointer;letter-spacing:.3px;
  transition:transform .1s,opacity .1s;
}
.btn-reveal:active{transform:scale(.98)}

.rating-hint{text-align:center;font-size:12px;color:var(--ink3);margin-bottom:10px}
.rating-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rbtn{
  border:none;border-radius:12px;
  padding:11px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;transition:transform .1s;
  font-size:11px;font-weight:600;
}
.rbtn:active{transform:scale(.95)}
.rbtn .ricon{font-size:22px;line-height:1}
.rbtn .rdays{font-size:9px;font-weight:400;opacity:.7;margin-top:1px}
.r1{background:var(--r1-bg);color:var(--r1)}
.r2{background:var(--r2-bg);color:var(--r2)}
.r3{background:var(--r3-bg);color:var(--r3)}
.r4{background:var(--r4-bg);color:var(--r4)}

/* ── COMPLETE ── */
.complete{
  display:none;flex:1;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px;text-align:center;
}
.complete.on{display:flex}
.cmp-emoji{font-size:72px;margin-bottom:20px;animation:pop .4s cubic-bezier(.175,.885,.32,1.275) both}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.cmp-title{font-size:26px;font-weight:800;margin-bottom:8px;letter-spacing:-.5px}
.cmp-sub{font-size:14px;color:var(--ink2);margin-bottom:28px;line-height:1.7}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-bottom:28px}
.cmp-stat{background:var(--card);border-radius:var(--radius-sm);padding:16px;box-shadow:var(--shadow-sm)}
.cmp-stat .n{font-size:30px;font-weight:800;margin-bottom:2px}
.cmp-stat .l{font-size:11px;color:var(--ink2)}
.btn-home{
  width:100%;padding:15px;background:var(--ink);color:#fff;
  border:none;border-radius:14px;font-size:16px;font-weight:600;
  cursor:pointer;
}

/* ── PROGRESS ── */
.prog-screen{flex:1;flex-direction:column;overflow:hidden}
.prog-screen.on{display:flex}

.prog-top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 0;
}
.prog-top-bar .section-label{padding:0;margin:0}
.prog-top-actions{display:flex;gap:8px}
.btn-sm{
  background:var(--card);color:var(--ink2);
  border:.5px solid var(--border);border-radius:8px;
  padding:6px 12px;font-size:11px;font-weight:500;
  cursor:pointer;transition:transform .1s;
  box-shadow:var(--shadow-sm);
}
.btn-sm:active{transform:scale(.95)}

.overall-card{
  margin:16px 20px 0;
  background:var(--card);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:20px;
  opacity:0;animation:fadeInUp .5s .3s forwards;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.ring-wrap{flex-shrink:0}
.ring-info{}
.ring-pct{font-size:38px;font-weight:800;color:var(--accent);letter-spacing:-1px;line-height:1}
.ring-label{font-size:13px;color:var(--ink2);margin-top:4px}
.ring-sub{font-size:12px;color:var(--ink3);margin-top:8px;line-height:1.6}

.domain-list{display:flex;flex-direction:column;gap:8px;padding:0 20px}
.pdi{background:var(--card);border-radius:var(--radius-sm);padding:14px 16px;box-shadow:var(--shadow-sm)}
.pdi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.pdi-name{font-size:14px;font-weight:600}
.pdi-ct{font-size:12px;color:var(--ink3)}
.pdi-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:8px}
.pdi-bar-fill{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.pdi-dots{display:flex;gap:10px}
.pdot{font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:3px}
.pdot .d{width:7px;height:7px;border-radius:50%}

/* ── EVM FORMULA SECTION ── */
.formula-toggle{
  margin:16px 20px 0;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.formula-toggle summary{
  padding:14px 18px;
  font-size:14px;font-weight:600;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
}
.formula-toggle summary::-webkit-details-marker{display:none}
.formula-toggle summary::after{content:'>';font-size:14px;color:var(--ink3);transition:transform .2s}
.formula-toggle[open] summary::after{transform:rotate(90deg)}
.formula-body{padding:0 18px 16px}
.formula-cat{margin-bottom:14px}
.formula-cat-title{
  font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:4px 10px;border-radius:6px;
  display:inline-block;margin-bottom:8px;
}
.formula-cat-title.cat-deviation{background:#FEE2E2;color:#991B1B}
.formula-cat-title.cat-index{background:#DBEAFE;color:#1E3A8A}
.formula-cat-title.cat-estimate{background:#D1FAE5;color:#065F46}
.formula-cat-title.cat-basic{background:#F3F4F6;color:#374151}
.formula-cat-title.cat-other{background:#F5F5F4;color:#57534E}

.formula-row{
  display:flex;align-items:baseline;gap:10px;
  padding:5px 0;font-size:13px;line-height:1.5;
}
.formula-name{
  font-weight:700;min-width:50px;
  font-family:"SF Mono","Fira Code",monospace;
}
.formula-expr{color:var(--ink);flex:1}
.formula-desc{font-size:11px;color:var(--ink3);white-space:nowrap}

/* ── DICTATION MODE ── */
.dict-screen{flex:1;flex-direction:column;overflow:hidden}
.dict-screen.on{display:flex}

.dict-header{
  padding:16px 20px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.dict-title{font-size:18px;font-weight:700;flex:1}

.dict-select{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 20px 80px;
}
.dict-random-btn{
  width:100%;padding:16px;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  color:#fff;border:none;border-radius:var(--radius);
  font-size:15px;font-weight:600;cursor:pointer;
  margin-bottom:16px;transition:transform .1s;
}
.dict-random-btn:active{transform:scale(.98)}
.dict-domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dict-domain-btn{
  background:var(--card);border:.5px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;
  cursor:pointer;text-align:left;
  box-shadow:var(--shadow-sm);transition:transform .1s;
  position:relative;overflow:hidden;
}
.dict-domain-btn:active{transform:scale(.97)}
.dict-domain-btn::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:var(--dc,#999);
}
.dict-domain-name{font-size:13px;font-weight:600;padding-left:8px}
.dict-domain-count{font-size:11px;color:var(--ink3);padding-left:8px;margin-top:3px}

.dict-input-area{
  flex:1;display:flex;flex-direction:column;
  padding:0 20px;overflow:hidden;
}
.dict-domain-label{
  font-size:24px;font-weight:800;text-align:center;
  padding:16px 0 8px;letter-spacing:-.5px;
}
.dict-hint{
  text-align:center;font-size:13px;color:var(--ink3);margin-bottom:16px;
}
.dict-textarea{
  flex:1;width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:16px;font-size:15px;line-height:2;
  font-family:inherit;color:var(--ink);
  background:var(--card);
  resize:none;outline:none;
  -webkit-overflow-scrolling:touch;
  transition:border-color .2s;
}
.dict-textarea:focus{border-color:var(--accent)}
.dict-textarea::placeholder{color:var(--ink3)}
.dict-submit-area{
  padding:12px 0 max(env(safe-area-inset-bottom),16px);
  flex-shrink:0;
}
.dict-submit-btn{
  width:100%;padding:15px;
  background:var(--ink);color:#fff;
  border:none;border-radius:14px;
  font-size:16px;font-weight:600;
  cursor:pointer;transition:transform .1s;
}
.dict-submit-btn:active{transform:scale(.98)}

/* Dictation Results */
.dict-result-area{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 20px 80px;
}
.dict-result-header{
  text-align:center;padding:16px 0;
}
.dict-result-score{
  font-size:42px;font-weight:800;color:var(--accent);line-height:1;
}
.dict-result-label{font-size:13px;color:var(--ink2);margin-top:6px}
.dict-result-list{margin-top:12px}
.dict-result-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin-bottom:6px;
  border-radius:var(--radius-sm);
  font-size:14px;
}
.dict-result-item.correct{background:#F0FDF4;color:#14532D}
.dict-result-item.fuzzy{background:#FFFBEB;color:#92400E}
.dict-result-item.missing{background:#FEF2F2;color:#991B1B}
.dict-result-item.wrong{background:#FEF2F2;color:#991B1B}
.dict-result-icon{font-size:16px;flex-shrink:0}
.dict-result-text{flex:1}
.dict-result-correction{font-size:12px;color:var(--ink3);margin-top:2px}
.dict-result-btns{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:16px 0;
}
.dict-result-btn{
  padding:13px;border:none;border-radius:12px;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .1s;
}
.dict-result-btn:active{transform:scale(.97)}
.dict-result-btn.primary{background:var(--ink);color:#fff}
.dict-result-btn.secondary{background:var(--card);color:var(--ink);border:.5px solid var(--border)}

/* ── PERF DOMAIN VIEW ── */
.perf-view-card{
  margin:0 16px;
  background:var(--card);border-radius:20px;
  padding:24px 20px;overflow-y:auto;
  box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
  flex:1;
}
.perf-view-card::-webkit-scrollbar{display:none}
.perf-view-icon{font-size:48px;margin-bottom:12px}
.perf-view-name{font-size:24px;font-weight:800;margin-bottom:20px;letter-spacing:-.5px}
.perf-section{margin-bottom:18px}
.perf-section-title{
  font-size:11px;font-weight:700;color:var(--ink3);
  letter-spacing:.06em;margin-bottom:8px;
  text-transform:uppercase;
}
.perf-item{
  font-size:13px;color:var(--ink);
  padding:6px 0 6px 12px;
  border-left:2px solid var(--accent);
  margin-bottom:5px;line-height:1.55;
}
.perf-item.exam-topic{border-left-color:#F59E0B}

/* ── BOTTOM NAV ── */
.bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:.5px solid var(--border);
  display:flex;
  padding-bottom:max(env(safe-area-inset-bottom),8px);
  z-index:100;
}
.bni{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:8px 0 4px;cursor:pointer;border:none;background:transparent;
  color:var(--ink3);font-size:10px;gap:2px;transition:color .15s;
}
.bni.on{color:var(--accent)}
.bni svg{width:22px;height:22px}
.bni.on svg{stroke:var(--accent)}

/* ── EMPTY ── */
.empty{text-align:center;padding:60px 24px;color:var(--ink3)}
.empty .e{font-size:48px;margin-bottom:12px}
.empty p{font-size:14px}

/* ── LOADING ── */
.loading{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--ink3)}
.spin{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── RING ANIMATION ── */
#ring-arc{
  transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) .3s;
}

/* ── HIDDEN FILE INPUT ── */
.hidden-input{display:none}