/* common styles */

*{ margin:0; padding:0; box-sizing:border-box; }
:root{ --bg:#F6F6F6; --card:#FFFFFF; --card-2:#F9FBFF; --text:#14171F; --muted:#7B8494; --line:#E8EDF5; --primary:#1F7CF5; --primary-2:#57A8FF; --primary-soft:#EAF3FF; --success:#22C55E; --warning:#F59E0B; --purple:#7C3AED; --pink:#EC4899; --orange:#F97316; --danger:#EF4444; --shadow:0 10px 30px rgba(18, 28, 45, 0.08); --radius:16px; --container:600px; }
html { scrollbar-gutter: stable; }
body{   -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10+ и Edge */
  user-select: none;   font-family:Roboto, Arial, sans-serif; background:#F6F6F6; /*linear-gradient(180deg, #F7FAFF 0%, #F6F6F6 100%);*/color:var(--text); min-height:100vh; overflow-y: scroll; }
body.dark_theme{ --bg:#111315; --card:#191C20; --card-2:#1E2329; --text:#F3F5F7; --muted:#98A2B3; --line:#2A313A; --primary:#3B8CFF; --primary-2:#67B0FF; --primary-soft:#16263E; --shadow:none; background:linear-gradient(180deg, #111315 0%, #121518 100%); }
.app{ max-width:var(--container); margin:0 auto; min-height:100vh; background:transparent; position:relative; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

.topbar{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(246,246,246,.78); backdrop-filter:blur(18px); border-bottom:1px solid rgba(0,0,0,.04); }
body.dark_theme .topbar{ background:rgba(17,19,21,.8); border-bottom:1px solid rgba(255,255,255,.04); }
.topbar-inner{ max-width:var(--container); margin:0 auto; padding:14px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar-profile-side{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-avatar{ width:46px; height:46px; border-radius:15px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; box-shadow:0 12px 28px rgba(31,124,245,.28); flex-shrink:0; }
.topbar-profile-text{ min-width:0; }
.topbar-profile-text h1{ font-size:16px; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-profile-text p{ margin-top:4px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.back-btn,.icon-btn{ width:42px; height:42px; border:none; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--text); box-shadow:var(--shadow); font-size:18px; cursor:pointer; flex-shrink:0; }
.back-btn.is-hidden{display:none}

.page-head-shell{ display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.page-head{ min-width:0; }
.page-head h1{ font-size:18px; font-weight:900; line-height:1.15; }
.page-head p{ margin-top:4px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.page{ padding:88px 16px 98px; }

.section{ margin-bottom:14px; }

.bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:blur(18px); border-top:1px solid rgba(0,0,0,.05); }
body.dark_theme .bottom-nav{ background:rgba(17,19,21,.88); border-top:1px solid rgba(255,255,255,.05); }
.bottom-nav-inner{ max-width:var(--container); margin:0 auto; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.nav-item{ text-decoration:none; color:var(--muted); border-radius:14px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; font-weight:800; transition:.2s ease; }
.nav-item.active{ color:var(--primary); background:var(--primary-soft); }
.nav-item i{ font-style:normal; font-size:18px; line-height:1; }

.loading-state,.empty-state-global{padding:88px 16px 98px;text-align:center;color:var(--muted)}

[data-route]{cursor: pointer;}

.title-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.title-row h3{ font-size:15px; font-weight:900; }
.title-row span{ font-size:12px; color:var(--muted); font-weight:700; }

.mode-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); border:1px solid rgba(31,124,245,.08); font-size:12px; font-weight:800; }
.mode-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }

@keyframes wave{ 0%,100%{ transform:scaleY(.7); opacity:.8; } 50%{ transform:scaleY(1.15); opacity:1; } }

 .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); width: calc(100% - 32px); max-width: 420px; padding: 14px 16px; border-radius: 18px; background: rgba(20,23,31,0.92); color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 18px 40px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: all .22s ease; z-index: 100; }

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* streak modal */
.streak-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:.25s ease; }
.streak-modal.show{ opacity:1; pointer-events:auto; }

.streak-modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.48); backdrop-filter:blur(6px); }

.streak-modal-sheet{ position:relative; width:100%; max-width:430px; border-radius:28px; padding:22px 18px 18px; background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 34%), linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%); border:1px solid #FDE7CC; box-shadow:0 24px 70px rgba(15,23,42,.22); transform:translateY(24px) scale(.97); transition:.28s ease; overflow:hidden; }

.streak-modal.show .streak-modal-sheet{ transform:translateY(0) scale(1); }

body.dark_theme .streak-modal-sheet{ background: radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 34%), linear-gradient(180deg, #2A2018 0%, #1D1A18 100%); border-color:#4A3728; }

.streak-modal-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border:none; border-radius:12px; background:rgba(255,255,255,.72); color:#111827; font-size:14px; font-weight:900; cursor:pointer; }

body.dark_theme .streak-modal-close{ background:rgba(255,255,255,.08); color:#fff; }

.streak-modal-fire{ width:84px; height:84px; margin:8px auto 0; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(180deg, #FFF1DD 0%, #FFE4B5 100%); border:1px solid #FBD38D; box-shadow:0 14px 30px rgba(249,115,22,.18); }

body.dark_theme .streak-modal-fire{ background:linear-gradient(180deg, #3A2A1D 0%, #2B211B 100%); border-color:#5A4030; }

.streak-modal-label{ margin-top:16px; text-align:center; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.7px; color:#F97316; }

.streak-modal-title{ margin-top:8px; text-align:center; font-size:28px; line-height:1.05; font-weight:900; letter-spacing:-.8px; color:#111827; }

body.dark_theme .streak-modal-title{ color:#fff; }

.streak-modal-text{ margin:10px auto 0; max-width:310px; text-align:center; font-size:14px; line-height:1.5; color:#6B7280; }

body.dark_theme .streak-modal-text{ color:#B7C0CE; }

.streak-modal-days{ margin-top:18px; padding:16px; border-radius:20px; background:rgba(255,255,255,.72); border:1px solid #FDE7CC; text-align:center; }

body.dark_theme .streak-modal-days{ background:rgba(255,255,255,.04); border-color:#433127; }

.streak-modal-days strong{ display:block; font-size:44px; line-height:1; font-weight:900; letter-spacing:-1.4px; color:#111827; }

body.dark_theme .streak-modal-days strong{ color:#fff; }

.streak-modal-days span{ display:block; margin-top:6px; font-size:13px; font-weight:800; color:#6B7280; }

body.dark_theme .streak-modal-days span{ color:#B7C0CE; }

.streak-modal-btn{ margin-top:16px; width:100%; border:none; border-radius:16px; padding:14px 16px; font-size:14px; font-weight:900; cursor:pointer; color:#fff; background:linear-gradient(135deg, #F97316 0%, #FB923C 100%); box-shadow:0 10px 24px rgba(249,115,22,.24); }

body.modal-open{ overflow:hidden; }
/* home page */

.home-page .hero{ padding:18px; overflow:hidden; position:relative; background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 34%), linear-gradient(135deg, #1678F2 0%, #57A8FF 100%); color:#fff; min-height:270px; }
.home-page .hero::before{ content:""; position:absolute; right:-26px; top:-26px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.10); }
.home-page .hero::after{ content:""; position:absolute; left:-36px; bottom:-36px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.08); }
.home-page .hero-top{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.home-page .hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.15); font-size:12px; font-weight:800; backdrop-filter:blur(8px); }
.home-page .hero-badge .dot{ width:9px; height:9px; border-radius:50%; background:#A7F3D0; box-shadow:0 0 0 4px rgba(167,243,208,.14); }
.home-page .hero-mini{ text-align:right; font-size:12px; line-height:1.45; color:rgba(255,255,255,.92); }
.home-page .hero-mini strong{ display:block; font-size:20px; color:#fff; margin-top:2px; }
.home-page .hero-subtitle{ position:relative; z-index:1; margin-top:18px; font-size:13px; font-weight:700; color:rgba(255,255,255,.92); }
.home-page .hero-title{ position:relative; z-index:1; margin-top:8px; font-size:30px; line-height:1.05; font-weight:900; letter-spacing:-0.8px; max-width:320px; }
.home-page .hero-desc{ position:relative; z-index:1; margin-top:10px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.95); max-width:330px; }
.home-page .hero-route, .daily_learn_words-page .hero-route{ position:relative; z-index:1; margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.home-page .hero-route-chip, .daily_learn_words-page .hero-route-chip{ padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); font-size:11px; font-weight:900; color:#fff; white-space:nowrap; }
.home-page .hero-route-chip.done, .daily_learn_words-page .hero-route-chip.done{ background:#fff; color:var(--primary); border-color:#fff; }
.home-page .hero-route-chip.active, .daily_learn_words-page .hero-route-chip.active{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.22); box-shadow:0 0 0 1px rgba(255,255,255,.10) inset; }

.daily_learn_words-page .hero-route{ margin:4px 0 10px; }
.daily_learn_words-page .hero-route-chip{ background:#fff; border:1px solid rgba(31,124,245,.14); color:var(--primary); }
.daily_learn_words-page .hero-route-chip.done{ background:var(--primary); color:#fff; border-color:rgba(31,124,245,.28); }
.daily_learn_words-page .hero-route-chip.active{ background:#fff; border-color:var(--primary); box-shadow:0 0 0 2px rgba(31,124,245,.10); }

.home-page .hero-progress-box{ position:relative; z-index:1; margin-top:16px; padding:14px; border-radius:16px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); }
.home-page .hero-progress-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; font-weight:800; }
.home-page .hero-progress{ height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.22); }
.home-page .hero-progress > div{ width:0%; height:100%; background:#fff; border-radius:999px; transition:.25s ease; }
.home-page .hero-actions{ position:relative; z-index:1; margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.home-page .hero--create{ background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 34%), linear-gradient(135deg, #0F172A 0%, #1F7CF5 100%); min-height:250px; }
.home-page .hero--done{ background: radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 34%), linear-gradient(135deg, #16A34A 0%, #22C55E 100%); min-height:285px; }
.home-page .hero-timer-box{ position:relative; z-index:1; margin-top:16px; padding:16px; border-radius:18px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); }
.home-page .hero-timer-label{ font-size:12px; font-weight:800; color:rgba(255,255,255,.88); text-transform:uppercase; letter-spacing:.4px; }

.home-page .hero-timer-value{ margin-top:8px; font-size:34px; line-height:1; font-weight:900; letter-spacing:-1px; }

.home-page .hero-timer-sub{ margin-top:8px; font-size:13px; line-height:1.45; color:rgba(255,255,255,.92); }

.home-page .btn-success{ background:#fff; color:#16A34A; }


.home-page .btn{ border:none; border-radius:14px; padding:12px 14px; font-size:14px; font-weight:800; cursor:pointer; transition:.2s ease; }
.home-page .btn-white{ background:#fff; color:var(--primary); }
.home-page .btn-glass{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.16); }

.home-page .streak-card, .section-card, .premium-card{ padding:16px; }

.home-page .tag{ padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; background:var(--bg); border:1px solid var(--line); }

.home-page .streak-box{ padding:16px; border-radius:18px; background:linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%); border:1px solid #FDE7CC; }
body.dark_theme .home-page .streak-box{ background:linear-gradient(180deg, #2A2018 0%, #1D1A18 100%); border-color:#4A3728; }
.streak-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.home-page .streak-icon{ width:42px; height:42px; border-radius:14px; background:#FFF1DD; display:flex; align-items:center; justify-content:center; font-size:20px; }
body.dark_theme .home-page .streak-icon{ background:#3A2A1D; }
.home-page .streak-num{ margin-top:16px; font-size:38px; line-height:1; font-weight:900; letter-spacing:-1px; }
.home-page .streak-label{ margin-top:4px; font-size:13px; color:var(--muted); font-weight:700; }
.home-page .streak-note{ margin-top:14px; font-size:12px; line-height:1.45; color:var(--muted); }

.home-page .quick-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.home-page .quick-card{ padding:14px; min-height:118px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.home-page .quick-icon{ width:42px; height:42px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; }
.home-page .quick-card h4{ margin-top:14px; font-size:14px; line-height:1.25; font-weight:900; }
.home-page .quick-card p{ margin-top:5px; font-size:12px; line-height:1.4; color:var(--muted); }
.home-page .practice-wrap{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }

.home-page .practice-item{ padding:14px; border-radius:15px; background:var(--bg); border:1px solid var(--line); }
.home-page .practice-item strong{ display:block; font-size:14px; font-weight:900; margin-bottom:6px; }
.home-page .practice-item span{ display:block; font-size:12px; color:var(--muted); line-height:1.45; }
.home-page .practice-btn{ margin-top:12px; width:100%; border:none; background:var(--primary-soft); color:var(--primary); border-radius:14px; padding:13px 14px; font-size:14px; font-weight:900; cursor:pointer; }

.home-page .stats-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.home-page .stat{ padding:14px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.home-page .stat strong{ display:block; font-size:19px; font-weight:900; margin-bottom:5px; }
.home-page .stat span{ font-size:12px; line-height:1.4; color:var(--muted); }

.home-page .premium-card{ position:relative; overflow:hidden; background:linear-gradient(135deg, #6D28D9 0%, #A855F7 100%); color:#fff; }
.home-page .premium-card::after{ content:""; position:absolute; right:-28px; top:-28px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.10); }
.home-page .premium-card h3{ position:relative; z-index:1; font-size:18px; font-weight:900; }
.home-page .premium-card p{ position:relative; z-index:1; margin-top:8px; font-size:13px; line-height:1.5; max-width:280px; color:rgba(255,255,255,.94); }
.home-page .premium-btn{ position:relative; z-index:1; margin-top:14px; border:none; background:#fff; color:#6D28D9; border-radius:14px; padding:12px 14px; font-size:13px; font-weight:900; cursor:pointer; }

@media (max-width: 560px){ .home-page .quick-grid{ grid-template-columns:repeat(2, 1fr); } .home-page .practice-wrap{ grid-template-columns:1fr 1fr; } .home-page .hero-title{ font-size:27px; } }

/* progress-page */

.progress-page .analytics-hero{ padding:16px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.progress-page .analytics-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.progress-page .analytics-copy{ flex:1; min-width:0; }
.progress-page .analytics-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:800; border:1px solid rgba(31,124,245,.08); }
.progress-page .analytics-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.progress-page .analytics-copy h2{ margin-top:12px; font-size:26px; line-height:1.1; font-weight:900; letter-spacing:-0.5px; }
.progress-page .analytics-copy p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:330px; }
.progress-page .analytics-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

.progress-page .score-side{ flex-shrink:0; text-align:center; }
.progress-page .score-ring{ width:100px; height:100px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--primary) calc(var(--score) * 1%), #DDE8F8 0); }
body.dark_theme .progress-page .score-ring{ background:conic-gradient(var(--primary) calc(var(--score) * 1%), #243041 0); }
.progress-page .score-ring::before{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--card); border:1px solid var(--line); }
.progress-page .score-inner{ position:relative; z-index:1; }
.progress-page .score-inner strong{ display:block; font-size:24px; line-height:1; font-weight:900; text-align:center; }
.progress-page .score-inner span{ display:block; margin-top:5px; font-size:11px; color:var(--muted); font-weight:800; text-align:center; }

.progress-page .hero-metric{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.progress-page .hero-metric strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.progress-page .hero-metric span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.progress-page .period-tabs{ display:flex; gap:8px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
.progress-page .period-tabs::-webkit-scrollbar{ display:none; }
.progress-page .period-tab{ border:none; background:var(--card); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; box-shadow:var(--shadow); transition:.2s ease; }
.progress-page .period-tab.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.22); }

.progress-page .kpi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.progress-page .kpi-card{ padding:14px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.progress-page .kpi-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.progress-page .kpi-icon{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--primary-soft); color:var(--primary); }
.progress-page .kpi-chip{ padding:7px 9px; border-radius:999px; font-size:11px; font-weight:800; background:var(--bg); border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.progress-page .kpi-card strong{ display:block; margin-top:14px; font-size:24px; line-height:1; font-weight:900; letter-spacing:-0.4px; }
.progress-page .kpi-card p{ margin-top:6px; font-size:12px; line-height:1.45; color:var(--muted); font-weight:700; }

.progress-page .chart-card{ padding:16px; }
.progress-page .chart-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; }
.progress-page .chart-head strong{ display:block; font-size:16px; line-height:1.2; font-weight:900; }
.progress-page .chart-head span{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }
.progress-page .chart-total{ text-align:right; font-size:12px; color:var(--muted); font-weight:700; flex-shrink:0; }
.progress-page .chart-total strong{ display:block; margin-top:3px; font-size:22px; color:var(--text); font-weight:900; }

.progress-page .line-chart-wrap{ position:relative; width:100%; }
.progress-page .line-chart-box{ position:relative; width:100%; height:210px; border-radius:18px; background:linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%); border:1px solid var(--line); overflow:hidden; padding:10px 10px 0; }
.progress-page .line-chart-svg{ width:100%; height:170px; display:block; }

.progress-page .chart-grid-line{ stroke:var(--line); stroke-width:1; }
.progress-page .chart-area{ fill:url(#chartAreaGradient); }
.progress-page .chart-line{ fill:none; stroke:var(--primary); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.progress-page .chart-dot{ fill:#fff; stroke:var(--primary); stroke-width:3; }
.progress-page .chart-value{ font-size:11px; font-weight:800; fill:var(--muted); }
.progress-page .chart-labels{ display:grid; gap:8px; padding:8px 4px 10px; }
.progress-page .chart-labels span{ text-align:center; font-size:11px; color:var(--muted); font-weight:800; }
.progress-page .chart-fade{ position:absolute; left:0; right:0; bottom:44px; height:60px; background:linear-gradient(180deg, rgba(246,246,246,0) 0%, rgba(246,246,246,.18) 100%); pointer-events:none; }
body.dark_theme .progress-page .chart-fade{ background:linear-gradient(180deg, rgba(17,19,21,0) 0%, rgba(17,19,21,.18) 100%); }

.progress-page .double-grid{ display:grid; grid-template-columns:1fr; gap:14px; }

.progress-page .heatmap-card, .progress-page .goals-card, .progress-page .mastery-card, .progress-page .breakdown-card, .progress-page .roadmap-card, .progress-page .timeline-card{ padding:16px; }
.progress-page .heatmap-head, .progress-page .goals-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.progress-page .heatmap-head strong, .progress-page .goals-head strong{ display:block; font-size:16px; font-weight:900; line-height:1.2; }
.progress-page .heatmap-head span, .progress-page .goals-head span{ display:block; margin-top:4px; font-size:12px; color:var(--muted); line-height:1.4; }
.progress-page .legend-mini{ padding:8px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:11px; font-weight:800; color:var(--muted); white-space:nowrap; }
.progress-page .heatmap-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.progress-page .heat-cell{ aspect-ratio:1/1; border-radius:10px; border:1px solid var(--line); background:#EEF3FA; }
body.dark_theme .progress-page .heat-cell{ background:#222A34; }

.progress-page .heat-0{ opacity:.35; }
.progress-page .heat-1{ background:#DCEBFF; }
.progress-page .heat-2{ background:#B9D7FF; }
.progress-page .heat-3{ background:#83B7FF; }
.progress-page .heat-4{ background:#4E97FF; }
.progress-page .heat-5{ background:#1F7CF5; }

.progress-page .heatmap-days{ margin-top:10px; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.progress-page .heatmap-days span{ text-align:center; font-size:11px; color:var(--muted); font-weight:800; }

.progress-page .goals-list{ display:grid; gap:12px; }
.progress-page .goal-item{ padding:14px; border-radius:15px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }
.progress-page .goal-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.progress-page .goal-top strong{ font-size:14px; font-weight:900; line-height:1.25; }
.progress-page .goal-top span{ font-size:12px; color:var(--muted); font-weight:800; white-space:nowrap; }
.progress-page .goal-progress{ margin-top:10px; height:10px; border-radius:999px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.progress-page .goal-progress div{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--primary-2)); }

.progress-page .mastery-list{ display:grid; gap:12px; }
.progress-page .mastery-item{ padding:14px; border-radius:15px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }
.progress-page .mastery-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.progress-page .mastery-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.progress-page .mastery-icon{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.progress-page .mastery-left strong{ display:block; font-size:14px; font-weight:900; line-height:1.25; }
.progress-page .mastery-left span{ display:block; margin-top:4px; font-size:12px; color:var(--muted); line-height:1.4; }
.progress-page .mastery-score{ flex-shrink:0; font-size:15px; font-weight:900; }
.progress-page .mastery-progress{ margin-top:12px; height:10px; border-radius:999px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.progress-page .mastery-progress div{ height:100%; border-radius:999px; }
.progress-page .mastery-vocabulary .mastery-icon{ background:#EAF3FF; color:var(--primary); }
.progress-page .mastery-listening .mastery-icon{ background:#F3E8FF; color:var(--purple); }
.progress-page .mastery-writing .mastery-icon{ background:#FFF1E8; color:var(--orange); }
.progress-page .mastery-basics .mastery-icon{ background:#FCE7F3; color:var(--pink); }

body.dark_theme .progress-page .mastery-vocabulary .mastery-icon{ background:#16263E; }
body.dark_theme .progress-page .mastery-listening .mastery-icon{ background:#291B45; }
body.dark_theme .progress-page .mastery-writing .mastery-icon{ background:#372117; }
body.dark_theme .progress-page .mastery-basics .mastery-icon{ background:#341827; }

.progress-page .mastery-vocabulary .mastery-progress div{ background:linear-gradient(90deg, #57A8FF, #1F7CF5); }
.progress-page .mastery-listening .mastery-progress div{ background:linear-gradient(90deg, #A78BFA, #7C3AED); }
.progress-page .mastery-writing .mastery-progress div{ background:linear-gradient(90deg, #FDBA74, #F97316); }
.progress-page .mastery-basics .mastery-progress div{ background:linear-gradient(90deg, #F9A8D4, #EC4899); }

.progress-page .breakdown-grid{ display:grid; grid-template-columns:1fr; gap:10px; }

.progress-page .mode-card{ padding:14px; border-radius:15px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }
.progress-page .mode-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.progress-page .mode-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.progress-page .mode-icon{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.progress-page .mode-left strong{ display:block; font-size:14px; font-weight:900; line-height:1.25; }
.progress-page .mode-left span{ display:block; margin-top:4px; font-size:12px; color:var(--muted); line-height:1.4; }
.progress-page .mode-score{ text-align:right; flex-shrink:0; }
.progress-page .mode-score strong{ display:block; font-size:15px; font-weight:900; }
.progress-page .mode-score span{ display:block; margin-top:4px; font-size:11px; color:var(--muted); font-weight:700; }
.progress-page .mode-meta{ margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.progress-page .mode-meta div{ padding:10px; border-radius:12px; background:var(--bg); border:1px solid var(--line); }
.progress-page .mode-meta strong{ display:block; font-size:15px; font-weight:900; line-height:1; }
.progress-page .mode-meta span{ display:block; margin-top:5px; font-size:11px; line-height:1.3; color:var(--muted); font-weight:700; }
.progress-page .mode-vocabulary .mode-icon{ background:#EAF3FF; color:var(--primary); }
.progress-page .mode-listening .mode-icon{ background:#F3E8FF; color:var(--purple); }
.progress-page .mode-writing .mode-icon{ background:#FFF1E8; color:var(--orange); }
.progress-page .mode-basics .mode-icon{ background:#FCE7F3; color:var(--pink); }

body.dark_theme .progress-page .mode-vocabulary .mode-icon{ background:#16263E; }
body.dark_theme .progress-page .mode-listening .mode-icon{ background:#291B45; }
body.dark_theme .progress-page .mode-writing .mode-icon{ background:#372117; }
body.dark_theme .progress-page .mode-basics .mode-icon{ background:#341827; }

.progress-page .roadmap-box{ padding:14px; border-radius:16px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }
.progress-page .roadmap-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.progress-page .roadmap-top strong{ display:block; font-size:16px; line-height:1.2; font-weight:900; }
.progress-page .roadmap-top span{ display:block; margin-top:5px; font-size:12px; line-height:1.45; color:var(--muted); max-width:280px; }
.progress-page .roadmap-badge{ flex-shrink:0; padding:8px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:900; }
.progress-page .roadmap-progress{ margin-top:14px; height:12px; border-radius:999px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.progress-page .roadmap-progress div{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--primary-2)); }
.progress-page .roadmap-meta{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.progress-page .roadmap-mini{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.progress-page .roadmap-mini strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.progress-page .roadmap-mini span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.progress-page .achievements{ display:flex; gap:10px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
.progress-page .achievements::-webkit-scrollbar{ display:none; }
.progress-page .achievement-card{ min-width:150px; padding:14px; text-align:center; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.progress-page .achievement-icon{ width:52px; height:52px; border-radius:18px; margin:0 auto; display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--primary-soft); color:var(--primary); }
.progress-page .achievement-card strong{ display:block; margin-top:12px; font-size:14px; line-height:1.25; font-weight:900; }
.progress-page .achievement-card span{ display:block; margin-top:6px; font-size:12px; line-height:1.4; color:var(--muted); }

.progress-page .timeline{ display:grid; gap:10px; }
.progress-page .timeline-item{ padding:14px; display:flex; gap:12px; align-items:flex-start; border-radius:15px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }
.progress-page .timeline-dot{ width:42px; height:42px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.progress-page .timeline-body{ min-width:0; flex:1; }
.progress-page .timeline-body strong{ display:block; font-size:14px; line-height:1.25; font-weight:900; }
.progress-page .timeline-body p{ margin-top:5px; font-size:12px; line-height:1.45; color:var(--muted); }
.progress-page .timeline-time{ flex-shrink:0; text-align:right; font-size:11px; color:var(--muted); font-weight:800; }

@media (min-width:560px){ .progress-page .double-grid{ grid-template-columns:1fr 1fr; } .progress-page .breakdown-grid{ grid-template-columns:1fr 1fr; } .progress-page .kpi-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:430px){ .progress-page .analytics-top{ align-items:flex-start; } .progress-page .analytics-copy h2{ font-size:23px; } .progress-page .score-ring{ width:88px; height:88px; } .progress-page .analytics-grid{ grid-template-columns:repeat(2,1fr); } .progress-page .roadmap-meta{ grid-template-columns:repeat(2,1fr); } }

/* progress page */

.practice-page .summary{ padding:14px; display:grid; grid-template-columns:1fr; gap:10px; }
.practice-page .summary-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.practice-page .summary-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; background:var(--primary-soft); color:var(--primary); border-radius:999px; font-size:12px; font-weight:800; }
.practice-page .summary-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.practice-page .summary-link{ font-size:12px; color:var(--muted); font-weight:800; }
.practice-page .summary-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }

.practice-page .mini-stat{ padding:12px; border-radius:14px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }
.practice-page .mini-stat strong{ display:block; font-size:18px; font-weight:900; line-height:1; margin-bottom:5px; }
.practice-page .mini-stat span{ display:block; font-size:11px; color:var(--muted); line-height:1.35; font-weight:700; }

.practice-page .continue-card{ padding:16px; display:flex; gap:14px; align-items:flex-start; position:relative; overflow:hidden; background:linear-gradient(135deg, #FFFFFF 0%, #F4F9FF 100%); }
body.dark_theme .practice-page .continue-card{ background:linear-gradient(135deg, #191C20 0%, #1D2430 100%); }
.practice-page .continue-card::after{ content:""; position:absolute; right:-24px; top:-24px; width:110px; height:110px; border-radius:50%; background:rgba(31,124,245,.07); }
.practice-page .continue-icon{ width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; box-shadow:0 12px 28px rgba(31,124,245,.24); position:relative; z-index:1; }
.practice-page .continue-body{ flex:1; min-width:0; position:relative; z-index:1; }
.practice-page .continue-label{ font-size:12px; font-weight:800; color:var(--primary); margin-bottom:6px; }
.practice-page .continue-body h3{ font-size:18px; font-weight:900; line-height:1.2; }
.practice-page .continue-body p{ margin-top:7px; color:var(--muted); font-size:13px; line-height:1.45; max-width:290px; }
.practice-page .continue-bottom{ margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.practice-page .progress-chip{ padding:8px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:11px; font-weight:800; color:var(--muted); }
.practice-page .continue-btn{ border:none; background:var(--primary); color:#fff; border-radius:13px; padding:11px 14px; font-size:13px; font-weight:900; cursor:pointer; }

.practice-page .skill-tabs{ display:flex; gap:8px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
.practice-page .skill-tabs::-webkit-scrollbar{ display:none; }
.practice-page .skill-tab{ border:none; background:var(--card); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; box-shadow:var(--shadow); transition:.2s ease; }
.practice-page .skill-tab.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.22); }

.practice-page .practice-list{ display:grid; gap:12px; }
.practice-page .practice-card{ padding:14px; display:flex; gap:12px; align-items:flex-start; position:relative; overflow:hidden; transition:.2s ease; }
.practice-page .practice-card.hidden{ display:none; }
.practice-page .practice-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }
.practice-page .practice-card.vocabulary::before{ background:var(--primary); }
.practice-page .practice-card.listening::before{ background:var(--purple); }
.practice-page .practice-card.writing::before{ background:var(--orange); }
.practice-page .practice-card.basics::before{ background:var(--pink); }
.practice-page .practice-icon{ width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; margin-left:4px; }
.practice-page .practice-card.vocabulary .practice-icon{ background:#EAF3FF; color:var(--primary); }
.practice-page .practice-card.listening .practice-icon{ background:#F3E8FF; color:var(--purple); }
.practice-page .practice-card.writing .practice-icon{ background:#FFF1E8; color:var(--orange); }
.practice-page .practice-card.basics .practice-icon{ background:#FCE7F3; color:var(--pink); }

body.dark_theme .practice-page .practice-card.vocabulary .practice-icon{ background:#16263E; }
body.dark_theme .practice-page .practice-card.listening .practice-icon{ background:#291B45; }
body.dark_theme .practice-page .practice-card.writing .practice-icon{ background:#372117; }
body.dark_theme .practice-page .practice-card.basics .practice-icon{ background:#341827; }

.practice-page .practice-body{ min-width:0; flex:1; }
.practice-page .practice-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.practice-page .practice-top h4{ font-size:15px; font-weight:900; line-height:1.2; }
.practice-page .mode-tag{ flex-shrink:0; padding:7px 9px; border-radius:999px; font-size:11px; font-weight:800; background:var(--bg); border:1px solid var(--line); color:var(--muted); }

.practice-page .practice-body p{ margin-top:6px; font-size:13px; line-height:1.45; color:var(--muted); }
.practice-page .practice-meta{ margin-top:11px; display:flex; flex-wrap:wrap; gap:8px; }
.practice-page .practice-meta span{ font-size:11px; font-weight:800; padding:7px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--text); }
.practice-page .practice-footer{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.practice-page .progress-line{ flex:1; min-width:0; }
.practice-page .progress-line small{ display:block; font-size:11px; font-weight:800; color:var(--muted); margin-bottom:6px; }

.practice-page .progress-bar{ height:8px; border-radius:999px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.practice-page .progress-bar div{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--primary-2)); }

.practice-page .open-btn{ border:none; background:var(--primary-soft); color:var(--primary); border-radius:12px; padding:11px 13px; font-size:13px; font-weight:900; cursor:pointer; white-space:nowrap; }

.practice-page .recent-list{ display:grid; gap:10px; }
.practice-page .recent-item{ padding:14px; display:flex; align-items:center; gap:12px; }
.practice-page .recent-ico{ width:42px; height:42px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.practice-page .recent-body{ min-width:0; flex:1; }
.practice-page .recent-body strong{ display:block; font-size:14px; font-weight:900; line-height:1.2; }
.practice-page .recent-body span{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }
.practice-page .recent-score{ text-align:right; flex-shrink:0; }
.practice-page .recent-score strong{ display:block; font-size:14px; font-weight:900; }
.practice-page .recent-score span{ display:block; margin-top:4px; font-size:11px; color:var(--muted); font-weight:700; }

.practice-page .empty-state{ display:none; padding:16px; text-align:center; color:var(--muted); font-size:13px; line-height:1.45; border:1px dashed var(--line); border-radius:16px; background:var(--card); }

@media (min-width: 560px){ .practice-page .practice-list{ grid-template-columns:1fr 1fr; } }

.weak-words-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 116, 97, 0.14), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(255, 116, 97, 0.22);
}

.dark_theme .weak-words-card {
  background: linear-gradient(135deg, rgba(255, 116, 97, 0.14), rgba(22, 25, 32, 0.96));
  border-color: rgba(255, 116, 97, 0.2);
}

.weak-words-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.weak-words-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 116, 97, 0.16);
  font-size: 22px;
  flex: 0 0 auto;
}

.weak-words-copy {
  min-width: 0;
}

.weak-words-label {
  display: inline-flex;
  margin-bottom: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 116, 97, 0.12);
  color: #ff5f4f;
  font-size: 11px;
  font-weight: 800;
}

.weak-words-copy h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

.weak-words-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.weak-words-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.weak-words-meta span:first-child {
  color: #ff5f4f;
  font-weight: 900;
}

.weak-words-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #ff5f4f;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(255, 95, 79, 0.24);
}

.weak-words-btn:active,
.weak-words-card:active {
  transform: scale(0.98);
}

@media (max-width: 380px) {
  .weak-words-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .weak-words-btn {
    width: 100%;
  }
}

/* profile-page */
.profile-page .profile-card{ padding:16px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }

.profile-page .profile-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.profile-page .profile-left{ display:flex; gap:14px; min-width:0; flex:1; }

.profile-page .avatar{ width:76px; height:76px; border-radius:24px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; font-weight:900; flex-shrink:0; box-shadow:0 14px 28px rgba(31,124,245,.24); }

.profile-page .profile-copy{ min-width:0; flex:1; }
.profile-page .profile-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:800; border:1px solid rgba(31,124,245,.08); }
.profile-page .profile-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.profile-page .profile-copy h2{ margin-top:10px; font-size:24px; line-height:1.1; font-weight:900; letter-spacing:-0.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-page .profile-copy p{ margin-top:6px; font-size:13px; line-height:1.45; color:var(--muted); }
.profile-page .profile-meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }

.profile-page .meta-chip{ padding:8px 10px; border-radius:999px; font-size:11px; font-weight:800; background:var(--bg); border:1px solid var(--line); color:var(--muted); }

.profile-page .edit-btn{ border:none; background:var(--primary); color:#fff; border-radius:13px; padding:11px 14px; font-size:13px; font-weight:900; cursor:pointer; white-space:nowrap; flex-shrink:0; }

.profile-page .summary-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.profile-page .summary-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.profile-page .summary-item strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.profile-page .summary-item span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.profile-page .preferences-card, .profile-page .account-card, .profile-page .activity-card, .profile-page .settings-card{ padding:16px; }

.profile-page .double-grid{ display:grid; grid-template-columns:1fr; gap:14px; }

.profile-page .pref-block + .profile-page .pref-block{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.profile-page .pref-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px;margin-top:12px; }
.profile-page .pref-head strong{ display:block; font-size:14px; line-height:1.2; font-weight:900; }
.profile-page .pref-head span{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }

.profile-page .goal-options{ display:flex; gap:8px; flex-wrap:wrap; }
.profile-page .goal-chip{ border:none; background:var(--bg); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; cursor:pointer; transition:.2s ease; }
.profile-page .goal-chip.active{ background:var(--primary-soft); color:var(--primary); border-color:#CFE2FF; }

.profile-page .toggle-list{ display:grid; gap:10px; }
.profile-page .toggle-row{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.profile-page .toggle-copy strong{ display:block; font-size:13px; font-weight:900; line-height:1.25; }
.profile-page .toggle-copy span{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }

.profile-page .switch{ width:52px; height:30px; border-radius:999px; background:#DCE7F7; position:relative; cursor:pointer; flex-shrink:0; transition:.2s ease; border:none; }
body.dark_theme .profile-page .switch{ background:#243041; }
.profile-page .switch::after{ content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s ease; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.profile-page .switch.active{ background:var(--primary); }
.profile-page .switch.active::after{ left:26px; }

.profile-page .info-list{ display:grid; gap:10px; }
.profile-page .info-row{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.profile-page .info-row span{ font-size:12px; line-height:1.35; color:var(--muted); font-weight:700; }
.profile-page .info-row strong{ font-size:13px; line-height:1.35; font-weight:900; text-align:right; word-break:break-word; }

.profile-page .achievements{ display:flex; gap:10px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
.profile-page .achievements::-webkit-scrollbar{ display:none; }
.profile-page .achievement-card{ min-width:150px; padding:14px; text-align:center; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.profile-page .achievement-icon{ width:52px; height:52px; border-radius:18px; margin:0 auto; display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--primary-soft); color:var(--primary); }
.profile-page .achievement-card strong{ display:block; margin-top:12px; font-size:14px; font-weight:900; line-height:1.25; }
.profile-page .achievement-card span{ display:block; margin-top:6px; font-size:12px; line-height:1.4; color:var(--muted); }

.profile-page .activity-list, .profile-page .settings-list{ display:grid; gap:10px; }
.profile-page .activity-item, .profile-page .setting-item{ padding:14px; border-radius:15px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; }
.profile-page .activity-icon, .profile-page .setting-icon{ width:42px; height:42px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.profile-page .activity-body, .profile-page .setting-body{ min-width:0; flex:1; }
.profile-page .activity-body strong, .profile-page .setting-body strong{ display:block; font-size:14px; line-height:1.25; font-weight:900; }
.profile-page .activity-body p, .profile-page .setting-body p{ margin-top:5px; font-size:12px; line-height:1.45; color:var(--muted); }
.profile-page .activity-time, .profile-page .setting-meta{ flex-shrink:0; text-align:right; font-size:11px; color:var(--muted); font-weight:800; }

.profile-page .logout-btn{ width:100%; border:none; background:#FFF1F2; color:var(--danger); border:1px solid #FFE0E5; border-radius:15px; padding:14px; font-size:14px; font-weight:900; cursor:pointer; }
body.dark_theme .profile-page .logout-btn{ background:#2A171A; border-color:#4A262C; color:#FF8A9A; }

.profile-page .theme-switch{ display:flex; gap:6px; padding:5px; border-radius:18px; background:var(--bg); border:1px solid var(--line); width:100%; }
.profile-page .theme-btn{ flex:1; border:none; background:transparent; color:var(--muted); border-radius:14px; padding:12px 14px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:900; cursor:pointer; transition:.22s ease; }
.profile-page .theme-btn-icon{ font-size:16px; line-height:1; }
.profile-page .theme-btn.active{ background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); color:var(--text); box-shadow:0 10px 22px rgba(18,28,45,.08); border:1px solid rgba(31,124,245,.08); }
body.dark_theme .profile-page .theme-btn.active{ background:linear-gradient(180deg, #20252B 0%, #1A1F25 100%); box-shadow:none; border:1px solid rgba(255,255,255,.05); }

@media (min-width:560px){ .profile-page .double-grid{ grid-template-columns:1fr 1fr; } }

@media (max-width:430px){ .profile-page .summary-grid{ grid-template-columns:repeat(2,1fr); } .profile-page .profile-top{ flex-direction:column; } .profile-page .edit-btn{ width:100%; } .profile-page .avatar{ width:70px; height:70px; font-size:28px; } .profile-page .profile-copy h2{ font-size:22px; } }

/* dictionary-page */
.dictionary-page .dictionary-head{ padding:16px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); }
.dictionary-page .dictionary-head-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.dictionary-page .dictionary-head-copy{ min-width:0; flex:1; }
.dictionary-page .dictionary-head-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:800; border:1px solid rgba(31,124,245,.08); margin-bottom:12px; }
.dictionary-page .dictionary-head-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.dictionary-page .dictionary-head-copy h2{ font-size:25px; line-height:1.1; font-weight:900; letter-spacing:-0.5px; }
.dictionary-page .dictionary-head-copy p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:340px; }
.dictionary-page .dictionary-head-side{ flex-shrink:0; width:110px; padding:12px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }
.dictionary-page .dictionary-head-side strong{ display:block; font-size:24px; line-height:1; font-weight:900; }
.dictionary-page .dictionary-head-side span{ display:block; margin-top:6px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.dictionary-page .dictionary-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dictionary-page .dictionary-stat{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.dictionary-page .dictionary-stat strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.dictionary-page .dictionary-stat span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.dictionary-page .controls-card{ padding:16px; }

.dictionary-page .search-box{ position:relative; margin-bottom:14px; }
.dictionary-page .search-box input{ width:100%; height:52px; border:none; outline:none; border-radius:16px; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:0 50px 0 44px; font-size:14px; font-weight:700; }
.dictionary-page .search-box i, .dictionary-page .search-box button{ position:absolute; top:50%; transform:translateY(-50%); }
.dictionary-page .search-box i{ left:15px; font-style:normal; color:var(--muted); font-size:17px; }
.dictionary-page .search-clear{ right:10px; width:32px; height:32px; border:none; border-radius:10px; background:transparent; color:var(--muted); font-size:18px; cursor:pointer; display:none; }
.dictionary-page .search-clear.show{ display:block; }

.dictionary-page .tabs-row{ display:flex; gap:8px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
.dictionary-page .tabs-row::-webkit-scrollbar{ display:none; }
.dictionary-page .tab-btn{ border:none; background:var(--card); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; box-shadow:var(--shadow); transition:.2s ease; }
.dictionary-page .tab-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.22); }

.dictionary-page .result-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.dictionary-page .result-copy h3{ font-size:16px; font-weight:900; line-height:1.2; }
.dictionary-page .result-copy p{ margin-top:4px; font-size:12px; color:var(--muted); font-weight:700; }

.dictionary-page .page-chip{ padding:8px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:11px; font-weight:800; color:var(--muted); white-space:nowrap; }

.dictionary-page .dictionary-list{ display:grid; gap:12px; }
.dictionary-page .dictionary-list.view-grid{ grid-template-columns:1fr; }
.dictionary-page .dictionary-list.view-list{ grid-template-columns:1fr; }

.dictionary-page .word-card{ padding:14px; position:relative; overflow:hidden; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); cursor:pointer; transition:.2s ease; }
.dictionary-page .word-card:hover{ transform:translateY(-1px); }
.dictionary-page .word-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }

.dictionary-page .word-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.dictionary-page .word-main{ min-width:0; flex:1; }
.dictionary-page .word-hanzi{ font-size:30px; line-height:1; font-weight:900; letter-spacing:-0.5px; }
.dictionary-page .word-pinyin{ margin-top:7px; font-size:13px; color:var(--primary); font-weight:800; }
.dictionary-page .word-translation{ margin-top:6px; font-size:14px; line-height:1.4; color:var(--text); font-weight:700; }
.dictionary-page .word-actions{ display:flex; gap:8px; flex-shrink:0; }

.dictionary-page .word-btn{ width:40px; height:40px; border:none; border-radius:13px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:17px; cursor:pointer; transition:.2s ease; flex-shrink:0; }
.dictionary-page .word-btn.active{ background:var(--primary-soft); border-color:#CFE2FF; color:var(--primary); }
.dictionary-page .word-btn.playing{ transform:scale(0.96); }

.dictionary-page .word-bottom{ margin-top:12px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }

.dictionary-page .word-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.dictionary-page .word-tags span{ font-size:11px; font-weight:800; padding:7px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }

.dictionary-page .word-open{ font-size:12px; color:var(--muted); font-weight:800; }

.dictionary-page .dictionary-list.hide-meaning .word-pinyin, .dictionary-page .dictionary-list.hide-meaning .dictionary-page .word-translation, .dictionary-page .dictionary-list.hide-meaning .dictionary-page .word-bottom{ display:none; }
.dictionary-page .dictionary-list.hide-meaning .word-head{ align-items:center; }
.dictionary-page .dictionary-list.hide-meaning .word-hanzi{ font-size:38px; }

.dictionary-page .empty-state{ display:none; padding:18px; text-align:center; color:var(--muted); font-size:13px; line-height:1.5; border:1px dashed var(--line); border-radius:16px; background:var(--card); }

.dictionary-page .pagination{ margin-top:14px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }

.dictionary-page .page-btn{ min-width:42px; height:42px; padding:0 12px; border:none; border-radius:13px; background:var(--card); border:1px solid var(--line); color:var(--text); font-size:13px; font-weight:900; cursor:pointer; box-shadow:var(--shadow); }
.dictionary-page .page-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.dictionary-page .page-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

.dictionary-page.modal{ position:fixed; inset:0; z-index:120; display:none; align-items:flex-end; justify-content:center; background:rgba(17, 22, 31, .45); padding:18px; }
.dictionary-page.modal.show{ display:flex; }
.dictionary-page .modal-sheet{ width:100%; max-width:600px; max-height:88vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 60px rgba(8, 14, 24, .18); padding:16px; }
.dictionary-page .modal-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.dictionary-page .modal-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:800; }
.dictionary-page .modal-close{ width:42px; height:42px; border:none; border-radius:14px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:18px; cursor:pointer; flex-shrink:0; }
.dictionary-page .modal-word{ padding:16px; border-radius:18px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }

.dictionary-page .modal-word-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }

.dictionary-page .modal-hanzi{ font-size:46px; line-height:1; font-weight:900; letter-spacing:-1px; }

.dictionary-page .modal-pinyin{ margin-top:8px; font-size:16px; color:var(--primary); font-weight:800; }

.dictionary-page .modal-translation{ margin-top:8px; font-size:16px; line-height:1.4; font-weight:700; }

.dictionary-page .modal-actions{ display:flex; gap:8px; flex-shrink:0; }

.dictionary-page .action-btn{ border:none; border-radius:14px; padding:12px 14px; font-size:13px; font-weight:900; cursor:pointer; transition:.2s ease; }
.dictionary-page .action-btn.primary{ background:var(--primary); color:#fff; }
.dictionary-page .action-btn.soft{ background:var(--primary-soft); color:var(--primary); }

.dictionary-page .modal-section{ margin-top:14px; padding:16px; border-radius:18px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--line); }

.dictionary-page .modal-section h4{ font-size:15px; font-weight:900; line-height:1.2; margin-bottom:12px; }

.dictionary-page .detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.dictionary-page .detail-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }

.dictionary-page .detail-item strong{ display:block; font-size:16px; font-weight:900; line-height:1; }

.dictionary-page .detail-item span{ display:block; margin-top:6px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.dictionary-page .tones{ display:flex; flex-wrap:wrap; gap:8px; }

.dictionary-page .tone-chip{ padding:8px 10px; border-radius:999px; font-size:11px; font-weight:900; border:1px solid transparent; }

.dictionary-page .tone-1{ background:#EFF6FF; color:#2563EB; border-color:#DBEAFE; }
.dictionary-page .tone-2{ background:#ECFDF5; color:#059669; border-color:#D1FAE5; }
.dictionary-page .tone-3{ background:#FEF3C7; color:#D97706; border-color:#FDE68A; }
.dictionary-page .tone-4{ background:#FEE2E2; color:#DC2626; border-color:#FECACA; }
.dictionary-page .tone-5{ background:#F3F4F6; color:#6B7280; border-color:#E5E7EB; }

body.dark_theme .dictionary-page .tone-1{ background:#14253D; color:#7BB0FF; border-color:#20395A; }
body.dark_theme .dictionary-page .tone-2{ background:#132C23; color:#55D6A3; border-color:#214438; }
body.dark_theme .dictionary-page .tone-3{ background:#3A2B16; color:#FDBA74; border-color:#59421D; }
body.dark_theme .dictionary-page .tone-4{ background:#351C20; color:#FF8A9A; border-color:#4A262C; }
body.dark_theme .dictionary-page .tone-5{ background:#252A31; color:#A7B0BE; border-color:#343C47; }

.dictionary-page .example-cn{ font-size:18px; line-height:1.5; font-weight:800; }

.dictionary-page .example-pinyin{ margin-top:10px; font-size:13px; color:var(--primary); line-height:1.5; font-weight:800; }
.dictionary-page .example-en{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); font-weight:700; }

.dictionary-page .memory-note{ font-size:13px; line-height:1.55; color:var(--muted); font-weight:700; }

@media (min-width:560px){ .dictionary-page .dictionary-list.view-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:430px){ .dictionary-page .dictionary-head-top{ flex-direction:column; } .dictionary-page .dictionary-head-side{ width:100%; } .dictionary-page .dictionary-stats{ grid-template-columns:repeat(2,1fr); } .dictionary-page .modal-hanzi{ font-size:40px; } .dictionary-page .detail-grid{ grid-template-columns:1fr 1fr; } .dictionary-page .word-hanzi{ font-size:28px; } .dictionary-page .dictionary-list.hide-meaning .dictionary-page .word-hanzi{ font-size:34px; } }

.modal-full-card{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 14px 28px rgba(31,124,245,.24);
}

.modal-full-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}

.modal-full-copy{
  min-width:0;
  flex:1;
}

.modal-full-copy strong{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
}

.modal-full-copy span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
  opacity:.86;
}

.modal-full-btn{
  border:none;
  border-radius:14px;
  background:#fff;
  color:var(--primary);
  min-height:42px;
  padding:0 13px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}

.modal-full-btn:active{
  transform:scale(.97);
}

@media (max-width:430px){
  .modal-full-card{
    align-items:flex-start;
  }

  .modal-full-btn{
    align-self:center;
  }
}

/* flashcards-page */
/* flashcards-page */
.flashcards-page{
  padding-bottom:96px;
}

/* Summary */
.flashcards-page .summary-card{
  padding:16px;
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.flashcards-page .summary-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.flashcards-page .summary-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(31,124,245,.08);
}

.flashcards-page .summary-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.flashcards-page .summary-side{
  text-align:right;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.flashcards-page .summary-side strong{
  display:block;
  margin-top:4px;
  font-size:22px;
  line-height:1;
  color:var(--text);
  font-weight:900;
}

.flashcards-page .summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.flashcards-page .summary-item{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.flashcards-page .summary-item strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
  color:var(--text);
}

.flashcards-page .summary-item span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

/* HSK toolbar */
.flashcards-page .flashcards-toolbar{
  padding:16px;
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.flashcards-page .toolbar-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.flashcards-page .toolbar-head h3{
  font-size:16px;
  font-weight:900;
  margin:0;
  color:var(--text);
}

.flashcards-page .toolbar-head p{
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.flashcards-page .toolbar-page{
  flex-shrink:0;
  padding:8px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

/* HSK tabs */
.flashcards-page .hsk-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}

.flashcards-page .hsk-tabs::-webkit-scrollbar{
  display:none;
}

.flashcards-page .hsk-tab{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 13px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.flashcards-page .hsk-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.22);
}

/* Page controls */
.flashcards-page .page-controls{
  margin-top:14px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
}

.flashcards-page .page-btn{
  height:44px;
  border:none;
  border-radius:15px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.flashcards-page .page-btn:active{
  transform:scale(.97);
}

.flashcards-page .page-btn:disabled{
  opacity:.35;
  pointer-events:none;
}

.flashcards-page .page-center{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:15px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.flashcards-page .page-center strong{
  color:var(--text);
  font-size:16px;
  font-weight:900;
}

/* Deck tabs */
.flashcards-page .deck-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}

.flashcards-page .deck-tabs::-webkit-scrollbar{
  display:none;
}

.flashcards-page .deck-tab{
  border:none;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:.2s ease;
}

.flashcards-page .deck-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.22);
}

/* Session card */
.flashcards-page .session-card{
  padding:16px;
}

.flashcards-page .session-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.flashcards-page .session-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}

.flashcards-page .progress-wrap{
  width:100%;
}

.flashcards-page .progress-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.flashcards-page .progress-top strong{
  font-size:13px;
  font-weight:900;
  color:var(--text);
}

.flashcards-page .progress-top span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.flashcards-page .progress-bar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
}

.flashcards-page .progress-bar div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  transition:.25s ease;
}

/* Flashcard */
.flashcards-page .flashcard-stage{
  perspective:1200px;
  margin-top:14px;
}

.flashcards-page .flashcard{
  min-height:450px;
  border-radius:24px;
  position:relative;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s ease, opacity .2s ease;
}

.flashcards-page .flashcard.flipped{
  transform:rotateY(180deg);
}

.flashcards-page .flashcard.loading{
  pointer-events:none;
  opacity:.55;
}

.flashcards-page .flashcard-face{
  position:absolute;
  inset:0;
  border-radius:24px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.flashcards-page .flashcard-back{
  transform:rotateY(180deg);
}

.flashcards-page .flashcard-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.flashcards-page .flashcard-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:12px;
  font-weight:800;
}

.flashcards-page .flashcard-actions{
  display:flex;
  gap:8px;
}

.flashcards-page .icon-action{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  transition:.2s ease;
  flex-shrink:0;
}

.flashcards-page .icon-action.active{
  background:var(--primary-soft);
  border-color:#CFE2FF;
  color:var(--primary);
}

.flashcards-page .icon-action.playing{
  transform:scale(.96);
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.flashcards-page .icon-action:disabled{
  opacity:.5;
  pointer-events:none;
}

/* Card content */
.flashcards-page .flashcard-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 0;
}

.flashcards-page .card-hanzi{
  font-size:64px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1px;
  color:var(--text);
}

.flashcards-page .card-pinyin{
  margin-top:14px;
  font-size:18px;
  color:var(--primary);
  font-weight:800;
}

.flashcards-page .card-translation{
  margin-top:10px;
  font-size:20px;
  line-height:1.4;
  font-weight:800;
  color:var(--text);
}

.flashcards-page .card-meta{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.flashcards-page .card-meta span{
  font-size:11px;
  font-weight:800;
  padding:7px 9px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
}

.flashcards-page .card-example{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
  text-align:left;
  width:100%;
  max-width:360px;
}

.flashcards-page .card-example strong{
  display:block;
  font-size:13px;
  font-weight:900;
  margin-bottom:8px;
  color:var(--text);
}

.flashcards-page .card-example p{
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  font-weight:700;
}

/* Bottom */
.flashcards-page .flashcard-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.flashcards-page .flashcard-hint{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.flashcards-page .show-btn{
  border:none;
  background:var(--primary);
  color:#fff;
  border-radius:14px;
  padding:12px 15px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.flashcards-page .show-btn:active{
  transform:scale(.97);
}

.flashcards-page .show-btn:disabled{
  opacity:.5;
  pointer-events:none;
}

/* Grade buttons */
.flashcards-page .grade-actions{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.flashcards-page .grade-btn{
  border:none;
  border-radius:15px;
  padding:14px 10px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.flashcards-page .grade-btn:active{
  transform:scale(.97);
}

.flashcards-page .grade-btn:disabled{
  opacity:.5;
  pointer-events:none;
}

.flashcards-page .grade-again{
  background:#FFF4E8;
  color:#D97706;
  border:1px solid #FED7AA;
}

.flashcards-page .grade-good{
  background:#EAF3FF;
  color:var(--primary);
  border:1px solid #CFE2FF;
}

.flashcards-page .grade-easy{
  background:#ECFDF5;
  color:#059669;
  border:1px solid #BBF7D0;
}

/* Session bottom */
.flashcards-page .session-bottom{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.flashcards-page .mini-info{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.flashcards-page .mini-info span{
  font-size:11px;
  font-weight:800;
  padding:7px 9px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
}

.flashcards-page .reset-btn{
  border:none;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 13px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.flashcards-page .reset-btn:active{
  transform:scale(.97);
}

/* Done card */
.flashcards-page .done-card{
  padding:18px;
  text-align:center;
  display:none;
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.flashcards-page .done-card.show{
  display:block;
}

.flashcards-page .done-icon{
  width:68px;
  height:68px;
  margin:0 auto 14px;
  border-radius:22px;
  background:var(--primary-soft);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
}

.flashcards-page .done-card h3{
  font-size:22px;
  font-weight:900;
  line-height:1.1;
  color:var(--text);
}

.flashcards-page .done-card p{
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
}

.flashcards-page .done-stats{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.flashcards-page .done-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.flashcards-page .done-stat strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
  color:var(--text);
}

.flashcards-page .done-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.flashcards-page .done-btn{
  margin-top:16px;
  border:none;
  background:var(--primary);
  color:#fff;
  border-radius:15px;
  padding:14px 18px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.flashcards-page .done-btn:active{
  transform:scale(.97);
}

/* Empty/loading small polish */
.flashcards-page .session-card[style*="display: none"] + .done-card{
  margin-top:0;
}

/* Dark theme */
body.dark_theme .flashcards-page .summary-card,
body.dark_theme .flashcards-page .flashcards-toolbar,
body.dark_theme .flashcards-page .session-card,
body.dark_theme .flashcards-page .done-card,
body.dark_theme .flashcards-page .flashcard-face{
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

body.dark_theme .flashcards-page .summary-item,
body.dark_theme .flashcards-page .toolbar-page,
body.dark_theme .flashcards-page .hsk-tab,
body.dark_theme .flashcards-page .page-btn,
body.dark_theme .flashcards-page .page-center,
body.dark_theme .flashcards-page .session-chip,
body.dark_theme .flashcards-page .icon-action,
body.dark_theme .flashcards-page .card-meta span,
body.dark_theme .flashcards-page .card-example,
body.dark_theme .flashcards-page .mini-info span,
body.dark_theme .flashcards-page .reset-btn,
body.dark_theme .flashcards-page .done-stat{
  background:var(--bg);
  border-color:var(--line);
}

body.dark_theme .flashcards-page .grade-again{
  background:#352515;
  border-color:#5B3E1D;
  color:#FDBA74;
}

body.dark_theme .flashcards-page .grade-good{
  background:#16263E;
  border-color:#25446B;
  color:#7BB0FF;
}

body.dark_theme .flashcards-page .grade-easy{
  background:#132C23;
  border-color:#214438;
  color:#6EE7B7;
}

body.dark_theme .flashcards-page .icon-action.active{
  background:#16263E;
  border-color:#25446B;
  color:#7BB0FF;
}

/* Responsive */
@media (max-width:480px){
  .flashcards-page .summary-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .flashcards-page .summary-side strong{
    font-size:20px;
  }

  .flashcards-page .toolbar-head{
    flex-direction:column;
  }

  .flashcards-page .toolbar-page{
    align-self:flex-start;
  }

  .flashcards-page .flashcard{
    min-height:420px;
  }

  .flashcards-page .card-hanzi{
    font-size:58px;
  }

  .flashcards-page .card-translation{
    font-size:18px;
  }

  .flashcards-page .grade-actions{
    gap:8px;
  }

  .flashcards-page .grade-btn{
    padding:13px 8px;
    font-size:12px;
  }

  .flashcards-page .done-stats{
    grid-template-columns:1fr;
  }
}

@media (max-width:360px){
  .flashcards-page .summary-grid{
    gap:8px;
  }

  .flashcards-page .summary-item{
    padding:10px;
  }

  .flashcards-page .flashcard{
    min-height:400px;
  }

  .flashcards-page .flashcard-face{
    padding:16px;
  }

  .flashcards-page .card-hanzi{
    font-size:52px;
  }

  .flashcards-page .card-pinyin{
    font-size:16px;
  }

  .flashcards-page .card-translation{
    font-size:17px;
  }

  .flashcards-page .flashcard-bottom{
    align-items:stretch;
  }

  .flashcards-page .show-btn{
    width:100%;
  }
}
/* check_yourself-page */

.quiz-head{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.quiz-head-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.head-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.check_yourself-page .quiz-head h2{
  margin-top:12px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.4px;
}

.check_yourself-page .quiz-head p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:360px;
}

.check_yourself-page .stats-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.check_yourself-page .stat-item{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.check_yourself-page .stat-item strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.check_yourself-page .stat-item span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

/* Config */

.check_yourself-page .config-card{
  padding:16px;
}

.check_yourself-page .config-block + .config-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.check_yourself-page .config-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}

.check_yourself-page .config-head strong{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.check_yourself-page .config-head span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.check_yourself-page .chips-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  flex-wrap:nowrap;
}

.check_yourself-page .chips-row::-webkit-scrollbar{
  display:none;
}

.check_yourself-page .chip{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.check_yourself-page .chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.check_yourself-page .levels-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.check_yourself-page .level-chip{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.check_yourself-page .level-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

/* Progress */

.check_yourself-page .progress-card{
  padding:16px;
}

.check_yourself-page .progress-line{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
}

.check_yourself-page .progress-line div{
  height:100%;
  width:10%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transition:.25s ease;
}

/* Question */

.check_yourself-page .question-card{
  padding:16px;
}

.check_yourself-page .question-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.check_yourself-page .question-title{
  margin-top:14px;
  font-size:24px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.3px;
}

.check_yourself-page .question-sub{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

.check_yourself-page .answers{
  margin-top:16px;
  display:grid;
  gap:10px;
}

.check_yourself-page .answer-btn{
  width:100%;
  border:none;
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  text-align:left;
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
  transition:.18s ease;
  color:var(--text);
  box-shadow:var(--shadow);
}

.check_yourself-page .answer-btn:hover{
  transform:translateY(-1px);
}

.check_yourself-page .answer-btn.disabled{
  pointer-events:none;
}

.check_yourself-page .answer-btn.selected{
  border-color:#BFD8FF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%);
}

body.dark_theme .check_yourself-page .answer-btn.selected{
  background:linear-gradient(180deg,#1A2028 0%,#182332 100%);
  border-color:#28415E;
}

.check_yourself-page .answer-btn.correct{
  border-color:#B8E8C8;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4FFF7 100%);
}

body.dark_theme .check_yourself-page .answer-btn.correct{
  background:linear-gradient(180deg,#18241C 0%,#16241C 100%);
  border-color:#29503A;
}

.check_yourself-page .answer-btn.wrong{
  border-color:#FFD0D6;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F6 100%);
}

body.dark_theme .check_yourself-page .answer-btn.wrong{
  background:linear-gradient(180deg,#251A1D 0%,#24181C 100%);
  border-color:#533039;
}

.check_yourself-page .answer-key{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  flex-shrink:0;
  color:var(--muted);
}

.check_yourself-page .answer-btn.selected .answer-key{
  background:var(--primary-soft);
  color:var(--primary);
}

.check_yourself-page .answer-btn.correct .answer-key{
  background:#EAFBF0;
  color:#15803D;
  border-color:#CDEFD9;
}

.check_yourself-page .answer-btn.wrong .answer-key{
  background:#FFF1F2;
  color:#DC2626;
  border-color:#FFD0D6;
}

.check_yourself-page .answer-text{
  min-width:0;
  flex:1;
}

.check_yourself-page .answer-text strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:900;
}

.check_yourself-page .answer-text span{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

/* Feedback */

.check_yourself-page .feedback-card{
  padding:16px;
  display:none;
}

.check_yourself-page .feedback-card.show{
  display:block;
}

.check_yourself-page .feedback-box{
  padding:14px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--bg);
}

.check_yourself-page .feedback-box.correct{
  background:linear-gradient(180deg,#F4FFF7 0%,#FFFFFF 100%);
  border-color:#CDEFD9;
}

body.dark_theme .check_yourself-page .feedback-box.correct{
  background:linear-gradient(180deg,#18241C 0%,#16241C 100%);
  border-color:#29503A;
}

.check_yourself-page .feedback-box.wrong{
  background:linear-gradient(180deg,#FFF5F6 0%,#FFFFFF 100%);
  border-color:#FFD0D6;
}

body.dark_theme .check_yourself-page .feedback-box.wrong{
  background:linear-gradient(180deg,#251A1D 0%,#24181C 100%);
  border-color:#533039;
}

.check_yourself-page .feedback-box strong{
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}

.check_yourself-page .feedback-box p{
  margin-top:7px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/* Actions */

.check_yourself-page .actions-card{
  padding:16px;
  display:flex;
  gap:10px;
}

.check_yourself-page .btn{
  border:none;
  border-radius:14px;
  padding:14px 14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.check_yourself-page .btn-primary{
  flex:1;
  background:var(--primary);
  color:#fff;
}

.check_yourself-page .btn-primary:disabled{
  opacity:.45;
  cursor:not-allowed;
  display:none;
}

.check_yourself-page .btn-soft{
  background:var(--primary-soft);
  color:var(--primary);
  min-width:100%;
}

/* Result */

.check_yourself-page .result-card{
  padding:18px;
  display:none;
  text-align:center;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.check_yourself-page .result-card.show{
  display:block;
}

.check_yourself-page .result-icon{
  width:68px;
  height:68px;
  border-radius:22px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:var(--primary-soft);
  color:var(--primary);
}

.check_yourself-page .result-card h3{
  margin-top:14px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
}

.check_yourself-page .result-card p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
}

.check_yourself-page .result-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.check_yourself-page .result-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.check_yourself-page .result-stat strong{
  display:block;
  font-size:20px;
  font-weight:900;
  line-height:1;
}

.check_yourself-page .result-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.check_yourself-page .result-actions{
  margin-top:16px;
  display:grid;
  gap:10px;
}

/* Start button block */

.check_yourself-page .config-start{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.check_yourself-page .config-start .btn{
  width:100%;
  min-height:48px;
}

/* Before quiz starts: show only setup */

.check_yourself-page:not(.quiz-mode) #quizOnlyTop,
.check_yourself-page:not(.quiz-mode) #progressSection,
.check_yourself-page:not(.quiz-mode) #questionSection,
.check_yourself-page:not(.quiz-mode) #feedbackSection,
.check_yourself-page:not(.quiz-mode) #actionsSection,
.check_yourself-page:not(.quiz-mode) #resultSection{
  display:none !important;
}

/* In quiz mode: hide setup */

.check_yourself-page.quiz-mode #setupSection{
  display:none !important;
}

/* Quiz mode layout */

.check_yourself-page.quiz-mode{
  --quiz-bottom-space: 88px;
  min-height:100dvh;
  padding-top:4px;
  padding-bottom:calc(var(--quiz-bottom-space) + env(safe-area-inset-bottom));
}

.check_yourself-page.quiz-mode.answered-mode{
  --quiz-bottom-space: 218px;
}

.check_yourself-page.quiz-mode .section{
  margin-top:10px;
}

.check_yourself-page.quiz-mode .quiz-only-top{
  margin-top:0;
}

/* Mini quiz header */

.check_yourself-page .quiz-only-top{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.check_yourself-page .quiz-back-btn{
  border:none;
  min-width:86px;
  height:44px;
  padding:0 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.check_yourself-page .quiz-back-btn:hover{
  transform:translateY(-1px);
}

.check_yourself-page .quiz-back-btn span{
  font-size:16px;
  line-height:1;
}

.check_yourself-page .quiz-back-btn strong{
  font-size:13px;
  font-weight:900;
}

.check_yourself-page .quiz-only-meta{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:8px 13px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.check_yourself-page .quiz-only-meta strong{
  display:block;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.check_yourself-page .quiz-only-meta span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.dark_theme .check_yourself-page .quiz-back-btn,
body.dark_theme .check_yourself-page .quiz-only-meta{
  background:var(--card);
  border-color:var(--line);
}

.check_yourself-page.quiz-mode .progress-card{
  padding:13px 14px;
}

.check_yourself-page.quiz-mode .question-card{
  padding:16px;
}

.check_yourself-page.quiz-mode .actions-card{
  padding:14px;
}

.check_yourself-page.quiz-mode .actions-card .btn{
  min-height:48px;
}

/* Main fix: question can scroll, bottom panel stays fixed */

.check_yourself-page.quiz-mode #questionSection{
  max-height:calc(100dvh - var(--quiz-bottom-space) - 150px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:4px;
}

.check_yourself-page.quiz-mode #feedbackSection,
.check_yourself-page.quiz-mode #actionsSection{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(600px, calc(100% - 20px));
  z-index:90;
  margin:0;
}

.check_yourself-page.quiz-mode #feedbackSection{
  bottom:calc(78px + env(safe-area-inset-bottom));
  pointer-events:none;
  margin-bottom:4px;
}

.check_yourself-page.quiz-mode #actionsSection{
  bottom:calc(10px + env(safe-area-inset-bottom));
}

.check_yourself-page.quiz-mode .feedback-card,
.check_yourself-page.quiz-mode .actions-card{
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  border-radius:18px;
}

.check_yourself-page.quiz-mode .feedback-card{
  padding:10px;
}

.check_yourself-page.quiz-mode .feedback-box{
  max-height:118px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.check_yourself-page.quiz-mode .actions-card{
  padding:10px;
  background:var(--card);
  border:1px solid var(--line);
}

/* Hide global topbar/header only during quiz */

body.check-quiz-clean .topbar,
body.check-quiz-clean .app-topbar,
body.check-quiz-clean .main-topbar,
body.check-quiz-clean .header,
body.check-quiz-clean header{
  display:none !important;
}

/* Hide bottom nav during quiz, because fixed actions use the bottom area */

body.check-quiz-clean .bottom-nav,
body.check-quiz-clean .app-bottom-nav,
body.check-quiz-clean .main-nav,
body.check-quiz-clean nav{
  display:none !important;
}

/* If your fixed topbar creates padding on app/body */

body.check-quiz-clean .app,
body.check-quiz-clean .main,
body.check-quiz-clean .page-wrap{
  padding-top:0 !important;
}

/* Dark theme polish */

body.dark_theme .check_yourself-page.quiz-mode .actions-card{
  background:var(--card);
  border-color:var(--line);
}

body.dark_theme .check_yourself-page.quiz-mode .feedback-card,
body.dark_theme .check_yourself-page.quiz-mode .actions-card{
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

/* Small screens */

@media (max-width:430px){
  .check_yourself-page .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .check_yourself-page .result-grid{
    grid-template-columns:1fr 1fr 1fr;
  }

  .check_yourself-page .quiz-head h2{
    font-size:22px;
  }

  .check_yourself-page .analytics-copy h2{
    font-size:22px;
  }

  .check_yourself-page .quiz-only-top{
    gap:8px;
  }

  .check_yourself-page .quiz-back-btn{
    min-width:76px;
    height:42px;
    padding:0 11px;
  }

  .check_yourself-page .quiz-only-meta{
    min-height:42px;
    padding:7px 11px;
  }

  .check_yourself-page .quiz-only-meta strong{
    font-size:12px;
  }

  .check_yourself-page .quiz-only-meta span{
    font-size:10.5px;
  }

  .check_yourself-page.quiz-mode{
    --quiz-bottom-space: 84px;
  }

  .check_yourself-page.quiz-mode.answered-mode{
    --quiz-bottom-space: 205px;
  }

  .check_yourself-page.quiz-mode #questionSection{
    max-height:calc(100dvh - var(--quiz-bottom-space) - 135px);
  }

  .check_yourself-page.quiz-mode .feedback-box{
    max-height:105px;
  }
}
/* listen_and_guess-page */

.listen_and_guess-page .quiz-head h2{
  margin-top:12px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.4px;
}

.listen_and_guess-page .quiz-head p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:360px;
}

.listen_and_guess-page .stats-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.listen_and_guess-page .stat-item{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.listen_and_guess-page .stat-item strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.listen_and_guess-page .stat-item span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

/* Config */

.listen_and_guess-page .config-card{
  padding:16px;
}

.listen_and_guess-page .config-block + .config-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.listen_and_guess-page .config-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}

.listen_and_guess-page .config-head strong{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.listen_and_guess-page .config-head span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.listen_and_guess-page .chips-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  flex-wrap:nowrap;
}

.listen_and_guess-page .chips-row::-webkit-scrollbar{
  display:none;
}

.listen_and_guess-page .chip{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.listen_and_guess-page .chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.listen_and_guess-page .levels-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.listen_and_guess-page .level-chip{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.listen_and_guess-page .level-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

/* Start button */

.listen_and_guess-page .config-start{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.listen_and_guess-page .config-start .btn{
  width:100%;
  min-height:48px;
}

/* Progress */

.listen_and_guess-page .progress-card{
  padding:16px;
}

.listen_and_guess-page .progress-line{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
}

.listen_and_guess-page .progress-line div{
  height:100%;
  width:10%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transition:.25s ease;
}

/* Audio question */

.listen_and_guess-page .audio-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.listen_and_guess-page .audio-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.listen_and_guess-page .audio-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.listen_and_guess-page .audio-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.08);
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.listen_and_guess-page .audio-title{
  margin-top:14px;
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-0.3px;
}

.listen_and_guess-page .audio-sub{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:340px;
}

.listen_and_guess-page .sound-panel{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
}

.listen_and_guess-page .sound-visual{
  width:100%;
  height:70px;
  border-radius:14px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  padding:12px;
}

.listen_and_guess-page .sound-bar{
  width:10px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--primary-2),var(--primary));
  animation:wave 1.2s ease-in-out infinite;
  opacity:.95;
}

.listen_and_guess-page .sound-bar:nth-child(1){
  height:18px;
  animation-delay:.0s;
}

.listen_and_guess-page .sound-bar:nth-child(2){
  height:32px;
  animation-delay:.1s;
}

.listen_and_guess-page .sound-bar:nth-child(3){
  height:22px;
  animation-delay:.2s;
}

.listen_and_guess-page .sound-bar:nth-child(4){
  height:40px;
  animation-delay:.3s;
}

.listen_and_guess-page .sound-bar:nth-child(5){
  height:28px;
  animation-delay:.4s;
}

.listen_and_guess-page .sound-bar:nth-child(6){
  height:36px;
  animation-delay:.2s;
}

.listen_and_guess-page .sound-bar:nth-child(7){
  height:20px;
  animation-delay:.1s;
}

.listen_and_guess-page .sound-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}

.listen_and_guess-page .sound-btn{
  border:none;
  border-radius:14px;
  padding:13px 14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

.listen_and_guess-page .sound-btn.primary{
  flex:1;
  background:var(--primary);
  color:#fff;
}

.listen_and_guess-page .sound-btn.soft{
  background:var(--primary-soft);
  color:var(--primary);
  min-width:100px;
}

.listen_and_guess-page .sound-meta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

/* Answers */

.listen_and_guess-page .answers-card{
  padding:16px;
}

.listen_and_guess-page .answers{
  display:grid;
  gap:10px;
}

.listen_and_guess-page .answer-btn{
  width:100%;
  border:none;
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  text-align:left;
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
  transition:.18s ease;
  color:var(--text);
  box-shadow:var(--shadow);
}

.listen_and_guess-page .answer-btn:hover{
  transform:translateY(-1px);
}

.listen_and_guess-page .answer-btn.disabled{
  pointer-events:none;
}

.listen_and_guess-page .answer-btn.selected{
  border-color:#BFD8FF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%);
}

body.dark_theme .listen_and_guess-page .answer-btn.selected{
  background:linear-gradient(180deg,#1A2028 0%,#182332 100%);
  border-color:#28415E;
}

.listen_and_guess-page .answer-btn.correct{
  border-color:#B8E8C8;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4FFF7 100%);
}

body.dark_theme .listen_and_guess-page .answer-btn.correct{
  background:linear-gradient(180deg,#18241C 0%,#16241C 100%);
  border-color:#29503A;
}

.listen_and_guess-page .answer-btn.wrong{
  border-color:#FFD0D6;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F6 100%);
}

body.dark_theme .listen_and_guess-page .answer-btn.wrong{
  background:linear-gradient(180deg,#251A1D 0%,#24181C 100%);
  border-color:#533039;
}

.listen_and_guess-page .answer-key{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  flex-shrink:0;
  color:var(--muted);
}

.listen_and_guess-page .answer-btn.selected .answer-key{
  background:var(--primary-soft);
  color:var(--primary);
}

.listen_and_guess-page .answer-btn.correct .answer-key{
  background:#EAFBF0;
  color:#15803D;
  border-color:#CDEFD9;
}

.listen_and_guess-page .answer-btn.wrong .answer-key{
  background:#FFF1F2;
  color:#DC2626;
  border-color:#FFD0D6;
}

.listen_and_guess-page .answer-text{
  min-width:0;
  flex:1;
}

.listen_and_guess-page .answer-text strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:900;
}

.listen_and_guess-page .answer-text span{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

/* Feedback */

.listen_and_guess-page .feedback-card{
  padding:16px;
  display:none;
}

.listen_and_guess-page .feedback-card.show{
  display:block;
}

.listen_and_guess-page .feedback-box{
  padding:14px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--bg);
}

.listen_and_guess-page .feedback-box.correct{
  background:linear-gradient(180deg,#F4FFF7 0%,#FFFFFF 100%);
  border-color:#CDEFD9;
}

body.dark_theme .listen_and_guess-page .feedback-box.correct{
  background:linear-gradient(180deg,#18241C 0%,#16241C 100%);
  border-color:#29503A;
}

.listen_and_guess-page .feedback-box.wrong{
  background:linear-gradient(180deg,#FFF5F6 0%,#FFFFFF 100%);
  border-color:#FFD0D6;
}

body.dark_theme .listen_and_guess-page .feedback-box.wrong{
  background:linear-gradient(180deg,#251A1D 0%,#24181C 100%);
  border-color:#533039;
}

.listen_and_guess-page .feedback-box strong{
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}

.listen_and_guess-page .feedback-box p{
  margin-top:7px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/* Actions */

.listen_and_guess-page .actions-card{
  padding:16px;
  display:flex;
  gap:10px;
}

.listen_and_guess-page .btn{
  border:none;
  border-radius:14px;
  padding:14px 14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.listen_and_guess-page .btn-primary{
  flex:1;
  background:var(--primary);
  color:#fff;
}

.listen_and_guess-page .btn-primary:disabled{
  opacity:.45;
  cursor:not-allowed;
  display:none;
}

.listen_and_guess-page .btn-soft{
  background:var(--primary-soft);
  color:var(--primary);
  min-width:100%;
}

/* Result */

.listen_and_guess-page .result-card{
  padding:18px;
  display:none;
  text-align:center;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.listen_and_guess-page .result-card.show{
  display:block;
}

.listen_and_guess-page .result-icon{
  width:68px;
  height:68px;
  border-radius:22px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:var(--primary-soft);
  color:var(--primary);
}

.listen_and_guess-page .result-card h3{
  margin-top:14px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
}

.listen_and_guess-page .result-card p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
}

.listen_and_guess-page .result-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.listen_and_guess-page .result-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.listen_and_guess-page .result-stat strong{
  display:block;
  font-size:20px;
  font-weight:900;
  line-height:1;
}

.listen_and_guess-page .result-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.listen_and_guess-page .result-actions{
  margin-top:16px;
  display:grid;
  gap:10px;
}

/* Before quiz starts: show only setup */

.listen_and_guess-page:not(.quiz-mode) #quizOnlyTop,
.listen_and_guess-page:not(.quiz-mode) #progressSection,
.listen_and_guess-page:not(.quiz-mode) #questionSection,
.listen_and_guess-page:not(.quiz-mode) #answersSection,
.listen_and_guess-page:not(.quiz-mode) #feedbackSection,
.listen_and_guess-page:not(.quiz-mode) #actionsSection,
.listen_and_guess-page:not(.quiz-mode) #resultSection{
  display:none !important;
}

/* Quiz mode: hide setup */

.listen_and_guess-page.quiz-mode #setupSection{
  display:none !important;
}

/* Quiz mode layout */

.listen_and_guess-page.quiz-mode{
  --listen-bottom-space:88px;
  min-height:100dvh;
  padding-top:4px;
  padding-bottom:calc(var(--listen-bottom-space) + env(safe-area-inset-bottom));
}

.listen_and_guess-page.quiz-mode.answered-mode{
  --listen-bottom-space:220px;
}

.listen_and_guess-page.quiz-mode .section{
  margin-top:10px;
}

.listen_and_guess-page.quiz-mode .quiz-only-top{
  margin-top:0;
}

/* Mini quiz header */

.listen_and_guess-page .quiz-only-top{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.listen_and_guess-page .quiz-back-btn{
  border:none;
  min-width:86px;
  height:44px;
  padding:0 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.listen_and_guess-page .quiz-back-btn:hover{
  transform:translateY(-1px);
}

.listen_and_guess-page .quiz-back-btn span{
  font-size:16px;
  line-height:1;
}

.listen_and_guess-page .quiz-back-btn strong{
  font-size:13px;
  font-weight:900;
}

.listen_and_guess-page .quiz-only-meta{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:8px 13px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.listen_and_guess-page .quiz-only-meta strong{
  display:block;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.listen_and_guess-page .quiz-only-meta span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.dark_theme .listen_and_guess-page .quiz-back-btn,
body.dark_theme .listen_and_guess-page .quiz-only-meta{
  background:var(--card);
  border-color:var(--line);
}

/* Compact quiz cards */

.listen_and_guess-page.quiz-mode .progress-card{
  padding:13px 14px;
}

.listen_and_guess-page.quiz-mode .audio-card{
  padding:16px;
}

.listen_and_guess-page.quiz-mode .answers-card{
  padding:14px;
}

.listen_and_guess-page.quiz-mode .actions-card{
  padding:14px;
}

.listen_and_guess-page.quiz-mode .actions-card .btn,
.listen_and_guess-page.quiz-mode .sound-btn{
  min-height:48px;
}

/* App-like no-page-scroll layout */

.listen_and_guess-page.quiz-mode #questionSection,
.listen_and_guess-page.quiz-mode #answersSection{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Audio area */
.listen_and_guess-page.quiz-mode #questionSection{
  max-height:calc(100dvh - var(--listen-bottom-space) - 285px);
}

/* Answers area */
.listen_and_guess-page.quiz-mode #answersSection{
  max-height:calc(100dvh - var(--listen-bottom-space) - 330px);
  padding-bottom:4px;
}

/* Fixed bottom feedback + actions */

.listen_and_guess-page.quiz-mode #feedbackSection,
.listen_and_guess-page.quiz-mode #actionsSection{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(600px, calc(100% - 20px));
  z-index:90;
  margin:0;
}

.listen_and_guess-page.quiz-mode #feedbackSection{
  bottom:calc(78px + env(safe-area-inset-bottom));
  pointer-events:none;
  margin-bottom:5px;
}

.listen_and_guess-page.quiz-mode #actionsSection{
  bottom:calc(10px + env(safe-area-inset-bottom));
}

.listen_and_guess-page.quiz-mode .feedback-card,
.listen_and_guess-page.quiz-mode .actions-card{
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  border-radius:18px;
}

.listen_and_guess-page.quiz-mode .feedback-card{
  padding:10px;
}

.listen_and_guess-page.quiz-mode .feedback-box{
  max-height:118px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.listen_and_guess-page.quiz-mode .actions-card{
  padding:10px;
  background:var(--card);
  border:1px solid var(--line);
}

.listen_and_guess-page.quiz-mode .actions-card .btn{
  min-height:48px;
}

/* Hide global header/topbar only during listen quiz */

body.listen-quiz-clean .topbar,
body.listen-quiz-clean .app-topbar,
body.listen-quiz-clean .main-topbar,
body.listen-quiz-clean .header,
body.listen-quiz-clean header{
  display:none !important;
}

/* Hide bottom nav during quiz */

body.listen-quiz-clean .bottom-nav,
body.listen-quiz-clean .app-bottom-nav,
body.listen-quiz-clean .main-nav,
body.listen-quiz-clean nav{
  display:none !important;
}

/* Remove extra top padding if your layout has it */

body.listen-quiz-clean .app,
body.listen-quiz-clean .main,
body.listen-quiz-clean .page-wrap{
  padding-top:0 !important;
}

body.listen-quiz-clean{
  overscroll-behavior:none;
}

/* Dark theme */

body.dark_theme .listen_and_guess-page.quiz-mode .actions-card{
  background:var(--card);
  border-color:var(--line);
}

body.dark_theme .listen_and_guess-page.quiz-mode .feedback-card,
body.dark_theme .listen_and_guess-page.quiz-mode .actions-card{
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

/* Mobile */

@media (max-width:430px){
  .listen_and_guess-page .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .listen_and_guess-page .result-grid{
    grid-template-columns:1fr 1fr 1fr;
  }

  .listen_and_guess-page .quiz-head h2,
  .listen_and_guess-page .audio-title{
    font-size:22px;
  }

  .listen_and_guess-page .quiz-only-top{
    gap:8px;
  }

  .listen_and_guess-page .quiz-back-btn{
    min-width:76px;
    height:42px;
    padding:0 11px;
  }

  .listen_and_guess-page .quiz-only-meta{
    min-height:42px;
    padding:7px 11px;
  }

  .listen_and_guess-page .quiz-only-meta strong{
    font-size:12px;
  }

  .listen_and_guess-page .quiz-only-meta span{
    font-size:10.5px;
  }

  .listen_and_guess-page.quiz-mode{
    --listen-bottom-space:84px;
  }

  .listen_and_guess-page.quiz-mode.answered-mode{
    --listen-bottom-space:205px;
  }

  .listen_and_guess-page.quiz-mode #questionSection{
    max-height:calc(100dvh - var(--listen-bottom-space) - 265px);
  }

  .listen_and_guess-page.quiz-mode #answersSection{
    max-height:calc(100dvh - var(--listen-bottom-space) - 305px);
  }

  .listen_and_guess-page.quiz-mode .feedback-box{
    max-height:105px;
  }

  .listen_and_guess-page.quiz-mode .audio-card{
    padding:14px;
  }

  .listen_and_guess-page.quiz-mode .sound-panel{
    margin-top:12px;
    padding:12px;
  }

  .listen_and_guess-page.quiz-mode .sound-visual{
    height:58px;
  }

  .listen_and_guess-page.quiz-mode .answers-card{
    padding:12px;
  }
}
/* match_the_pairs-page */

.match_the_pairs-page .game-head{ padding:16px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); }
.match_the_pairs-page .game-head-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }

.match_the_pairs-page .game-head h2{ margin-top:12px; font-size:24px; line-height:1.12; font-weight:900; letter-spacing:-0.4px; }
.match_the_pairs-page .game-head p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:360px; }

.match_the_pairs-page .stats-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.match_the_pairs-page .stat-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.match_the_pairs-page .stat-item strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.match_the_pairs-page .stat-item span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.match_the_pairs-page .config-card{ padding:16px; }
.match_the_pairs-page .config-block + .match_the_pairs-page .config-block{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.match_the_pairs-page .config-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.match_the_pairs-page .config-head strong{ display:block; font-size:14px; font-weight:900; line-height:1.25; }
.match_the_pairs-page .config-head span{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }

.match_the_pairs-page .chips-row{ display:flex; gap:8px; overflow:auto; padding-bottom:2px; scrollbar-width:none; flex-wrap:nowrap; }
.match_the_pairs-page .chips-row::-webkit-scrollbar{ display:none; }
.match_the_pairs-page .chip{ border:none; background:var(--bg); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; transition:.2s ease; }
.match_the_pairs-page .chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.18); }

.match_the_pairs-page .levels-wrap{ display:flex; gap:8px; flex-wrap:wrap; }
.match_the_pairs-page .level-chip{ width:44px; height:44px; border:none; border-radius:14px; background:var(--bg); border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:900; cursor:pointer; transition:.2s ease; }
.match_the_pairs-page .level-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.18); }

.match_the_pairs-page .progress-card{ padding:16px; }

.match_the_pairs-page .progress-line{ height:10px; border-radius:999px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.match_the_pairs-page .progress-line div{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:.25s ease; }

.match_the_pairs-page .board-card{ padding:16px; }
.match_the_pairs-page .board-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.match_the_pairs-page .board-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:900; }
.match_the_pairs-page .board-chip{ padding:8px 10px; border-radius:999px; background:var(--primary-soft); border:1px solid rgba(31,124,245,.08); color:var(--primary); font-size:11px; font-weight:900; white-space:nowrap; }
.match_the_pairs-page .board-title{ font-size:24px; line-height:1.15; font-weight:900; letter-spacing:-0.3px; }
.match_the_pairs-page .board-sub{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:360px; }

.match_the_pairs-page .pairs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
.match_the_pairs-page .pair-card{ min-height:88px; border:none; border-radius:16px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; padding:14px; text-align:left; transition:.18s ease; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; color:var(--text); }
.match_the_pairs-page .pair-card:hover{ transform:translateY(-1px); }
.match_the_pairs-page .pair-card.hidden .pair-value, .match_the_pairs-page .pair-card.hidden .pair-meta{ opacity:0; }
.match_the_pairs-page .pair-card.hidden::before{ content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; color:var(--primary); background:linear-gradient(135deg,var(--primary-soft),rgba(87,168,255,.12)); }

.match_the_pairs-page .pair-card.revealed{ border-color:#BFD8FF; background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%); }
body.dark_theme .match_the_pairs-page .pair-card.revealed{ background:linear-gradient(180deg,#1A2028 0%,#182332 100%); border-color:#28415E; }

.match_the_pairs-page .pair-card.matched{ border-color:#B8E8C8; background:linear-gradient(180deg,#FFFFFF 0%,#F4FFF7 100%); cursor:default; }
body.dark_theme .match_the_pairs-page .pair-card.matched{ background:linear-gradient(180deg,#18241C 0%,#16241C 100%); border-color:#29503A; }

.match_the_pairs-page .pair-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.match_the_pairs-page .pair-type{ padding:7px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:11px; font-weight:900; color:var(--muted); white-space:nowrap; }
.match_the_pairs-page .pair-index{ font-size:11px; font-weight:900; color:var(--muted); }
.match_the_pairs-page .pair-value{ font-size:20px; line-height:1.2; font-weight:900; word-break:break-word; transition:.18s ease; }
.match_the_pairs-page .pair-meta{ margin-top:6px; font-size:12px; line-height:1.4; color:var(--muted); transition:.18s ease; }

.match_the_pairs-page .feedback-card{ padding:16px; display:none; }
.match_the_pairs-page .feedback-card.show{ display:block; }

.match_the_pairs-page .feedback-box{ padding:14px; border-radius:15px; border:1px solid var(--line); background:var(--bg); }
.match_the_pairs-page .feedback-box.correct{ background:linear-gradient(180deg,#F4FFF7 0%,#FFFFFF 100%); border-color:#CDEFD9; }
body.dark_theme .match_the_pairs-page .feedback-box.correct{ background:linear-gradient(180deg,#18241C 0%,#16241C 100%); border-color:#29503A; }

.match_the_pairs-page .feedback-box.wrong{ background:linear-gradient(180deg,#FFF5F6 0%,#FFFFFF 100%); border-color:#FFD0D6; }
body.dark_theme .match_the_pairs-page .feedback-box.wrong{ background:linear-gradient(180deg,#251A1D 0%,#24181C 100%); border-color:#533039; }

.match_the_pairs-page .feedback-box strong{ display:block; font-size:15px; font-weight:900; line-height:1.25; }
.match_the_pairs-page .feedback-box p{ margin-top:7px; font-size:13px; line-height:1.5; color:var(--muted); }
.match_the_pairs-page .actions-card{ padding:16px; display:flex; gap:10px; }

.match_the_pairs-page .btn{ border:none; border-radius:14px; padding:14px 14px; font-size:14px; font-weight:900; cursor:pointer; transition:.18s ease; }
.match_the_pairs-page .btn-primary{ flex:1; background:var(--primary); color:#fff; }
.match_the_pairs-page .btn-soft{ background:var(--primary-soft); color:var(--primary); min-width:110px; }

.match_the_pairs-page .result-card{ padding:18px; display:none; text-align:center; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); }
.match_the_pairs-page .result-card.show{ display:block; }

.match_the_pairs-page .result-icon{ width:68px; height:68px; border-radius:22px; margin:0 auto; display:flex; align-items:center; justify-content:center; font-size:32px; background:var(--primary-soft); color:var(--primary); }
.match_the_pairs-page .result-card h3{ margin-top:14px; font-size:24px; line-height:1.12; font-weight:900; }
.match_the_pairs-page .result-card p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:320px; margin-left:auto; margin-right:auto; }

.match_the_pairs-page .result-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.match_the_pairs-page .result-stat{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.match_the_pairs-page .result-stat strong{ display:block; font-size:20px; font-weight:900; line-height:1; }
.match_the_pairs-page .result-stat span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }
.match_the_pairs-page .result-actions{ margin-top:16px; display:flex; gap:10px; }

@media (max-width:430px){ .match_the_pairs-page .stats-grid{ grid-template-columns:repeat(2,1fr); } .match_the_pairs-page .result-grid{ grid-template-columns:1fr 1fr 1fr; } .match_the_pairs-page .game-head h2, .match_the_pairs-page .board-title{ font-size:22px; } .match_the_pairs-page .pair-value{ font-size:18px; } .match_the_pairs-page .pairs-grid{ gap:8px; } }
/* match_the_pairs game mode additions */

/* Fix config block separator */
.match_the_pairs-page .config-block + .config-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

/* Start button */
.match_the_pairs-page .config-start{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.match_the_pairs-page .config-start .btn{
  width:100%;
  min-height:48px;
}

/* Before game starts: show only setup */
.match_the_pairs-page:not(.quiz-mode) #quizOnlyTop,
.match_the_pairs-page:not(.quiz-mode) #progressSection,
.match_the_pairs-page:not(.quiz-mode) #boardSection,
.match_the_pairs-page:not(.quiz-mode) #feedbackSection,
.match_the_pairs-page:not(.quiz-mode) #actionsSection,
.match_the_pairs-page:not(.quiz-mode) #resultSection{
  display:none !important;
}

/* Game mode: hide setup */
.match_the_pairs-page.quiz-mode #setupSection{
  display:none !important;
}

/* Mini game header */
.match_the_pairs-page .quiz-only-top{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.match_the_pairs-page .quiz-back-btn{
  border:none;
  min-width:86px;
  height:44px;
  padding:0 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.match_the_pairs-page .quiz-back-btn:hover{
  transform:translateY(-1px);
}

.match_the_pairs-page .quiz-back-btn span{
  font-size:16px;
  line-height:1;
}

.match_the_pairs-page .quiz-back-btn strong{
  font-size:13px;
  font-weight:900;
}

/* Game meta */
.match_the_pairs-page .quiz-only-meta{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:8px 13px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.match_the_pairs-page .quiz-only-meta strong{
  display:block;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.match_the_pairs-page .quiz-only-meta span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Cleaner game spacing */
.match_the_pairs-page.quiz-mode{
  padding-top:4px;
}

.match_the_pairs-page.quiz-mode .section{
  margin-top:10px;
}

.match_the_pairs-page.quiz-mode .quiz-only-top{
  margin-top:0;
}

.match_the_pairs-page.quiz-mode .progress-card{
  padding:13px 14px;
}

.match_the_pairs-page.quiz-mode .board-card{
  padding:16px;
}

.match_the_pairs-page.quiz-mode .actions-card{
  padding:14px;
}

.match_the_pairs-page.quiz-mode .actions-card .btn{
  min-height:48px;
}

/* Make board slightly more compact in game mode */
.match_the_pairs-page.quiz-mode .board-head{
  margin-bottom:12px;
}

.match_the_pairs-page.quiz-mode .pairs-grid{
  margin-top:14px;
}

/* Hide global header/topbar only during match game */
body.match-quiz-clean .topbar,
body.match-quiz-clean .app-topbar,
body.match-quiz-clean .main-topbar,
body.match-quiz-clean .header,
body.match-quiz-clean header{
  display:none !important;
}

/* Remove extra top padding if your layout has it */
body.match-quiz-clean .app,
body.match-quiz-clean .main,
body.match-quiz-clean .page-wrap{
  padding-top:0 !important;
}

/* Dark theme */
body.dark_theme .match_the_pairs-page .quiz-back-btn,
body.dark_theme .match_the_pairs-page .quiz-only-meta{
  background:var(--card);
  border-color:var(--line);
}

/* Mobile polish */
@media (max-width:430px){
  .match_the_pairs-page .quiz-only-top{
    gap:8px;
  }

  .match_the_pairs-page .quiz-back-btn{
    min-width:76px;
    height:42px;
    padding:0 11px;
  }

  .match_the_pairs-page .quiz-only-meta{
    min-height:42px;
    padding:7px 11px;
  }

  .match_the_pairs-page .quiz-only-meta strong{
    font-size:12px;
  }

  .match_the_pairs-page .quiz-only-meta span{
    font-size:10.5px;
  }

  .match_the_pairs-page.quiz-mode .board-card{
    padding:14px;
  }

  .match_the_pairs-page.quiz-mode .pair-card{
    min-height:82px;
    padding:12px;
  }
}
/* phonetics-page */
.phonetics-page .hero-card, .phonetics-page .trainer-card, .phonetics-page .contrast-card, .phonetics-page .studio-card, .phonetics-page .reference-card{ padding:16px; }

.phonetics-page .hero-card{ background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); }
.phonetics-page .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }

.phonetics-page .hero-copy{ flex:1; min-width:0; }

.phonetics-page .hero-badge, .phonetics-page .studio-badge, .phonetics-page .trainer-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); border:1px solid rgba(31,124,245,.08); font-size:12px; font-weight:800; }
.phonetics-page .hero-badge .dot, .phonetics-page .studio-badge .dot, .phonetics-page .trainer-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }

.phonetics-page .hero-copy h2{ margin-top:12px; font-size:25px; line-height:1.1; font-weight:900; letter-spacing:-0.4px; }
.phonetics-page .hero-copy p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:380px; }

.phonetics-page .hero-chip, .phonetics-page .soft-chip{ padding:8px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:900; white-space:nowrap; flex-shrink:0; }

.phonetics-page .steps-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.phonetics-page .step-chip{ padding:8px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:11px; font-weight:800; color:var(--muted); }

.phonetics-page .summary-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.phonetics-page .summary-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.phonetics-page .summary-item strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.phonetics-page .summary-item span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.phonetics-page .tabs-row, .phonetics-page .tones-row, .phonetics-page .chip-row{ display:flex; gap:8px; overflow:auto; padding-bottom:2px; scrollbar-width:none; flex-wrap:nowrap; }
.phonetics-page .tabs-row::-webkit-scrollbar, .phonetics-page .tones-row::-webkit-scrollbar, .phonetics-page .chip-row::-webkit-scrollbar{ display:none; }

.phonetics-page .tab-btn, .phonetics-page .tone-btn, .phonetics-page .chip-btn, .phonetics-page .mini-chip{ border:none; background:var(--card); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; transition:.2s ease; box-shadow:var(--shadow); }

.phonetics-page .tab-btn.active, .phonetics-page .tone-btn.active, .phonetics-page .chip-btn.active, .phonetics-page .mini-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.18); }
.phonetics-page .trainer-main{ margin-top:14px; display:grid; gap:12px; }

.phonetics-page .tone-board{ padding:16px; border-radius:18px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); text-align:center; }
.phonetics-page .tone-syllable{ font-size:48px; line-height:1; font-weight:900; letter-spacing:-1px; }
.phonetics-page .tone-plain{ margin-top:10px; font-size:14px; color:var(--muted); font-weight:800; }
.phonetics-page .tone-help{ margin-top:10px; font-size:13px; line-height:1.5; color:var(--muted); }

.phonetics-page .audio-actions{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.phonetics-page .primary-btn, .phonetics-page .soft-btn{ min-height:50px; border:none; border-radius:15px; font-size:14px; font-weight:900; cursor:pointer; }

.phonetics-page .primary-btn{ background:var(--primary); color:#fff; }

.phonetics-page .soft-btn{ background:var(--primary-soft); color:var(--primary); }

.phonetics-page .double-grid{ display:grid; grid-template-columns:1fr; gap:14px; }

.phonetics-page .contrast-list, .phonetics-page .focus-list{ display:grid; gap:10px; }

.phonetics-page .contrast-item, .phonetics-page .focus-item{ padding:14px; border-radius:15px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); }

.phonetics-page .contrast-top, .phonetics-page .focus-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }

.phonetics-page .contrast-top strong, .phonetics-page .focus-top strong{ display:block; font-size:14px; font-weight:900; line-height:1.25; }

.phonetics-page .contrast-top span, .phonetics-page .focus-top span{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }

.phonetics-page .pair-row{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.phonetics-page .pair-pill{ padding:10px 12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); font-size:13px; font-weight:900; color:var(--text); }
.phonetics-page .studio-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }

.phonetics-page .syllable-big{ font-size:46px; line-height:1; font-weight:900; letter-spacing:-1px; text-align:center; margin-bottom:10px; }
.phonetics-page .syllable-sub{ text-align:center; font-size:14px; color:var(--muted); font-weight:800; }

.phonetics-page .decompose-grid{ margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.phonetics-page .decompose-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); text-align:center; }
.phonetics-page .decompose-item strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.phonetics-page .decompose-item span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.phonetics-page .search-box{ position:relative; margin-bottom:14px; }
.phonetics-page .search-box input{ width:100%; height:52px; border:none; outline:none; border-radius:16px; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:0 16px 0 44px; font-size:14px; font-weight:700; }
.phonetics-page .search-box i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--muted); font-size:17px; }

.phonetics-page .reference-wrap{ overflow:auto; border-radius:16px; border:1px solid var(--line); background:var(--card); }
.phonetics-page .reference-table{ width:100%; min-width:980px; border-collapse:separate; border-spacing:0; font-size:12px; }
.phonetics-page .reference-table th, .phonetics-page .reference-table td{ padding:10px 8px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }

.phonetics-page .reference-table th{ background:var(--card-2); color:var(--text); font-weight:900; position:sticky; top:0; z-index:2; }

.phonetics-page .reference-table th.final-col, .phonetics-page .reference-table td.final-col, .phonetics-page .reference-table td.base-col{ position:sticky; left:0; z-index:1; background:var(--card); font-weight:900; }

.phonetics-page .reference-table td.base-col{ left:56px; background:var(--card-2); color:var(--primary); }
.phonetics-page .reference-table th.final-col{ left:0; z-index:3; }
.phonetics-page .reference-table th.base-head{ left:56px; z-index:3; position:sticky; }
.phonetics-page .reference-table .combo-cell{ cursor:pointer; font-weight:800; color:var(--text); background:var(--card); transition:.16s ease; }
.phonetics-page .reference-table .combo-cell:hover{ background:var(--primary-soft); color:var(--primary); }
.phonetics-page .reference-table .combo-cell.active{ background:var(--primary); color:#fff; }
.phonetics-page .reference-table .empty-cell{ background:var(--bg); color:transparent; }
.phonetics-page .reference-note{ margin-top:12px; padding:14px; border-radius:15px; background:var(--bg); border:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--muted); font-weight:700; }

@media (min-width:560px){ .phonetics-page .double-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:430px){ .phonetics-page .summary-grid{ grid-template-columns:repeat(2,1fr); } .phonetics-page .decompose-grid{ grid-template-columns:1fr 1fr 1fr; } .phonetics-page .hero-copy h2, .phonetics-page .syllable-big, .phonetics-page .tone-syllable{ font-size:22px; } .phonetics-page .audio-actions{ grid-template-columns:1fr; } }
/* write_hanzi-page */
.write_hanzi-page .hero-card {
  padding: 16px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.write_hanzi-page .hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.write_hanzi-page .hero-copy {
  flex: 1;
  min-width: 0;
}

.write_hanzi-page .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(31, 124, 245, .08);
  font-size: 12px;
  font-weight: 800;
}

.write_hanzi-page .hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.write_hanzi-page .hero-copy h2 {
  margin-top: 12px;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.4px;
}

.write_hanzi-page .hero-copy p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 370px;
}

.write_hanzi-page .hero-chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

.write_hanzi-page .steps-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.write_hanzi-page .step-chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.write_hanzi-page .summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.write_hanzi-page .summary-item {
  padding: 12px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.write_hanzi-page .summary-item strong {
  display: block;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.write_hanzi-page .summary-item span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 700;
}

.write_hanzi-page .setup-card,
.write_hanzi-page .workspace-card,
.write_hanzi-page .example-card,
.write_hanzi-page .bank-card {
  padding: 16px;
}

.write_hanzi-page .search-box {
  position: relative;
  margin-bottom: 14px;
}

.write_hanzi-page .search-box input {
  width: 100%;
  height: 52px;
  border: none;
  outline: none;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0 16px 0 44px;
  font-size: 14px;
  font-weight: 700;
}

.write_hanzi-page .search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  color: var(--muted);
  font-size: 17px;
}

.write_hanzi-page .tabs-row {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.write_hanzi-page .tabs-row::-webkit-scrollbar {
  display: none;
}

.write_hanzi-page .tab-btn,
.write_hanzi-page .toggle-btn,
.write_hanzi-page .char-pill {
  border: none;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: var(--shadow);
}

.write_hanzi-page .tab-btn.active,
.write_hanzi-page .toggle-btn.active,
.write_hanzi-page .char-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 124, 245, .18);
}

.write_hanzi-page .toggle-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.write_hanzi-page .workspace-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.write_hanzi-page .workspace-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(31, 124, 245, .08);
}

.write_hanzi-page .workspace-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.write_hanzi-page .workspace-chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

.write_hanzi-page .word-preview {
  text-align: center;
  margin-bottom: 14px;
}

.write_hanzi-page .word-hanzi {
  font-size: 50px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  transition: .2s ease;
}

.write_hanzi-page .word-hanzi.hidden {
  color: var(--muted);
  letter-spacing: 2px;
  font-size: 28px;
}

.write_hanzi-page .word-pinyin {
  margin-top: 10px;
  font-size: 18px;
  color: var(--primary);
  font-weight: 900;
}

.write_hanzi-page .word-translation {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

.write_hanzi-page .char-pills {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.write_hanzi-page .char-pill small {
  font-size: 10px;
  margin-left: 6px;
  opacity: .9;
}

/* CANVAS AREA */
.write_hanzi-page .canvas-wrap {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.write_hanzi-page .canvas-box {
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--line);
}

/* Главное: canvas зависит от ширины и высоты экрана */
.write_hanzi-page .canvas-grid {
  width: clamp(220px, min(100%, calc(100vw - 56px), calc(100svh - 390px)), 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}

/* fallback если браузер плохо понимает svh */
@supports not (height: 100svh) {
  .write_hanzi-page .canvas-grid {
    width: clamp(220px, min(100%, calc(100vw - 56px), calc(100vh - 390px)), 320px);
  }
}

.write_hanzi-page .canvas-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.write_hanzi-page .canvas-guides::before,
.write_hanzi-page .canvas-guides::after {
  content: "";
  position: absolute;
  background: var(--line);
  opacity: .9;
}

.write_hanzi-page .canvas-guides::before {
  width: 1px;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.write_hanzi-page .canvas-guides::after {
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.write_hanzi-page .diag-a,
.write_hanzi-page .diag-b {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.write_hanzi-page .diag-a::before,
.write_hanzi-page .diag-b::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 1px;
  background: var(--line);
  opacity: .75;
  transform-origin: center;
}

.write_hanzi-page .diag-a::before {
  transform: rotate(45deg);
}

.write_hanzi-page .diag-b::before {
  transform: rotate(-45deg);
}

.write_hanzi-page #hanziCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.write_hanzi-page #hanziCanvas svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.write_hanzi-page .canvas-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
  padding: 2px 14px 14px 14px;
}

.write_hanzi-page .next-word-btn {
  min-height: 56px;
  border: none;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 24px rgba(31, 124, 245, .22);
}

.write_hanzi-page .next-word-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.write_hanzi-page .control-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.write_hanzi-page .control-btn {
  border: none;
  border-radius: 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  min-height: 72px;
  padding: 10px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  transition: .2s ease;
}

.write_hanzi-page .control-btn i {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

.write_hanzi-page .control-btn span {
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
}

.write_hanzi-page .control-btn.active {
  background: var(--primary-soft);
  border-color: #CFE2FF;
  color: var(--primary);
}

.write_hanzi-page .word-progress-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 15px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.write_hanzi-page .word-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.write_hanzi-page .word-progress-top strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.write_hanzi-page .word-progress-top span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.write_hanzi-page .word-progress-line {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}

.write_hanzi-page .word-progress-line div {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transition: .25s ease;
}

.write_hanzi-page .word-progress-meta {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 700;
}

.write_hanzi-page .board-note {
  margin-top: 14px;
  padding: 14px;
  border-radius: 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.write_hanzi-page .example-box {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--line);
}

.write_hanzi-page .example-cn {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 900;
}

.write_hanzi-page .example-pinyin {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--primary);
  font-weight: 800;
}

.write_hanzi-page .example-en {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 700;
}

.write_hanzi-page .bank-list {
  display: grid;
  gap: 10px;
}

.write_hanzi-page .bank-item {
  width: 100%;
  border: none;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--line);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: .18s ease;
  box-shadow: var(--shadow);
}

.write_hanzi-page .bank-item.active {
  border-color: #BFD8FF;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F9FF 100%);
}

body.dark_theme .write_hanzi-page .bank-item.active {
  background: linear-gradient(180deg, #1A2028 0%, #182332 100%);
  border-color: #28415E;
}

.write_hanzi-page .bank-item strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--primary);
}

.write_hanzi-page .bank-item span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.write_hanzi-page .empty-state {
  display: none;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--card);
}

.write_hanzi-page .bank-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}

.write_hanzi-page .page-btn {
  border: 0;
  background: var(--card, #fff);
  color: var(--text, #111827);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.write_hanzi-page .page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.write_hanzi-page .page-counter {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted, #6B7280);
  white-space: nowrap;
}

/* обычные маленькие экраны */
@media (max-width: 430px) {
  .write_hanzi-page .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .write_hanzi-page .hero-copy h2 {
    font-size: 23px;
  }

  .write_hanzi-page .word-hanzi {
    font-size: 42px;
  }

  .write_hanzi-page .control-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* маленькие телефоны */
@media (max-width: 390px) {
  .write_hanzi-page .hero-card,
  .write_hanzi-page .setup-card,
  .write_hanzi-page .workspace-card,
  .write_hanzi-page .example-card,
  .write_hanzi-page .bank-card {
    padding: 12px;
  }

  .write_hanzi-page .hero-top {
    gap: 8px;
    margin-bottom: 10px;
  }

  .write_hanzi-page .hero-copy h2 {
    margin-top: 9px;
    font-size: 21px;
  }

  .write_hanzi-page .hero-copy p {
    margin-top: 6px;
    font-size: 12px;
  }

  .write_hanzi-page .hero-chip {
    padding: 7px 9px;
    font-size: 10px;
  }

  .write_hanzi-page .steps-row {
    gap: 6px;
    margin-bottom: 10px;
  }

  .write_hanzi-page .step-chip {
    padding: 7px 9px;
    font-size: 10px;
  }

  .write_hanzi-page .summary-grid {
    gap: 8px;
  }

  .write_hanzi-page .summary-item {
    padding: 10px;
  }

  .write_hanzi-page .summary-item strong {
    font-size: 16px;
  }

  .write_hanzi-page .summary-item span {
    font-size: 10px;
  }

  .write_hanzi-page .canvas-wrap {
    margin-top: 10px;
    gap: 8px;
  }

  .write_hanzi-page .canvas-box {
    padding: 8px;
  }

  .write_hanzi-page .canvas-grid {
    width: clamp(210px, min(100%, calc(100vw - 48px), calc(100svh - 360px)), 280px);
  }

  @supports not (height: 100svh) {
    .write_hanzi-page .canvas-grid {
      width: clamp(210px, min(100%, calc(100vw - 48px), calc(100vh - 360px)), 280px);
    }
  }

  .write_hanzi-page .word-preview {
    margin-bottom: 8px;
  }

  .write_hanzi-page .word-hanzi {
    font-size: 34px;
  }

  .write_hanzi-page .word-hanzi.hidden {
    font-size: 24px;
  }

  .write_hanzi-page .word-pinyin {
    margin-top: 6px;
    font-size: 15px;
  }

  .write_hanzi-page .word-translation {
    margin-top: 4px;
    font-size: 12px;
  }

  .write_hanzi-page .char-pills {
    margin-top: 8px;
    gap: 6px;
  }

  .write_hanzi-page .char-pill,
  .write_hanzi-page .tab-btn,
  .write_hanzi-page .toggle-btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .write_hanzi-page .canvas-actions {
    margin-top: 8px;
    padding: 2px 10px 10px;
  }

  .write_hanzi-page .next-word-btn {
    min-height: 48px;
    border-radius: 14px;
    font-size: 13px;
  }

  .write_hanzi-page .control-grid {
    gap: 8px;
    margin-top: 10px;
  }

  .write_hanzi-page .control-btn {
    min-height: 58px;
    padding: 8px;
    border-radius: 13px;
  }

  .write_hanzi-page .control-btn i {
    font-size: 17px;
  }

  .write_hanzi-page .control-btn span {
    font-size: 10px;
  }

  .write_hanzi-page .word-progress-box,
  .write_hanzi-page .board-note {
    margin-top: 10px;
    padding: 11px;
  }

  .write_hanzi-page .example-box {
    padding: 12px;
  }

  .write_hanzi-page .example-cn {
    font-size: 18px;
  }
}

/* низкие экраны */
@media (max-height: 700px) {
  .write_hanzi-page .canvas-grid {
    width: clamp(200px, min(100%, calc(100vw - 48px), calc(100svh - 330px)), 270px);
  }

  @supports not (height: 100svh) {
    .write_hanzi-page .canvas-grid {
      width: clamp(200px, min(100%, calc(100vw - 48px), calc(100vh - 330px)), 270px);
    }
  }

  .write_hanzi-page .word-hanzi {
    font-size: 32px;
  }

  .write_hanzi-page .word-pinyin,
  .write_hanzi-page .word-translation {
    margin-top: 4px;
  }

  .write_hanzi-page .control-btn {
    min-height: 54px;
  }

  .write_hanzi-page .board-note {
    display: none;
  }
}

/* очень маленькие по высоте устройства */
@media (max-height: 620px) {
  .write_hanzi-page .canvas-grid {
    width: clamp(185px, min(100%, calc(100vw - 44px), calc(100svh - 300px)), 235px);
  }

  @supports not (height: 100svh) {
    .write_hanzi-page .canvas-grid {
      width: clamp(185px, min(100%, calc(100vw - 44px), calc(100vh - 300px)), 235px);
    }
  }

  .write_hanzi-page .word-progress-box {
    display: none;
  }

  .write_hanzi-page .control-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .write_hanzi-page .control-btn {
    min-height: 48px;
    padding: 7px;
  }

  .write_hanzi-page .control-btn span {
    display: none;
  }

  .write_hanzi-page .control-btn i {
    font-size: 18px;
  }

  .write_hanzi-page .canvas-actions {
    padding-bottom: 8px;
  }

  .write_hanzi-page .next-word-btn {
    min-height: 44px;
  }
}
/* grammar-page */
/* grammar-page */

.grammar-page .hero-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.grammar-page .hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.grammar-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.grammar-page .hero-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.grammar-page .hero-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.grammar-page .hero-card h2{
  margin-top:12px;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-0.4px;
}

.grammar-page .hero-card p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:420px;
}

.grammar-page .stats-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.grammar-page .stat-item{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.grammar-page .stat-item strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.grammar-page .stat-item span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.grammar-page .filters-card,
.grammar-page .topic-card,
.grammar-page .detail-card{
  padding:16px;
}

.grammar-page .levels-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.grammar-page .level-chip{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.grammar-page .level-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.grammar-page .chip{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.grammar-page .topic-list{
  display:grid;
  gap:10px;
}

.grammar-page .topic-item{
  width:100%;
  border:none;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  padding:14px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
  color:var(--text);
  box-shadow:var(--shadow);
}

.grammar-page .topic-item:hover{
  transform:translateY(-1px);
}

.grammar-page .topic-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.grammar-page .topic-left{
  min-width:0;
  flex:1;
}

.grammar-page .topic-left strong{
  display:block;
  font-size:15px;
  line-height:1.25;
  font-weight:900;
}

.grammar-page .topic-left span{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.grammar-page .topic-tag{
  padding:7px 9px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}

.grammar-page .detail-actions{
  display:flex;
  justify-content:flex-start;
  margin-bottom:14px;
}

.grammar-page .detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.grammar-page .detail-header-left{
  min-width:0;
  flex:1;
}

.grammar-page .detail-title{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-0.3px;
}

.grammar-page .detail-level{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}

.grammar-page .grammar-html-content{
  font-size:14px;
  line-height:1.75;
  color:var(--text);
}

.grammar-page .grammar-html-content p{
  margin:0 0 12px;
}

.grammar-page .grammar-html-content ul,
.grammar-page .grammar-html-content ol{
  margin:0 0 12px 18px;
  padding:0;
}

.grammar-page .grammar-html-content li{
  margin-bottom:6px;
}

.grammar-page .grammar-html-content strong,
.grammar-page .grammar-html-content b{
  font-weight:900;
}

.grammar-page .grammar-html-content h1,
.grammar-page .grammar-html-content h2,
.grammar-page .grammar-html-content h3,
.grammar-page .grammar-html-content h4{
  margin:0 0 10px;
  line-height:1.25;
}

.grammar-page .grammar-html-content h1{ font-size:24px; }
.grammar-page .grammar-html-content h2{ font-size:20px; }
.grammar-page .grammar-html-content h3{ font-size:18px; }
.grammar-page .grammar-html-content h4{ font-size:16px; }

.grammar-page .grammar-html-content table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  overflow:hidden;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.grammar-page .grammar-html-content th,
.grammar-page .grammar-html-content td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.grammar-page .grammar-html-content tr:last-child td{
  border-bottom:none;
}

.grammar-page .grammar-html-content blockquote{
  margin:12px 0;
  padding:12px 14px;
  border-left:3px solid var(--primary);
  background:var(--bg);
  border-radius:12px;
  color:var(--muted);
}

.grammar-page .skeleton-card{
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}

.grammar-page .skeleton-line{
  height:12px;
  border-radius:999px;
  background:rgba(127,127,127,.12);
  margin-bottom:10px;
}

.grammar-page .skeleton-line:last-child{
  margin-bottom:0;
}

@media (max-width:430px){
  .grammar-page .stats-grid{
    grid-template-columns:1fr;
  }

  .grammar-page .hero-card h2,
  .grammar-page .detail-title{
    font-size:22px;
  }
}
/* daily_learn_wordspage */

.daily_learn_words-page .intro-card{ padding:16px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); }
.daily_learn_words-page .intro-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.daily_learn_words-page .intro-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); border:1px solid rgba(31,124,245,.08); font-size:12px; font-weight:800; }
.daily_learn_words-page .intro-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.daily_learn_words-page .intro-chip{ padding:8px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:900; white-space:nowrap; }
.daily_learn_words-page .intro-card h2{ font-size:26px; line-height:1.08; font-weight:900; letter-spacing:-0.5px; max-width:340px; }
.daily_learn_words-page .intro-card p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:420px; }

.daily_learn_words-page .mission-progress{ margin-top:16px; padding:14px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }
.daily_learn_words-page .mission-progress-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; font-weight:800; }

.daily_learn_words-page .progress-line{ height:10px; border-radius:999px; overflow:hidden; background:var(--card); border:1px solid var(--line); }
.daily_learn_words-page .progress-line > div{ height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); border-radius:999px; }

.daily_learn_words-page .intro-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.daily_learn_words-page .btn{ border:none; border-radius:14px; padding:12px 14px; font-size:14px; font-weight:800; cursor:pointer; transition:.2s ease; }
.daily_learn_words-page .btn-primary{ background:var(--primary); color:#fff; flex:1; }
.daily_learn_words-page .btn-soft{ background:var(--primary-soft); color:var(--primary); border:1px solid rgba(31,124,245,.08); flex:1; }

.daily_learn_words-page .summary-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

.daily_learn_words-page .stat-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.daily_learn_words-page .stat-item strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.daily_learn_words-page .stat-item span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.daily_learn_words-page .route-card,.daily_learn_words-page .vocab-card,.daily_learn_words-page .tips-card{ padding:16px; }

.daily_learn_words-page .route-list,.daily_learn_words-page .tips-list,.daily_learn_words-page .vocab-list{ display:grid; gap:10px; }
.daily_learn_words-page .route-item, .daily_learn_words-page .tip-item{ display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }
.daily_learn_words-page .route-index, .daily_learn_words-page .tip-icon{ width:38px; height:38px; border-radius:13px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; flex-shrink:0; }
.daily_learn_words-page .route-body strong, .daily_learn_words-page .tip-body strong{ display:block; font-size:14px; font-weight:900; line-height:1.2; }
.daily_learn_words-page .route-body p, .daily_learn_words-page .tip-body p{ margin-top:5px; font-size:12px; line-height:1.45; color:var(--muted); font-weight:700; }
.daily_learn_words-page .route-meta{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.daily_learn_words-page .route-meta span{ font-size:11px; font-weight:800; padding:7px 9px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); }

.daily_learn_words-page .word-card{ padding:14px; position:relative; overflow:hidden; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); border-radius:16px; }
.daily_learn_words-page .word-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }
.daily_learn_words-page .word-card.success::before{background:var(--success);}
.daily_learn_words-page .word-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.daily_learn_words-page .word-main{min-width:0;flex:1;} 
.daily_learn_words-page .word-hanzi{ font-size:30px; line-height:1; font-weight:900; letter-spacing:-0.5px; }
.daily_learn_words-page .word-pinyin{ margin-top:7px; font-size:13px; color:var(--primary); font-weight:800; }
.daily_learn_words-page .word-translation{ margin-top:6px; font-size:14px; line-height:1.4; color:var(--text); font-weight:700; }
.daily_learn_words-page .word-actions{ display:flex; gap:8px; flex-shrink:0; }
.daily_learn_words-page .word-btn{ width:40px; height:40px; border:none; border-radius:13px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:17px; cursor:pointer; }
.daily_learn_words-page .word-btn.active{ background:var(--primary-soft); border-color:#CFE2FF; color:var(--primary); }
.daily_learn_words-page .word-bottom{ margin-top:12px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.daily_learn_words-page .word-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.daily_learn_words-page .word-tags span{ font-size:11px; font-weight:800; padding:7px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }
.daily_learn_words-page .word-note{ font-size:12px; color:var(--muted); font-weight:800; }

.daily_learn_words-page .sticky-cta{ position:fixed; left:0; right:0; bottom:15px; z-index:55; pointer-events:none; }
.daily_learn_words-page .sticky-cta-inner{ max-width:var(--container); margin:0 auto; padding:0 16px; }
.daily_learn_words-page .sticky-cta-card{ pointer-events:auto; display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px; border-radius:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); border:1px solid rgba(0,0,0,.05); box-shadow:0 20px 36px rgba(18,28,45,.12); }

body.dark_theme .daily_learn_words-page .sticky-cta-card{ background:rgba(25,28,32,.92); border:1px solid rgba(255,255,255,.06); box-shadow:none; }

.daily_learn_words-page .sticky-copy strong{ display:block; font-size:14px; font-weight:900; }
.daily_learn_words-page .sticky-copy span{ display:block; margin-top:4px; font-size:12px; color:var(--muted); font-weight:700; }
.daily_learn_words-page .sticky-start{ border:none; border-radius:14px; background:var(--primary); color:#fff; padding:12px 16px; font-size:13px; font-weight:900; cursor:pointer; white-space:nowrap; }

@media (max-width:430px){
.daily_learn_words-page .summary-grid{grid-template-columns:repeat(2,1fr);}
.daily_learn_words-page .intro-card h2{font-size:23px;}
}

/* daily_mission_run-page */
/* daily_mission_run-page */

.daily_mission_run-page .mission-head{ padding:16px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); }
.daily_mission_run-page .mission-head-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.daily_mission_run-page .mission-head h2{ margin-top:12px; font-size:24px; line-height:1.12; font-weight:900; letter-spacing:-0.4px; }
.daily_mission_run-page .mission-head p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:360px; }

.daily_mission_run-page .stats-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.daily_mission_run-page .stat-item{ padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.daily_mission_run-page .stat-item strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.daily_mission_run-page .stat-item span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); font-weight:700; }

.daily_mission_run-page .progress-card{ padding:16px; }

.daily_mission_run-page .progress-line{ height:10px; border-radius:999px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.daily_mission_run-page .progress-line div{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:.25s ease; }

.daily_mission_run-page .phase-row{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.daily_mission_run-page .phase-chip{ padding:8px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:900; }
.daily_mission_run-page .phase-chip.active{ background:var(--primary-soft); color:var(--primary); border-color:#CFE2FF; }
.daily_mission_run-page .phase-chip.done{ background:#ECFDF3; color:#15803D; border-color:#C9F1D7; }

body.dark_theme .daily_mission_run-page .phase-chip.done{ background:#15261C; color:#86EFAC; border-color:#23412E; }

.daily_mission_run-page .workspace-card{ padding:16px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); }
.daily_mission_run-page .workspace-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.daily_mission_run-page .workspace-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:900; }
.daily_mission_run-page .workspace-chip{ padding:8px 10px; border-radius:999px; background:var(--primary-soft); border:1px solid rgba(31,124,245,.08); color:var(--primary); font-size:11px; font-weight:900; white-space:nowrap; }
.daily_mission_run-page .workspace-title{ font-size:24px; line-height:1.15; font-weight:900; letter-spacing:-0.3px; }
.daily_mission_run-page .workspace-sub{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); max-width:360px; }

.daily_mission_run-page .surface{ margin-top:16px; padding:14px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }

.daily_mission_run-page .helper-row{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.daily_mission_run-page .btn, .daily_mission_run-page .small-btn{ border:none; border-radius:14px; padding:12px 14px; font-size:13px; font-weight:800; cursor:pointer; transition:.2s ease; }
.daily_mission_run-page .btn{ flex:1; font-size:14px; }
.daily_mission_run-page .btn-primary{ background:var(--primary); color:#fff; }
.daily_mission_run-page .btn-soft{ background:var(--primary-soft); color:var(--primary); border:1px solid rgba(31,124,245,.08); }
.daily_mission_run-page .btn-ghost{ background:var(--bg); color:var(--text); border:1px solid var(--line); }
.daily_mission_run-page .btn:disabled, .daily_mission_run-page .small-btn:disabled{ opacity:.45; cursor:not-allowed; }
.daily_mission_run-page .small-btn{ background:var(--card); border:1px solid var(--line); color:var(--text); flex:none; }

.daily_mission_run-page .flashcard-stage{ perspective:1200px; }
.daily_mission_run-page .flashcard{ min-height:340px; border-radius:24px; position:relative; cursor:pointer; transform-style:preserve-3d; transition:transform .5s ease; }
.daily_mission_run-page .flashcard.flipped{ transform:rotateY(180deg); }
.daily_mission_run-page .flashcard-face{ position:absolute; inset:0; border-radius:24px; backface-visibility:hidden; overflow:hidden; padding:18px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); box-shadow:var(--shadow); }
.daily_mission_run-page .flashcard-back{ transform:rotateY(180deg); }
.daily_mission_run-page .flashcard-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.daily_mission_run-page .flashcard-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:800; }
.daily_mission_run-page .flashcard-actions{ display:flex; gap:8px; }

.daily_mission_run-page .icon-action{ width:42px; height:42px; border:none; border-radius:14px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:18px; cursor:pointer; transition:.2s ease; flex-shrink:0; }
.daily_mission_run-page .icon-action.active{ background:var(--primary-soft); border-color:#CFE2FF; color:var(--primary); }

.daily_mission_run-page .flashcard-center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px 0; }

.daily_mission_run-page .card-hanzi{ font-size:64px; line-height:1; font-weight:900; letter-spacing:-1px; }
.daily_mission_run-page .card-pinyin{ margin-top:14px; font-size:18px; color:var(--primary); font-weight:800; }
.daily_mission_run-page .card-translation{ margin-top:10px; font-size:20px; line-height:1.4; font-weight:800; }
.daily_mission_run-page .card-meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.daily_mission_run-page .card-meta span{ font-size:11px; font-weight:800; padding:7px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }
.daily_mission_run-page .card-example{ margin-top:16px; padding:14px; border-radius:16px; background:var(--bg); border:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--muted); text-align:left; font-weight:700; }

.daily_mission_run-page .flip-actions, .daily_mission_run-page .grade-actions{ margin-top:14px; display:grid; gap:10px; }
.daily_mission_run-page .grade-actions{ grid-template-columns:repeat(3,1fr); }

.daily_mission_run-page .word-preview{ text-align:center; }
.daily_mission_run-page .word-hanzi{ font-size:46px; line-height:1; font-weight:900; letter-spacing:-1px; }
.daily_mission_run-page .word-pinyin{ margin-top:10px; font-size:18px; color:var(--primary); font-weight:900; }
.daily_mission_run-page .word-translation{ margin-top:6px; font-size:14px; color:var(--muted); font-weight:700; }

.daily_mission_run-page .char-pills{ margin-top:14px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.daily_mission_run-page .char-pill{ border:none; padding:10px 12px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:900; cursor:pointer; }
.daily_mission_run-page .char-pill.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(31,124,245,.18); }

/* adaptive canvas */
.daily_mission_run-page .canvas-wrap{ margin-top:16px; display:grid; place-items:center; }
.daily_mission_run-page .canvas-box{
  box-sizing:border-box;
  width:clamp(220px, min(100%, calc(100vw - 56px), calc(100svh - 390px)), 320px);
  aspect-ratio:1/1;
  margin:0 auto;
  padding:8px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}
@supports not (height:100svh){
  .daily_mission_run-page .canvas-box{
    width:clamp(220px, min(100%, calc(100vw - 56px), calc(100vh - 390px)), 320px);
  }
}
.daily_mission_run-page .canvas-grid{
  box-sizing:border-box;
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
}
.daily_mission_run-page #hanziCanvas{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
}
.daily_mission_run-page #hanziCanvas svg{ width:100% !important; height:100% !important; display:block; }
.daily_mission_run-page .canvas-guides{ position:absolute; inset:0; pointer-events:none; }
.daily_mission_run-page .canvas-guides::before,
.daily_mission_run-page .canvas-guides::after{ content:""; position:absolute; background:var(--line); opacity:.9; }
.daily_mission_run-page .canvas-guides::before{ width:1px; top:0; bottom:0; left:50%; transform:translateX(-50%); }
.daily_mission_run-page .canvas-guides::after{ height:1px; left:0; right:0; top:50%; transform:translateY(-50%); }
.daily_mission_run-page .diag-a,
.daily_mission_run-page .diag-b{ position:absolute; inset:0; pointer-events:none; }
.daily_mission_run-page .diag-a::before,
.daily_mission_run-page .diag-b::before{ content:""; position:absolute; left:-10%; top:50%; width:120%; height:1px; background:var(--line); opacity:.75; transform-origin:center; }
.daily_mission_run-page .diag-a::before{ transform:rotate(45deg); }
.daily_mission_run-page .diag-b::before{ transform:rotate(-45deg); }

@media (max-width:430px){
  .daily_mission_run-page .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .daily_mission_run-page .mission-head h2,
  .daily_mission_run-page .workspace-title{ font-size:22px; }
  .daily_mission_run-page .card-hanzi{ font-size:52px; }
  .daily_mission_run-page .grade-actions{ grid-template-columns:1fr; }
}

@media (max-width:390px){
  .daily_mission_run-page .mission-head,
  .daily_mission_run-page .progress-card,
  .daily_mission_run-page .workspace-card{ padding:12px; }
  .daily_mission_run-page .surface{ margin-top:12px; padding:12px; }
  .daily_mission_run-page .mission-head-top,
  .daily_mission_run-page .workspace-top{ gap:8px; margin-bottom:10px; }
  .daily_mission_run-page .mission-head h2,
  .daily_mission_run-page .workspace-title{ margin-top:8px; font-size:20px; }
  .daily_mission_run-page .mission-head p,
  .daily_mission_run-page .workspace-sub{ margin-top:6px; font-size:12px; }
  .daily_mission_run-page .canvas-wrap{ margin-top:10px; }
  .daily_mission_run-page .canvas-box{
    width:clamp(210px, min(100%, calc(100vw - 48px), calc(100svh - 360px)), 280px);
    padding:7px;
  }
  @supports not (height:100svh){
    .daily_mission_run-page .canvas-box{
      width:clamp(210px, min(100%, calc(100vw - 48px), calc(100vh - 360px)), 280px);
    }
  }
  .daily_mission_run-page .word-hanzi{ font-size:34px; }
  .daily_mission_run-page .word-pinyin{ margin-top:6px; font-size:15px; }
  .daily_mission_run-page .word-translation{ margin-top:4px; font-size:12px; }
  .daily_mission_run-page .char-pills{ margin-top:8px; gap:6px; }
  .daily_mission_run-page .char-pill{ padding:8px 10px; font-size:11px; }
  .daily_mission_run-page .helper-row{ margin-top:10px; gap:8px; }
  .daily_mission_run-page .small-btn{ padding:10px 11px; font-size:12px; }
  .daily_mission_run-page .btn{ padding:11px 12px; font-size:13px; }
}

@media (max-height:700px){
  .daily_mission_run-page .canvas-box{
    width:clamp(200px, min(100%, calc(100vw - 48px), calc(100svh - 330px)), 270px);
  }
  @supports not (height:100svh){
    .daily_mission_run-page .canvas-box{
      width:clamp(200px, min(100%, calc(100vw - 48px), calc(100vh - 330px)), 270px);
    }
  }
  .daily_mission_run-page .word-hanzi{ font-size:32px; }
  .daily_mission_run-page .writing-example{ padding:11px; }
}

@media (max-height:620px){
  .daily_mission_run-page .canvas-box{
    width:clamp(185px, min(100%, calc(100vw - 44px), calc(100svh - 300px)), 235px);
  }
  @supports not (height:100svh){
    .daily_mission_run-page .canvas-box{
      width:clamp(185px, min(100%, calc(100vw - 44px), calc(100vh - 300px)), 235px);
    }
  }
  .daily_mission_run-page .helper-row .small-btn{ flex:1 1 calc(50% - 8px); }
}


/* daily mission goal setup */
    .daily_goal_setup-page .theme-toggle { font-size: 18px; }

    .daily_goal_setup-page .stack { display: grid; gap: 14px; }

    .daily_goal_setup-page .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); overflow: hidden; }

    .daily_goal_setup-page .hero { padding: 22px; color: #fff; background: linear-gradient(135deg, #1678F2 0%, #57A8FF 100%); border: none; }

    .daily_goal_setup-page .hero::before, .daily_goal_setup-page .hero::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
    .daily_goal_setup-page .hero::before { width: 220px; height: 220px; right: -70px; top: -80px; background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 70%); }

    .daily_goal_setup-page .hero::after { width: 180px; height: 180px; left: -70px; bottom: -90px; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 72%); }

    .daily_goal_setup-page .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; margin-bottom: 14px; }
   .daily_goal_setup-page  .hero h2 { font-size: 28px; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; max-width: 300px; }

    .daily_goal_setup-page .hero p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.9); max-width: 360px; }
    .daily_goal_setup-page .hero-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

    .daily_goal_setup-page .hero-chip { padding: 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16); }

    .daily_goal_setup-page .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .daily_goal_setup-page .section-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

    .daily_goal_setup-page .section-head span { font-size: 12px; color: var(--muted); font-weight: 600; }

    .daily_goal_setup-page .chip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

    .daily_goal_setup-page .select-chip { border: 1px solid var(--line); background: var(--card-2); color: var(--text); border-radius: 18px; min-height: 58px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: all .2s ease; box-shadow: inset 0 0 0 1px transparent;}

    .daily_goal_setup-page .select-chip .main { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }

    .daily_goal_setup-page .select-chip .sub { font-size: 11px; color: var(--muted); font-weight: 600; }
    .daily_goal_setup-page .select-chip.active { background: linear-gradient(180deg, #EEF6FF 0%, #EAF3FF 100%); border-color: rgba(31,124,245,0.28); box-shadow: inset 0 0 0 1px rgba(31,124,245,0.22); transform: translateY(-1px); }

    body.dark_theme .daily_goal_setup-page .select-chip.active { background: rgba(31,124,245,0.16); border-color: rgba(87,168,255,0.32); box-shadow: inset 0 0 0 1px rgba(87,168,255,0.22); }

    .daily_goal_setup-page .select-chip.active .main { color: var(--primary); }
    .daily_goal_setup-page .select-chip.active .sub { color: var(--primary); }

    .daily_goal_setup-page .words-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .daily_goal_setup-page .word-chip { min-height: 54px; border-radius: 18px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; transition: all .2s ease; }

    .daily_goal_setup-page .word-chip.active { background: linear-gradient(135deg, #1678F2 0%, #57A8FF 100%); color: #fff; border-color: transparent; box-shadow: 0 10px 25px rgba(31,124,245,0.22); transform: translateY(-1px); }

    .daily_goal_setup-page .summary { display: grid; gap: 12px; }

    .daily_goal_setup-page .summary-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

    .daily_goal_setup-page .summary-title h4 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

    .daily_goal_setup-page .summary-title p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }

    .daily_goal_setup-page .goal-pill { flex: 0 0 auto; padding: 9px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 800; border: 1px solid rgba(31,124,245,0.12); }

    .daily_goal_setup-page .stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

    .daily_goal_setup-page .mini-stat { background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
    .daily_goal_setup-page .mini-stat .label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

    .daily_goal_setup-page .mini-stat .value { margin-top: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }

    .daily_goal_setup-page .progress-block { padding: 14px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--line); }
    .daily_goal_setup-page .progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; }

    .daily_goal_setup-page .progress-head span:last-child { color: var(--primary); }

    .daily_goal_setup-page .progress-track { width: 100%; height: 10px; border-radius: 999px; background: rgba(31,124,245,0.1); overflow: hidden; }

    .daily_goal_setup-page .progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1678F2 0%, #57A8FF 100%); transition: width .25s ease; }

    .daily_goal_setup-page .tips-list { display: grid; gap: 10px; }

    .daily_goal_setup-page .tip { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--card-2); }

    .daily_goal_setup-page .tip-icon { width: 34px; height: 34px; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-size: 16px; }

    .daily_goal_setup-page .tip strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.02em; }
    .daily_goal_setup-page .tip p { font-size: 13px; line-height: 1.45; color: var(--muted); }

    .daily_goal_setup-page .footer-cta { position: sticky; bottom: 16px; z-index: 20; margin-top: 2px; }

    .daily_goal_setup-page .cta-wrap { padding: 12px; background: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 24px; box-shadow: var(--shadow); }

    body.dark_theme .daily_goal_setup-page .cta-wrap { background: rgba(21, 30, 45, 0.78); border-color: rgba(255,255,255,0.06); }

    .daily_goal_setup-page .cta-btn { width: 100%; min-height: 56px; border: none; border-radius: 18px; background: linear-gradient(135deg, #1678F2 0%, #57A8FF 100%); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; box-shadow: 0 14px 30px rgba(31,124,245,0.24); transition: transform .18s ease, opacity .18s ease; }

    .daily_goal_setup-page .cta-btn:active { transform: scale(0.985); }

    .daily_goal_setup-page .cta-note { margin-top: 10px; text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; }

   

    @media (max-width: 420px) {
      .daily_goal_setup-page .chip-grid,
      .daily_goal_setup-page .words-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .daily_goal_setup-page .hero h2 {
        font-size: 25px;
      }

      .daily_goal_setup-page .stats-row {
        grid-template-columns: 1fr;
      }
    }

/* .daily_mission_run-page #hanziCanvas{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:118px; font-weight:900; color:rgba(31,124,245,.15); letter-spacing:-2px; user-select:none; } */

.daily_mission_run-page #hanziCanvas{
  position:absolute;
  inset:0;
}

.daily_mission_run-page #hanziCanvas svg{
  width:100%;
  height:100%;
  display:block;
}

.daily_mission_run-page .char-pill small{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1;
  opacity:.8;
}

.daily_mission_run-page .small-btn.active{
  background:var(--primary-soft);
  border-color:#CFE2FF;
  color:var(--primary);
}

body.dark_theme .daily_mission_run-page #hanziCanvas{ color:rgba(103,176,255,.16); }

.daily_mission_run-page .writing-example{ margin-top:14px; padding:14px; border-radius:16px; background:var(--card); border:1px solid var(--line); text-align:left; }
.daily_mission_run-page .writing-example strong{ display:block; font-size:14px; font-weight:900; }
.daily_mission_run-page .writing-example p{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--muted); font-weight:700; }

.daily_mission_run-page .sound-panel{ padding:14px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }
.daily_mission_run-page .sound-visual{ width:100%; height:70px; border-radius:14px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); display:flex; align-items:flex-end; justify-content:center; gap:6px; padding:12px; }
.daily_mission_run-page .sound-bar{ width:10px; border-radius:999px; background:linear-gradient(180deg,var(--primary-2),var(--primary)); animation:wave 1.2s ease-in-out infinite; opacity:.95; }

.daily_mission_run-page .sound-bar:nth-child(1){height:18px;animation-delay:.0s;}
.daily_mission_run-page .sound-bar:nth-child(2){height:32px;animation-delay:.1s;}
.daily_mission_run-page .sound-bar:nth-child(3){height:22px;animation-delay:.2s;}
.daily_mission_run-page .sound-bar:nth-child(4){height:40px;animation-delay:.3s;}
.daily_mission_run-page .sound-bar:nth-child(5){height:30px;animation-delay:.4s;}
.daily_mission_run-page .sound-bar:nth-child(6){height:50px;animation-delay:.5s;}
.daily_mission_run-page .sound-bar:nth-child(7){height:26px;animation-delay:.6s;}
.daily_mission_run-page .sound-bar:nth-child(8){height:36px;animation-delay:.7s;}

.daily_mission_run-page .sound-actions{ margin-top:14px; display:flex; gap:10px; }
.daily_mission_run-page .sound-meta{ margin-top:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-weight:800; }

.daily_mission_run-page .answers{ margin-top:16px; display:grid; gap:10px; }
.daily_mission_run-page .answer-btn{ width:100%; border:none; padding:14px; border-radius:15px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); text-align:left; display:flex; gap:12px; align-items:flex-start; cursor:pointer; transition:.18s ease; color:var(--text); box-shadow:var(--shadow); }
.daily_mission_run-page .answer-btn.selected{ border-color:#BFD8FF; background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%); }

body.dark_theme .daily_mission_run-page .answer-btn.selected{ background:linear-gradient(180deg,#1A2028 0%,#182332 100%); border-color:#28415E; }

.daily_mission_run-page .answer-btn.correct{ border-color:#B8E8C8; background:linear-gradient(180deg,#FFFFFF 0%,#F4FFF7 100%); }
.daily_mission_run-page .answer-btn.wrong{ border-color:#FFD0D6; background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F6 100%); }
.daily_mission_run-page .answer-key{ width:34px; height:34px; border-radius:12px; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; flex-shrink:0; color:var(--muted); }
.daily_mission_run-page .answer-text{ min-width:0; flex:1; }
.daily_mission_run-page .answer-text strong{ display:block; font-size:15px; line-height:1.2; font-weight:900; }
.daily_mission_run-page .answer-text span{ display:block; margin-top:5px; font-size:12px; line-height:1.45; color:var(--muted); }

.daily_mission_run-page .feedback-card{ display:none; padding:16px; }
.daily_mission_run-page .feedback-card.show{ display:block; }
.daily_mission_run-page .feedback-box{ padding:14px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }
.daily_mission_run-page .feedback-box.good{ background:#F4FFF7; border-color:#CDEFD9; }
.daily_mission_run-page .feedback-box.bad{ background:#FFF5F6; border-color:#FFD0D6; }
.daily_mission_run-page .feedback-box strong{ display:block; font-size:14px; font-weight:900; }
.daily_mission_run-page .feedback-box p{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--muted); font-weight:700; }

.daily_mission_run-page .result-card{ display:none; padding:18px; text-align:center; background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 34%), linear-gradient(135deg,#1678F2 0%,#57A8FF 100%); color:#fff; overflow:hidden; position:relative; }
.daily_mission_run-page .result-card.show{ display:block; }
.daily_mission_run-page .result-icon{ width:68px; height:68px; margin:0 auto 14px; border-radius:20px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:30px; }
.daily_mission_run-page .result-card h3{ font-size:28px; line-height:1.08; font-weight:900; letter-spacing:-0.6px; }
.daily_mission_run-page .result-card p{ margin-top:10px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.95); }
.daily_mission_run-page .result-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.daily_mission_run-page .result-stat{ padding:14px; border-radius:16px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.15); }
.daily_mission_run-page .result-stat strong{ display:block; font-size:18px; line-height:1; font-weight:900; }
.daily_mission_run-page .result-stat span{ display:block; margin-top:5px; font-size:11px; line-height:1.35; color:rgba(255,255,255,.9); font-weight:700; }
.daily_mission_run-page .result-actions{ margin-top:16px; display:flex; gap:10px; }
.daily_mission_run-page .result-actions .btn-soft{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.15); }
.daily_mission_run-page .result-actions .btn-primary{ background:#fff; color:var(--primary); }

@media (max-width:430px){ .daily_mission_run-page .stats-grid{ grid-template-columns:repeat(2,1fr); } .daily_mission_run-page .result-grid{ grid-template-columns:1fr 1fr 1fr; } .daily_mission_run-page .workspace-title, .daily_mission_run-page .mission-head h2{ font-size:22px; } .daily_mission_run-page .card-hanzi{ font-size:52px; } .daily_mission_run-page .grade-actions{ grid-template-columns:1fr; } }


/* daily_result_page */

.daily_result-page .section{
  padding: 14px 16px;
}

.daily_result-page .daily-result-hero{
  padding: 18px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, #1F7CF5 0%, #5A9EFF 100%);
  box-shadow: 0 14px 34px rgba(31,124,245,.22);
}

.daily_result-page .daily-result-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.daily_result-page .daily-result-hero h2{
  margin:0;
  font-size:24px;
  line-height:1.2;
  font-weight:800;
}

.daily_result-page .daily-result-hero p{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.88);
}

.daily_result-page .daily-result-stats{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

.daily_result-page .daily-result-stat{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:14px;
  backdrop-filter: blur(8px);
}

.daily_result-page .daily-result-stat strong{
  display:block;
  font-size:22px;
  line-height:1;
  font-weight:800;
  margin-bottom:6px;
}

.daily_result-page .daily-result-stat span{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.84);
}

.daily_result-page .daily-result-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.daily_result-page .daily-result-card{
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:22px;
  padding:16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.daily_result-page .daily-result-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.daily_result-page .daily-result-date{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}

.daily_result-page .daily-result-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.daily_result-page .meta-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--bg-soft, rgba(31,124,245,.08));
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.daily_result-page .meta-chip .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1F7CF5;
  display:inline-block;
}

.daily_result-page .daily-result-index{
  min-width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  color:#1F7CF5;
  background:rgba(31,124,245,.1);
  border:1px solid rgba(31,124,245,.16);
}

.daily_result-page .daily-result-words{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.daily_result-page .daily-result-word{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

.daily_result-page .daily-result-word:active{
  transform:scale(.99);
}

.daily_result-page .daily-result-word:hover{
  border-color: rgba(31,124,245,.28);
  box-shadow: 0 10px 22px rgba(31,124,245,.08);
}

.daily_result-page .word-hanzi{
  font-size:24px;
  line-height:1.1;
  font-weight:800;
  color:var(--text);
}

.daily_result-page .word-pinyin{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.daily_result-page .word-translation{
  margin-top:6px;
  font-size:14px;
  color:#1F7CF5;
  font-weight:700;
}

.daily_result-page .daily-result-empty{
  padding:24px 18px;
  text-align:center;
  border-radius:22px;
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
}

.daily_result-page .daily-result-empty .empty-icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:800;
  color:#1F7CF5;
  background:rgba(31,124,245,.1);
}

.daily_result-page .daily-result-empty h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--text);
}

.daily_result-page .daily-result-empty p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.daily_result-page .daily-result-pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.daily_result-page .pagination-btn{
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}

.daily_result-page .pagination-btn.active{
  background:#1F7CF5;
  color:#fff;
  border-color:#1F7CF5;
  box-shadow: 0 10px 20px rgba(31,124,245,.2);
}

.daily_result-page .pagination-btn:disabled{
  opacity:.45;
  cursor:default;
}

body.dark_theme .daily_result-page .daily-result-word{
  background:rgba(255,255,255,.03);
}

body.dark_theme .daily_result-page .meta-chip{
  background:rgba(255,255,255,.04);
}

@media (min-width: 520px){
  .daily_result-page .daily-result-words{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}


/* listening_hsk */

.listening_hsk_mock-page{
  --bg:#F6F6F6;
  --card:#FFFFFF;
  --card-2:#F9FBFF;
  --text:#14171F;
  --muted:#7B8494;
  --line:#E8EDF5;
  --primary:#1F7CF5;
  --primary-2:#57A8FF;
  --primary-soft:#EAF3FF;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --shadow:0 10px 30px rgba(18, 28, 45, 0.08);
  --radius:16px;
}
.listening_hsk_mock-page .section{
  margin-bottom:14px;
}

.listening_hsk_mock-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.listening_hsk_mock-page .quiz-head{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.listening_hsk_mock-page .quiz-head-top,
.listening_hsk_mock-page .workspace-top,
.listening_hsk_mock-page .title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.listening_hsk_mock-page .mode-badge,
.listening_hsk_mock-page .workspace-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.listening_hsk_mock-page .mode-badge .dot,
.listening_hsk_mock-page .workspace-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.listening_hsk_mock-page .head-chip,
.listening_hsk_mock-page .workspace-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.listening_hsk_mock-page .quiz-head h2,
.listening_hsk_mock-page .workspace-title,
.listening_hsk_mock-page .result-card h3{
  margin-top:12px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.4px;
}

.listening_hsk_mock-page .quiz-head p,
.listening_hsk_mock-page .workspace-sub,
.listening_hsk_mock-page .result-card p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:360px;
}

.listening_hsk_mock-page .stats-grid,
.listening_hsk_mock-page .result-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.listening_hsk_mock-page .result-grid{
  grid-template-columns:repeat(3,1fr);
}

.listening_hsk_mock-page .result-grid-secondary{
  margin-top:10px;
}

.listening_hsk_mock-page .stat-item,
.listening_hsk_mock-page .result-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.listening_hsk_mock-page .stat-item strong,
.listening_hsk_mock-page .result-stat strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.listening_hsk_mock-page .stat-item span,
.listening_hsk_mock-page .result-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.listening_hsk_mock-page .progress-card,
.listening_hsk_mock-page .result-card{
  padding:16px;
}

.listening_hsk_mock-page .title-row h3{
  font-size:15px;
  font-weight:900;
}

.listening_hsk_mock-page .title-row span{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.listening_hsk_mock-page .progress-line{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
}

.listening_hsk_mock-page .progress-line div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transition:.25s ease;
}

.listening_hsk_mock-page .phase-row{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.listening_hsk_mock-page .phase-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.listening_hsk_mock-page .phase-chip.active{
  background:var(--primary-soft);
  color:var(--primary);
  border-color:#CFE2FF;
}

.listening_hsk_mock-page .phase-chip.done{
  background:#ECFDF3;
  color:#15803D;
  border-color:#C9F1D7;
}

body.dark_theme .listening_hsk_mock-page .phase-chip.done{
  background:#15261C;
  color:#86EFAC;
  border-color:#23412E;
}

.listening_hsk_mock-page .workspace-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.listening_hsk_mock-page .surface{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
}

.listening_hsk_mock-page .audio-launch{
  width:100%;
  border:none;
  border-radius:18px;
  padding:16px 18px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(31,124,245,.22);
}

.listening_hsk_mock-page .audio-launch i{
  font-size:18px;
}

.listening_hsk_mock-page .mini-audio{
  width:100%;
  border:none;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--primary);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:800;
  text-align:left;
}

.listening_hsk_mock-page .mini-audio small{
  margin-left:auto;
  color:var(--muted);
  font-weight:700;
}

.listening_hsk_mock-page .single-image{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
}

.listening_hsk_mock-page .single-image img{
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
  object-position:center;
}

.listening_hsk_mock-page .question-title{
  margin-top:14px;
  font-size:22px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.3px;
}

.listening_hsk_mock-page .question-sub{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}

.listening_hsk_mock-page .question-unit + .question-unit{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.listening_hsk_mock-page .answers{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.listening_hsk_mock-page .binary-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.listening_hsk_mock-page .answer-btn,
.listening_hsk_mock-page .binary-btn{
  width:100%;
  border:none;
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
  box-shadow:var(--shadow);
}

.listening_hsk_mock-page .answer-btn{
  text-align:left;
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.listening_hsk_mock-page .binary-btn{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:18px;
  font-weight:900;
  text-align:center;
}

.listening_hsk_mock-page .binary-btn i{
  font-size:22px;
}

.listening_hsk_mock-page .answer-btn:hover,
.listening_hsk_mock-page .binary-btn:hover,
.listening_hsk_mock-page .image-option:hover,
.listening_hsk_mock-page .audio-launch:hover,
.listening_hsk_mock-page .mini-audio:hover{
  transform:translateY(-1px);
}

.listening_hsk_mock-page .answer-btn.selected,
.listening_hsk_mock-page .binary-btn.selected,
.listening_hsk_mock-page .image-option.selected{
  border-color:#BFD8FF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%);
}

body.dark_theme .listening_hsk_mock-page .answer-btn.selected,
body.dark_theme .listening_hsk_mock-page .binary-btn.selected,
body.dark_theme .listening_hsk_mock-page .image-option.selected{
  background:linear-gradient(180deg,#1A2028 0%,#182332 100%);
  border-color:#28415E;
}

.listening_hsk_mock-page .answer-btn.correct,
.listening_hsk_mock-page .binary-btn.correct,
.listening_hsk_mock-page .image-option.correct{
  border-color:#B8E8C8;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4FFF7 100%);
}

body.dark_theme .listening_hsk_mock-page .answer-btn.correct,
body.dark_theme .listening_hsk_mock-page .binary-btn.correct,
body.dark_theme .listening_hsk_mock-page .image-option.correct{
  background:linear-gradient(180deg,#18241C 0%,#16241C 100%);
  border-color:#29503A;
}

.listening_hsk_mock-page .answer-btn.wrong,
.listening_hsk_mock-page .binary-btn.wrong,
.listening_hsk_mock-page .image-option.wrong{
  border-color:#FFD0D6;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F6 100%);
}

body.dark_theme .listening_hsk_mock-page .answer-btn.wrong,
body.dark_theme .listening_hsk_mock-page .binary-btn.wrong,
body.dark_theme .listening_hsk_mock-page .image-option.wrong{
  background:linear-gradient(180deg,#251A1D 0%,#24181C 100%);
  border-color:#533039;
}

.listening_hsk_mock-page .answer-key,
.listening_hsk_mock-page .option-key{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  flex-shrink:0;
}

.listening_hsk_mock-page .answer-text,
.listening_hsk_mock-page .option-copy{
  min-width:0;
  flex:1;
}

.listening_hsk_mock-page .answer-text strong,
.listening_hsk_mock-page .option-copy strong{
  display:block;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}

.listening_hsk_mock-page .answer-text span,
.listening_hsk_mock-page .option-copy span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.listening_hsk_mock-page .image-grid{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.listening_hsk_mock-page .image-grid.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.listening_hsk_mock-page .image-grid.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.listening_hsk_mock-page .image-option{
  border:none;
  padding:0;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  text-align:left;
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--shadow);
}

.listening_hsk_mock-page .image-option.static{
  cursor:default;
}

.listening_hsk_mock-page .image-option img{
  display:block;
  width:100%;
  height:150px;
  object-fit:contain;
  object-position:center;
  background:var(--card);
}

.listening_hsk_mock-page .image-option-copy{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
}

.listening_hsk_mock-page .feedback-card{
  padding:14px;
}

.listening_hsk_mock-page .feedback-box{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--bg);
}

.listening_hsk_mock-page .feedback-box.good{
  background:#ECFDF3;
  border-color:#C9F1D7;
}

.listening_hsk_mock-page .feedback-box.bad{
  background:#FEF2F2;
  border-color:#FECACA;
}

body.dark_theme .listening_hsk_mock-page .feedback-box.good{
  background:#15261C;
  border-color:#23412E;
}

body.dark_theme .listening_hsk_mock-page .feedback-box.bad{
  background:#251A1D;
  border-color:#533039;
}

.listening_hsk_mock-page .feedback-box strong{
  display:block;
  font-size:14px;
  font-weight:900;
}

.listening_hsk_mock-page .feedback-box p{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.listening_hsk_mock-page .result-card{
  text-align:center;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.listening_hsk_mock-page .result-icon{
  width:68px;
  height:68px;
  border-radius:22px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:var(--primary-soft);
  color:var(--primary);
}

.listening_hsk_mock-page .result-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
}

.listening_hsk_mock-page .btn{
  border:none;
  border-radius:14px;
  padding:14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.listening_hsk_mock-page .btn-primary{
  background:var(--primary);
  color:#fff;
}

.listening_hsk_mock-page .btn-soft{
  background:var(--primary-soft);
  color:var(--primary);
}

.listening_hsk_mock-page .loading-state,
.listening_hsk_mock-page .empty-state{
  padding:18px;
  border-radius:14px;
  text-align:center;
  color:var(--muted);
  background:var(--card);
  border:1px dashed var(--line);
}

@media (max-width:560px){
  .listening_hsk_mock-page .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .listening_hsk_mock-page .result-grid{
    grid-template-columns:1fr;
  }

  .listening_hsk_mock-page .image-grid.grid-3{
    grid-template-columns:repeat(2,1fr);
  }

  .listening_hsk_mock-page .result-actions{
    flex-direction:column;
  }
}   
/* listening_hsk_mock setup + clean quiz mode */

/* Setup card */
.listening_hsk_mock-page .config-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.listening_hsk_mock-page .config-block + .config-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.listening_hsk_mock-page .config-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}

.listening_hsk_mock-page .config-head strong{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.listening_hsk_mock-page .config-head span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.listening_hsk_mock-page .levels-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.listening_hsk_mock-page .level-chip{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.listening_hsk_mock-page .level-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.listening_hsk_mock-page .chips-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  flex-wrap:nowrap;
}

.listening_hsk_mock-page .chips-row::-webkit-scrollbar{
  display:none;
}

.listening_hsk_mock-page .chip{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.listening_hsk_mock-page .chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.listening_hsk_mock-page .config-start{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.listening_hsk_mock-page .config-start .btn{
  width:100%;
  min-height:48px;
}

/* Before start: show only setup */
.listening_hsk_mock-page:not(.quiz-mode) #quizOnlyTop,
.listening_hsk_mock-page:not(.quiz-mode) #headSection,
.listening_hsk_mock-page:not(.quiz-mode) #progressSection,
.listening_hsk_mock-page:not(.quiz-mode) #workspaceSection,
.listening_hsk_mock-page:not(.quiz-mode) #feedbackSection,
.listening_hsk_mock-page:not(.quiz-mode) #resultSection{
  display:none !important;
}

/* Quiz mode: hide setup */
.listening_hsk_mock-page.quiz-mode #setupSection{
  display:none !important;
}

/* Mini quiz header */
.listening_hsk_mock-page .quiz-only-top{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.listening_hsk_mock-page .quiz-back-btn{
  border:none;
  min-width:86px;
  height:44px;
  padding:0 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.listening_hsk_mock-page .quiz-back-btn:hover{
  transform:translateY(-1px);
}

.listening_hsk_mock-page .quiz-back-btn span{
  font-size:16px;
  line-height:1;
}

.listening_hsk_mock-page .quiz-back-btn strong{
  font-size:13px;
  font-weight:900;
}

.listening_hsk_mock-page .quiz-only-meta{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:8px 13px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.listening_hsk_mock-page .quiz-only-meta strong{
  display:block;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.listening_hsk_mock-page .quiz-only-meta span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Cleaner quiz spacing */
.listening_hsk_mock-page.quiz-mode{
  padding-top:4px;
}

.listening_hsk_mock-page.quiz-mode .section{
  margin-bottom:10px;
}

.listening_hsk_mock-page.quiz-mode .quiz-only-top{
  margin-top:0;
}

.listening_hsk_mock-page.quiz-mode .quiz-head,
.listening_hsk_mock-page.quiz-mode .progress-card,
.listening_hsk_mock-page.quiz-mode .workspace-card,
.listening_hsk_mock-page.quiz-mode .result-card{
  padding:14px;
}

/* Hide global header/topbar only during HSK listening mock */
body.hsk-listening-clean .topbar,
body.hsk-listening-clean .app-topbar,
body.hsk-listening-clean .main-topbar,
body.hsk-listening-clean .header,
body.hsk-listening-clean header{
  display:none !important;
}

body.hsk-listening-clean .app,
body.hsk-listening-clean .main,
body.hsk-listening-clean .page-wrap{
  padding-top:0 !important;
}

/* Dark theme */
body.dark_theme .listening_hsk_mock-page .quiz-back-btn,
body.dark_theme .listening_hsk_mock-page .quiz-only-meta{
  background:var(--card);
  border-color:var(--line);
}

/* Mobile */
@media (max-width:560px){
  .listening_hsk_mock-page .quiz-only-top{
    gap:8px;
  }

  .listening_hsk_mock-page .quiz-back-btn{
    min-width:76px;
    height:42px;
    padding:0 11px;
  }

  .listening_hsk_mock-page .quiz-only-meta{
    min-height:42px;
    padding:7px 11px;
  }

  .listening_hsk_mock-page .quiz-only-meta strong{
    font-size:12px;
  }

  .listening_hsk_mock-page .quiz-only-meta span{
    font-size:10.5px;
  }
}

/* reading_hsk */

.reading_hsk-page{
  --bg:#F6F6F6;
  --card:#FFFFFF;
  --card-2:#F9FBFF;
  --text:#14171F;
  --muted:#7B8494;
  --line:#E8EDF5;
  --primary:#1F7CF5;
  --primary-2:#57A8FF;
  --primary-soft:#EAF3FF;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --shadow:0 10px 30px rgba(18, 28, 45, 0.08);
  --radius:16px;
}
.reading-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 4px;
}

.reading-filter-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(31, 124, 245, 0.07);
  border: 1px solid rgba(31, 124, 245, 0.12);
}

.reading-filter-field span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted, #6b7280);
}

.reading-filter-field select {
  width: 100%;
  border: 0;
  outline: none;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #111827);
}

body.dark_theme .reading-filter-field {
  background: rgba(31, 124, 245, 0.12);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark_theme .reading-filter-field select {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.dark_theme .reading_hsk-page{
  --bg:#111315;
  --card:#191C20;
  --card-2:#1E2329;
  --text:#F3F5F7;
  --muted:#98A2B3;
  --line:#2A313A;
  --primary:#3B8CFF;
  --primary-2:#67B0FF;
  --primary-soft:#16263E;
  --shadow:none;
}

.reading_hsk-page .section{
  margin-bottom:14px;
}

.reading_hsk-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.reading_hsk-page .quiz-head{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.reading_hsk-page .quiz-head-top,
.reading_hsk-page .workspace-top,
.reading_hsk-page .title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.reading_hsk-page .mode-badge,
.reading_hsk-page .workspace-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.reading_hsk-page .mode-badge .dot,
.reading_hsk-page .workspace-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.reading_hsk-page .head-chip,
.reading_hsk-page .workspace-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.reading_hsk-page .quiz-head h2,
.reading_hsk-page .workspace-title,
.reading_hsk-page .result-card h3{
  margin-top:12px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.4px;
}

.reading_hsk-page .quiz-head p,
.reading_hsk-page .workspace-sub,
.reading_hsk-page .result-card p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:420px;
}

.reading_hsk-page .stats-grid,
.reading_hsk-page .result-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.reading_hsk-page .result-grid{
  grid-template-columns:repeat(3,1fr);
}

.reading_hsk-page .result-grid-secondary{
  margin-top:10px;
}

.reading_hsk-page .stat-item,
.reading_hsk-page .result-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.reading_hsk-page .stat-item strong,
.reading_hsk-page .result-stat strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.reading_hsk-page .stat-item span,
.reading_hsk-page .result-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.reading_hsk-page .progress-card,
.reading_hsk-page .result-card{
  padding:16px;
}

.reading_hsk-page .title-row h3{
  font-size:15px;
  font-weight:900;
}

.reading_hsk-page .title-row span{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.reading_hsk-page .progress-line{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
}

.reading_hsk-page .progress-line div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transition:.25s ease;
}

.reading_hsk-page .phase-row{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.reading_hsk-page .phase-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.reading_hsk-page .phase-chip.active{
  background:var(--primary-soft);
  color:var(--primary);
  border-color:#CFE2FF;
}

.reading_hsk-page .phase-chip.done{
  background:#ECFDF3;
  color:#15803D;
  border-color:#C9F1D7;
}

body.dark_theme .reading_hsk-page .phase-chip.done{
  background:#15261C;
  color:#86EFAC;
  border-color:#23412E;
}

.reading_hsk-page .workspace-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.reading_hsk-page .surface{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
}

.reading_hsk-page .question-card,
.reading_hsk-page .passage-card{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}

.reading_hsk-page .passage-text{
  font-size:15px;
  line-height:1.8;
  color:var(--text);
  white-space:pre-line;
}

.reading_hsk-page .question-title{
  font-size:22px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-0.3px;
}

.reading_hsk-page .question-sub{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}

.reading_hsk-page .single-image{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
}

.reading_hsk-page .single-image img{
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
  object-position:center;
}

.reading_hsk-page .question-unit + .question-unit{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.reading_hsk-page .mini-prompt{
  padding:12px 14px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  font-weight:800;
}

.reading_hsk-page .answers{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.reading_hsk-page .compact-answers{
  grid-template-columns:repeat(2,1fr);
}

.reading_hsk-page .answer-btn,
.reading_hsk-page .binary-btn{
  width:100%;
  border:none;
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
  box-shadow:var(--shadow);
}

.reading_hsk-page .answer-btn{
  text-align:left;
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.reading_hsk-page .answer-btn.compact{
  min-height:68px;
}

.reading_hsk-page .binary-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.reading_hsk-page .binary-btn{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:18px;
  font-weight:900;
  text-align:center;
}

.reading_hsk-page .binary-btn i{
  font-size:22px;
}

.reading_hsk-page .answer-btn:hover,
.reading_hsk-page .binary-btn:hover,
.reading_hsk-page .bank-option:hover,
.reading_hsk-page .order-choice:hover{
  transform:translateY(-1px);
}

.reading_hsk-page .answer-btn.selected,
.reading_hsk-page .binary-btn.selected,
.reading_hsk-page .bank-option.selected,
.reading_hsk-page .order-choice.selected{
  border-color:#BFD8FF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%);
}

body.dark_theme .reading_hsk-page .answer-btn.selected,
body.dark_theme .reading_hsk-page .binary-btn.selected,
body.dark_theme .reading_hsk-page .bank-option.selected,
body.dark_theme .reading_hsk-page .order-choice.selected{
  background:linear-gradient(180deg,#1A2028 0%,#182332 100%);
  border-color:#28415E;
}

.reading_hsk-page .answer-btn.correct,
.reading_hsk-page .binary-btn.correct,
.reading_hsk-page .bank-option.correct,
.reading_hsk-page .order-slot.correct{
  border-color:#B8E8C8;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4FFF7 100%);
}

body.dark_theme .reading_hsk-page .answer-btn.correct,
body.dark_theme .reading_hsk-page .binary-btn.correct,
body.dark_theme .reading_hsk-page .bank-option.correct,
body.dark_theme .reading_hsk-page .order-slot.correct{
  background:linear-gradient(180deg,#18241C 0%,#16241C 100%);
  border-color:#29503A;
}

.reading_hsk-page .answer-btn.wrong,
.reading_hsk-page .binary-btn.wrong,
.reading_hsk-page .bank-option.wrong,
.reading_hsk-page .order-slot.wrong{
  border-color:#FFD0D6;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF5F6 100%);
}

body.dark_theme .reading_hsk-page .answer-btn.wrong,
body.dark_theme .reading_hsk-page .binary-btn.wrong,
body.dark_theme .reading_hsk-page .bank-option.wrong,
body.dark_theme .reading_hsk-page .order-slot.wrong{
  background:linear-gradient(180deg,#251A1D 0%,#24181C 100%);
  border-color:#533039;
}

.reading_hsk-page .answer-key,
.reading_hsk-page .option-key{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  flex-shrink:0;
}

.reading_hsk-page .answer-text,
.reading_hsk-page .option-copy{
  min-width:0;
  flex:1;
}

.reading_hsk-page .answer-text strong,
.reading_hsk-page .option-copy strong{
  display:block;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}

.reading_hsk-page .answer-text span,
.reading_hsk-page .option-copy span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.reading_hsk-page .bank-grid{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.reading_hsk-page .bank-grid.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.reading_hsk-page .bank-grid.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.reading_hsk-page .bank-option{
  border:none;
  padding:0;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  text-align:left;
  color:var(--text);
  box-shadow:var(--shadow);
}

.reading_hsk-page .bank-option.static{
  cursor:default;
}

.reading_hsk-page .bank-option img{
  display:block;
  width:100%;
  height:150px;
  object-fit:contain;
  object-position:center;
  background:var(--card);
}

.reading_hsk-page .bank-option-copy{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
}

.reading_hsk-page .bank-list{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.reading_hsk-page .bank-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
}

.reading_hsk-page .bank-letter{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  flex-shrink:0;
}

.reading_hsk-page .bank-text{
  font-size:14px;
  line-height:1.6;
  font-weight:700;
}

.reading_hsk-page .order-board{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.reading_hsk-page .order-slot{
  min-height:58px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  font-size:14px;
  font-weight:900;
  color:var(--muted);
}

.reading_hsk-page .order-actions{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.reading_hsk-page .order-choice{
  width:100%;
  border:none;
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
  box-shadow:var(--shadow);
  text-align:left;
  font-size:14px;
  line-height:1.55;
  font-weight:800;
}

.reading_hsk-page .feedback-card{
  padding:14px;
}

.reading_hsk-page .feedback-box{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--bg);
}

.reading_hsk-page .feedback-box.good{
  background:#ECFDF3;
  border-color:#C9F1D7;
}

.reading_hsk-page .feedback-box.bad{
  background:#FEF2F2;
  border-color:#FECACA;
}

body.dark_theme .reading_hsk-page .feedback-box.good{
  background:#15261C;
  border-color:#23412E;
}

body.dark_theme .reading_hsk-page .feedback-box.bad{
  background:#251A1D;
  border-color:#533039;
}

.reading_hsk-page .feedback-box strong{
  display:block;
  font-size:14px;
  font-weight:900;
}

.reading_hsk-page .feedback-box p{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.reading_hsk-page .result-card{
  text-align:center;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.reading_hsk-page .result-icon{
  width:68px;
  height:68px;
  border-radius:22px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:var(--primary-soft);
  color:var(--primary);
}

.reading_hsk-page .result-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
}

.reading_hsk-page .btn{
  border:none;
  border-radius:14px;
  padding:14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.reading_hsk-page .btn-primary{
  background:var(--primary);
  color:#fff;
}

.reading_hsk-page .btn-soft{
  background:var(--primary-soft);
  color:var(--primary);
}

.reading_hsk-page .loading-state,
.reading_hsk-page .empty-state{
  padding:18px;
  border-radius:14px;
  text-align:center;
  color:var(--muted);
  background:var(--card);
  border:1px dashed var(--line);
}

@media (max-width:560px){
  .reading_hsk-page .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .reading_hsk-page .result-grid{
    grid-template-columns:1fr;
  }

  .reading_hsk-page .bank-grid.grid-3{
    grid-template-columns:repeat(2,1fr);
  }

  .reading_hsk-page .compact-answers{
    grid-template-columns:1fr;
  }

  .reading_hsk-page .result-actions{
    flex-direction:column;
  }
}

/* reading_hsk setup + clean quiz mode */

.reading_hsk-page .config-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.reading_hsk-page .config-block + .config-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.reading_hsk-page .config-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}

.reading_hsk-page .config-head strong{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.reading_hsk-page .config-head span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.reading_hsk-page .levels-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.reading_hsk-page .level-chip{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.reading_hsk-page .level-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.reading_hsk-page .chips-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  flex-wrap:nowrap;
}

.reading_hsk-page .chips-row::-webkit-scrollbar{
  display:none;
}

.reading_hsk-page .chip{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.reading_hsk-page .chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.reading_hsk-page .config-start{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.reading_hsk-page .config-start .btn{
  width:100%;
  min-height:48px;
}

/* Before start: show only setup */
.reading_hsk-page:not(.quiz-mode) #quizOnlyTop,
.reading_hsk-page:not(.quiz-mode) #headSection,
.reading_hsk-page:not(.quiz-mode) #progressSection,
.reading_hsk-page:not(.quiz-mode) #workspaceSection,
.reading_hsk-page:not(.quiz-mode) #feedbackSection,
.reading_hsk-page:not(.quiz-mode) #resultSection{
  display:none !important;
}

/* Quiz mode: hide setup */
.reading_hsk-page.quiz-mode #setupSection{
  display:none !important;
}

/* Mini quiz header */
.reading_hsk-page .quiz-only-top{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.reading_hsk-page .quiz-back-btn{
  border:none;
  min-width:86px;
  height:44px;
  padding:0 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.reading_hsk-page .quiz-back-btn:hover{
  transform:translateY(-1px);
}

.reading_hsk-page .quiz-back-btn span{
  font-size:16px;
  line-height:1;
}

.reading_hsk-page .quiz-back-btn strong{
  font-size:13px;
  font-weight:900;
}

.reading_hsk-page .quiz-only-meta{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:8px 13px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.reading_hsk-page .quiz-only-meta strong{
  display:block;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.reading_hsk-page .quiz-only-meta span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Cleaner quiz spacing */
.reading_hsk-page.quiz-mode{
  padding-top:4px;
}

.reading_hsk-page.quiz-mode .section{
  margin-bottom:10px;
}

.reading_hsk-page.quiz-mode .quiz-only-top{
  margin-top:0;
}

.reading_hsk-page.quiz-mode .quiz-head,
.reading_hsk-page.quiz-mode .progress-card,
.reading_hsk-page.quiz-mode .workspace-card,
.reading_hsk-page.quiz-mode .result-card{
  padding:14px;
}

/* Hide global header/topbar only during HSK reading mock */
body.hsk-reading-clean .topbar,
body.hsk-reading-clean .app-topbar,
body.hsk-reading-clean .main-topbar,
body.hsk-reading-clean .header,
body.hsk-reading-clean header{
  display:none !important;
}

body.hsk-reading-clean .app,
body.hsk-reading-clean .main,
body.hsk-reading-clean .page-wrap{
  padding-top:0 !important;
}

body.dark_theme .reading_hsk-page .quiz-back-btn,
body.dark_theme .reading_hsk-page .quiz-only-meta{
  background:var(--card);
  border-color:var(--line);
}

@media (max-width:560px){
  .reading_hsk-page .quiz-only-top{
    gap:8px;
  }

  .reading_hsk-page .quiz-back-btn{
    min-width:76px;
    height:42px;
    padding:0 11px;
  }

  .reading_hsk-page .quiz-only-meta{
    min-height:42px;
    padding:7px 11px;
  }

  .reading_hsk-page .quiz-only-meta strong{
    font-size:12px;
  }

  .reading_hsk-page .quiz-only-meta span{
    font-size:10.5px;
  }
}
/* writing_hsk */

.writing_hsk-page{
  --bg:#F6F6F6;
  --card:#FFFFFF;
  --card-2:#F9FBFF;
  --text:#14171F;
  --muted:#7B8494;
  --line:#E8EDF5;
  --primary:#1F7CF5;
  --primary-2:#57A8FF;
  --primary-soft:#EAF3FF;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --shadow:0 10px 30px rgba(18,28,45,.08);
  --radius:16px;
}

body.dark_theme .writing_hsk-page{
  --bg:#111315;
  --card:#191C20;
  --card-2:#1E2329;
  --text:#F3F5F7;
  --muted:#98A2B3;
  --line:#2A313A;
  --primary:#3B8CFF;
  --primary-2:#67B0FF;
  --primary-soft:#16263E;
  --shadow:none;
}

.writing_hsk-page .section{
  margin-bottom:14px;
}

.writing_hsk-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.writing_hsk-page .quiz-head{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.writing_hsk-page .quiz-head-top,
.writing_hsk-page .workspace-top,
.writing_hsk-page .title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.writing_hsk-page .mode-badge,
.writing_hsk-page .workspace-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.writing_hsk-page .mode-badge .dot,
.writing_hsk-page .workspace-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.writing_hsk-page .head-chip,
.writing_hsk-page .workspace-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.writing_hsk-page .quiz-head h2,
.writing_hsk-page .workspace-title,
.writing_hsk-page .result-card h3{
  margin-top:12px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.4px;
}

.writing_hsk-page .quiz-head p,
.writing_hsk-page .workspace-sub,
.writing_hsk-page .result-card p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:420px;
}

.writing_hsk-page .stats-grid,
.writing_hsk-page .result-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.writing_hsk-page .result-grid{
  grid-template-columns:repeat(3,1fr);
}

.writing_hsk-page .result-grid-secondary{
  margin-top:10px;
}

.writing_hsk-page .stat-item,
.writing_hsk-page .result-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.writing_hsk-page .stat-item strong,
.writing_hsk-page .result-stat strong{
  display:block;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.writing_hsk-page .stat-item span,
.writing_hsk-page .result-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.writing_hsk-page .progress-card,
.writing_hsk-page .result-card{
  padding:16px;
}

.writing_hsk-page .title-row h3{
  font-size:15px;
  font-weight:900;
}

.writing_hsk-page .title-row span{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.writing_hsk-page .progress-line{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
}

.writing_hsk-page .progress-line div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transition:.25s ease;
}

.writing_hsk-page .phase-row{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.writing_hsk-page .phase-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.writing_hsk-page .phase-chip.active{
  background:var(--primary-soft);
  color:var(--primary);
  border-color:#CFE2FF;
}

.writing_hsk-page .phase-chip.done{
  background:#ECFDF3;
  color:#15803D;
  border-color:#C9F1D7;
}

body.dark_theme .writing_hsk-page .phase-chip.done{
  background:#15261C;
  color:#86EFAC;
  border-color:#23412E;
}

.writing_hsk-page .workspace-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.writing_hsk-page .surface{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
}

.writing_hsk-page .builder-card{
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}

.writing_hsk-page .builder-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:10px;
}

.writing_hsk-page .builder-line{
  min-height:70px;
  padding:10px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:var(--bg);
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.writing_hsk-page .builder-line.empty{
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.writing_hsk-page .built-token,
.writing_hsk-page .token-btn{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.writing_hsk-page .built-token{
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.12);
}

.writing_hsk-page .token-btn{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  text-align:left;
}

.writing_hsk-page .token-btn.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.writing_hsk-page .token-btn.correct,
.writing_hsk-page .built-token.correct{
  background:#ECFDF3;
  color:#15803D;
  border-color:#C9F1D7;
}

.writing_hsk-page .token-btn.wrong,
.writing_hsk-page .built-token.wrong{
  background:#FEF2F2;
  color:#DC2626;
  border-color:#FECACA;
}

body.dark_theme .writing_hsk-page .token-btn.correct,
body.dark_theme .writing_hsk-page .built-token.correct{
  background:#15261C;
  color:#86EFAC;
  border-color:#23412E;
}

body.dark_theme .writing_hsk-page .token-btn.wrong,
body.dark_theme .writing_hsk-page .built-token.wrong{
  background:#251A1D;
  color:#FCA5A5;
  border-color:#533039;
}

.writing_hsk-page .token-bank{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.writing_hsk-page .helper-row{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.writing_hsk-page .small-btn{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}

.writing_hsk-page .small-btn.soft{
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
}

.writing_hsk-page .small-btn.ghost{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
}

.writing_hsk-page .feedback-card{
  padding:14px;
}

.writing_hsk-page .feedback-box{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--bg);
}

.writing_hsk-page .feedback-box.good{
  background:#ECFDF3;
  border-color:#C9F1D7;
}

.writing_hsk-page .feedback-box.bad{
  background:#FEF2F2;
  border-color:#FECACA;
}

body.dark_theme .writing_hsk-page .feedback-box.good{
  background:#15261C;
  border-color:#23412E;
}

body.dark_theme .writing_hsk-page .feedback-box.bad{
  background:#251A1D;
  border-color:#533039;
}

.writing_hsk-page .feedback-box strong{
  display:block;
  font-size:14px;
  font-weight:900;
}

.writing_hsk-page .feedback-box p{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.writing_hsk-page .result-card{
  text-align:center;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.writing_hsk-page .result-icon{
  width:68px;
  height:68px;
  border-radius:22px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:var(--primary-soft);
  color:var(--primary);
}

.writing_hsk-page .result-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
}

.writing_hsk-page .btn{
  border:none;
  border-radius:14px;
  padding:14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
  flex:1;
}

.writing_hsk-page .btn-primary{
  background:var(--primary);
  color:#fff;
}

.writing_hsk-page .btn-soft{
  background:var(--primary-soft);
  color:var(--primary);
}

.writing_hsk-page .loading-state,
.writing_hsk-page .empty-state{
  padding:18px;
  border-radius:14px;
  text-align:center;
  color:var(--muted);
  background:var(--card);
  border:1px dashed var(--line);
}

@media (max-width:560px){
  .writing_hsk-page .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .writing_hsk-page .result-grid{
    grid-template-columns:1fr;
  }

  .writing_hsk-page .result-actions{
    flex-direction:column;
  }
}
/* writing_hsk setup + clean quiz mode */

.writing_hsk-page .config-card{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.writing_hsk-page .config-block + .config-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.writing_hsk-page .config-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}

.writing_hsk-page .config-head strong{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.writing_hsk-page .config-head span{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.writing_hsk-page .levels-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.writing_hsk-page .level-chip{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.writing_hsk-page .level-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.writing_hsk-page .chips-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  flex-wrap:nowrap;
}

.writing_hsk-page .chips-row::-webkit-scrollbar{
  display:none;
}

.writing_hsk-page .chip{
  border:none;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

.writing_hsk-page .chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.writing_hsk-page .config-start{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.writing_hsk-page .config-start .btn{
  width:100%;
  min-height:48px;
}

/* Before start: show only setup */
.writing_hsk-page:not(.quiz-mode) #quizOnlyTop,
.writing_hsk-page:not(.quiz-mode) #headSection,
.writing_hsk-page:not(.quiz-mode) #progressSection,
.writing_hsk-page:not(.quiz-mode) #workspaceSection,
.writing_hsk-page:not(.quiz-mode) #feedbackSection,
.writing_hsk-page:not(.quiz-mode) #resultSection{
  display:none !important;
}

/* Quiz mode: hide setup */
.writing_hsk-page.quiz-mode #setupSection{
  display:none !important;
}

/* Mini quiz header */
.writing_hsk-page .quiz-only-top{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.writing_hsk-page .quiz-back-btn{
  border:none;
  min-width:86px;
  height:44px;
  padding:0 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.writing_hsk-page .quiz-back-btn:hover{
  transform:translateY(-1px);
}

.writing_hsk-page .quiz-back-btn span{
  font-size:16px;
  line-height:1;
}

.writing_hsk-page .quiz-back-btn strong{
  font-size:13px;
  font-weight:900;
}

.writing_hsk-page .quiz-only-meta{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:8px 13px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.writing_hsk-page .quiz-only-meta strong{
  display:block;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.writing_hsk-page .quiz-only-meta span{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Cleaner quiz spacing */
.writing_hsk-page.quiz-mode{
  padding-top:4px;
}

.writing_hsk-page.quiz-mode .section{
  margin-bottom:10px;
}

.writing_hsk-page.quiz-mode .quiz-only-top{
  margin-top:0;
}

.writing_hsk-page.quiz-mode .quiz-head,
.writing_hsk-page.quiz-mode .progress-card,
.writing_hsk-page.quiz-mode .workspace-card,
.writing_hsk-page.quiz-mode .result-card{
  padding:14px;
}

/* Hide global header/topbar only during HSK writing mock */
body.hsk-writing-clean .topbar,
body.hsk-writing-clean .app-topbar,
body.hsk-writing-clean .main-topbar,
body.hsk-writing-clean .header,
body.hsk-writing-clean header{
  display:none !important;
}

body.hsk-writing-clean .app,
body.hsk-writing-clean .main,
body.hsk-writing-clean .page-wrap{
  padding-top:0 !important;
}

body.dark_theme .writing_hsk-page .quiz-back-btn,
body.dark_theme .writing_hsk-page .quiz-only-meta{
  background:var(--card);
  border-color:var(--line);
}

@media (max-width:560px){
  .writing_hsk-page .quiz-only-top{
    gap:8px;
  }

  .writing_hsk-page .quiz-back-btn{
    min-width:76px;
    height:42px;
    padding:0 11px;
  }

  .writing_hsk-page .quiz-only-meta{
    min-height:42px;
    padding:7px 11px;
  }

  .writing_hsk-page .quiz-only-meta strong{
    font-size:12px;
  }

  .writing_hsk-page .quiz-only-meta span{
    font-size:10.5px;
  }
}
/* settings */

.change_lang-page.settings-page{
  padding:88px 16px 98px;
}

.change_lang-page .section{
  margin-bottom:14px;
}

.change_lang-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.change_lang-page .settings-hero{
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.12), transparent 34%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.change_lang-page .settings-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.change_lang-page .hero-badge,
.change_lang-page .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.14);
  font-size:12px;
  font-weight:800;
}

.change_lang-page .section-badge--danger{
  background:rgba(239,68,68,.10);
  color:var(--danger);
  border-color:rgba(239,68,68,.18);
}

.change_lang-page .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  opacity:.9;
}

.change_lang-page .hero-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.change_lang-page .settings-hero h2{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:8px;
}

.change_lang-page .settings-hero p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.change_lang-page .hero-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.change_lang-page .hero-route-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.change_lang-page .hero-route-chip.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(31,124,245,.18);
}

.change_lang-page .settings-card,
.change_lang-page .danger-card{
  padding:16px;
}

.change_lang-page .settings-section-head{
  margin-bottom:14px;
}

.change_lang-page .settings-section-head h3{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  margin:12px 0 6px;
}

.change_lang-page .settings-section-head p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.change_lang-page .settings-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.change_lang-page .settings-options--themes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.change_lang-page .settings-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  cursor:pointer;
  transition:.2s ease;
  color:var(--text);
}

.change_lang-page .settings-option:hover{
  transform:translateY(-1px);
  border-color:rgba(31,124,245,.20);
}

.change_lang-page .settings-option.active{
  border-color:rgba(31,124,245,.24);
  background:var(--primary-soft);
  box-shadow:0 10px 24px rgba(31,124,245,.10);
}

.change_lang-page .settings-option:disabled{
  opacity:.7;
  pointer-events:none;
}

.change_lang-page .settings-option-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:22px;
  background:var(--card);
  border:1px solid var(--line);
}

.change_lang-page .settings-option-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.change_lang-page .settings-option-copy strong{
  font-size:15px;
  line-height:1.2;
  font-weight:800;
}

.change_lang-page .settings-option-copy small{
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
}

.change_lang-page .settings-option.active .settings-option-copy small{
  color:rgba(20,23,31,.72);
}

.change_lang-page .settings-option-check{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--card);
  position:relative;
  flex-shrink:0;
}

.change_lang-page .settings-option.active .settings-option-check{
  border-color:var(--primary);
  background:var(--primary);
}

.change_lang-page .settings-option.active .settings-option-check::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  transform:translate(-50%, -50%);
}

.change_lang-page .danger-card{
  border-color:rgba(239,68,68,.16);
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.08), transparent 30%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.change_lang-page .danger-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.change_lang-page .field-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.change_lang-page .settings-input{
  width:100%;
  height:52px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:.2s ease;
}

.change_lang-page .settings-input:focus{
  border-color:rgba(31,124,245,.35);
  box-shadow:0 0 0 4px rgba(31,124,245,.08);
}

.change_lang-page .wrong_pass_error{
  display:none;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.14);
  color:var(--danger);
  font-size:13px;
  line-height:1.45;
}

.change_lang-page .danger-btn{
  height:52px;
  border:none;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg, #EF4444, #DC2626);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 10px 24px rgba(239,68,68,.20);
}

.change_lang-page .danger-btn:hover{
  transform:translateY(-1px);
}

.change_lang-page .danger-btn:disabled{
  opacity:.7;
  pointer-events:none;
}

.change_lang-page .danger-btn-icon{
  font-size:16px;
}

body.dark_theme .change_lang-page .settings-option.active{
  background:rgba(59,140,255,.14);
  border-color:rgba(59,140,255,.24);
  box-shadow:none;
}

body.dark_theme .change_lang-page .settings-option.active .settings-option-copy small{
  color:#C7D3E0;
}

body.dark_theme .change_lang-page .danger-card{
  border-color:rgba(239,68,68,.18);
}

@media (max-width: 420px){
  .change_lang-page .settings-options--themes{
    grid-template-columns:1fr;
  }

  .change_lang-page .settings-hero h2{
    font-size:22px;
  }
}

/* feedback */

.feedback-page{
  padding:88px 16px 98px;
}

.feedback-page .section{
  margin-bottom:14px;
}

.feedback-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.feedback-page .feedback-hero{
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.12), transparent 34%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.feedback-page .feedback-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.feedback-page .hero-badge,
.feedback-page .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.14);
  font-size:12px;
  font-weight:800;
}

.feedback-page .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.feedback-page .hero-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.feedback-page .feedback-hero h2{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:8px;
}

.feedback-page .feedback-hero p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.feedback-page .hero-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.feedback-page .hero-route-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.feedback-page .hero-route-chip.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(31,124,245,.18);
}

.feedback-page .feedback-card,
.feedback-page .feedback-info{
  padding:16px;
}

.feedback-page .feedback-section-head{
  margin-bottom:14px;
}

.feedback-page .feedback-section-head h3{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  margin:12px 0 6px;
}

.feedback-page .feedback-section-head p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.feedback-page .feedback-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.feedback-page .form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.feedback-page label{
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.feedback-page textarea{
  width:100%;
  min-height:180px;
  resize:vertical;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  outline:none;
  transition:.2s ease;
}

.feedback-page textarea:focus{
  border-color:rgba(31,124,245,.35);
  box-shadow:0 0 0 4px rgba(31,124,245,.08);
}

.feedback-page .field-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:18px;
}

.feedback-page .field-error{
  color:var(--danger);
  font-size:12px;
  line-height:1.4;
}

.feedback-page .field-count{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.feedback-page .primary-btn{
  height:52px;
  border:none;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 12px 28px rgba(31,124,245,.22);
}

.feedback-page .primary-btn:hover{
  transform:translateY(-1px);
}

.feedback-page .primary-btn:disabled{
  opacity:.7;
  pointer-events:none;
  transform:none;
}

.feedback-page .btn-icon{
  font-size:15px;
}

.feedback-page .feedback-status{
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  line-height:1.45;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--muted);
}

.feedback-page .feedback-status.error{
  border-color:rgba(239,68,68,.16);
  background:rgba(239,68,68,.08);
  color:var(--danger);
}

.feedback-page .info-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.feedback-page .info-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.12);
  font-size:22px;
}

.feedback-page .info-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.feedback-page .info-copy p{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.feedback-page .info-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.feedback-page .info-list-item{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}

.feedback-page .feedback-modal{
  position:fixed;
  inset:0;
  z-index:120;
}

.feedback-page .feedback-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,14,20,.42);
  backdrop-filter:blur(4px);
}

.feedback-page .feedback-modal-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:calc(100% - 32px);
  max-width:420px;
  padding:24px 20px 20px;
  text-align:center;
}

.feedback-page .feedback-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  font-size:15px;
}

.feedback-page .feedback-modal-icon{
  width:78px;
  height:78px;
  margin:12px auto 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(34,197,94,.12);
  color:var(--success);
  border:1px solid rgba(34,197,94,.16);
  font-size:36px;
  font-weight:900;
}

.feedback-page .feedback-modal-dialog h3{
  font-size:22px;
  line-height:1.2;
  font-weight:900;
  margin-bottom:8px;
}

.feedback-page .feedback-modal-dialog p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  margin-bottom:18px;
}

.feedback-page .feedback-modal-btn{
  width:100%;
  height:48px;
  border:none;
  border-radius:14px;
  background:var(--primary);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

@media (max-width:420px){
  .feedback-page .feedback-hero h2{
    font-size:22px;
  }
}

/* about us */

.about-page{
  padding:88px 16px 98px;
}

.about-page .section{
  margin-bottom:14px;
}

.about-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.about-page .about-hero{
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.12), transparent 34%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.about-page .about-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.about-page .hero-badge,
.about-page .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.14);
  font-size:12px;
  font-weight:800;
}

.about-page .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.about-page .hero-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.about-page .about-hero h2{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:8px;
}

.about-page .about-hero p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.about-page .hero-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.about-page .hero-route-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.about-page .hero-route-chip.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(31,124,245,.18);
}

.about-page .about-card,
.about-page .about-stats,
.about-page .about-note{
  padding:16px;
}

.about-page .section-head{
  margin-bottom:14px;
}

.about-page .section-head h3{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  margin:12px 0 6px;
}

.about-page .section-head p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.about-page .mission-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.about-page .mission-item{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.about-page .mission-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.12);
  font-size:22px;
}

.about-page .mission-item strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.about-page .mission-item p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.about-page .values-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about-page .value-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.about-page .value-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:20px;
}

.about-page .value-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.about-page .value-copy p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.about-page .product-points{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about-page .product-point{
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}

.about-page .stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.about-page .stat-box{
  padding:16px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  text-align:left;
}

.about-page .stat-box strong{
  display:block;
  font-size:16px;
  line-height:1.1;
  font-weight:900;
  margin-bottom:6px;
}

.about-page .stat-box span{
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  font-weight:700;
}

.about-page .about-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.10), transparent 36%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.about-page .note-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
  font-size:22px;
}

.about-page .note-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.about-page .note-copy p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

@media (max-width:420px){
  .about-page .about-hero h2{
    font-size:22px;
  }

  .about-page .stats-grid{
    grid-template-columns:1fr;
  }
}

.about-page .about-author{
  padding:16px;
}

.about-page .author-box{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.about-page .author-avatar{
  width:56px;
  height:56px;
  border-radius:18px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  font-size:18px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(31,124,245,.18);
}

.about-page .author-copy{
  min-width:0;
  flex:1;
}

.about-page .author-copy strong{
  display:block;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  margin-bottom:4px;
}

.about-page .author-copy span{
  display:block;
  font-size:12px;
  line-height:1.4;
  color:var(--primary);
  font-weight:800;
  margin-bottom:8px;
}

.about-page .author-copy p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.about-page .author-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.about-page .author-tag{
  padding:9px 12px;
  border-radius:999px;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
  color:var(--primary);
  font-size:12px;
  font-weight:800;
}

/* privacy_policy */

.privacy-page{
  padding:88px 16px 98px;
}

.privacy-page .section{
  margin-bottom:14px;
}

.privacy-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.privacy-page .privacy-hero{
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.12), transparent 34%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.privacy-page .privacy-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.privacy-page .hero-badge,
.privacy-page .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.14);
  font-size:12px;
  font-weight:800;
}

.privacy-page .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.privacy-page .hero-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.privacy-page .privacy-hero h2{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:8px;
}

.privacy-page .privacy-hero p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.privacy-page .hero-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.privacy-page .hero-route-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.privacy-page .hero-route-chip.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(31,124,245,.18);
}

.privacy-page .privacy-meta{
  padding:8px 16px;
}

.privacy-page .meta-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.privacy-page .meta-row:last-child{
  border-bottom:none;
}

.privacy-page .meta-label{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.privacy-page .meta-value{
  font-size:13px;
  color:var(--text);
  font-weight:800;
  text-align:right;
}

.privacy-page .privacy-card{
  padding:16px;
}

.privacy-page .section-head{
  margin-bottom:14px;
}

.privacy-page .section-head h3{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  margin:12px 0 6px;
}

.privacy-page .section-head p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.privacy-page .policy-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.privacy-page .policy-item{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.privacy-page .policy-item strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.privacy-page .policy-item p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.privacy-page .policy-points{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.privacy-page .policy-point{
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}

.privacy-page .policy-note{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
}

.privacy-page .policy-note strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  color:var(--primary);
  margin-bottom:6px;
}

.privacy-page .policy-note p{
  font-size:13px;
  line-height:1.6;
  color:var(--text);
}

.privacy-page .privacy-contact{
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.10), transparent 36%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.privacy-page .contact-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
  font-size:22px;
}

.privacy-page .contact-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.privacy-page .contact-copy p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.privacy-page .contact-copy span{
  color:var(--primary);
  font-weight:800;
}

@media (max-width:420px){
  .privacy-page .privacy-hero h2{
    font-size:22px;
  }

  .privacy-page .meta-row{
    flex-direction:column;
  }

  .privacy-page .meta-value{
    text-align:left;
  }
}

/* public_offer */

.offer-page{
  padding:88px 16px 98px;
}

.offer-page .section{
  margin-bottom:14px;
}

.offer-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.offer-page .offer-hero{
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.12), transparent 34%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.offer-page .offer-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.offer-page .hero-badge,
.offer-page .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.14);
  font-size:12px;
  font-weight:800;
}

.offer-page .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.offer-page .hero-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.offer-page .offer-hero h2{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:8px;
}

.offer-page .offer-hero p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.offer-page .hero-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.offer-page .hero-route-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.offer-page .hero-route-chip.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(31,124,245,.18);
}

.offer-page .offer-meta{
  padding:8px 16px;
}

.offer-page .meta-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.offer-page .meta-row:last-child{
  border-bottom:none;
}

.offer-page .meta-label{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.offer-page .meta-value{
  font-size:13px;
  color:var(--text);
  font-weight:800;
  text-align:right;
}

.offer-page .offer-card{
  padding:16px;
}

.offer-page .section-head{
  margin-bottom:14px;
}

.offer-page .section-head h3{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  margin:12px 0 6px;
}

.offer-page .section-head p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.offer-page .offer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.offer-page .offer-item{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.offer-page .offer-item strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.offer-page .offer-item p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.offer-page .offer-points{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.offer-page .offer-point{
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}

.offer-page .offer-note{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
}

.offer-page .offer-note strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  color:var(--primary);
  margin-bottom:6px;
}

.offer-page .offer-note p{
  font-size:13px;
  line-height:1.6;
  color:var(--text);
}

.offer-page .offer-contact{
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.10), transparent 36%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.offer-page .contact-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
  font-size:22px;
}

.offer-page .contact-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.offer-page .contact-copy p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:420px){
  .offer-page .offer-hero h2{
    font-size:22px;
  }

  .offer-page .meta-row{
    flex-direction:column;
  }

  .offer-page .meta-value{
    text-align:left;
  }
}

/* terms of use */

.terms-page{
  padding:88px 16px 98px;
}

.terms-page .section{
  margin-bottom:14px;
}

.terms-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.terms-page .terms-hero{
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.12), transparent 34%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.terms-page .terms-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.terms-page .hero-badge,
.terms-page .section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.14);
  font-size:12px;
  font-weight:800;
}

.terms-page .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.terms-page .hero-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.terms-page .terms-hero h2{
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:8px;
}

.terms-page .terms-hero p{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.terms-page .hero-route{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.terms-page .hero-route-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.terms-page .hero-route-chip.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(31,124,245,.18);
}

.terms-page .terms-meta{
  padding:8px 16px;
}

.terms-page .meta-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.terms-page .meta-row:last-child{
  border-bottom:none;
}

.terms-page .meta-label{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.terms-page .meta-value{
  font-size:13px;
  color:var(--text);
  font-weight:800;
  text-align:right;
}

.terms-page .terms-card{
  padding:16px;
}

.terms-page .section-head{
  margin-bottom:14px;
}

.terms-page .section-head h3{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  margin:12px 0 6px;
}

.terms-page .section-head p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.terms-page .terms-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.terms-page .terms-item{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.terms-page .terms-item strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.terms-page .terms-item p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.terms-page .terms-points{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.terms-page .terms-point{
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}

.terms-page .terms-note{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
}

.terms-page .terms-note strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  color:var(--primary);
  margin-bottom:6px;
}

.terms-page .terms-note p{
  font-size:13px;
  line-height:1.6;
  color:var(--text);
}

.terms-page .terms-contact{
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:
    radial-gradient(circle at top right, rgba(31,124,245,.10), transparent 36%),
    linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}

.terms-page .contact-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--primary-soft);
  border:1px solid rgba(31,124,245,.14);
  font-size:22px;
}

.terms-page .contact-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
}

.terms-page .contact-copy p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

@media (max-width:420px){
  .terms-page .terms-hero h2{
    font-size:22px;
  }

  .terms-page .meta-row{
    flex-direction:column;
  }

  .terms-page .meta-value{
    text-align:left;
  }
}


/* edit profile */

.edit_profile-page{ --bg:#F6F6F6; --card:#FFFFFF; --card-2:#F9FBFF; --text:#14171F; --muted:#7B8494; --line:#E8EDF5; --primary:#1F7CF5; --primary-2:#57A8FF; --primary-soft:#EAF3FF; --success:#22C55E; --danger:#EF4444; --shadow:0 10px 30px rgba(18,28,45,.08); --radius:16px; }
body.dark_theme .edit_profile-page{
  --bg:#111315;
  --card:#191C20;
  --card-2:#1E2329;
  --text:#F3F5F7;
  --muted:#98A2B3;
  --line:#2A313A;
  --primary:#3B8CFF;
  --primary-2:#67B0FF;
  --primary-soft:#16263E;
  --shadow:none;
}

.edit_profile-page .section{
  margin-bottom:14px;
}

.edit_profile-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.edit_profile-page .profile-hero{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.edit_profile-page .profile-hero-top,
.edit_profile-page .title-row,
.edit_profile-page .save-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.edit_profile-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.edit_profile-page .hero-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.edit_profile-page .hero-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.edit_profile-page .profile-hero h2{
  margin-top:12px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.4px;
}

.edit_profile-page .profile-hero p{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  max-width:420px;
}

.edit_profile-page .hero-stats{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.edit_profile-page .hero-stat{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
}

.edit_profile-page .hero-stat strong{
  display:block;
  font-size:16px;
  line-height:1.15;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.edit_profile-page .hero-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  font-weight:700;
}

.edit_profile-page .form-card{
  padding:16px;
}

.edit_profile-page .title-row{
  margin-bottom:14px;
}

.edit_profile-page .title-row h3{
  font-size:15px;
  font-weight:900;
}

.edit_profile-page .title-row span{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

.edit_profile-page .form-grid{
  display:grid;
  gap:14px;
}

.edit_profile-page .field{
  display:block;
}

.edit_profile-page .field > span{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.edit_profile-page input,
.edit_profile-page select{
  width:100%;
  height:52px;
  border:none;
  outline:none;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  padding:0 16px;
  font-size:14px;
  font-weight:700;
}

.edit_profile-page select{
  cursor:pointer;
}

.edit_profile-page small{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.edit_profile-page .password-wrap{
  position:relative;
}

.edit_profile-page .password-wrap input{
  padding-right:84px;
}

.edit_profile-page .password-toggle{
  position:absolute;
  right:8px;
  top:8px;
  height:36px;
  border:none;
  border-radius:12px;
  padding:0 12px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.edit_profile-page .hsk-levels{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.edit_profile-page .hsk-chip{
  min-width:72px;
  height:42px;
  border:none;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.edit_profile-page .hsk-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,124,245,.18);
}

.edit_profile-page .save-row{
  margin-top:16px;
}

.edit_profile-page .btn{
  border:none;
  border-radius:14px;
  padding:14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.edit_profile-page .btn-primary{
  width:100%;
  background:var(--primary);
  color:#fff;
}

.edit_profile-page .btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
}

@media (max-width:560px){
  .edit_profile-page .hero-stats{
    grid-template-columns:1fr;
  }
}


/* info word */

/* info-word-page */

/* info-word-page */

.info-word-page .word-hero{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.info-word-page .word-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.info-word-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.info-word-page .hero-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.info-word-page .hero-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.info-word-page .word-animation-strip{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.info-word-page .word-char-box{
  width:92px;
  height:92px;
  border-radius:18px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:.18s ease;
}

.info-word-page .word-char-box.is-highlighted{
  border-color:#BFD8FF;
  box-shadow:0 8px 18px rgba(31,124,245,.16);
  transform:translateY(-1px);
}

body.dark_theme .info-word-page .word-char-box.is-highlighted{
  border-color:#28415E;
}

.info-word-page .word-main{
  margin-top:16px;
  text-align:center;
}

.info-word-page .word-hanzi{
  font-size:36px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.4px;
}

.info-word-page .word-pinyin{
  margin-top:8px;
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.info-word-page .word-translation{
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
}

.info-word-page .word-pos{
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  font-weight:700;
}

.info-word-page .word-meta-row{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.info-word-page .meta-chip{
  padding:9px 12px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.info-word-page .word-actions{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.info-word-page .action-btn{
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
  min-height:52px;
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.info-word-page .action-btn.is-loading{
  opacity:.6;
  pointer-events:none;
}

.info-word-page .info-section{
  margin-top:14px;
}

.info-word-page .info-section:first-child{
  margin-top:0;
}

.info-word-page .info-card{
  padding:16px;
}

.info-word-page .title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.info-word-page .title-row h3{
  font-size:16px;
  font-weight:900;
}

.info-word-page .title-row span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.info-word-page .info-note{
  font-size:14px;
  line-height:1.65;
  color:var(--text);
}

.info-word-page .info-note strong,
.info-word-page .info-note b{
  font-weight:900;
}

.info-word-page .radical-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.info-word-page .radical-chip{
  padding:10px 12px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.info-word-page .radical-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.info-word-page .stroke-grid{
  display:grid;
  gap:12px;
}

.info-word-page .stroke-char-card{
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}

.info-word-page .stroke-char-card.is-highlighted{
  border-color:#BFD8FF;
  box-shadow:0 8px 18px rgba(31,124,245,.16);
}

body.dark_theme .info-word-page .stroke-char-card.is-highlighted{
  border-color:#28415E;
}

.info-word-page .stroke-char-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.info-word-page .stroke-char-head strong{
  font-size:18px;
  font-weight:900;
}

.info-word-page .stroke-char-head span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.info-word-page .stroke-fan{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.info-word-page .stroke-fan svg{
  width:58px;
  height:58px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
}

.info-word-page .related-list{
  display:grid;
  gap:10px;
}

.info-word-page .related-item{
  width:100%;
  border:none;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  padding:14px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
  color:var(--text);
  box-shadow:var(--shadow);
}

.info-word-page .related-item:hover{
  transform:translateY(-1px);
}

.info-word-page .related-item.locked{
  opacity:.72;
}

.info-word-page .related-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.info-word-page .related-main{
  min-width:0;
  flex:1;
}

.info-word-page .related-main strong{
  display:block;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
}

.info-word-page .related-main .sub{
  display:block;
  margin-top:5px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}

.info-word-page .related-meta{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.info-word-page .tiny-chip{
  padding:7px 9px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:900;
  color:var(--muted);
}

.info-word-page .empty-mini{
  padding:14px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.info-word-page .pager-card{
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.info-word-page .pager-btn{
  min-height:50px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.info-word-page .pager-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.info-word-page .skeleton-card{
  padding:16px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}

.info-word-page .skeleton-line{
  height:12px;
  border-radius:999px;
  background:rgba(127,127,127,.12);
  margin-bottom:10px;
}

.info-word-page .skeleton-line:last-child{
  margin-bottom:0;
}

.info-word-page .stroke-color{
  stroke:#DDD;
}

body.dark_theme .info-word-page .stroke-color{
  stroke:#2C3440;
}

@media (max-width:430px){
  .info-word-page .word-actions{
    grid-template-columns:1fr;
  }

  .info-word-page .word-char-box{
    width:82px;
    height:82px;
  }

  .info-word-page .word-hanzi{
    font-size:32px;
  }

  .info-word-page .pager-card{
    grid-template-columns:1fr;
  }
}

/* info-sentence-page */

.info-sentence-page .sentence-hero{
  padding:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
}

.info-sentence-page .sentence-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.info-sentence-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(31,124,245,.08);
  font-size:12px;
  font-weight:800;
}

.info-sentence-page .hero-badge .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
}

.info-sentence-page .hero-chip{
  padding:8px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.info-sentence-page .sentence-main{
  margin-top:16px;
  text-align:center;
}

.info-sentence-page .sentence-cn{
  font-size:30px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-0.3px;
  word-break:break-word;
}

.info-sentence-page .sentence-cn .target-word{
  color:var(--primary);
}

.info-sentence-page .sentence-pinyin{
  margin-top:10px;
  font-size:16px;
  line-height:1.5;
  color:var(--text);
  font-weight:800;
}

.info-sentence-page .sentence-translation{
  margin-top:10px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.info-sentence-page .sentence-actions{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.info-sentence-page .action-btn{
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  color:var(--text);
  min-height:52px;
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.info-sentence-page .action-btn.is-loading{
  opacity:.6;
  pointer-events:none;
}

.info-sentence-page .info-section{
  margin-top:14px;
}

.info-sentence-page .info-section:first-child{
  margin-top:0;
}

.info-sentence-page .info-card{
  padding:16px;
}

.info-sentence-page .title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.info-sentence-page .title-row h3{
  font-size:16px;
  font-weight:900;
}

.info-sentence-page .title-row span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.info-sentence-page .related-list{
  display:grid;
  gap:10px;
}

.info-sentence-page .related-item{
  width:100%;
  border:none;
  border-radius:15px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
  padding:14px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
  color:var(--text);
  box-shadow:var(--shadow);
}

.info-sentence-page .related-item:hover{
  transform:translateY(-1px);
}

.info-sentence-page .related-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.info-sentence-page .related-main{
  min-width:0;
  flex:1;
}

.info-sentence-page .related-main strong{
  display:block;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
}

.info-sentence-page .related-main .sub{
  display:block;
  margin-top:5px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}

.info-sentence-page .related-meta{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.info-sentence-page .tiny-chip{
  padding:7px 9px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:900;
  color:var(--muted);
}

.info-sentence-page .empty-mini{
  padding:14px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.info-sentence-page .skeleton-card{
  padding:16px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);
}

.info-sentence-page .skeleton-line{
  height:12px;
  border-radius:999px;
  background:rgba(127,127,127,.12);
  margin-bottom:10px;
}

.info-sentence-page .skeleton-line:last-child{
  margin-bottom:0;
}

@media (max-width:430px){
  .info-sentence-page .sentence-cn{
    font-size:26px;
  }

  .info-sentence-page .sentence-actions{
    grid-template-columns:1fr;
  }
}

/* premium sheet */

.premium-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.premium-sheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.premium-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 9999;
  width: min(100%, 600px);
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(110%);
  transition: transform .32s cubic-bezier(.2, .85, .25, 1);
  pointer-events: none;
}

.premium-sheet.is-open {
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.premium-sheet-card {
  background: #fff;
  border-radius: 28px 28px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, .9);
  box-shadow: 0 -22px 70px rgba(15, 23, 42, .22);
}

.premium-sheet-hero {
  padding: 18px 20px 20px;
  background:
    radial-gradient(circle at 15% 0%, rgba(31, 124, 245, .22), transparent 34%),
    linear-gradient(135deg, rgba(31, 124, 245, .12), rgba(124, 58, 237, .10));
}

.premium-sheet[data-type="premium_only"] .premium-sheet-hero {
  background:
    radial-gradient(circle at 15% 0%, rgba(124, 58, 237, .24), transparent 34%),
    linear-gradient(135deg, rgba(17, 24, 39, .10), rgba(124, 58, 237, .13));
}

.premium-sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: rgba(107, 114, 128, .35);
  margin: 0 auto 18px;
}

.premium-sheet-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.premium-sheet-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #1F7CF5, #6D5DFB);
  box-shadow: 0 12px 26px rgba(31, 124, 245, .28);
}

.premium-sheet[data-type="premium_only"] .premium-sheet-icon {
  background: linear-gradient(135deg, #111827, #7C3AED);
  box-shadow: 0 12px 26px rgba(124, 58, 237, .26);
}

.premium-sheet-icon svg {
  width: 28px;
  height: 28px;
}

.premium-sheet-title {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.premium-sheet-subtitle {
  margin: 6px 0 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

.premium-sheet-body {
  padding: 18px 20px 20px;
}

.premium-sheet-message {
  margin: 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
}

.premium-sheet-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.premium-sheet-btn {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 17px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}

.premium-sheet-btn:active {
  transform: scale(.98);
}

.premium-sheet-btn-main {
  color: #fff;
  background: linear-gradient(135deg, #1F7CF5, #6D5DFB);
  box-shadow: 0 14px 28px rgba(31, 124, 245, .24);
}

.premium-sheet-btn-later {
  color: #374151;
  background: #F3F4F6;
}

body.dark_theme .premium-sheet-card,
body.dark-theme .premium-sheet-card,
[data-theme="dark"] .premium-sheet-card {
  background: #111827;
  border-color: rgba(255, 255, 255, .08);
}

body.dark_theme .premium-sheet-title,
body.dark-theme .premium-sheet-title,
[data-theme="dark"] .premium-sheet-title {
  color: #F9FAFB;
}

body.dark_theme .premium-sheet-subtitle,
body.dark-theme .premium-sheet-subtitle,
[data-theme="dark"] .premium-sheet-subtitle {
  color: #A1A1AA;
}

body.dark_theme .premium-sheet-message,
body.dark-theme .premium-sheet-message,
[data-theme="dark"] .premium-sheet-message {
  color: #D1D5DB;
}

body.dark_theme .premium-sheet-btn-later,
body.dark-theme .premium-sheet-btn-later,
[data-theme="dark"] .premium-sheet-btn-later {
  color: #F9FAFB;
  background: rgba(255, 255, 255, .08);
}

/* weak_word */

.weak-words-page { padding-bottom: 92px; }

.ww-hero { padding: 18px; border-radius: 22px; overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 95, 79, 0.16), rgba(31, 124, 245, 0.10), rgba(255, 255, 255, 0.96)); border: 1px solid rgba(255, 95, 79, 0.18); }

.dark_theme .ww-hero { background: linear-gradient(135deg, rgba(255, 95, 79, 0.16), rgba(31, 124, 245, 0.12), rgba(22, 25, 32, 0.96)); border-color: rgba(255, 255, 255, 0.08); }

.ww-hero::after { content: ""; position: absolute; right: -45px; top: -45px; width: 150px; height: 150px; border-radius: 999px; background: rgba(255, 95, 79, 0.12); pointer-events: none; }

.ww-hero-top { display: flex; justify-content: space-between; gap: 16px; position: relative; z-index: 1; }

.ww-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: rgba(255, 95, 79, 0.13); color: #ff5f4f; font-size: 12px; font-weight: 900; margin-bottom: 12px; }

.ww-badge span { width: 7px; height: 7px; border-radius: 99px; background: #ff5f4f; }

.ww-hero h2 { margin: 0 0 7px; color: var(--text); font-size: 25px; line-height: 1.1; font-weight: 950; }

.ww-hero p { margin: 0; max-width: 390px; color: var(--muted); font-size: 14px; line-height: 1.45; }

.ww-fire { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 95, 79, 0.14); font-size: 28px; flex: 0 0 auto; }

.ww-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 18px; position: relative; z-index: 1; }

.ww-stat { padding: 12px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 0, 0, 0.04); text-align: center; }
.dark_theme .ww-stat { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.08); }

.ww-stat strong { display: block; color: var(--text); font-size: 19px; font-weight: 950; line-height: 1.1; }

.ww-stat span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }

.ww-mode-card, .ww-controls { padding: 14px; border-radius: 20px; }

.ww-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ww-mode-tab { border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 18px; padding: 14px; background: var(--soft, #f3f5f8); color: var(--text); text-align: left; cursor: pointer; transition: 0.16s ease; }

.dark_theme .ww-mode-tab { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.08); }

.ww-mode-tab span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; background: rgba(31, 124, 245, 0.11); margin-bottom: 10px; }

.ww-mode-tab strong { display: block; font-size: 15px; font-weight: 950; }

.ww-mode-tab small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }

.ww-mode-tab.active { background: var(--primary, #1F7CF5); color: #fff; border-color: rgba(31, 124, 245, 0.9); box-shadow: 0 12px 24px rgba(31, 124, 245, 0.22); }

.ww-mode-tab.active span {
  background: rgba(255, 255, 255, 0.18);
}

.ww-mode-tab.active small {
  color: rgba(255, 255, 255, 0.78);
}

.ww-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ww-filter-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.ww-filter-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.ww-reset-btn {
  border: 0;
  border-radius: 15px;
  padding: 10px 14px;
  background: rgba(31, 124, 245, 0.1);
  color: var(--primary, #1F7CF5);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.ww-chip-group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}

.ww-chip-group::-webkit-scrollbar {
  display: none;
}

.ww-chip {
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  background: var(--soft, #f3f5f8);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.dark_theme .ww-chip {
  background: rgba(255, 255, 255, 0.06);
}

.ww-chip.active {
  background: var(--primary, #1F7CF5);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 124, 245, 0.24);
}

.ww-select-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

.ww-select-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ww-select-row select {
  width: 100%;
  height: 43px;
  border: 0;
  outline: none;
  border-radius: 14px;
  padding: 0 12px;
  background: var(--soft, #f3f5f8);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.dark_theme .ww-select-row select {
  background: rgba(255, 255, 255, 0.06);
}

.ww-start-card {
  padding: 16px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(31, 124, 245, 0.12), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(31, 124, 245, 0.12);
}

.dark_theme .ww-start-card {
  background: linear-gradient(135deg, rgba(31, 124, 245, 0.14), rgba(22, 25, 32, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-start-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ww-start-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(31, 124, 245, 0.11);
  color: var(--primary, #1F7CF5);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}

.ww-start-card h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.ww-start-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ww-start-icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: rgba(31, 124, 245, 0.12);
  font-size: 23px;
  flex: 0 0 auto;
}

.ww-start-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 15px;
}

.ww-start-meta div {
  padding: 11px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-align: center;
}

.dark_theme .ww-start-meta div {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-start-meta strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
}

.ww-start-meta span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ww-start-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border: 0;
  border-radius: 17px;
  background: var(--primary, #1F7CF5);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31, 124, 245, 0.24);
}

.ww-training-card {
  padding: 18px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(31, 124, 245, 0.12), rgba(255, 95, 79, 0.10), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(31, 124, 245, 0.10);
}

.dark_theme .ww-training-card {
  background: linear-gradient(135deg, rgba(31, 124, 245, 0.14), rgba(255, 95, 79, 0.12), rgba(22, 25, 32, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 130, 150, 0.14);
  overflow: hidden;
  margin-bottom: 18px;
}

.ww-progress span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--primary, #1F7CF5);
  transition: width 0.25s ease;
}

.ww-training-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.ww-training-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 95, 79, 0.12);
  color: #ff5f4f;
  font-size: 12px;
  font-weight: 900;
}

.ww-training-badge span {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #ff5f4f;
}

.ww-speak-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 15px;
  background: rgba(31, 124, 245, 0.12);
  color: var(--primary, #1F7CF5);
  font-size: 18px;
  cursor: pointer;
}

.ww-question {
  text-align: center;
  padding: 8px 0 18px;
}

.ww-question h2 {
  margin: 0;
  color: var(--text);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 950;
}

.ww-question .pinyin {
  margin-top: 9px;
  color: var(--primary, #1F7CF5);
  font-size: 16px;
  font-weight: 900;
}

.ww-question p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ww-options {
  display: grid;
  gap: 10px;
}

.ww-option {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: 0.15s ease;
}

.dark_theme .ww-option {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-option:active {
  transform: scale(0.98);
}

.ww-option.correct {
  background: rgba(32, 201, 151, 0.14);
  border-color: rgba(32, 201, 151, 0.45);
  color: #20c997;
}

.ww-option.wrong {
  background: rgba(255, 95, 79, 0.14);
  border-color: rgba(255, 95, 79, 0.45);
  color: #ff5f4f;
}

.ww-option.disabled {
  pointer-events: none;
}

.ww-feedback {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  display: none;
}

.ww-feedback.show {
  display: block;
}

.ww-feedback.good {
  background: rgba(32, 201, 151, 0.12);
  color: #159f76;
}

.ww-feedback.bad {
  background: rgba(255, 95, 79, 0.12);
  color: #ff5f4f;
}

.ww-feedback strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 4px;
}

.ww-feedback span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.ww-training-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ww-primary-btn,
.ww-soft-btn,
.ww-danger-btn,
.ww-good-btn,
.ww-mastered-btn {
  border: 0;
  border-radius: 16px;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.ww-primary-btn {
  background: var(--primary, #1F7CF5);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 124, 245, 0.22);
}

.ww-soft-btn {
  background: var(--soft, #f3f5f8);
  color: var(--text);
}

.dark_theme .ww-soft-btn {
  background: rgba(255, 255, 255, 0.07);
}

.ww-danger-btn {
  background: #ff5f4f;
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 95, 79, 0.2);
}

.ww-good-btn {
  background: var(--primary, #1F7CF5);
  color: #fff;
}

.ww-mastered-btn {
  background: #20c997;
  color: #fff;
}

.ww-primary-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.ww-flashcard {
  min-height: 260px;
  border-radius: 22px;
  padding: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.dark_theme .ww-flashcard {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-flash-front h2,
.ww-flash-back h2 {
  margin: 0;
  color: var(--text);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 950;
}

.ww-flash-front .pinyin {
  margin-top: 10px;
  color: var(--primary, #1F7CF5);
  font-size: 17px;
  font-weight: 900;
}

.ww-flash-front p,
.ww-flash-back p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ww-flash-back h3 {
  margin: 0;
  color: var(--text);
  font-size: 23px;
  line-height: 1.3;
  font-weight: 950;
}

.ww-flash-example {
  margin-top: 14px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(31, 124, 245, 0.08);
  text-align: left;
}

.ww-flash-example strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.ww-flash-example span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.ww-flash-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.ww-flash-meta div {
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.dark_theme .ww-flash-meta div {
  background: rgba(255, 255, 255, 0.06);
}

.ww-flash-meta strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.ww-flash-meta span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ww-flash-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.ww-result-box {
  text-align: center;
  padding: 16px 6px;
}

.ww-result-box .icon {
  font-size: 42px;
  margin-bottom: 10px;
}

.ww-result-box h3 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 950;
}

.ww-result-box p {
  margin: 8px auto 0;
  max-width: 360px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ww-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 16px;
}

.ww-result-grid div {
  padding: 12px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.dark_theme .ww-result-grid div {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-result-grid strong {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.ww-result-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ww-list {
  display: grid;
  gap: 10px;
}

.ww-word-card {
  padding: 14px;
  border-radius: 18px;
  background: var(--card, #fff);
  border: 1px solid rgba(0, 0, 0, 0.045);
  cursor: pointer;
}

.dark_theme .ww-word-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
}

.ww-word-card.selected {
  border-color: rgba(31, 124, 245, 0.55);
  box-shadow: 0 10px 24px rgba(31, 124, 245, 0.12);
}

.ww-word-card:active {
  transform: scale(0.99);
}

.ww-word-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ww-word-main {
  min-width: 0;
}

.ww-word-main h3 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.1;
}

.ww-word-main .pinyin {
  margin-top: 4px;
  color: var(--primary, #1F7CF5);
  font-size: 13px;
  font-weight: 900;
}

.ww-word-translation {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.ww-word-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.ww-word-tags span {
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--soft, #f3f5f8);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.dark_theme .ww-word-tags span {
  background: rgba(255, 255, 255, 0.06);
}

.ww-word-score {
  display: grid;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 86px;
}

.ww-score-pill {
  padding: 8px 10px;
  border-radius: 13px;
  text-align: center;
  background: rgba(255, 95, 79, 0.11);
}

.ww-score-pill.good {
  background: rgba(32, 201, 151, 0.12);
}

.ww-score-pill strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.ww-score-pill span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.ww-loading,
.ww-empty {
  padding: 24px 18px;
  border-radius: 20px;
  text-align: center;
}

.ww-loading p,
.ww-empty p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ww-empty div {
  font-size: 34px;
}

.ww-empty h3 {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.ww-loader {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(31, 124, 245, 0.18);
  border-top-color: var(--primary, #1F7CF5);
  animation: wwSpin 0.8s linear infinite;
}

@keyframes wwSpin {
  to { transform: rotate(360deg); }
}

.ww-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.ww-page-btn {
  border: 0;
  min-width: 42px;
  height: 40px;
  border-radius: 14px;
  background: var(--card, #fff);
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.dark_theme .ww-page-btn {
  background: rgba(255, 255, 255, 0.06);
}

.ww-page-btn.active {
  background: var(--primary, #1F7CF5);
  color: #fff;
}

.ww-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 420px) {
  .ww-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ww-mode-tabs,
  .ww-select-row,
  .ww-flash-actions {
    grid-template-columns: 1fr;
  }

  .ww-start-meta {
    grid-template-columns: 1fr;
  }

  .ww-word-top {
    flex-direction: column;
  }

  .ww-word-score {
    grid-template-columns: repeat(2, 1fr);
    min-width: 0;
  }

  .ww-question h2,
  .ww-flash-front h2,
  .ww-flash-back h2 {
    font-size: 46px;
  }
}

/* ===== KaoHan Premium Sale: lightweight full screen ===== */

.kh-sale-page {
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #F6F6F6;
    color: #0f172a;
}

/* Light decorative background, no blur/filter */
.kh-sale-page::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(31, 124, 245, 0.12);
}

.kh-sale-page::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -100px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: rgba(31, 124, 245, 0.08);
}

.kh-sale-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 28px;
    line-height: 35px;
    font-weight: 700;
}

/* ===== Top hero ===== */

.kh-sale-hero {
    position: relative;
    z-index: 2;
    height: 48%;
    min-height: 310px;
    box-sizing: border-box;
    padding: max(34px, env(safe-area-inset-top)) 22px 36px;
    text-align: center;
    color: #ffffff;
    background:
        linear-gradient(145deg, #1F7CF5 0%, #1668d9 58%, #0f4fb4 100%);
    border-radius: 0 0 38px 38px;
}

.kh-sale-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 24px;
    background: #ffffff;
    color: #1F7CF5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    line-height: 1;
    font-weight: 1000;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.kh-sale-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kh-sale-hero h1 {
    margin: 17px 0 0;
    font-size: 40px;
    line-height: 0.98;
    font-weight: 1000;
    letter-spacing: -1.8px;
}

.kh-sale-hero p {
    max-width: 330px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.48;
    font-weight: 650;
}

/* ===== Bottom panel ===== */

.kh-sale-panel {
    position: relative;
    z-index: 3;
    width: calc(100% - 32px);
    max-width: 430px;
    margin: -58px auto 0;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 30px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.kh-sale-discount {
    width: 148px;
    height: 102px;
    margin: 0 auto 14px;
    border-radius: 26px;
    background: #eef6ff;
    border: 1px solid #dcecff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kh-sale-discount span {
    display: block;
    color: #1F7CF5;
    font-size: 50px;
    line-height: 0.88;
    font-weight: 1000;
    letter-spacing: -2px;
}

.kh-sale-discount b {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-size: 13px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: 1.4px;
}

.kh-sale-timer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.kh-sale-timer div {
    padding: 11px 6px;
    border-radius: 18px;
    background: #0f172a;
    color: #ffffff;
}

.kh-sale-timer strong {
    display: block;
    font-size: 23px;
    line-height: 1;
    font-weight: 1000;
}

.kh-sale-timer span {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

.kh-sale-benefit {
    margin: 12px 0 14px;
    padding: 11px 12px;
    border-radius: 18px;
    background: #F6F6F6;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
}

.kh-sale-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    width: 100%;
    border-radius: 20px;
    background: #1F7CF5;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 1000;
    box-shadow: 0 10px 22px rgba(31, 124, 245, 0.24);
}

.kh-sale-btn:active {
    transform: scale(0.98);
}

.kh-sale-later {
    display: block;
    margin-top: 10px;
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

/* ===== Dark theme ===== */

body.dark_theme .kh-sale-page,
.dark_theme .kh-sale-page {
    background: #0f172a;
    color: #ffffff;
}

body.dark_theme .kh-sale-hero,
.dark_theme .kh-sale-hero {
    background: linear-gradient(145deg, #1F7CF5 0%, #155fc5 55%, #111827 100%);
}

body.dark_theme .kh-sale-panel,
.dark_theme .kh-sale-panel {
    background: #111827;
}

body.dark_theme .kh-sale-discount,
.dark_theme .kh-sale-discount {
    background: #1f2937;
    border-color: #334155;
}

body.dark_theme .kh-sale-discount b,
.dark_theme .kh-sale-discount b {
    color: #ffffff;
}

body.dark_theme .kh-sale-benefit,
.dark_theme .kh-sale-benefit {
    background: #1f2937;
    color: #e5e7eb;
}

/* ===== Small height phones ===== */

@media (max-height: 700px) {
    .kh-sale-hero {
        height: 46%;
        min-height: 270px;
        padding-top: max(24px, env(safe-area-inset-top));
        border-radius: 0 0 30px 30px;
    }

    .kh-sale-logo {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 31px;
        margin-bottom: 11px;
    }

    .kh-sale-chip {
        padding: 7px 11px;
        font-size: 10px;
    }

    .kh-sale-hero h1 {
        margin-top: 12px;
        font-size: 32px;
    }

    .kh-sale-hero p {
        margin-top: 10px;
        max-width: 300px;
        font-size: 13px;
        line-height: 1.4;
    }

    .kh-sale-panel {
        margin-top: -48px;
        padding: 14px;
        border-radius: 24px;
    }

    .kh-sale-discount {
        width: 126px;
        height: 78px;
        border-radius: 21px;
        margin-bottom: 10px;
    }

    .kh-sale-discount span {
        font-size: 39px;
    }

    .kh-sale-discount b {
        margin-top: 4px;
        font-size: 11px;
    }

    .kh-sale-timer div {
        padding: 8px 4px;
        border-radius: 15px;
    }

    .kh-sale-timer strong {
        font-size: 19px;
    }

    .kh-sale-benefit {
        margin: 10px 0 11px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .kh-sale-btn {
        min-height: 48px;
        border-radius: 17px;
    }

    .kh-sale-later {
        margin-top: 7px;
        font-size: 12px;
    }
}

/* ===== Very small width ===== */

@media (max-width: 350px) {
    .kh-sale-panel {
        width: calc(100% - 24px);
    }

    .kh-sale-hero h1 {
        font-size: 30px;
    }

    .kh-sale-hero p {
        font-size: 12.5px;
    }
}