/* ============================================================
   字说 · Zì Shuō · Learn Chinese Idioms
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#08080d;
  --bg-card:#0f0f18;
  --bg-card-hover:#141420;
  --accent:#c8922a;
  --accent-dim:rgba(200,146,42,0.15);
  --accent-glow:rgba(200,146,42,0.35);
  --accent-soft:rgba(200,146,42,0.06);
  --text-primary:#e8e4d8;
  --text-secondary:#9b957f;
  --text-muted:#4a4535;
  --border:rgba(200,146,42,0.12);
  --pinyin:#a9a07b;
  --error:#c8502a;
  --success:#4a9;
  --seal:#a83028;
  --font-serif:'Noto Serif SC','PingFang SC',serif;
  --font-sans:'Noto Sans SC','PingFang SC',Arial,sans-serif;
}

html,body{height:100%;color:var(--text-primary);font-family:var(--font-sans);overflow:hidden}

body{
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(200,146,42,0.05) 0%, rgba(200,146,42,0.015) 35%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(40,32,18,0.4) 0%, transparent 60%),
    var(--bg);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.57 0 0 0 0 0.16 0 0 0 0.13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:0.55;mix-blend-mode:overlay;
}

#app{display:flex;flex-direction:column;height:100vh;position:relative;z-index:1}

.hidden{display:none!important}

/* ============================================================
   Navigation
   ============================================================ */
#main-nav{flex-shrink:0;background:rgba(8,8,13,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1100px;margin:0 auto;width:100%}
.nav-logo{text-decoration:none;display:flex;align-items:baseline;gap:6px}
.nav-logo-en{font-family:var(--font-serif);font-size:12px;color:var(--accent);letter-spacing:0.3em;text-transform:uppercase}
.nav-logo-dot{color:var(--text-muted);font-size:12px;opacity:0.4}
.nav-logo-zh{font-family:var(--font-serif);font-size:14px;color:var(--text-secondary);font-weight:300;letter-spacing:0.15em}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-user{font-family:var(--font-serif);font-size:12px;color:var(--text-secondary);letter-spacing:0.1em}
.nav-btn-logout{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);font-size:11px;padding:4px 12px;cursor:pointer;font-family:var(--font-sans);letter-spacing:0.08em;transition:all 0.2s}
.nav-btn-logout:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   Main Content
   ============================================================ */
#main-content{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent-dim) transparent}
#main-content::-webkit-scrollbar{width:4px}
#main-content::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:2px}

/* ============================================================
   Auth Pages (Login / Register)
   ============================================================ */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth-card{width:100%;max-width:400px;background:rgba(15,15,24,0.8);border:1px solid var(--border);border-radius:12px;padding:48px 40px;position:relative;overflow:hidden}
.auth-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.auth-title{font-family:var(--font-serif);font-size:28px;color:var(--text-primary);text-align:center;margin-bottom:6px;font-weight:300;letter-spacing:0.15em}
.auth-subtitle{font-family:var(--font-serif);font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:36px;letter-spacing:0.2em;font-weight:300}
.auth-field{margin-bottom:20px}
.auth-label{display:block;font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.2em;margin-bottom:8px;text-transform:uppercase;font-weight:300}
.auth-input{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:6px;padding:12px 16px;color:var(--text-primary);font-family:var(--font-sans);font-size:14px;outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.auth-input::placeholder{color:var(--text-muted)}
.auth-btn{width:100%;background:var(--accent-dim);border:1px solid var(--accent);border-radius:6px;padding:12px;color:var(--accent);font-family:var(--font-serif);font-size:13px;letter-spacing:0.2em;cursor:pointer;transition:all 0.25s;margin-top:8px}
.auth-btn:hover{background:rgba(200,146,42,0.25);box-shadow:0 0 24px var(--accent-glow)}
.auth-btn:active{transform:scale(0.98)}
.auth-btn:disabled{opacity:0.4;cursor:not-allowed}
.auth-switch{text-align:center;margin-top:24px;font-size:12px;color:var(--text-muted);letter-spacing:0.05em}
.auth-switch a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s}
.auth-switch a:hover{border-color:var(--accent)}
.auth-error{background:rgba(200,80,42,0.1);border:1px solid rgba(200,80,42,0.3);border-radius:6px;padding:10px 14px;color:var(--error);font-size:12px;margin-bottom:16px;text-align:center;letter-spacing:0.03em}
.auth-brand{position:absolute;bottom:32px;left:0;right:0;text-align:center}
.auth-brand-text{font-family:var(--font-serif);font-size:10px;color:var(--text-muted);letter-spacing:0.3em;opacity:0.5}

/* ============================================================
   Dashboard
   ============================================================ */
.dashboard{max-width:800px;margin:0 auto;padding:48px 24px 80px}
.dash-header{text-align:center;margin-bottom:48px}
.dash-greeting{font-family:var(--font-serif);font-size:24px;color:var(--text-primary);font-weight:300;letter-spacing:0.12em;margin-bottom:6px}
.dash-subtitle{font-family:var(--font-serif);font-size:12px;color:var(--text-muted);letter-spacing:0.25em;font-weight:300}

/* Current week card */
.current-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:36px;margin-bottom:36px;position:relative;overflow:hidden;cursor:pointer;transition:border-color 0.3s,box-shadow 0.3s}
.current-card:hover{border-color:rgba(200,146,42,0.25);box-shadow:0 0 40px rgba(200,146,42,0.08)}
.current-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.current-label{font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.35em;margin-bottom:16px;text-transform:uppercase;font-weight:300}
.current-idiom{font-family:var(--font-serif);font-size:clamp(42px,7vw,72px);color:var(--text-primary);font-weight:700;letter-spacing:0.12em;text-align:center;margin-bottom:8px}
.current-pinyin{font-family:'Times New Roman',serif;font-size:14px;color:var(--pinyin);letter-spacing:0.25em;text-align:center;font-style:italic;margin-bottom:16px}
.current-meaning{font-family:var(--font-serif);font-size:15px;color:var(--text-secondary);text-align:center;letter-spacing:0.05em;margin-bottom:24px}
.current-cta{display:flex;justify-content:center;gap:12px}
.cta-btn{font-family:var(--font-serif);font-size:12px;letter-spacing:0.2em;padding:10px 28px;border-radius:999px;cursor:pointer;transition:all 0.25s;text-transform:uppercase;font-weight:300}
.cta-btn-primary{background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent)}
.cta-btn-primary:hover{background:rgba(200,146,42,0.25);box-shadow:0 0 20px var(--accent-glow)}
.cta-btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-secondary)}
.cta-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

/* Week calendar strip */
.week-strip{display:flex;gap:8px;justify-content:center;margin:24px 0}
.week-day{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:12px;border:1px solid var(--border);color:var(--text-muted);transition:all 0.25s;position:relative}
.week-day.completed{border-color:var(--success);color:var(--success);background:rgba(68,170,153,0.08)}
.week-day.current{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);box-shadow:0 0 16px var(--accent-glow)}
.week-day.quiz-day{border-style:dashed}
.week-day-label{position:absolute;bottom:-16px;font-size:9px;color:var(--text-muted);letter-spacing:0.05em}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center}
.stat-value{font-family:var(--font-serif);font-size:28px;color:var(--accent);font-weight:300;margin-bottom:4px}
.stat-label{font-family:var(--font-serif);font-size:10px;color:var(--text-muted);letter-spacing:0.2em;text-transform:uppercase;font-weight:300}

/* Progress history list */
.history-section{margin-top:48px}
.history-title{font-family:var(--font-serif);font-size:12px;color:var(--pinyin);letter-spacing:0.35em;margin-bottom:20px;font-weight:300;display:flex;align-items:center;gap:14px}
.history-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--accent-soft) 0%,transparent 100%)}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-item{display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;transition:all 0.2s}
.history-item:hover{border-color:rgba(200,146,42,0.2)}
.history-idx{font-family:var(--font-serif);font-size:11px;color:var(--text-muted);min-width:28px;letter-spacing:0.1em}
.history-idiom{font-family:var(--font-serif);font-size:16px;color:var(--text-primary);letter-spacing:0.08em;flex:1}
.history-pinyin{font-size:11px;color:var(--pinyin);letter-spacing:0.05em}
.history-status{font-size:10px;padding:3px 8px;border-radius:4px;letter-spacing:0.1em;font-family:var(--font-serif);font-weight:300}
.history-status.completed{color:var(--success);background:rgba(68,170,153,0.1);border:1px solid rgba(68,170,153,0.2)}
.history-status.in-progress{color:var(--accent);background:var(--accent-dim);border:1px solid var(--border)}
.history-status.locked{color:var(--text-muted);background:transparent;border:1px solid var(--border);opacity:0.5}

/* ============================================================
   Learning View
   ============================================================ */
.learn-page{max-width:680px;margin:0 auto;padding:40px 24px 80px}
.learn-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}
.learn-back{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);font-size:12px;padding:6px 14px;cursor:pointer;font-family:var(--font-sans);transition:all 0.2s;display:flex;align-items:center;gap:6px}
.learn-back:hover{color:var(--accent);border-color:var(--accent)}
.learn-progress{font-family:var(--font-serif);font-size:11px;color:var(--text-muted);letter-spacing:0.15em}
.learn-day-label{font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.35em;text-align:center;margin-bottom:24px;font-weight:300}

/* Day tabs */
.day-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.day-tab{font-family:var(--font-serif);font-size:11px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);cursor:pointer;transition:all 0.25s;letter-spacing:0.15em;background:transparent;white-space:nowrap}
.day-tab:hover{border-color:var(--accent);color:var(--accent)}
.day-tab.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.day-tab.completed{border-color:var(--success);color:var(--success)}
.day-tab.locked{opacity:0.35;cursor:not-allowed}

/* Character learning card */
.char-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:40px 32px;margin-bottom:24px;text-align:center;position:relative;overflow:hidden}
.char-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.char-big{font-family:var(--font-serif);font-size:clamp(80px,15vw,140px);font-weight:700;color:var(--text-primary);line-height:1;margin:16px 0;animation:char-appear 0.6s ease both}
.char-pinyin{font-family:'Times New Roman',serif;font-size:18px;color:var(--pinyin);letter-spacing:0.3em;font-style:italic;margin-bottom:8px;animation:char-appear 0.6s ease 0.1s both}
.char-tone{font-size:12px;color:var(--text-muted);margin-bottom:20px;letter-spacing:0.1em}
.char-meaning{font-family:var(--font-serif);font-size:18px;color:var(--text-primary);line-height:1.7;margin-bottom:16px;animation:char-appear 0.6s ease 0.15s both}
.char-structure{font-size:12px;color:var(--text-secondary);margin-bottom:24px;letter-spacing:0.05em}
.char-audio-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s}
.char-audio-btn:hover{background:rgba(200,146,42,0.25);box-shadow:0 0 20px var(--accent-glow)}
.char-audio-btn.playing{animation:pulse-ring 1.2s ease-in-out infinite}

@keyframes char-appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 12px transparent}}

/* Mnemonics box */
.mnemonics-box{background:rgba(200,146,42,0.04);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:20px 0;text-align:left}
.mnemonics-label{font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.3em;margin-bottom:10px;font-weight:300}
.mnemonics-text{font-size:14px;color:var(--text-secondary);line-height:1.8}

/* Related words */
.related-section{margin:24px 0}
.related-title{font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.3em;margin-bottom:14px;font-weight:300;display:flex;align-items:center;gap:12px}
.related-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--accent-soft) 0%,transparent 100%)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.related-word{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;transition:border-color 0.2s}
.related-word:hover{border-color:rgba(200,146,42,0.25)}
.related-word-chars{font-family:var(--font-serif);font-size:17px;color:var(--text-primary);margin-bottom:4px;letter-spacing:0.05em}
.related-word-pinyin{font-size:11px;color:var(--pinyin);letter-spacing:0.05em;margin-bottom:4px;font-style:italic}
.related-word-meaning{font-size:12px;color:var(--text-secondary)}

/* History/Story section */
.history-story{margin:32px 0}
.story-label{font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.3em;margin-bottom:16px;font-weight:300;display:flex;align-items:center;gap:12px}
.story-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--accent-soft) 0%,transparent 100%)}
.story-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:28px;line-height:1.9}
.story-meta{display:flex;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.story-tag{font-family:var(--font-serif);font-size:11px;color:var(--accent);letter-spacing:0.1em;padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:var(--accent-soft)}
.story-text{font-size:15px;color:var(--text-secondary);line-height:1.9}
.story-text p{margin-bottom:14px}
.story-text p:last-child{margin-bottom:0}

/* Examples section */
.examples-section{margin:32px 0}
.example-card{padding:18px 0;border-bottom:1px solid var(--border)}
.example-card:last-child{border-bottom:none}
.example-zh{font-family:var(--font-serif);font-size:16px;color:var(--text-primary);line-height:1.8;margin-bottom:6px}
.example-pinyin{font-size:11px;color:var(--pinyin);letter-spacing:0.08em;margin-bottom:6px;font-style:italic}
.example-en{font-size:13px;color:var(--text-secondary);line-height:1.7}

/* Day navigation */
.day-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}
.day-nav-btn{font-family:var(--font-serif);font-size:12px;letter-spacing:0.2em;padding:10px 24px;border-radius:999px;cursor:pointer;transition:all 0.25s;border:1px solid var(--border);background:transparent;color:var(--text-secondary)}
.day-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.day-nav-btn:disabled{opacity:0.3;cursor:not-allowed}
.day-nav-btn.primary{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.day-nav-btn.primary:hover{background:rgba(200,146,42,0.25)}

/* Review page */
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:32px;margin-bottom:16px}
.review-idiom{font-family:var(--font-serif);font-size:clamp(36px,6vw,56px);font-weight:700;text-align:center;margin-bottom:8px}
.review-pinyin{text-align:center;font-size:14px;color:var(--pinyin);letter-spacing:0.2em;font-style:italic;margin-bottom:12px}
.review-meaning{text-align:center;font-size:15px;color:var(--text-secondary);margin-bottom:20px}
.review-chars{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.review-char{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:28px;border:1px solid var(--border);border-radius:8px;color:var(--text-primary)}

/* ============================================================
   Quiz View
   ============================================================ */
.quiz-page{max-width:680px;margin:0 auto;padding:40px 24px 80px}
.quiz-header{text-align:center;margin-bottom:36px}
.quiz-title{font-family:var(--font-serif);font-size:20px;color:var(--text-primary);font-weight:300;letter-spacing:0.15em;margin-bottom:6px}
.quiz-subtitle{font-size:12px;color:var(--text-muted);letter-spacing:0.15em}
.quiz-progress{display:flex;align-items:center;gap:12px;margin:24px 0;justify-content:center}
.quiz-progress-bar{width:200px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.quiz-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.4s ease}
.quiz-progress-text{font-family:var(--font-serif);font-size:11px;color:var(--text-muted);letter-spacing:0.15em}

/* Question card */
.quiz-question{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:40px 32px;margin-bottom:24px;text-align:center}
.quiz-q-type{font-family:var(--font-serif);font-size:11px;color:var(--pinyin);letter-spacing:0.3em;margin-bottom:20px;font-weight:300}
.quiz-q-prompt{font-family:var(--font-serif);font-size:16px;color:var(--text-secondary);line-height:1.7;margin-bottom:24px}
.quiz-q-char{font-family:var(--font-serif);font-size:clamp(48px,10vw,80px);font-weight:700;color:var(--text-primary);margin:16px 0}

/* Multiple choice options */
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-option{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:all 0.2s;text-align:center}
.quiz-option:hover{border-color:var(--accent);background:var(--bg-card-hover)}
.quiz-option.selected{border-color:var(--accent);background:var(--accent-dim)}
.quiz-option.correct{border-color:var(--success);background:rgba(68,170,153,0.1);color:var(--success)}
.quiz-option.wrong{border-color:var(--error);background:rgba(200,80,42,0.1);color:var(--error)}
.quiz-option-text{font-family:var(--font-serif);font-size:15px;color:var(--text-primary)}
.quiz-option-sub{font-size:11px;color:var(--text-muted);margin-top:4px}

/* Hanzi-Writer area */
.hanzi-writer-area{margin:24px 0}
.hanzi-writer-target{width:250px;height:250px;margin:0 auto;border:1px dashed var(--border);border-radius:8px;position:relative;background:rgba(255,255,255,0.02)}
.hanzi-writer-target canvas{display:block;margin:0 auto}
.hanzi-writer-hint{font-size:12px;color:var(--text-muted);margin-top:12px;letter-spacing:0.05em}

/* Quiz results */
.quiz-results{text-align:center;padding:48px 24px}
.quiz-result-icon{font-size:48px;margin-bottom:16px}
.quiz-result-title{font-family:var(--font-serif);font-size:24px;color:var(--text-primary);font-weight:300;letter-spacing:0.1em;margin-bottom:8px}
.quiz-result-score{font-family:var(--font-serif);font-size:48px;color:var(--accent);font-weight:300;margin:16px 0}
.quiz-result-msg{font-size:14px;color:var(--text-secondary);margin-bottom:32px;line-height:1.7}
.quiz-result-actions{display:flex;gap:12px;justify-content:center}

/* ============================================================
   Toast notifications
   ============================================================ */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px 20px;font-size:13px;color:var(--text-primary);box-shadow:0 8px 32px rgba(0,0,0,0.4);animation:toast-in 0.3s ease;max-width:320px}
.toast.success{border-color:rgba(68,170,153,0.4);color:var(--success)}
.toast.error{border-color:rgba(200,80,42,0.4);color:var(--error)}
@keyframes toast-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:660px){
  .auth-card{padding:36px 24px}
  .dashboard{padding:32px 16px 60px}
  .stats-row{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr}
  .week-strip{gap:6px}
  .week-day{width:38px;height:38px;font-size:11px}
  .learn-page{padding:24px 16px 60px}
  .day-tabs{gap:4px}
  .day-tab{padding:6px 12px;font-size:10px}
}

/* Hanzi-Writer controls */
.hanzi-writer-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.hw-ctrl-btn {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.hw-ctrl-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.hw-ctrl-primary {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.hw-ctrl-primary:hover {
  background: rgba(200, 146, 42, 0.25);
}

/* Example play button */
.example-zh-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.example-controls {
  flex-shrink: 0;
}
.example-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.example-play:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.example-play.playing {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   Feature Styles
   ============================================================ */

/* SRS Badges */
.srs-badge {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.srs-new { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border); }
.srs-progress { background: rgba(200,146,42,0.1); color: var(--accent); border: 1px solid var(--accent); }
.srs-due { background: rgba(200,80,42,0.1); color: var(--error); border: 1px solid var(--error); animation: pulse 2s infinite; }
.srs-ok { background: rgba(68,170,153,0.1); color: var(--success); border: 1px solid rgba(68,170,153,0.3); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Progress Chart */
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-top: 24px;
}
.chart-title {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--pinyin);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
  text-align: center;
}
.progress-chart {
  width: 100%;
  height: 40px;
}
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* Theme Toggle */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 20px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.theme-toggle:hover {
  border-color: var(--accent);
  transform: scale(1.1);
}

/* Swipe hint */
.swipe-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 16px;
  opacity: 0.6;
}


/* Light theme - Qinglu (青绿) aesthetics */
.light-theme .char-big {
  text-shadow: none;
  color: #1a2e2a;
}
.light-theme .review-idiom {
  text-shadow: none;
  color: #1a2e2a;
}
.light-theme .current-idiom {
  text-shadow: none;
  color: #1a2e2a;
}
.light-theme .play-btn:hover {
  box-shadow: 0 0 16px rgba(45,122,95,0.2);
}
.light-theme .nav-btn:hover {
  box-shadow: none;
}
.light-theme .char-audio-btn {
  background: rgba(45,122,95,0.08);
  border-color: rgba(45,122,95,0.3);
  color: #2d7a5f;
}
.light-theme .char-audio-btn:hover {
  background: rgba(45,122,95,0.15);
  box-shadow: 0 0 16px rgba(45,122,95,0.2);
}
.light-theme .day-tab.active {
  background: rgba(45,122,95,0.1);
  border-color: #2d7a5f;
  color: #2d7a5f;
}
.light-theme .day-tab.completed {
  border-color: #3d8a6a;
  color: #3d8a6a;
}
.light-theme .week-day.completed {
  border-color: #3d8a6a;
  color: #3d8a6a;
  background: rgba(61,138,106,0.1);
}
.light-theme .week-day.current {
  border-color: #2d7a5f;
  color: #2d7a5f;
  background: rgba(45,122,95,0.1);
  box-shadow: 0 0 12px rgba(45,122,95,0.15);
}
.light-theme .cta-btn-primary {
  background: rgba(45,122,95,0.12);
  border-color: #2d7a5f;
  color: #2d7a5f;
}
.light-theme .cta-btn-primary:hover {
  background: rgba(45,122,95,0.2);
  box-shadow: 0 0 20px rgba(45,122,95,0.15);
}
.light-theme .nav-btn:hover {
  border-color: #2d7a5f;
  color: #2d7a5f;
}
.light-theme .auth-btn {
  background: rgba(45,122,95,0.12);
  border-color: #2d7a5f;
  color: #2d7a5f;
}
.light-theme .auth-btn:hover {
  background: rgba(45,122,95,0.2);
}
.light-theme .auth-input:focus {
  border-color: #2d7a5f;
  box-shadow: 0 0 0 3px rgba(45,122,95,0.1);
}
.light-theme .theme-toggle {
  background: #fafcfb;
  border-color: rgba(90,140,120,0.3);
}
.light-theme .quiz-option:hover {
  border-color: #2d7a5f;
}
.light-theme .quiz-option.selected {
  background: rgba(45,122,95,0.1);
  border-color: #2d7a5f;
}
.light-theme .quiz-option.correct {
  background: rgba(61,138,106,0.15);
  border-color: #3d8a6a;
}
.light-theme .srs-badge.srs-new { background: rgba(45,122,95,0.1); color: #2d7a5f; border-color: rgba(45,122,95,0.3); }
.light-theme .srs-badge.srs-progress { background: rgba(45,122,95,0.15); color: #2d7a5f; border-color: #2d7a5f; }
.light-theme .srs-badge.srs-ok { background: rgba(61,138,106,0.15); color: #3d8a6a; border-color: rgba(61,138,106,0.4); }