/* ============================================================
   HanziCAT Style v5
   ============================================================ */

:root {
    --ink:     #1a0a00;
    --gold:    #d4a017;
    --bg:      #fdf6e8;
    --card-bg: #ffffff;
    --text:    #1a0a00;
    --border:  #e8d8b0;
    --muted:   #888;
}
[data-theme="dark"] {
    --ink:     #fdf6e8;
    --gold:    #ffcc33;
    --bg:      #121212;
    --card-bg: #1e1e1e;
    --text:    #fdf6e8;
    --border:  #333;
    --muted:   #aaa;
}

*,*::before,*::after { box-sizing:border-box; }
body {
    font-family:'Noto Sans TC','PingFang TC',sans-serif;
    background:var(--bg); color:var(--text); margin:0;
    transition:background .3s,color .3s;
}
nav {
    background:var(--ink); padding:14px 20px;
    display:flex; justify-content:space-between; align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.25); position:sticky; top:0; z-index:50;
}
.brand { color:white; font-weight:900; letter-spacing:1px; font-size:1rem; }
.tag   { background:var(--gold); color:var(--ink); padding:2px 6px; border-radius:4px; font-size:.6rem; margin-left:5px; }
.container { max-width:460px; margin:auto; padding:20px 16px 70px; }
.page { display:none; animation:fadeIn .35s ease-out; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} }

.footer {
    position:fixed; bottom:0; left:0; width:100%;
    text-align:center; padding:7px; font-size:11px; color:var(--muted);
    background:var(--bg); border-top:1px solid var(--border); z-index:10;
}

/* ===== CARD ===== */
.card { background:var(--card-bg); border:2px solid var(--gold); border-radius:20px; padding:20px; text-align:center; }
.shadow-anim { box-shadow:0 4px 24px rgba(212,160,23,.12); }

/* ===== INPUTS ===== */
input[type="text"],input[type="password"],input[type="number"],input[type="url"] {
    width:92%; padding:11px 14px; margin:7px 0;
    border-radius:10px; border:1px solid var(--border);
    background:var(--card-bg); color:var(--text);
    font-size:.9rem; outline:none; transition:border .2s;
}
input:focus { border-color:var(--gold); }

/* ===== BUTTONS ===== */
.btn-primary   { width:100%;padding:13px;background:var(--ink);color:white;border:none;border-radius:12px;cursor:pointer;font-weight:bold;margin-top:10px;font-size:.9rem; }
.btn-secondary { width:100%;padding:12px;background:var(--gold);color:var(--ink);border:none;border-radius:12px;cursor:pointer;font-weight:bold;margin-top:10px;font-size:.9rem; }
.btn-admin     { margin-top:12px;background:none;border:1px solid #888;padding:9px;cursor:pointer;width:100%;border-radius:10px;color:var(--text);font-size:.88rem; }
.btn-icon      { background:none;border:none;cursor:pointer;font-size:1.1rem;color:white;padding:4px; }
.btn-danger-outline    { width:100%;padding:11px;background:none;color:#e74c3c;border:2px solid #e74c3c;border-radius:12px;cursor:pointer;font-weight:bold;transition:.2s;font-size:.85rem; }
.btn-danger-outline:hover { background:#e74c3c;color:white; }
.btn-secondary-outline { width:100%;padding:11px;background:none;color:var(--text);border:2px solid var(--border);border-radius:12px;cursor:pointer;margin-top:5px; }

/* Feature buttons (home) */
.btn-feature {
    padding:12px 8px; background:rgba(212,160,23,.1);
    border:1.5px solid var(--gold); border-radius:12px;
    color:var(--text); font-size:.88rem; font-weight:bold; cursor:pointer;
    transition:background .2s;
}
.btn-feature:hover { background:rgba(212,160,23,.22); }
.btn-feature-lb { background:rgba(212,160,23,.18); }

/* Resource link */
.resource-link {
    display:inline-block; background:rgba(74,144,217,.1);
    border:1px solid #4a90d9; color:#4a90d9;
    padding:8px 16px; border-radius:20px;
    text-decoration:none; font-size:.83rem; font-weight:bold;
    transition:background .2s;
}
.resource-link:hover { background:rgba(74,144,217,.2); }

/* Notice banner */
.notice-banner {
    position:fixed; top:54px; left:0; right:0;
    background:#e67e22; color:white;
    padding:8px 16px; font-size:.82rem; font-weight:bold;
    display:flex; justify-content:space-between; align-items:center;
    z-index:49; animation:slideDown .3s ease;
}
@keyframes slideDown { from{transform:translateY(-100%)}to{transform:translateY(0)} }

/* ===== DUAL HANZI ===== */
.simp-badge {
    display:inline-block; background:rgba(74,144,217,.15);
    border:1px solid #4a90d9; color:#4a90d9;
    font-size:.6rem; font-weight:bold; padding:1px 5px;
    border-radius:4px; vertical-align:middle; margin-right:3px;
}
.hanzi-pair-wrap { text-align:center; }
#p-hanzi-simp {
    font-size:1.4rem; font-weight:700; color:#4a90d9;
    margin-top:4px; display:none;
}
.q-hanzi-simp {
    font-size:1.1rem; font-weight:700; color:#4a90d9;
    margin-top:2px; display:none;
}

/* Admin: dual hanzi input row */
.hanzi-input-row {
    display:flex; gap:8px; align-items:center; margin:8px 0;
}
.hanzi-input-col { flex:1; text-align:left; }
.hanzi-input-label {
    display:block; font-size:.75rem; font-weight:bold;
    color:var(--muted); margin-bottom:2px;
}
.hanzi-swap-icon { font-size:1.2rem; color:var(--muted); flex-shrink:0; }

/* ===== FLASHCARD ===== */
.flashcard-container { perspective:1000px; margin:18px 0; height:280px; }
.flashcard-inner { position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d;cursor:pointer; }
.flashcard-inner.is-flipped { transform:rotateY(180deg); }
.flashcard-front,.flashcard-back {
    position:absolute;width:100%;height:100%;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    border:3px dashed var(--gold);border-radius:20px;background:var(--card-bg);padding:16px;
}
.flashcard-back { transform:rotateY(180deg); }
.hanzi-big    { font-size:4.5rem; font-weight:900; }
.pinyin-text  { color:var(--gold); font-size:1.5rem; font-weight:bold; }
.meaning-text { font-size:1.2rem; font-weight:bold; margin:4px 0; }
.hint-text    { font-size:.72rem; color:var(--muted); margin-top:6px; }

/* Example on flashcard back */
.example-text {
    font-size:.82rem; color:#4a90d9; font-style:italic;
    margin:4px 0 0; padding:0 10px; text-align:center; display:none;
}

/* ===== QUIZ ===== */
.quiz-header { display:flex;justify-content:space-between;margin-bottom:8px;font-weight:bold;font-size:.9rem;align-items:center; }
.quiz-total-timer { font-size:1rem;font-weight:900;color:var(--gold); }
.options-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.opt-card { background:var(--card-bg);border:2px solid var(--gold);padding:16px 10px;border-radius:14px;cursor:pointer;text-align:center;font-weight:bold;font-size:.88rem;transition:transform .1s; }
.opt-card:hover { transform:scale(1.02); }
.opt-card.correct { background:#27ae60!important;border-color:#27ae60!important;color:white!important; }
.opt-card.wrong   { background:#c0392b!important;border-color:#c0392b!important;color:white!important; }

/* Per-question timer */
.question-timer-wrap { display:flex;align-items:center;gap:8px;margin-bottom:10px;background:rgba(0,0,0,.05);border-radius:20px;padding:5px 12px; }
[data-theme="dark"] .question-timer-wrap { background:rgba(255,255,255,.06); }
.question-timer-bar { flex:1;height:7px;border-radius:4px;background:#27ae60;transition:width .9s linear,background .3s; }
.question-timer-num { font-size:.82rem;font-weight:bold;color:var(--text);min-width:20px;text-align:right; }
.question-timer-num.timer-urgent { color:#e74c3c;animation:pulse .5s infinite alternate; }
@keyframes pulse { from{opacity:1}to{opacity:.35} }

/* ===== PRE-TEST ===== */
.pretest-icon  { font-size:2.8rem;margin-bottom:4px; }
.pretest-title { font-size:1.35rem;font-weight:900;margin:0 0 4px; }
.pretest-subtitle { color:var(--gold);font-weight:bold;font-size:.88rem;margin:0 0 18px; }
.instruction-list { text-align:left;display:flex;flex-direction:column;gap:10px; }
.instruction-item { display:flex;gap:11px;align-items:flex-start;background:rgba(0,0,0,.03);border-radius:12px;padding:11px;border-left:3px solid var(--gold); }
[data-theme="dark"] .instruction-item { background:rgba(255,255,255,.04); }
.inst-icon { font-size:1.3rem;flex-shrink:0;margin-top:2px; }
.inst-text strong { display:block;font-size:.88rem;margin-bottom:2px; }
.inst-text p { margin:0;font-size:.78rem;color:var(--muted);line-height:1.4; }

/* ===== LEADERBOARD ===== */
.lb-header { text-align:center; margin-bottom:16px; }
.lb-trophy { font-size:3rem; }
.lb-title  { font-size:1.3rem;font-weight:900;margin:4px 0 6px; }
.lb-meta   { font-size:.82rem; color:var(--muted); }
.lb-days   { color:var(--gold); font-weight:bold; }
.lb-row {
    display:flex; align-items:center; gap:12px;
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:12px; padding:12px; margin-bottom:8px;
    transition:border-color .2s;
}
.lb-row-me { border-color:var(--gold); border-width:2px; background:rgba(212,160,23,.06); }
.lb-rank { font-size:1.5rem; min-width:36px; text-align:center; }
.lb-rank-num {
    display:inline-block; background:rgba(0,0,0,.08);
    border-radius:50%; width:28px; height:28px;
    line-height:28px; text-align:center;
    font-size:.8rem; font-weight:bold;
}
[data-theme="dark"] .lb-rank-num { background:rgba(255,255,255,.1); }
.lb-user     { flex:1; text-align:left; }
.lb-username { font-weight:bold; font-size:.92rem; }
.lb-level    { font-size:.75rem; color:var(--muted); }
.lb-score    { font-size:1.1rem; font-weight:900; color:var(--gold); white-space:nowrap; }
.lb-you-badge {
    display:inline-block; background:var(--gold); color:var(--ink);
    font-size:.6rem; font-weight:bold; padding:1px 6px; border-radius:10px;
    vertical-align:middle; margin-left:4px;
}

/* ===== SEARCH ===== */
.search-input-wrap { display:flex;gap:6px;margin-bottom:10px; }
.search-input-wrap input { flex:1;margin:0; }
.btn-draw-search { background:var(--gold);border:none;border-radius:10px;padding:0 14px;font-size:1.1rem;cursor:pointer;color:var(--ink); }
.search-results { min-height:80px; }
.search-placeholder { text-align:center;padding:24px 0;color:var(--muted);font-size:.85rem; }

.search-card {
    display:flex; align-items:flex-start; gap:12px;
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:12px; padding:12px; margin-bottom:8px; cursor:pointer;
    transition:border-color .2s,transform .1s;
}
.search-card:hover { border-color:var(--gold);transform:translateX(2px); }
.sc-hanzi  { font-size:1.9rem;font-weight:900;min-width:52px;text-align:center;line-height:1.1;flex-shrink:0; }
.sc-simp   { font-size:.95rem;color:#4a90d9;font-weight:700; }
.sc-info   { flex:1;text-align:left; }
.sc-pinyin { color:var(--gold);font-weight:bold;font-size:.9rem; }
.sc-zhuyin { color:var(--muted);font-size:.72rem; }
.sc-meaning{ font-size:.86rem;margin-top:2px; }
.sc-score  { font-size:.7rem;color:var(--muted);white-space:nowrap;flex-shrink:0; }

/* Example in search card */
.sc-example {
    font-size:.78rem; color:#4a90d9; margin-top:5px;
    border-left:2px solid rgba(74,144,217,.4);
    padding-left:6px; font-style:italic; line-height:1.4;
}

/* Word detail popup */
.detail-section { text-align:left;margin-top:12px;font-size:.9rem; }
.detail-simp-row { margin:4px 0 2px;display:flex;align-items:center;justify-content:center;gap:6px; }
.score-badge { background:rgba(212,160,23,.15);border:1px solid var(--gold);color:var(--gold);border-radius:8px;padding:2px 10px;font-size:.82rem;font-weight:bold; }
.related-word { display:flex;align-items:center;gap:8px;padding:8px;background:rgba(0,0,0,.03);border-radius:8px;margin-top:6px;cursor:pointer;flex-wrap:wrap; }
[data-theme="dark"] .related-word { background:rgba(255,255,255,.04); }
.related-word:hover { background:rgba(212,160,23,.1); }
.rel-hanzi { font-size:1.3rem;font-weight:900; }
.rel-simp  { font-size:.9rem;font-weight:700;color:#4a90d9; }
.rel-info  { font-size:.8rem;color:var(--muted); }

/* Example sentence in detail popup */
.detail-example {
    background:rgba(74,144,217,.07);
    border:1px solid rgba(74,144,217,.25);
    border-left:3px solid #4a90d9;
    border-radius:8px; padding:10px 14px;
    margin-top:8px; font-size:.92rem;
    line-height:1.7; color:var(--text);
}
/* Highlighted hanzi in example */
.ex-highlight {
    background:rgba(212,160,23,.3);
    font-weight:bold; border-radius:3px; padding:0 2px;
}
[data-theme="dark"] .ex-highlight { color:var(--gold); background:rgba(212,160,23,.2); }

/* ===== CANVAS ===== */
.canvas-wrap {
    position:relative;margin:0 auto;width:280px;height:280px;
    border:3px solid var(--gold);border-radius:16px;overflow:hidden;
    background:var(--card-bg);cursor:crosshair;
}
#hanzi-canvas { display:block;touch-action:none; }
.canvas-hint {
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:rgba(200,180,100,.3);font-size:5rem;font-weight:900;
    pointer-events:none;user-select:none;
}

/* ===== RESULT CERT ===== */
.cert-card   { background:var(--card-bg);border:8px double var(--gold);padding:28px;border-radius:10px; }
.cert-header { font-size:1.35rem;font-weight:900;border-bottom:2px solid var(--gold);padding-bottom:10px; }
.cert-stats  { display:flex;justify-content:space-around;margin:18px 0;background:rgba(0,0,0,.04);padding:14px;border-radius:10px; }
.cert-label  { font-size:.7rem;color:var(--muted); }
.cert-val    { font-size:1.8rem;font-weight:900;color:var(--gold); }
#cert-cefr,#cert-tocfl,#cert-actfl { margin-top:8px;font-size:.95rem; }

/* ===== OVERLAY / POPUP ===== */
.overlay { position:fixed;inset:0;background:rgba(0,0,0,.85);align-items:center;justify-content:center;z-index:99; }
.overlay[style*="flex"] { display:flex!important; }
.popup { max-width:390px;width:92%;max-height:88vh;overflow-y:auto; }
.popup-wide { max-width:430px; }
.btn-mode { width:100%;padding:12px;margin-bottom:8px;border-radius:8px;border:1px solid var(--gold);background:none;color:var(--text);cursor:pointer;font-size:.9rem; }

/* Notice popup */
.notice-list { display:flex;flex-direction:column;gap:9px;text-align:left; }
.notice-item { display:flex;gap:11px;align-items:flex-start;background:rgba(0,0,0,.03);border-radius:10px;padding:10px; }
[data-theme="dark"] .notice-item { background:rgba(255,255,255,.04); }
.notice-badge { font-size:1.2rem;flex-shrink:0; }
.notice-item strong { display:block;font-size:.86rem;margin-bottom:2px; }
.notice-item p { margin:0;font-size:.76rem;color:var(--muted);line-height:1.4; }

/* ===== TOAST ===== */
.toast-notif {
    position:fixed;bottom:52px;left:50%;transform:translateX(-50%) translateY(14px);
    background:#333;color:white;padding:10px 20px;border-radius:20px;
    font-size:.82rem;white-space:nowrap;z-index:999;
    opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
    max-width:88vw;text-align:center;
}
.toast-notif.show { opacity:1;transform:translateX(-50%) translateY(0); }
.toast-success { background:#27ae60; }
.toast-error   { background:#e74c3c; }
.toast-info    { background:#2980b9; }

/* ===== ADMIN TABS ===== */
.admin-tabs { display:flex;gap:5px;margin-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap;padding-bottom:6px; }
.tab-btn { flex:1;padding:9px 5px;border:none;background:none;cursor:pointer;color:var(--muted);font-size:.78rem;white-space:nowrap; }
.tab-btn.active { color:var(--gold);border-bottom:3px solid var(--gold);font-weight:bold; }
.admin-tab-content { display:none; }
.admin-tab-content.active { display:block; }

/* ===== TABLE ===== */
.table-container { max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:8px; }
table { width:100%;border-collapse:collapse;font-size:.8rem; }
th,td { border:1px solid var(--border);padding:7px 8px;text-align:left; }
th { background:var(--ink);color:white;position:sticky;top:0;z-index:1; }

/* ===== IMPORT/EXPORT ===== */
.io-section { text-align:left;padding:8px 0; }
.io-title   { font-size:.98rem;font-weight:bold;margin:0 0 7px;color:var(--text); }
.io-desc    { font-size:.79rem;color:var(--muted);margin:4px 0 9px;line-height:1.5; }
.io-info    { display:inline-block;background:rgba(212,160,23,.12);border:1px solid var(--gold);border-radius:8px;padding:7px 13px;font-size:.8rem;font-weight:bold;color:var(--gold);margin-bottom:11px; }
.io-divider { border:0;border-top:1px dashed var(--border);margin:18px 0; }
.btn-export { width:100%;padding:12px;background:var(--ink);color:white;border:none;border-radius:12px;cursor:pointer;font-weight:bold;font-size:.9rem;transition:opacity .2s; }
.btn-export:hover { opacity:.85; }
.csv-format-box { background:rgba(0,0,0,.05);border:1px solid var(--border);border-radius:8px;padding:9px 13px;margin:7px 0;font-family:monospace;font-size:.78rem;color:var(--text);word-break:break-all; }
[data-theme="dark"] .csv-format-box { background:rgba(255,255,255,.05); }
.import-mode-label { font-size:.82rem;font-weight:bold;color:var(--text); }
.radio-label { display:flex;align-items:center;gap:5px;font-size:.82rem;cursor:pointer;color:var(--text); }
.import-mode-group { margin:10px 0; }
.upload-area { border:2px dashed var(--gold);border-radius:12px;padding:24px 18px;text-align:center;cursor:pointer;transition:background .2s;background:rgba(212,160,23,.04);margin:10px 0; }
.upload-area:hover { background:rgba(212,160,23,.1); }
.upload-area.drag-over { background:rgba(212,160,23,.18);border-style:solid; }
.upload-icon { font-size:1.8rem;margin-bottom:6px; }
.upload-text { font-weight:bold;font-size:.88rem;margin:0 0 3px;color:var(--text); }
.upload-subtext { font-size:.72rem;color:#999;margin:0; }
.preview-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:.84rem;font-weight:bold;color:var(--text); }
.btn-clear-preview { background:none;border:1px solid #ccc;border-radius:6px;padding:3px 9px;cursor:pointer;font-size:.73rem;color:#888; }
.btn-clear-preview:hover { border-color:#e74c3c;color:#e74c3c; }
.btn-import-confirm { width:100%;padding:12px;background:#27ae60;color:white;border:none;border-radius:12px;cursor:pointer;font-weight:bold;font-size:.88rem;margin-top:11px;transition:opacity .2s; }
.btn-import-confirm:hover { opacity:.88; }

/* Import tips box */
.import-tips {
    background: rgba(231,76,60,.06);
    border: 1px solid rgba(231,76,60,.25);
    border-left: 3px solid #e74c3c;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0 12px;
    font-size: .79rem;
}
.import-tip-title { font-weight: bold; color: #e74c3c; margin-bottom: 5px; }
.import-tip-list  { margin: 0; padding-left: 16px; color: var(--text); line-height: 1.7; }
.import-tip-list li strong { color: #27ae60; }
[data-theme="dark"] .import-tips { background: rgba(231,76,60,.08); }

/* ===== NAV GRID ===== */
.nav-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }