/* ==========================================================================
   为什么中文 · LIQUID GLASS LAYER
   เอฟเฟกต์กระจกเหลวแบบ Apple — โปร่งแสง + เบลอ + แสงสะท้อนขอบ
   ยังคงโทน ทอง–แดง จีนดั้งเดิม · โหลดหลัง style.css เพื่อ override
   ========================================================================== */

/* ---------- ไอคอน SVG (ระบบใหม่) ---------- */
svg.icn{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.24em;display:inline-block}
.icn-inline{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.22em}
.icn-inline svg{width:1.18em;height:1.18em}
button svg.icn,a svg.icn{pointer-events:none}

/* ==========================================================================
   TOKENS — แก้วเหลว (โทนกระดาษ–ทอง–แดง)
   ========================================================================== */
:root{
  --glass-bg:      rgba(255,253,247,.56);
  --glass-bg-soft: rgba(255,253,247,.42);
  --glass-bg-hard: rgba(255,253,247,.74);
  --glass-line:    rgba(255,255,255,.72);
  --glass-line-in: rgba(201,162,74,.16);
  --glass-blur:    blur(18px) saturate(1.55);
  --glass-blur-lg: blur(26px) saturate(1.65);
  --glass-hi:      inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(201,162,74,.08);
  --glass-shadow:  0 18px 44px -22px rgba(90,70,50,.38), 0 2px 8px -4px rgba(90,70,50,.12);
  --glass-shadow-2:0 34px 70px -30px rgba(138,37,25,.42), 0 6px 18px -8px rgba(90,70,50,.16);
  --ff-kai:'KaiTi','STKaiti','Kaiti SC','LXGW WenKai TC','Ma Shan Zheng','Noto Serif SC',serif;
}

/* ==========================================================================
   พื้นผิวแก้ว — การ์ด/แผงหลักทั้งเว็บ
   ========================================================================== */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .card,.hub,.article,.stat,.vocab,.level-card,.game-box,.reader,.panel,
  .auth-card,.login-hero,.profile-head,.stat-card,.contact-card,.social-btn,
  .daily-word,.continue-card,.row-card,.list-item,.pb-col,.edit-form,
  .product,.char-cell,.search-in,.chip,.btn-ghost,.hsk-tab,.admin-tab,
  .opt,.field input,.field textarea,.field select,.lvl-badge,
  .char-toolbar,.level-card .lock-badge,.badge,.word-chip,.char-row,.pb-block,
  .img-drop,.social-edit-row,.color-row,.preset-swatch{
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-hi), var(--glass-shadow);
    border-color:var(--glass-line);
  }
  /* แผงที่เดิมเป็นไล่เฉดสี — เปลี่ยนเป็นไล่เฉดสีโปร่งแสง */
  .hub-top{background:linear-gradient(140deg,rgba(201,162,74,.20),rgba(178,58,46,.10))}
  .hsk-info{background:linear-gradient(135deg,rgba(201,162,74,.18),rgba(178,58,46,.09))}
  .continue-card{background:linear-gradient(135deg,rgba(178,58,46,.12),rgba(201,162,74,.20))}
  .profile-head{background:linear-gradient(135deg,rgba(201,162,74,.20),rgba(178,58,46,.10))}
  .answer-explain{background:rgba(201,162,74,.18);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  .product{background:linear-gradient(180deg,rgba(255,253,247,.66),rgba(253,248,238,.5))}
  .card .ic,.contact-card .ic{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  .badge{background:var(--glass-bg-soft)}
  .badge.on{background:linear-gradient(145deg,rgba(201,162,74,.30),rgba(178,58,46,.18))}

  /* แถบนำทาง — แก้วเข้มขึ้น + แสงขอบล่าง */
  header.nav{
    background:rgba(250,244,232,.55);
    backdrop-filter:var(--glass-blur-lg);
    -webkit-backdrop-filter:var(--glass-blur-lg);
    border-bottom:1px solid rgba(255,255,255,.65);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 30px -20px rgba(90,70,50,.35);
  }
  header.nav.scrolled{background:rgba(250,244,232,.72);box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 14px 34px -22px rgba(90,70,50,.45)}
  .user-chip{background:rgba(255,253,247,.55);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  .icon-btn-nav{background:rgba(255,253,247,.5);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}

  /* เอฟเฟกต์สเปกคิวลาร์ — แสงเฉียงบนผิวแก้ว */
  .card::after,.hub::after,.panel::after,.article::after,
  .reader::after,.auth-card::after,.profile-head::after,
  .stat-card::after,.daily-word::after,.continue-card::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
    background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 26%,transparent 44%);
    opacity:.85;
  }
  .card > *,.hub > *,.panel > *,.article > *,.reader > *,
  .auth-card > *,.profile-head > *,.stat-card > *,
  .daily-word > *,.continue-card > *{position:relative;z-index:2}

  /* ปุ่ม ghost → แก้ว; ปุ่มหลัก/ทอง เพิ่มไฮไลต์ขอบใน */
  .btn-ghost{background:var(--glass-bg-hard);border-color:rgba(255,255,255,.8)}
  .btn-ghost:hover{background:rgba(255,253,247,.92)}
  .btn-primary,.btn-gold{box-shadow:0 10px 26px -12px rgba(138,37,25,.85), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn{border:1px solid transparent}
  .btn-primary{background:linear-gradient(160deg,rgba(207,74,55,.94),rgba(138,37,25,.97))}
  .btn-gold{background:linear-gradient(160deg,rgba(224,190,106,.96),rgba(178,145,63,.97));border-color:rgba(255,255,255,.35)}
}

/* ==========================================================================
   POP-UPS แก้วเหลว — modal / dialog / paywall
   ========================================================================== */
.modal-mask{
  background:rgba(61,47,33,.38);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
.modal{
  background:rgba(255,253,247,.78);
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  border:1px solid rgba(255,255,255,.85);
  border-radius:26px;
  box-shadow:var(--glass-hi), var(--glass-shadow-2), 0 0 0 1px rgba(201,162,74,.12);
}
.modal::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  border-radius:2px;pointer-events:none;
}
.modal .close{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.7);
  border-radius:12px;
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* glass popup กลางจอ (paywall / ยืนยัน / ข้อมูล) */
.glass-pop-mask{
  position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(61,47,33,.42);
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
}
.glass-pop-mask.open{display:flex;animation:fadeIn .22s ease}
.glass-pop{
  width:100%;max-width:460px;max-height:90vh;overflow-y:auto;
  background:rgba(255,253,247,.8);
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;padding:34px 32px 30px;position:relative;
  box-shadow:var(--glass-hi), 0 44px 90px -34px rgba(61,47,33,.55), 0 0 0 1px rgba(201,162,74,.14);
  animation:modalIn .38s cubic-bezier(.2,.9,.25,1.2);
}
.glass-pop::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  border-radius:2px;pointer-events:none;
}
.glass-pop::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 24%,transparent 42%);
}
.glass-pop > *{position:relative;z-index:2}
.glass-pop h3{
  font-family:var(--ff-head);font-size:21px;color:var(--brown-3);
  margin-bottom:10px;display:flex;align-items:center;gap:11px;font-weight:var(--head-w,800);
}
.glass-pop h3 .gpic{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(145deg,rgba(201,162,74,.3),rgba(178,58,46,.18));
  color:var(--red);font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.glass-pop p{font-size:14px;color:var(--text-2);line-height:1.85;margin-bottom:16px}
.glass-pop .gp-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;justify-content:flex-end}
.glass-pop .gp-close{
  position:absolute;top:15px;right:15px;z-index:3;width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;color:var(--text-2);cursor:pointer;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.25s;
}
.glass-pop .gp-close:hover{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(90deg)}

/* paywall */
.paywall-feats{display:grid;gap:9px;margin:16px 0}
.paywall-feat{
  display:flex;gap:11px;align-items:flex-start;padding:10px 14px;border-radius:13px;
  background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.65);
  font-size:13.2px;color:var(--brown-3);
}
.paywall-feat .ic{color:var(--gold);margin-top:1px}
.paywall-feat b{display:block;font-size:13.8px}
.paywall-feat span{font-size:12px;color:var(--text-2);display:block;margin-top:1px}
.paywall-cta{
  width:100%;margin-top:18px;padding:15px;border-radius:100px;font-weight:700;font-size:15px;
  color:#463516;background:linear-gradient(160deg,#e9cd85,#c9a24a);
  box-shadow:0 14px 30px -14px rgba(201,162,74,.95), inset 0 1px 0 rgba(255,255,255,.5);
  transition:.3s;display:flex;align-items:center;justify-content:center;gap:10px;
}
.paywall-cta:hover{transform:translateY(-3px);box-shadow:0 20px 38px -16px rgba(201,162,74,1)}

/* toast แก้วเข้ม */
.toast{
  background:rgba(61,47,33,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
  display:flex;align-items:center;gap:9px;justify-content:center;
}

/* ==========================================================================
   PREMIUM — ป้าย/แถบสถานะสมาชิก
   ========================================================================== */
.premium-chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:100px;
  font-size:10.5px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(135deg,#e0be6a,#b8923e);color:#463516;
  box-shadow:0 6px 14px -6px rgba(201,162,74,.9), inset 0 1px 0 rgba(255,255,255,.55);
}
.premium-chip.until{background:rgba(201,162,74,.16);color:#8a6d24;border:1px solid rgba(201,162,74,.4);box-shadow:none}
.lock-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;
  font-size:11px;font-weight:700;color:var(--brown-3);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lock-overlay{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  border-radius:inherit;
  background:rgba(255,253,247,.42);
  backdrop-filter:blur(7px) saturate(1.3);
  -webkit-backdrop-filter:blur(7px) saturate(1.3);
}
.lock-overlay .lo-card{
  text-align:center;padding:20px 26px;border-radius:20px;
  background:rgba(255,253,247,.86);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--glass-hi), var(--glass-shadow-2);
}
.lock-overlay .lo-card .ic{font-size:26px;color:var(--gold);display:block;margin-bottom:6px}
.lock-overlay .lo-card b{font-size:14.5px;color:var(--brown-3);display:block;margin-bottom:4px}
.lock-overlay .lo-card span{font-size:12px;color:var(--text-2);display:block;margin-bottom:12px}
.lock-overlay .lo-card button{padding:9px 22px}

/* ==========================================================================
   Pinyin — ตารางพินอิน + แบบฝึกเสียง
   ========================================================================== */
.py-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.py-cell{
  padding:10px 6px;border-radius:13px;text-align:center;cursor:pointer;transition:.22s;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.py-cell:hover{transform:translateY(-3px);border-color:rgba(178,58,46,.4);box-shadow:var(--glass-shadow)}
.py-cell b{font-family:var(--ff-num);font-size:17px;color:var(--red);display:block;line-height:1.2;font-weight:700}
.py-cell span{font-size:10.5px;color:var(--text-3)}
.py-cell.cn{font-family:var(--ff-cn)}
.py-cell.played{background:linear-gradient(145deg,rgba(201,162,74,.28),rgba(178,58,46,.14));border-color:rgba(201,162,74,.5)}
.py-tone-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:stretch}
.py-tone{
  flex:1 1 118px;max-width:176px;min-width:104px;
  padding:12px 10px 10px;border-radius:14px;text-align:center;cursor:pointer;transition:.22s;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
/* พื้นหลังของการ์ดทุกเสียง (1-4 + เสียงเบา) — เหมือนกันหมด: ขาวทึบ ขอบเห็นชัด */
.py-tone,
.py-tone.t1,.py-tone.t2,.py-tone.t3,.py-tone.t4,.py-tone.t0{
  background:#ffffff;
  border:1.5px solid rgba(139,111,71,.30);
  box-shadow:0 6px 16px -10px rgba(90,70,50,.42), inset 0 1px 0 #ffffff;
}
.py-tone:hover{transform:translateY(-3px)}
.py-tone b{font-size:21px;font-family:var(--ff-num);color:var(--red);display:block;line-height:1.15}
.py-tone span{font-size:10.5px;color:var(--text-3)}
.py-tone b{font-weight:700}
/* ทุกเสียงใช้โทนสีเดียวกับเสียงเบา — ดูกลมกลืนเป็นชุดเดียวกัน */
.py-tone.t1 b,.py-tone.t2 b,.py-tone.t3 b,.py-tone.t4 b,.py-tone.t0 b{color:#7d6f5c}
.py-tone span{color:var(--text-2)}
.py-lesson{
  display:flex;gap:16px;align-items:center;padding:16px 20px;border-radius:var(--radius-s);
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:.28s;cursor:pointer;margin-bottom:12px;
}
.py-lesson:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow);border-color:rgba(178,58,46,.35)}
.py-lesson .no{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--red),var(--red-dark));color:#fff;font-weight:800;
  font-family:var(--ff-num);font-size:18px;box-shadow:0 10px 20px -10px rgba(138,37,25,.8);
}
.py-lesson .txt{flex:1}
.py-lesson .txt b{color:var(--brown-3);font-size:15px;display:block}
.py-lesson .txt span{font-size:12.5px;color:var(--text-2)}
.py-lesson .stars{color:var(--gold);letter-spacing:2px;font-size:13px;flex:0 0 auto}

/* ==========================================================================
   WRITING — ฝึกเขียนอักษร (ไคตี้) + แอนิเมชันลำดับขีด
   ========================================================================== */
.wr-hero{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  padding:30px 34px;border-radius:var(--radius);
  background:var(--glass-bg);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi), var(--glass-shadow);position:relative;overflow:hidden;
}
@media(max-width:760px){.wr-hero{grid-template-columns:1fr;text-align:center}}
.wr-hero .kai-big{
  font-family:var(--ff-kai);font-size:150px;line-height:1.1;color:var(--brown-3);
  text-shadow:0 2px 0 rgba(255,255,255,.8), 0 14px 30px rgba(90,70,50,.18);
}
.wr-hero h2{font-family:var(--ff-head);font-size:26px;color:var(--brown-3);margin-bottom:8px;font-weight:var(--head-w,800)}
.wr-hero p{font-size:14.5px;color:var(--text-2);max-width:520px}
.wr-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

.stroke-svg{width:100%;max-width:330px;display:block;margin:0 auto;filter:drop-shadow(0 10px 22px rgba(90,70,50,.2))}
.stroke-svg path{fill:rgba(61,47,33,.06)}
.stroke-svg path.painted{fill:rgba(61,47,33,.85)}
.stroke-svg path.hot{fill:rgba(178,58,46,.20)}
.stroke-svg path.med{
  fill:none!important;stroke:none;pointer-events:none;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.7));
}
.stroke-svg path.arrow{
  pointer-events:none;
  stroke:rgba(255,255,255,.9);stroke-width:9;stroke-linejoin:round;
  opacity:.92;
}
.stroke-svg text.num{
  pointer-events:none;
  font-family:var(--ff-num);font-size:64px;font-weight:800;
  stroke:rgba(255,255,255,.85);stroke-width:10;paint-order:stroke;
}
.stroke-svg.no-arrows path.arrow{display:none}
.stroke-svg.no-numbers text.num{display:none}
.stroke-svg.no-pen path.med{display:none}
.wr-tool.wr-tog{padding:7px 13px;font-size:12px;gap:7px}
.wr-tool.wr-tog.on{
  background:linear-gradient(150deg,rgba(207,74,55,.94),rgba(138,37,25,.97));
  color:#fff;border-color:transparent;
  box-shadow:0 8px 18px -10px rgba(138,37,25,.85);
}
.wr-tool.wr-tog.on svg{color:#fff}

.wr-canvas-wrap{
  position:relative;border-radius:20px;overflow:hidden;touch-action:none;user-select:none;
  background:rgba(255,253,247,.62);
  border:1.5px solid rgba(255,255,255,.85);
  box-shadow:var(--glass-hi), var(--glass-shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.wr-canvas{display:block;width:100%;height:auto;cursor:crosshair}
.wr-tools{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px;justify-content:center}
.wr-tool{
  padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;display:inline-flex;gap:8px;align-items:center;
  background:var(--glass-bg-hard);border:1px solid rgba(255,255,255,.8);color:var(--brown-3);transition:.25s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.wr-tool:hover{transform:translateY(-2px);border-color:rgba(178,58,46,.4)}
.wr-tool.primary{background:linear-gradient(160deg,rgba(207,74,55,.94),rgba(138,37,25,.97));color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(138,37,25,.85)}
.wr-tool.gold{background:linear-gradient(160deg,#e9cd85,#c9a24a);color:#463516;border-color:rgba(255,255,255,.4)}
.wr-tool:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ช่องฝึกเขียน — มุมมองคะแนนรายขีด */
.stroke-report{display:grid;gap:8px;margin-top:16px}
.stroke-report .sr-row{
  display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);font-size:13px;
}
.sr-row .no{font-family:var(--ff-num);font-weight:800;color:var(--text-3);width:20px;text-align:center}
.sr-row .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.sr-row .lbl{flex:1;color:var(--brown-3);font-size:12.8px}
.sr-row .pts{font-family:var(--ff-num);font-weight:700;color:var(--brown-3)}
.sr-row.ok .dot{background:#4caf50} .sr-row.bad .dot{background:var(--red)} .sr-row.mid .dot{background:var(--gold)}
.wr-progress{height:8px;border-radius:100px;background:rgba(139,111,71,.15);overflow:hidden;margin:14px 0 18px}
.wr-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:100px;transition:1s}

/* ==========================================================================
   EXAMS — ข้อสอบจำลอง HSK
   ========================================================================== */
.exam-hero{
  border-radius:var(--radius);padding:34px 38px;margin-bottom:26px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(47,40,34,.9),rgba(90,70,50,.88));
  color:#f6ecd8;box-shadow:0 30px 60px -30px rgba(47,40,34,.85), inset 0 1px 0 rgba(255,255,255,.15);
}
.exam-hero::after{content:'考';position:absolute;right:-8px;bottom:-60px;font-family:var(--ff-cn);font-size:220px;font-weight:900;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}
.exam-hero .in{position:relative;z-index:2}
.exam-hero h2{font-family:var(--ff-head);font-size:clamp(23px,3vw,32px);font-weight:var(--head-w,800);margin-bottom:6px}
.exam-hero p{color:rgba(246,236,216,.75);font-size:14px;max-width:620px}
.exam-hero .kicker{color:var(--gold-2)}
.exam-hero .kicker::before,.exam-hero .kicker::after{background:var(--gold-2)}
.exam-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}
.exam-stats div b{font-family:var(--ff-num);font-size:24px;color:var(--gold-2);display:block;line-height:1.1}
.exam-stats div span{font-size:11px;color:rgba(246,236,216,.6);letter-spacing:.6px}
.section-banner{
  display:flex;align-items:center;gap:13px;margin:26px 0 14px;padding:12px 18px;border-radius:14px;
  background:linear-gradient(135deg,rgba(178,58,46,.12),rgba(201,162,74,.16));
  border:1px solid rgba(255,255,255,.65);font-size:14.5px;font-weight:700;color:var(--brown-3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.section-banner .no{
  width:32px;height:32px;border-radius:11px;background:linear-gradient(145deg,var(--red),var(--red-dark));
  color:#fff;display:grid;place-items:center;font-family:var(--ff-num);font-size:15px;flex:0 0 auto;
  box-shadow:0 8px 16px -8px rgba(138,37,25,.7);
}
.exam-cert{
  text-align:center;padding:30px 26px;border-radius:22px;
  background:rgba(255,253,247,.75);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi), var(--glass-shadow-2);position:relative;overflow:hidden;
}
.exam-cert::before{content:'';position:absolute;inset:10px;border:1.5px solid rgba(201,162,74,.35);border-radius:16px;pointer-events:none}
.exam-cert .seal{
  width:74px;height:74px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--red),var(--red-dark));color:#fff;
  font-family:var(--ff-cn);font-size:34px;font-weight:900;box-shadow:0 16px 30px -14px rgba(138,37,25,.85);
  transform:rotate(-4deg);
}
.exam-cert h3{font-family:var(--ff-head);font-size:21px;color:var(--brown-3);margin-bottom:4px}
.exam-cert .score{font-family:var(--ff-num);font-size:52px;font-weight:800;color:var(--red);line-height:1.1}
.exam-cert p{font-size:13.5px;color:var(--text-2)}

/* ==========================================================================
   PREMIUM — หน้าสมาชิกพรีเมียม
   ========================================================================== */
.prem-hero{
  position:relative;overflow:hidden;border-radius:28px;padding:44px 42px;margin-bottom:30px;
  background:linear-gradient(135deg,rgba(47,40,34,.92) 0%,rgba(90,70,50,.88) 55%,rgba(138,37,25,.82) 130%);
  color:#f6ecd8;box-shadow:0 36px 70px -34px rgba(47,40,34,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.prem-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 80% at 85% 12%,rgba(224,190,106,.5),transparent 60%),
             radial-gradient(ellipse 45% 70% at 8% 95%,rgba(178,58,46,.5),transparent 62%);
}
.prem-hero::after{content:'贵';position:absolute;right:-6px;bottom:-64px;font-family:var(--ff-cn);font-size:240px;font-weight:900;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}
.prem-hero .in{position:relative;z-index:2;max-width:640px}
.prem-hero .kicker{color:var(--gold-2)}
.prem-hero .kicker::before,.prem-hero .kicker::after{background:var(--gold-2)}
.prem-hero h2{font-family:var(--ff-head);font-size:clamp(26px,3.6vw,40px);font-weight:var(--head-w,800);margin-bottom:10px}
.prem-hero p{color:rgba(246,236,216,.8);font-size:15px}
.prem-hero .crown{
  position:absolute;right:34px;top:26px;width:86px;height:86px;border-radius:26px;z-index:2;
  display:grid;place-items:center;color:#f2d98a;font-size:40px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3);
  animation:float 6s ease-in-out infinite;
}
@media(max-width:760px){.prem-hero .crown{display:none}}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.plan{
  position:relative;padding:30px 26px;border-radius:24px;text-align:center;transition:.35s;
  background:var(--glass-bg-soft);border:1.5px solid rgba(255,255,255,.75);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi), var(--glass-shadow);cursor:pointer;overflow:hidden;
}
.plan:hover{transform:translateY(-8px);box-shadow:var(--glass-hi), var(--glass-shadow-2);border-color:rgba(201,162,74,.65)}
.plan.pop{
  border-color:rgba(201,162,74,.75);
  background:linear-gradient(165deg,rgba(224,190,106,.34),rgba(255,253,247,.55) 45%,rgba(178,58,46,.16));
}
.plan .pop-tag{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  background:linear-gradient(135deg,#e0be6a,#b8923e);color:#463516;
  padding:5px 16px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  box-shadow:0 8px 16px -8px rgba(201,162,74,.9);
}
.plan .p-ic{font-size:26px;color:var(--gold);margin-bottom:10px;display:block}
.plan h3{font-family:var(--ff-head);font-size:17px;color:var(--brown-3);margin-bottom:4px}
.plan .p-sub{font-size:11.5px;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.plan .price{font-family:var(--ff-num);font-size:40px;font-weight:800;color:var(--red);line-height:1;font-variant-numeric:tabular-nums}
.plan .price small{font-size:14px;color:var(--text-3);font-weight:500}
.plan .per{font-size:12px;color:var(--text-3);margin-top:4px;margin-bottom:16px}
.plan ul{list-style:none;text-align:left;display:grid;gap:8px;margin-bottom:20px}
.plan li{font-size:13px;color:var(--text-2);display:flex;gap:9px;align-items:flex-start}
.plan li svg{color:var(--jade);margin-top:2px}
.prem-note{
  margin-top:26px;padding:18px 22px;border-radius:16px;font-size:13px;color:var(--text-2);line-height:1.8;
  background:rgba(255,253,247,.5);border:1px dashed rgba(201,162,74,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pay-method{
  display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;margin-bottom:14px;
  background:var(--glass-bg-soft);border:1.5px solid rgba(255,255,255,.75);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--glass-hi), var(--shadow-s);
}
.pay-method .pm-ic{
  width:52px;height:52px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(145deg,rgba(201,162,74,.28),rgba(178,58,46,.16));color:var(--red);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.pay-method .txt{flex:1}
.pay-method .txt b{display:block;font-size:14.5px;color:var(--brown-3)}
.pay-method .txt span{font-size:12.5px;color:var(--text-2)}
.pay-method .txt code{
  display:inline-block;margin-top:5px;padding:3px 10px;border-radius:8px;font-size:12px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);color:var(--red-dark);font-weight:700;
}
.qr-box{
  width:232px;margin:0 auto;padding:18px;border-radius:20px;text-align:center;
  background:#fff;border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--glass-hi), 0 20px 40px -24px rgba(61,47,33,.5);
}
.qr-box img{width:100%;display:block}
.qr-box span{font-size:11.5px;color:var(--text-3);display:block;margin-top:9px;letter-spacing:.4px}

/* avatar ตัวอักษรจีน (แทนอีโมจิ) */
.ava-cn{
  display:grid;place-items:center;border-radius:50%;overflow:hidden;
  font-family:var(--ff-cn);font-weight:900;color:var(--red-dark);
  background:linear-gradient(145deg,rgba(201,162,74,.30),rgba(178,58,46,.20));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.user-chip .ava-cn{font-size:16px}
.emoji-opt{position:relative}
.emoji-opt .ava-cn{width:100%;height:100%;font-size:21px;background:transparent;box-shadow:none}

/* คอลัมน์หน้านึกเขียน — ตอบสนองตามจอ */
.wr-cols{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
@media(max-width:900px){.wr-cols{grid-template-columns:1fr}}

/* ==========================================================================
   ICON SYMBOLS — สัญลักษณ์มินิมอล เส้นบาง พื้นเรียบสีเดียว (แทนไอคอน 3D)
   วงกลมเรียบ + เส้นรอบบาง + ไอคอนเส้นคมชัด — อ่านง่ายในทุกขนาด
   ========================================================================== */
.icn-tile{
  width:1.9em;height:1.9em;border-radius:50%;flex:0 0 auto;
  display:inline-grid;place-items:center;position:relative;isolation:isolate;
  background:rgba(178,58,46,.07);
  color:var(--red);
  box-shadow:inset 0 0 0 1.5px rgba(178,58,46,.16);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.icn-tile svg{
  width:1.04em;height:1.04em;position:relative;z-index:2;
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.icn-tile.red  {background:rgba(178,58,46,.07); color:var(--red);    box-shadow:inset 0 0 0 1.5px rgba(178,58,46,.16)}
.icn-tile.gold {background:rgba(201,162,74,.13);color:#8a6d24;       box-shadow:inset 0 0 0 1.5px rgba(201,162,74,.30)}
.icn-tile.brown{background:rgba(139,111,71,.11);color:var(--brown-3);box-shadow:inset 0 0 0 1.5px rgba(139,111,71,.24)}
.icn-tile.jade {background:rgba(74,124,111,.09);color:var(--jade);   box-shadow:inset 0 0 0 1.5px rgba(74,124,111,.20)}
/* ในคอนเทนเนอร์ไอคอนเดิม — ใช้ขนาดสี่เหลี่ยมจัตุรัสตายตัว (ไม่มีวันบิดเป็นวงรี) */
.card .ic .icn-tile,.contact-card .ic .icn-tile{width:54px;height:54px}
.hub-top .ic .icn-tile{width:57px;height:57px}
.stat-card .ic .icn-tile{width:46px;height:46px}
.pay-method .pm-ic .icn-tile{width:52px;height:52px}
.paywall-feat .ic .icn-tile,.py-lesson .ic .icn-tile{width:2.4em;height:2.4em}
.activity .ic .icn-tile{width:44px;height:44px}
.plan .p-ic .icn-tile{width:2.1em;height:2.1em}
.mini-stat .ic .icn-tile,.wr-hero .ic .icn-tile{width:2em;height:2em}
/* hover: ขยายเล็กน้อย ยังคงความเรียบ */
.card:hover .icn-tile,.hub:hover .icn-tile,.plan:hover .icn-tile{transform:scale(1.07)}

/* ==========================================================================
   WRITING — แก้ไข: กระดานขนาดคงที่ ไม่ขยับตาม layout + resize
   ========================================================================== */
.wr-canvas-wrap{
  aspect-ratio:1;
  width:100%;
  max-width:460px;
  margin:0 auto;
  display:grid;
  place-items:stretch;
  position:relative;
}
.wr-canvas{
  width:100%!important;
  height:100%!important;
  max-width:none;
  touch-action:none;
}

/* ==========================================================================
   พื้นฐานขีด (basic strokes) — การ์ดฝึก 8 ขีด
   ========================================================================== */
.bs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.bs-card{
  text-align:center;padding:18px 12px 14px;border-radius:16px;cursor:pointer;transition:.28s;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--glass-hi), var(--shadow-s);
}
.bs-card:hover{transform:translateY(-5px);box-shadow:var(--glass-hi), var(--glass-shadow);border-color:rgba(178,58,46,.4)}
.bs-card .bs-svg{height:86px;margin:0 auto 8px;display:block;filter:drop-shadow(0 6px 12px rgba(90,70,50,.25))}
.bs-card b{display:block;font-size:14.5px;color:var(--brown-3);font-family:var(--ff-head)}
.bs-card span{font-size:11.5px;color:var(--text-3);display:block;margin-top:2px;line-height:1.5}
.bs-card .bs-ex{font-family:var(--ff-kai);font-size:21px;color:var(--red);margin-top:5px}
.bs-card .stars{margin-top:6px;color:var(--gold);letter-spacing:2px;font-size:12px}

/* ==========================================================================
   ROADMAP — เส้นทางการเรียน (หน้าเริ่มเรียน)
   ========================================================================== */
.roadmap{display:grid;gap:16px;max-width:820px;margin:0 auto}
.rm-step{
  display:flex;gap:18px;align-items:flex-start;position:relative;
  padding:20px 24px;border-radius:18px;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--glass-hi), var(--shadow-s);
  transition:.3s;
}
.rm-step:hover{transform:translateX(6px);border-color:rgba(201,162,74,.55);box-shadow:var(--glass-hi), var(--glass-shadow)}
.rm-step::after{
  content:'';position:absolute;left:41px;top:100%;width:2px;height:16px;
  background:linear-gradient(180deg,rgba(201,162,74,.5),transparent);
}
.rm-step:last-child::after{display:none}
.rm-step .rm-no{
  width:48px;height:48px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--ff-num);font-size:21px;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--red),var(--red-dark));
  box-shadow:0 10px 20px -10px rgba(138,37,25,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
.rm-step.done .rm-no{background:linear-gradient(150deg,#63a58c,#2f6b57);box-shadow:0 10px 20px -10px rgba(47,107,87,.8), inset 0 1px 0 rgba(255,255,255,.4)}
.rm-step .rm-body{flex:1;min-width:0}
.rm-step .rm-body h3{font-family:var(--ff-head);font-size:16.5px;color:var(--brown-3);margin-bottom:3px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rm-step .rm-body p{font-size:13px;color:var(--text-2);margin-bottom:10px}
.rm-step .rm-bar{height:8px;border-radius:100px;background:rgba(139,111,71,.14);overflow:hidden;margin-bottom:6px}
.rm-step .rm-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--red),var(--gold));transition:1s cubic-bezier(.2,.8,.2,1)}
.rm-step .rm-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3)}
.rm-step .rm-meta b{color:var(--brown-3);font-family:var(--ff-num)}
.rm-step .rm-go{align-self:center;flex:0 0 auto}
.rm-summary{
  max-width:820px;margin:0 auto 22px;padding:20px 26px;border-radius:18px;
  background:linear-gradient(135deg,rgba(178,58,46,.14),rgba(201,162,74,.22));
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--glass-hi), var(--shadow-s);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.rm-summary .rm-big{font-family:var(--ff-num);font-size:40px;font-weight:800;color:var(--red);line-height:1}
.rm-summary .rm-txt{flex:1;min-width:220px}
.rm-summary .rm-txt b{font-size:15.5px;color:var(--brown-3);display:block;font-family:var(--ff-head)}
.rm-summary .rm-txt span{font-size:12.8px;color:var(--text-2)}
.rm-trend{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rm-trend .tp{
  padding:4px 11px;border-radius:100px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);color:var(--brown-3);
}
.rm-trend .tp.cur{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-color:transparent}
.rm-trend .tp::before{content:'HSK '}

/* ==========================================================================
   PINYIN — เซลล์พร้อมตัวอักษรตัวอย่าง
   ========================================================================== */
.py-cell .hz{font-family:var(--ff-kai);font-size:24px;color:var(--brown-3);display:block;line-height:1.15}
.py-cell .th{display:block;font-size:10px;color:var(--red);font-weight:600;line-height:1.35;margin-top:1px}
.py-cell:hover .hz{color:var(--red)}
.py-tone .hz{font-family:var(--ff-kai);font-size:24px;color:var(--brown-3);display:block;line-height:1.15;margin-bottom:2px}
/* กราฟความถี่เสียงวรรณยุกต์ */
.tone-graph{width:100%;max-width:150px;height:auto;display:block;margin:3px auto 2px}
.tone-graph.lg{max-width:172px;flex:0 0 auto;margin:0}
.tone-graph .tg-grid line{stroke:rgba(139,111,71,.11);stroke-width:1}
.tone-graph .tg-line{fill:none;stroke:#7d6f5c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tone-graph .tg-dot{fill:#7d6f5c;stroke:#fff;stroke-width:1.2}
.py-tone.t0 .tg-line{stroke-dasharray:5 4}
/* แถวรายละเอียด — พินอินสีเดียวกับการ์ด (โทนเดียวกับเสียงเบา) */
.paywall-feat.tone-row .py-txt{color:#7d6f5c}
.py-tone:hover .hz{color:var(--red)}

/* ==========================================================================
   HSK PAGE — แท็บสลับโหมด (คำศัพท์ / ข้อสอบจำลอง)
   ========================================================================== */
.hsk-mode-tabs{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0 26px;
  padding:8px;border-radius:100px;width:fit-content;margin-left:auto;margin-right:auto;
  background:rgba(255,253,247,.5);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--glass-hi), var(--shadow-s);
}
.hsk-mode-tab{
  padding:11px 26px;border-radius:100px;font-weight:700;font-size:14px;display:inline-flex;gap:9px;align-items:center;
  color:var(--text-2);transition:.3s;
}
.hsk-mode-tab.active{
  background:linear-gradient(150deg,var(--red),var(--red-dark));color:#fff;
  box-shadow:0 10px 24px -12px rgba(138,37,25,.85), inset 0 1px 0 rgba(255,255,255,.35);
}
/* set cards (ชุดข้อสอบ) */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:15px;margin-top:14px}
.set-card{
  position:relative;padding:20px 18px;border-radius:16px;cursor:pointer;transition:.3s;overflow:hidden;
  background:var(--glass-bg-soft);border:1.5px solid rgba(255,255,255,.78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--glass-hi), var(--shadow-s);
}
.set-card:hover{transform:translateY(-5px);border-color:rgba(201,162,74,.6);box-shadow:var(--glass-hi), var(--glass-shadow-2)}
.set-card .set-no{font-family:var(--ff-num);font-size:27px;font-weight:800;color:var(--red);line-height:1}
.set-card b{display:block;font-size:14px;color:var(--brown-3);margin:6px 0 2px}
.set-card span{font-size:11.8px;color:var(--text-2);display:block}
.set-card .set-best{margin-top:9px;font-family:var(--ff-num);font-size:12px;color:var(--text-3)}
.set-card .set-best b{display:inline;font-size:13px;color:var(--red)}
.set-card.locked{opacity:.72}
.set-card.locked:hover{transform:none}
.set-card .set-lock{position:absolute;top:10px;right:10px;color:var(--gold);opacity:.85}
.set-card .free-tag{
  position:absolute;top:0;right:0;font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  background:linear-gradient(135deg,#63a58c,#2f6b57);color:#fff;padding:4px 12px;border-bottom-left-radius:10px;
}

/* ==========================================================================
   PINYIN TEXT — ฟอนต์ที่เรนเดอร์เครื่องหมายวรรณยุกต์ (ā á ǎ à) ถูกต้อง
   ========================================================================== */
.py-tone b,.py-cell span,.vocab .py,.q-sub .py,.dw-py,.char-cell .p,
.char-hero .py,.char-hero .tt,.word-chip i,.py-txt,.py{
  font-family:var(--ff-py);
}
.py-tone b{font-weight:700}

/* tone rows — พื้นขาวทึบ อ่านง่ายทุกเสียง (ตรงกับเสียงเบา) */
.paywall-feat.tone-row{
  background:#ffffff;
  border:1px solid rgba(139,111,71,.16);
  box-shadow:0 3px 10px -8px rgba(90,70,50,.3);
}

/* แผงแอนิเมชันลำดับขีด — พื้นทึบ ไม่ใช้ backdrop blur (ลดภาระ GPU ทุกเฟรม → ลื่นขึ้น) */
.panel.wr-static{
  background:#fffdf9;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ==========================================================================
   CHARACTER SCANNER (OCR) — UI + แบบฝึกเขียนสำหรับพิมพ์เป็น PDF
   ========================================================================== */
.scan-grid{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start}
@media(max-width:900px){.scan-grid{grid-template-columns:1fr}}
.scan-drop{
  border:2px dashed rgba(178,58,46,.35);border-radius:18px;padding:26px 18px;text-align:center;
  cursor:pointer;transition:.25s;background:rgba(255,253,247,.5);
}
.scan-drop:hover{border-color:var(--red);background:rgba(178,58,46,.05);transform:translateY(-2px)}
.scan-drop .ic{display:block;font-size:30px;margin-bottom:8px}
.scan-drop b{display:block;font-size:14px;color:var(--brown-3);margin-bottom:4px}
.scan-drop span{font-size:12px;color:var(--text-3)}
.scan-busy{
  margin-top:14px;padding:12px 16px;border-radius:12px;font-size:13px;color:var(--brown-3);
  background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.3);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.scan-busy svg{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-line{
  display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  padding:8px 10px;border-radius:10px;margin-bottom:6px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
}
.scan-line-txt{font-family:var(--ff-cn);font-size:17px;line-height:2.1;flex:1}
.scan-tok{display:inline-flex;flex-direction:column;align-items:center;margin:0 1px;cursor:pointer;border-radius:8px;padding:0 4px;transition:.2s}
.scan-tok:hover{background:rgba(178,58,46,.08)}
.scan-tok i{font-style:normal;font-size:10.5px;color:var(--red);line-height:1.2}
.scan-tok.word{border-bottom:2px solid rgba(201,162,74,.5)}
.scan-punct{color:var(--text-3);margin:0 2px}
.scan-unk{color:var(--text-3);border-bottom:1px dashed var(--text-3)}
.scan-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:16px}
.scan-item{
  display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:13px;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.78);cursor:pointer;transition:.2s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.scan-item:hover{transform:translateY(-3px);border-color:rgba(178,58,46,.4);box-shadow:var(--glass-shadow)}
.scan-item .kai{font-family:var(--ff-kai);font-size:34px;color:var(--brown-3);line-height:1.1;flex:0 0 auto}
.scan-item div b{display:block;font-size:13.5px;color:var(--red)}
.scan-item div span{font-size:11.5px;color:var(--text-2)}

/* ---- แบบฝึกเขียนสำหรับพิมพ์/ดาวน์โหลด (PDF) — 1 ตัวอักษรต่อ 1 หน้า ---- */
#scanPrint{display:none}
#scanPrint.rendering{
  display:block;position:absolute;left:-9999px;top:0;width:794px;
  background:#ffffff;padding:20px;z-index:5;
}
.pz-title{margin-bottom:6px}
.pz-title h1{font-size:22px;color:#3a2e25;margin-bottom:4px}
.pz-title p{font-size:12px;color:#6f6053;margin-bottom:4px}
.pz-item{
  break-inside:avoid;page-break-inside:avoid;
  page-break-after:always;break-after:page;
  margin-bottom:10px;
}
.pz-item:last-child{page-break-after:auto;break-after:auto}
.pz-head{display:flex;gap:16px;align-items:center;margin-bottom:10px;border-bottom:1px solid rgba(178,58,46,.25);padding-bottom:8px}
.pz-kai{font-family:'KaiTi','STKaiti','LXGW WenKai TC',serif;font-size:58px;color:#b23a2e;line-height:1}
.pz-meta b{font-size:16px;color:#b23a2e;display:block}
.pz-meta span{font-size:13px;color:#5a4632;display:block}
.pz-meta em{font-style:normal;font-size:11px;color:#94836f;display:block;margin-top:2px}
.pz-row{display:flex;flex-wrap:wrap;gap:6px}
.pz-box{
  width:92px;height:92px;border:1px solid rgba(178,58,46,.5);border-radius:4px;position:relative;
  background-image:
    linear-gradient(rgba(178,58,46,.15),rgba(178,58,46,.15)),
    linear-gradient(rgba(178,58,46,.15),rgba(178,58,46,.15)),
    linear-gradient(45deg,transparent 49.4%,rgba(178,58,46,.15) 50%,transparent 50.6%),
    linear-gradient(-45deg,transparent 49.4%,rgba(178,58,46,.15) 50%,transparent 50.6%);
  background-repeat:no-repeat;
  background-position:center,center,center,center;
  background-size:1px 100%,100% 1px,100% 100%,100% 100%;
}
.pz-box.guide{
  font-family:'KaiTi','STKaiti','LXGW WenKai TC',serif;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;color:rgba(178,58,46,.20);
}
.pz-foot{margin-top:22px;font-size:11px;color:#94836f;text-align:center}
body.scan-printing{background:#fff}
@media print{
  body.scan-printing *{visibility:hidden}
  #scanPrint, #scanPrint *{visibility:visible}
  #scanPrint{display:block;position:absolute;left:0;top:0;width:100%;padding:8mm;background:#fff}
  .pz-box{width:23mm;height:23mm}
  .pz-kai{font-size:50px}
}

/* สถานะสิทธิ์สแกน */
.scan-quota{
  margin-top:14px;padding:9px 14px;border-radius:11px;font-size:12.5px;
  background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.3);color:var(--brown-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}

/* ---- แผนการเรียน (AI) ---- */
.sub-sec{
  margin:16px 0 4px;padding:10px 14px;border-radius:12px;
  background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.3);
}
.sub-sec b{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--brown-3);margin-bottom:3px}
.sub-sec span{font-size:11.5px;color:var(--text-2)}
.plan-summary{max-width:860px;margin:0 auto}
.plan-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:18px auto 0}
@media(max-width:820px){.plan-grid2{grid-template-columns:1fr}}
.plan-card{
  padding:16px;border-radius:16px;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.plan-wk b{font-family:var(--ff-num);font-size:16px;color:var(--brown-3);display:block}
.plan-wk span{font-size:11.5px;color:var(--text-3)}
.plan-wk .wr-progress{margin:8px 0 12px}
.plan-task{
  display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:10px;cursor:pointer;
  font-size:13px;color:var(--text);transition:.18s;
}
.plan-task:hover{background:rgba(201,162,74,.10)}
.plan-task input{width:17px;height:17px;margin-top:1px;flex:0 0 auto;accent-color:var(--red)}
.plan-task.done span{color:var(--text-3);text-decoration:line-through}

/* ---- ข้อสอบ: บทสนทนา + บทอ่านยาว ---- */
.dlg-lines{
  display:none;max-width:520px;margin:10px auto;padding:12px 16px;text-align:left;
  background:rgba(255,253,247,.7);border:1px solid rgba(139,111,71,.2);border-radius:12px;
}
.dlg-lines.show{display:block}
.dlg-lines p{margin:6px 0;font-size:13.5px;color:var(--text)}
.dlg-lines p b{color:var(--red);margin-right:6px}
.passage-box{
  text-align:left;padding:16px 20px;border-radius:14px;margin-bottom:6px;
  background:rgba(255,253,247,.7);border:1px solid rgba(139,111,71,.22);
  border-left:4px solid var(--gold);
}
.passage-box .p-title{display:block;color:var(--red);font-size:15px;margin-bottom:8px}
.passage-box .p-text{font-size:17.5px;line-height:2.05;color:var(--text);margin:0}
.passage-box .p-py{font-size:12.5px;color:var(--text-3);line-height:1.9;margin:10px 0 0}

/* ---- AI แก้โจทย์ข้อสอบ ---- */
.solve-card{
  margin-top:14px;padding:16px 20px;border-radius:16px;
  background:rgba(255,253,247,.75);border:1px solid rgba(139,111,71,.22);
}
.solve-card.yes{border-left:5px solid #2e9e5b;box-shadow:0 10px 24px -14px rgba(46,158,91,.5)}
.solve-card.no{border-left:5px solid var(--gold)}
.solve-card .kicker{font-size:11px;letter-spacing:.06em;color:var(--brown-3);text-transform:none;margin-bottom:4px}
.solve-card h3{font-size:16px;color:var(--text);margin:0 0 8px;justify-content:flex-start;gap:8px}
.solve-card p{margin:0 0 6px;font-size:13.5px;color:var(--text-2);line-height:1.8}

/* ---- แผง AI แก้โจทย์ข้อสอบ (เด่นบนหน้าสแกน) ---- */
.solve-panel{
  border:1.5px solid rgba(201,162,74,.45);
  background:linear-gradient(160deg,rgba(255,253,247,.85),rgba(255,248,232,.7));
}
.solve-head{display:flex;gap:14px;align-items:flex-start}
.solve-head .ic{font-size:26px;flex:0 0 auto}
.solve-head h3{font-size:17px}

/* ---- สองโหมดของหน้าสแกน ---- */
.scan-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
@media(max-width:820px){.scan-mode-tabs{grid-template-columns:1fr}}
.scan-mode-tab{
  display:flex;gap:14px;align-items:center;text-align:left;
  padding:16px 18px;border-radius:16px;cursor:pointer;transition:.22s;
  background:var(--glass-bg-soft);border:1.5px solid rgba(255,255,255,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.scan-mode-tab .ic{font-size:26px;flex:0 0 auto}
.scan-mode-tab .txt b{display:block;font-size:15px;color:var(--brown-3);margin-bottom:3px}
.scan-mode-tab .txt span{font-size:12px;color:var(--text-3);line-height:1.6}
.scan-mode-tab:hover{transform:translateY(-2px)}
.scan-mode-tab.active{
  border-color:var(--red);
  background:linear-gradient(150deg,rgba(255,253,247,.9),rgba(178,58,46,.07));
  box-shadow:0 14px 28px -16px rgba(178,58,46,.45);
}
#examRawText{
  margin-bottom:14px;padding:12px 16px;border-radius:13px;
  background:rgba(255,255,255,.6);border:1px solid rgba(139,111,71,.2);
  font-size:12.5px;color:var(--text-2);
}
#examRawText pre{white-space:pre-wrap;word-break:break-word}

/* ==========================================================================
   ตัวต่ออักษร — ส่วนประกอบ (部首) + เกมลากวาง
   ========================================================================== */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:16px}
.comp-card{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  padding:12px 8px;border-radius:14px;text-align:center;transition:.2s;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.comp-card:hover{transform:translateY(-3px);border-color:rgba(178,58,46,.4);box-shadow:var(--glass-shadow)}
.comp-card .big{font-family:var(--ff-kai);font-size:38px;color:var(--brown-3);line-height:1.1}
.comp-card b{font-size:12.5px;color:var(--text)}
.comp-card .mean{font-size:11.5px;color:var(--red);font-weight:600}
.comp-card .ex{font-size:15px;color:var(--text-3);letter-spacing:2px}
.comp-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.comp-game-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;
  padding:18px 14px;border-radius:16px;transition:.22s;
  background:var(--glass-bg-soft);border:1.5px solid rgba(255,255,255,.85);
}
.comp-game-card .ic{font-size:28px}
.comp-game-card b{font-size:14.5px;color:var(--brown-3)}
.comp-game-card span{font-size:12px;color:var(--text-3);line-height:1.6}
.comp-game-card:hover{transform:translateY(-3px)}
.comp-game-card.active{border-color:var(--red);background:linear-gradient(150deg,rgba(255,253,247,.92),rgba(178,58,46,.07));box-shadow:0 14px 28px -16px rgba(178,58,46,.45)}
.build-game-box{margin-top:20px}
.build-round{
  padding:22px;border-radius:18px;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.build-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.build-head b{font-family:var(--ff-num);font-size:15px;color:var(--brown-3);display:block}
.build-head span{font-size:11.5px;color:var(--text-3)}
.build-hint{text-align:center;font-size:17px;color:var(--text);margin:16px 0 20px}
.build-hint .py{color:var(--red);font-family:var(--ff-py)}
.bs-slots{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:18px}
.bs-slots.tb{flex-direction:column;gap:8px}
.bs-slots .plus{font-size:20px;color:var(--gold);font-weight:700}
.bs-slot{
  width:112px;height:112px;border-radius:16px;display:grid;place-items:center;
  border:2.5px dashed rgba(139,111,71,.4);background:rgba(255,253,247,.6);
  transition:.18s;
}
.bs-slot.hover{border-color:var(--red);background:rgba(178,58,46,.07);transform:scale(1.05)}
.bs-slot .ph{font-size:11px;color:var(--text-3);text-align:center;line-height:1.3}
.bs-slot.filled{border-style:solid;border-color:rgba(178,58,46,.5);background:#fffdf9}
.bs-tray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bs-chip{
  min-width:70px;padding:14px 20px;border-radius:14px;cursor:grab;user-select:none;
  font-family:var(--ff-kai);font-size:28px;color:var(--brown-3);text-align:center;
  background:#fffdf9;border:1.5px solid rgba(139,111,71,.35);
  box-shadow:0 6px 14px -8px rgba(90,70,50,.4);
  transition:.18s;
}
.bs-chip:hover{transform:translateY(-2px);border-color:var(--red)}
.bs-chip:active{cursor:grabbing}
.bs-chip.placed{font-size:26px}
.bs-right,.bs-wrong{
  margin-top:16px;padding:14px 18px;border-radius:13px;text-align:center;
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.bs-right{background:rgba(46,158,91,.1);border:1px solid rgba(46,158,91,.4);color:#2e7d52;font-size:14px}
.bs-wrong{background:rgba(178,58,46,.08);border:1px solid rgba(178,58,46,.35);color:var(--red-dark);font-size:13.5px}

/* ---- หมวดหมู่ส่วนประกอบ + popup อักษร + เกมเลือก/แยก ---- */
.comp-cat{margin-top:18px}
.comp-cat-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;border-bottom:1px solid rgba(139,111,71,.2);padding-bottom:6px}
.comp-cat-head b{font-size:14.5px;color:var(--brown-3)}
.comp-cat-head span{font-size:11.5px;color:var(--text-3)}
.comp-pop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;
  max-height:420px;overflow-y:auto;padding-right:4px;
}
.comp-pop-cell{
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:8px 4px;border-radius:12px;border:1px solid rgba(139,111,71,.22);background:#fffdf9;
  transition:.18s;
}
.comp-pop-cell:hover{transform:translateY(-2px);border-color:var(--red)}
.comp-pop-cell .kai{font-family:var(--ff-kai);font-size:28px;color:var(--brown-3);line-height:1.1}
.comp-pop-cell .py{font-size:10px;color:var(--red)}
.comp-pop-cell .th{font-size:9.5px;color:var(--text-3);text-align:center;line-height:1.3}
.pick-opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pick-opt{
  width:112px;height:112px;border-radius:16px;cursor:pointer;
  font-family:var(--ff-kai);font-size:44px;color:var(--brown-3);
  background:#fffdf9;border:2px solid rgba(139,111,71,.35);
  box-shadow:0 8px 18px -10px rgba(90,70,50,.45);
  transition:.18s;
}
.pick-opt:hover{transform:translateY(-3px) scale(1.04);border-color:var(--red);color:var(--red)}
.split-tray .split-chip{
  width:112px;height:112px;font-size:44px;cursor:pointer;border-radius:16px;
  display:grid;place-items:center;padding:0;
}
.split-chip.sel{
  border-color:var(--red);color:var(--red);
  background:rgba(178,58,46,.08);
  box-shadow:0 0 0 3px rgba(178,58,46,.25);
}

/* ==========================================================================
   HANZI TYPER — เทอร์มินัลย้อนยุค + ธีมเลือกได้ (5 ธีม)
   ========================================================================== */
.ty-shell, .ty-map-wrap{
  --ty-fg:#37e57a; --ty-fg-dim:#8fd6a8; --ty-fg-soft:#6fbf8a; --ty-hl:#4dff88;
  --ty-amber:#ffd166; --ty-bg1:#0b120c; --ty-bg2:#050a07; --ty-bg3:#07100a;
  --ty-border:rgba(51,255,102,.3); --ty-border-soft:rgba(51,255,102,.18);
  --ty-key1:#15331f; --ty-key2:#0d2416; --ty-prompt:rgba(0,0,0,.45);
  --ty-input:#eafff1; --ty-ph:rgba(51,255,102,.25);
  --ty-bar1:#2ee06c; --ty-bar2:#7dffa8;
}
.ty-shell[data-theme="amber"], .ty-map-wrap[data-theme="amber"]{
  --ty-fg:#ffb347; --ty-fg-dim:#e8c07d; --ty-fg-soft:#c99a5b; --ty-hl:#ffd166;
  --ty-amber:#ffe08a; --ty-bg1:#1a1105; --ty-bg2:#0e0a03; --ty-bg3:#140d05;
  --ty-border:rgba(255,179,71,.35); --ty-border-soft:rgba(255,179,71,.18);
  --ty-key1:#3a2a10; --ty-key2:#241905; --ty-prompt:rgba(0,0,0,.5);
  --ty-input:#fff2dc; --ty-ph:rgba(255,179,71,.28);
  --ty-bar1:#ff9d2e; --ty-bar2:#ffd166;
}
.ty-shell[data-theme="ice"], .ty-map-wrap[data-theme="ice"]{
  --ty-fg:#5ee8ff; --ty-fg-dim:#a8e8f7; --ty-fg-soft:#6fb8cc; --ty-hl:#9df3ff;
  --ty-amber:#ffd166; --ty-bg1:#051318; --ty-bg2:#030a0e; --ty-bg3:#071017;
  --ty-border:rgba(94,232,255,.35); --ty-border-soft:rgba(94,232,255,.18);
  --ty-key1:#0e2a33; --ty-key2:#081c22; --ty-prompt:rgba(0,0,0,.5);
  --ty-input:#eafcff; --ty-ph:rgba(94,232,255,.28);
  --ty-bar1:#29c4e8; --ty-bar2:#9df3ff;
}
.ty-shell[data-theme="vapor"], .ty-map-wrap[data-theme="vapor"]{
  --ty-fg:#c084fc; --ty-fg-dim:#d8b4fe; --ty-fg-soft:#a97fdd; --ty-hl:#e879f9;
  --ty-amber:#fde047; --ty-bg1:#140a1f; --ty-bg2:#0a0510; --ty-bg3:#100817;
  --ty-border:rgba(192,132,252,.35); --ty-border-soft:rgba(192,132,252,.18);
  --ty-key1:#2d1a44; --ty-key2:#1c0f2e; --ty-prompt:rgba(0,0,0,.5);
  --ty-input:#faf0ff; --ty-ph:rgba(192,132,252,.28);
  --ty-bar1:#a855f7; --ty-bar2:#e879f9;
}
.ty-shell[data-theme="paper"], .ty-map-wrap[data-theme="paper"]{
  --ty-fg:#3a2e25; --ty-fg-dim:#5f5245; --ty-fg-soft:#7a6853; --ty-hl:#8a2519;
  --ty-amber:#9a6a00; --ty-bg1:#f4ecdb; --ty-bg2:#e9dcc2; --ty-bg3:#efe5d0;
  --ty-border:rgba(90,70,50,.4); --ty-border-soft:rgba(90,70,50,.2);
  --ty-key1:#fffdf7; --ty-key2:#f2e9d5; --ty-prompt:rgba(255,253,247,.85);
  --ty-input:#3a2e25; --ty-ph:rgba(90,70,50,.22);
  --ty-bar1:#b23a2e; --ty-bar2:#c9a24a;
}
.ty-shell{
  position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--ty-bg1),var(--ty-bg3) 45%,var(--ty-bg2));
  border:1px solid var(--ty-border);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 24px 60px -22px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.12);
  font-family:'IBM Plex Mono','Courier New',ui-monospace,Menlo,monospace;
}
.ty-screen{
  position:relative;padding:20px 20px 16px;color:var(--ty-fg);min-height:420px;
  display:flex;flex-direction:column;gap:12px;
}
.ty-scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.ty-boot p{margin:2px 0;font-size:11.5px;color:var(--ty-fg-soft);letter-spacing:.03em;opacity:0;animation:tyBoot .4s forwards}
.ty-boot .l1{animation-delay:.05s}
.ty-boot .l2{animation-delay:.35s}
.ty-boot .l3{animation-delay:.65s}
@keyframes tyBoot{to{opacity:1}}
.ty-status{
  display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ty-fg-dim);
  border:1px solid var(--ty-border-soft);border-radius:8px;padding:8px 12px;
  background:rgba(0,0,0,.12);
}
.ty-status b{color:var(--ty-hl);font-weight:700}
.ty-clock{color:var(--ty-amber);font-weight:700;margin-left:auto}
.ty-bar{height:6px;border-radius:4px;background:var(--ty-border-soft);overflow:hidden}
.ty-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ty-bar1),var(--ty-bar2));transition:width .2s}
.ty-sentence{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;
  padding:16px;border-radius:10px;background:rgba(0,0,0,.18);
  border:1px solid var(--ty-border-soft);
}
.ty-char{
  min-width:52px;height:64px;display:grid;place-items:center;border-radius:6px;
  font-family:var(--ff-kai);font-size:40px;transition:.15s;
}
.ty-char.todo{color:var(--ty-fg-soft);border:1px dashed var(--ty-ph);opacity:.8}
.ty-shell[data-theme="paper"] .ty-char.todo{opacity:1;color:#6a5a44}
.ty-shell[data-theme="paper"] .ty-char.cur{color:#9a6a00;background:rgba(154,106,0,.08)}
.ty-char.cur{
  color:var(--ty-amber);border:1px solid var(--ty-amber);background:rgba(0,0,0,.25);
  animation:tyBlink 1s step-end infinite;
}
.ty-char.done{color:var(--ty-hl);border:1px solid var(--ty-border);background:rgba(0,0,0,.2)}
@keyframes tyBlink{50%{opacity:.45}}
.ty-hints{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ty-fg-dim)}
.ty-hints .py{color:var(--ty-amber)}
.ty-hints .th{color:var(--ty-fg-dim)}
.ty-prompt{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--ty-border);border-radius:8px;padding:10px 12px;
  background:var(--ty-prompt);
}
.ty-prompt .prompt{color:var(--ty-hl);font-weight:700}
.ty-input{
  flex:1;background:transparent;border:0;outline:0;color:var(--ty-input);
  font-family:inherit;font-size:15px;caret-color:var(--ty-hl);
}
.ty-input::placeholder{color:var(--ty-fg-soft)}
.ty-caret{
  width:9px;height:18px;background:var(--ty-hl);display:inline-block;
  animation:tyBlink 1s step-end infinite;
}
.ty-keys{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ty-key{
  min-width:58px;height:56px;border-radius:8px;cursor:pointer;
  font-family:var(--ff-kai);font-size:30px;color:var(--ty-fg);
  background:linear-gradient(180deg,var(--ty-key1),var(--ty-key2));
  border:1px solid var(--ty-border);
  box-shadow:0 4px 0 rgba(0,0,0,.55);
  transition:.12s;
}
.ty-key:hover{border-color:var(--ty-hl);color:var(--ty-hl);transform:translateY(-1px)}
.ty-key:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.55)}
.ty-foot{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--ty-fg-soft);border-top:1px dashed var(--ty-border-soft);padding-top:10px;
}
.ty-foot-acts{display:flex;gap:8px}
.ty-btn{
  background:rgba(0,0,0,.25);border:1px solid var(--ty-border);color:var(--ty-fg);
  font-family:inherit;font-size:11.5px;padding:7px 13px;border-radius:7px;cursor:pointer;transition:.15s;
}
.ty-btn:hover{background:rgba(0,0,0,.4);border-color:var(--ty-hl);color:var(--ty-hl)}
.ty-btn.big{font-size:14px;padding:11px 20px;color:#06240f;background:var(--ty-hl);border-color:var(--ty-hl);font-weight:700}
.ty-clear{color:var(--ty-amber);font-size:18px;letter-spacing:.08em;margin:4px 0 10px}
.ty-result-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.ty-result-grid div{
  min-width:110px;padding:12px;border-radius:10px;background:rgba(0,0,0,.2);
  border:1px solid var(--ty-border);
}
.ty-result-grid b{display:block;font-size:24px;color:var(--ty-hl);font-family:var(--ff-num)}
.ty-result-grid span{font-size:10.5px;color:var(--ty-fg-dim);letter-spacing:.1em}
.ty-note{font-size:12px;color:var(--ty-fg-dim);margin:4px 0 12px}
.ty-result-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ty-shell.shake{animation:tyShake .3s}
@keyframes tyShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* แผนที่ด่าน — พื้นเข้มอ่านชัด */
.ty-map-wrap{
  border-radius:14px;padding:16px;margin:0 -4px;
  background:linear-gradient(180deg,var(--ty-bg1),var(--ty-bg3) 50%,var(--ty-bg2));
  border:1px solid var(--ty-border);
  font-family:'IBM Plex Mono','Courier New',monospace;
}
.ty-map-wrap .ty-map-head{color:var(--ty-fg-dim);font-size:12.5px;margin:0 0 12px}
.ty-map-wrap .ty-map-head b{color:var(--ty-hl)}
.ty-map-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px;
  max-height:430px;overflow-y:auto;padding:4px;
}
.ty-map-cell{
  position:relative;padding:9px 4px 7px;border-radius:8px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ty-fg);
  background:rgba(0,0,0,.28);border:1px solid var(--ty-border);
  transition:.15s;
}
.ty-map-cell i{display:block;font-style:normal;font-size:10px;color:var(--ty-amber);margin-top:2px}
.ty-map-cell:hover{transform:translateY(-2px);border-color:var(--ty-hl);color:var(--ty-hl)}
.ty-map-cell.cur{border-color:var(--ty-amber);color:var(--ty-amber);animation:tyBlink 1.2s step-end infinite}
.ty-map-cell.locked{opacity:.4;cursor:not-allowed;border-color:var(--ty-border-soft)}
.ty-leg{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10.5px;margin:0 4px 0 8px;border:1px solid}
.ty-leg.done{color:var(--ty-hl);border-color:var(--ty-border)}
.ty-leg.cur{color:var(--ty-amber);border-color:var(--ty-amber)}
.ty-leg.locked{color:var(--ty-fg-soft);border-color:var(--ty-border-soft)}
/* ตัวเลือกธีม */
.ty-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ty-theme-card{
  display:flex;flex-direction:column;gap:6px;align-items:center;cursor:pointer;
  padding:12px 8px;border-radius:12px;border:1.5px solid var(--line);background:#fffdf9;
  transition:.18s;
}
.ty-theme-card:hover{transform:translateY(-2px);border-color:var(--red)}
.ty-theme-card.sel{border-color:var(--red);box-shadow:0 0 0 2px rgba(178,58,46,.2)}
.ty-theme-prev{width:100%;height:44px;border-radius:8px;border:1px solid rgba(0,0,0,.25)}
.ty-theme-card b{font-size:12.5px;color:var(--brown-3)}

/* ==========================================================================
   ข้อสอบเสมือนจริง — หน้ากระดาษสอบ / ส่วนข้อสอบ / 答题卡 / เขียน短文
   ========================================================================== */
.exam-paper{
  max-width:780px;margin:0 auto;
  background:#fffdf9;border:1px solid rgba(139,111,71,.25);border-radius:16px;
  padding:20px 22px;box-shadow:0 18px 40px -24px rgba(90,70,50,.5);
}
.paper-cover{text-align:center;padding:10px 0 16px;border-bottom:2px solid rgba(139,111,71,.25);margin-bottom:14px}
.pc-title{font-size:26px;font-weight:800;color:#3a2e25;letter-spacing:.12em}
.pc-sub{font-size:14px;color:var(--brown-3);margin-top:4px}
.pc-code{
  display:inline-block;margin-top:10px;padding:5px 18px;border:1.5px solid #3a2e25;border-radius:6px;
  font-family:var(--ff-num);font-size:15px;font-weight:700;letter-spacing:.15em;color:#3a2e25;
}
.pc-note{font-size:11.5px;color:var(--text-3);margin-top:8px}
.paper-meta{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--text-2);margin-bottom:12px;
}
.paper-meta .paper-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.exam-part-banner{
  margin:4px 0 16px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(150deg,rgba(201,162,74,.14),rgba(178,58,46,.07));
  border:1px solid rgba(201,162,74,.35);
}
.ep-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ep-sec{font-size:16px;font-weight:800;color:var(--red-dark)}
.ep-part{font-size:13.5px;font-weight:700;color:var(--brown-3)}
.ep-range{font-size:12.5px;color:var(--text-3);font-family:var(--ff-num)}
.ep-instr{margin:6px 0 0;font-size:13px;color:var(--text-2)}
/* 答题卡 */
.sheet-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-height:380px;overflow-y:auto;padding:4px}
.sheet-cell{
  padding:8px 0;border-radius:8px;cursor:pointer;font-family:var(--ff-num);font-size:12.5px;
  background:rgba(255,253,247,.8);border:1px solid rgba(139,111,71,.3);color:var(--brown-3);
  transition:.14s;
}
.sheet-cell:hover{border-color:var(--red)}
.sheet-cell.done{background:rgba(46,158,91,.16);border-color:rgba(46,158,91,.5);color:#2e7d52;font-weight:700}
.sheet-cell.cur{border-color:var(--red);color:#fff;background:var(--red);font-weight:700}
/* เขียน短文 */
.compose-words{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.compose-box{
  width:100%;min-height:150px;padding:14px 16px;border-radius:13px;
  border:1.5px solid rgba(139,111,71,.35);background:rgba(255,253,247,.85);
  font-family:var(--ff-cn);font-size:18px;line-height:2;color:var(--text);
  resize:vertical;
}
.compose-box:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(178,58,46,.12)}

/* ---- ธีมเพิ่ม: White Light + 8-bit สัตว์ ---- */
.ty-shell[data-theme="white"], .ty-map-wrap[data-theme="white"]{
  --ty-fg:#3a2e25; --ty-fg-dim:#5f5245; --ty-fg-soft:#8a7a64; --ty-hl:#b23a2e;
  --ty-amber:#b8860b; --ty-bg1:#ffffff; --ty-bg2:#f4f1ea; --ty-bg3:#faf8f3;
  --ty-border:rgba(90,70,50,.35); --ty-border-soft:rgba(90,70,50,.18);
  --ty-key1:#ffffff; --ty-key2:#f0eae0; --ty-prompt:rgba(255,255,255,.9);
  --ty-input:#3a2e25; --ty-ph:rgba(90,70,50,.25);
  --ty-bar1:#b23a2e; --ty-bar2:#c9a24a;
}
.ty-shell[data-theme="white"] .ty-char.todo{opacity:1;color:#6a5a44}
.ty-shell[data-theme="white"] .ty-char.cur{color:#9a6a00;background:rgba(154,106,0,.08)}
.ty-shell[data-theme="cat"], .ty-map-wrap[data-theme="cat"]{
  --ty-fg:#ffb26b; --ty-fg-dim:#e8b08a; --ty-fg-soft:#b57a52; --ty-hl:#ffd166;
  --ty-amber:#ffe08a; --ty-bg1:#1c0f14; --ty-bg2:#120a0e; --ty-bg3:#170d11;
  --ty-border:rgba(255,154,60,.35); --ty-border-soft:rgba(255,154,60,.18);
  --ty-key1:#33202a; --ty-key2:#22141c; --ty-prompt:rgba(0,0,0,.45);
  --ty-input:#ffe9d2; --ty-ph:rgba(255,154,60,.28);
  --ty-bar1:#ff9a3c; --ty-bar2:#ffd166;
}
.ty-shell[data-theme="dog"], .ty-map-wrap[data-theme="dog"]{
  --ty-fg:#a8d4ff; --ty-fg-dim:#8fb6dd; --ty-fg-soft:#5f87ad; --ty-hl:#ffd166;
  --ty-amber:#ffe08a; --ty-bg1:#0f141c; --ty-bg2:#0a0e14; --ty-bg3:#0c1118;
  --ty-border:rgba(142,201,255,.35); --ty-border-soft:rgba(142,201,255,.18);
  --ty-key1:#1c2735; --ty-key2:#131b26; --ty-prompt:rgba(0,0,0,.45);
  --ty-input:#eaf4ff; --ty-ph:rgba(142,201,255,.28);
  --ty-bar1:#6fa8ff; --ty-bar2:#c3e0ff;
}
.ty-shell[data-theme="rabbit"], .ty-map-wrap[data-theme="rabbit"]{
  --ty-fg:#ffb3d1; --ty-fg-dim:#e8a9c4; --ty-fg-soft:#b57a96; --ty-hl:#ffe08a;
  --ty-amber:#fff0a8; --ty-bg1:#1a0f1c; --ty-bg2:#110a14; --ty-bg3:#160d18;
  --ty-border:rgba(255,179,209,.35); --ty-border-soft:rgba(255,179,209,.18);
  --ty-key1:#311d33; --ty-key2:#211323; --ty-prompt:rgba(0,0,0,.45);
  --ty-input:#ffeaf2; --ty-ph:rgba(255,179,209,.28);
  --ty-bar1:#ff8fb1; --ty-bar2:#ffd9e6;
}
/* ---- สัตว์เลี้ยง 8-bit แอนิเมชัน ---- */
.ty-pet{position:absolute;top:10px;right:16px;width:72px;height:60px;z-index:6;pointer-events:none}
.ty-pet svg{width:100%;height:100%;shape-rendering:crispEdges;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.ty-pet .eye{transform-origin:center;animation:petBlink 3.4s infinite}
@keyframes petBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
.ty-pet .ear-l{transform-origin:left bottom;animation:petEarL 2.6s ease-in-out infinite}
.ty-pet .ear-r{transform-origin:right bottom;animation:petEarR 3.1s ease-in-out infinite}
@keyframes petEarL{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes petEarR{0%,100%{transform:rotate(0)}45%{transform:rotate(6deg)}}
.ty-pet .tail{transform-origin:left bottom;animation:petWag .7s ease-in-out infinite alternate}
@keyframes petWag{from{transform:rotate(-4deg)}to{transform:rotate(6deg)}}
.ty-prev-pet{position:absolute;inset:0;display:grid;place-items:center}
.ty-prev-pet svg{width:70%;height:70%;shape-rendering:crispEdges;pointer-events:none}
/* ---- การ์ดธีม: ล็อก + ราคา ---- */
.ty-theme-card{position:relative;overflow:hidden}
.ty-theme-prev{position:relative}
.ty-lock{
  position:absolute;right:6px;bottom:6px;display:inline-flex;gap:4px;align-items:center;
  background:rgba(58,46,37,.88);color:#ffd166;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:20px;
}
.ty-theme-card.locked .ty-theme-prev{filter:grayscale(.35) brightness(.9)}
.ty-card-sub{font-size:10.5px;color:var(--text-3)}
/* ---- เหรียญ為錢 ---- */
.wq-coin{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffe9a3, #f5c542 45%, #c98d1b 80%, #9a6a00);
  border:1px solid #8a5a00;
  box-shadow:inset 0 -2px 3px rgba(90,58,0,.55), inset 0 2px 2px rgba(255,255,220,.7), 0 2px 4px rgba(90,70,50,.35);
}
.wq-coin i{
  font-style:normal;font-family:var(--ff-kai);font-size:11.5px;font-weight:800;color:#5a3a00;
  text-shadow:0 1px 0 rgba(255,255,220,.55);line-height:1;
}
.wq-coin.sm{width:17px;height:17px}.wq-coin.sm i{font-size:10px}
.wq-coin.md{width:26px;height:26px}.wq-coin.md i{font-size:14px}
.wq-coin.lg{width:38px;height:38px}.wq-coin.lg i{font-size:20px}
.wq-balance{
  display:flex;gap:14px;align-items:center;justify-content:center;
  max-width:640px;margin:0 auto 20px;padding:14px 20px;border-radius:16px;
  background:linear-gradient(150deg,rgba(245,197,66,.16),rgba(178,58,46,.08));
  border:1.5px solid rgba(201,162,74,.45);
}
.wq-balance b{display:block;font-size:16px;color:var(--brown-3)}
.wq-balance span{font-size:12px;color:var(--text-2)}
.wq-balance.warn{border-style:dashed}
.coin-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-width:960px;margin:0 auto}
.coin-pack{
  position:relative;cursor:pointer;text-align:center;padding:18px 14px;border-radius:18px;
  background:var(--glass-bg-soft);border:1.5px solid rgba(255,255,255,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.2s;
}
.coin-pack:hover{transform:translateY(-3px);border-color:rgba(201,162,74,.6);box-shadow:var(--glass-shadow)}
.coin-pack.pop{border-color:var(--gold)}
.cp-coins{display:flex;gap:2px;justify-content:center;margin-bottom:8px}
.cp-n{display:block;font-family:var(--ff-num);font-size:22px;font-weight:800;color:var(--brown-3)}
.cp-label{font-size:12px;color:var(--gold);font-weight:700}
.cp-price{font-family:var(--ff-num);font-size:26px;font-weight:800;color:var(--red);margin-top:6px}
.cp-rate{font-size:11px;color:var(--text-3)}

/* ==========================================================================
   บทสนทนา (对话) + ประวัติศาสตร์จีน (เส้นเวลา)
   ========================================================================== */
.dlg-topics{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.dlg-topics .chip.sel{background:linear-gradient(150deg,var(--red),var(--red-dark));color:#fff;border-color:transparent}
.dlg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dlg-card{
  cursor:pointer;padding:18px 16px;border-radius:18px;transition:.22s;position:relative;
  background:var(--glass-bg-soft);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.dlg-card:hover{transform:translateY(-4px);border-color:rgba(201,162,74,.55);box-shadow:var(--glass-shadow)}
.dlg-card h3{font-size:16px;margin:10px 0 4px}
.dlg-card p{font-size:12.5px;color:var(--text-3);margin:0 0 10px}
.dlg-avas{display:flex;gap:8px;align-items:flex-end}
.dlg-ava{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:linear-gradient(160deg,#f7ecd8,#ecdcc0);border:1.5px solid rgba(201,162,74,.5);display:grid;place-items:center}
.dlg-ava svg{width:100%;height:100%}
.dlg-avas.big{justify-content:center;gap:20px}
.dlg-avas.big .dlg-ava{width:92px;height:92px;display:flex;flex-direction:column;border-radius:20px}
.dlg-avas.big .dlg-ava div{width:100%;height:74px}
.dlg-avas.big .dlg-ava b{font-size:13px;color:var(--brown-3);line-height:1.1}
.dlg-avas.big .dlg-ava i{font-style:normal;font-size:10px;color:var(--text-3);line-height:1}
.dlg-view-head{text-align:center;padding-bottom:16px;border-bottom:1px solid rgba(139,111,71,.2)}
.dlg-view-head h3{font-size:19px;margin:12px 0 8px}
.dlg-lines-view{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.dlg-row{display:flex;gap:12px;align-items:flex-start}
.dlg-row.b{flex-direction:row-reverse}
.dlg-mini-ava{width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;border:1.5px solid rgba(201,162,74,.5);background:linear-gradient(160deg,#f7ecd8,#ecdcc0)}
.dlg-mini-ava svg{width:100%;height:100%}
.dlg-bubble{
  position:relative;max-width:70%;padding:10px 16px;border-radius:16px;
  background:rgba(255,253,247,.9);border:1px solid rgba(139,111,71,.25);
}
.dlg-row.b .dlg-bubble{background:rgba(201,162,74,.12)}
.dlg-bubble b{font-size:12.5px;color:var(--red)}
.dlg-bubble .zh{font-size:18px;line-height:1.9;margin:2px 0}
.dlg-bubble .py{font-size:12.5px;color:var(--text-3);margin:0;font-family:var(--ff-py)}
.dlg-say{
  position:absolute;top:8px;right:8px;background:transparent;border:0;cursor:pointer;
  color:var(--brown-3);opacity:.6;padding:2px;
}
.dlg-say:hover{opacity:1;color:var(--red)}
.dlg-vocab{margin-top:20px;padding-top:16px;border-top:1px solid rgba(139,111,71,.2)}
.dlg-vocab h3{font-size:15px}
.dlg-vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.dlg-vocab-cell{
  display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;
  padding:10px 8px;border-radius:12px;background:rgba(255,253,247,.7);border:1px solid rgba(139,111,71,.22);
}
.dlg-vocab-cell .cn{font-size:22px;color:var(--brown-3)}
.dlg-vocab-cell .py{font-size:11.5px;color:var(--red);font-family:var(--ff-py)}
.dlg-vocab-cell .th{font-size:11px;color:var(--text-2)}
/* ---- เส้นเวลาประวัติศาสตร์ ---- */
.hist-timeline{
  position:relative;display:flex;gap:6px;justify-content:flex-start;align-items:flex-end;
  overflow-x:auto;padding:34px 10px 14px;margin:10px 0 22px;
}
.ht-line{position:absolute;left:10px;right:10px;top:47px;height:3px;background:linear-gradient(90deg,#8a6d3b,#c9a24a,#3a3a3a,#a02c22,#c9a800);border-radius:2px;opacity:.5}
.ht-node{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:76px;
  background:transparent;border:0;cursor:pointer;padding:0;
}
.ht-dot{width:14px;height:14px;border-radius:50%;background:var(--c);border:2.5px solid #fffdf7;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:.2s}
.ht-name{font-family:var(--ff-cn);font-size:17px;font-weight:800;color:var(--c)}
.ht-years{font-size:9.5px;color:var(--text-3);font-family:var(--ff-num)}
.ht-node:hover .ht-dot{transform:scale(1.4)}
.ht-node.active .ht-dot{transform:scale(1.55);box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent)}
.ht-node.active .ht-name{text-shadow:0 0 10px color-mix(in srgb, var(--c) 40%, transparent)}
.hist-card{
  display:flex;gap:22px;align-items:flex-start;max-width:820px;margin:0 auto;
  padding:20px 24px;border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,253,247,.95),color-mix(in srgb, var(--c) 8%, #fffdf7));
  border:1px solid color-mix(in srgb, var(--c) 40%, transparent);
  animation:histIn .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes histIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.hist-figure{width:110px;flex:0 0 auto;filter:drop-shadow(0 10px 16px rgba(90,70,50,.35));animation:histFloat 3.4s ease-in-out infinite}
@keyframes histFloat{50%{transform:translateY(-5px)}}
.hist-figure svg{width:100%}
.hist-head h3{font-size:22px;color:var(--c);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.hist-head h3 span{font-size:13.5px;color:var(--text-3);font-family:var(--ff-num)}
.hist-facts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.hist-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.hist-cols{grid-template-columns:1fr}.hist-card{flex-direction:column}}
.hist-col b{display:flex;gap:7px;align-items:center;font-size:13.5px;color:var(--brown-3);margin-bottom:6px}
.hist-col p{margin:0 0 6px;font-size:13px;color:var(--text-2);padding-left:16px;position:relative;line-height:1.7}
.hist-col p::before{content:'';position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--c)}

/* ---- ตัวดูบทสนทนาเต็มจอ + ปุ่มเล่น/หยุด ---- */
.dlg-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.dlg-controls .btn[disabled]{opacity:.45;cursor:not-allowed}
.dlg-row{transition:.25s;border-radius:14px;padding:4px 6px}
.dlg-row.reading{
  background:rgba(201,162,74,.12);
  box-shadow:0 0 0 2px rgba(201,162,74,.35);
}
.dlg-row.reading .dlg-bubble{border-color:var(--gold)}