/* =========================================================
   JUMJAI · สติกเกอร์ป๊อป theme
   ใส่ทับสไตล์เดิมของทุกแอป (zh / ja / en / ko)
   ใช้ตัวแปรเดิมทั้งหมด จึงไม่แตะ HTML/JS ของแอป
   ========================================================= */

/* ---------- shared tokens ---------- */
:root[data-app]{
  --ink:#1E1A3C;
  --muted:#5E5980;
  --muted-2:#8C87AA;
  --border:#1E1A3C;
  --hair:#D9D5EC;
  --surface:#FFFFFF;
  --on-accent:#FFFFFF;
  --sun:#FFC83D;
  --sun-wash:#FFF1C7;
  --ok:#14A660; --ok-wash:#D8F6E5;
  --bad:#EE3D52; --bad-wash:#FFE0E4;
  --stk:3px;                       /* ความหนาเงาสติกเกอร์ */
  --stk-shadow:0 var(--stk) 0 var(--edge);
  --shadow:var(--stk-shadow);
  --gold:#C98A00; --gold-wash:#FFF1C7;
  --font-th:'Anuphan','IBM Plex Sans Thai',system-ui,sans-serif;
  --font-latin:'Anuphan','IBM Plex Sans',system-ui,sans-serif;
  --font-head:'Mitr','Anuphan',system-ui,sans-serif;
  color-scheme:light;
}
/* ภาษาจีน · แดงมะเขือเทศ */
:root[data-app="zh"]{
  --bg:#FFF3EA; --surface-2:#FFE9DA;
  --accent:#F2462E; --accent-dark:#B8260F; --accent-wash:#FFDCD2;
  --green:var(--accent); --green-wash:var(--accent-wash);
  --seal:#F2462E; --seal-wash:#FFDCD2;
  --tian:rgba(242,70,46,.45); --tian-2:rgba(242,70,46,.18);
  --dots:#FFC9B3;
}
/* ภาษาญี่ปุ่น · ชมพูซากุระ */
:root[data-app="ja"]{
  --bg:#FFF1F6; --surface-2:#FFE3EE;
  --accent:#E8357A; --accent-dark:#A9124F; --accent-wash:#FFD6E6;
  --seal:#E8357A; --seal-wash:#FFD6E6;
  --grid:rgba(232,53,122,.35);
  --dots:#FFC2DA;
}
/* ภาษาอังกฤษ · น้ำเงินไฟฟ้า */
:root[data-app="en"]{
  --bg:#EEF3FF; --surface-2:#E0E9FF;
  --accent:#2E63F5; --accent-dark:#1640B8; --accent-wash:#D7E2FF;
  --seal:#2E63F5; --seal-wash:#D7E2FF;
  --rule:rgba(46,99,245,.4); --line:rgba(46,99,245,.16);
  --dots:#BFD0FF;
}
/* ภาษาเกาหลี · ม่วงองุ่น */
:root[data-app="ko"]{
  --bg:#F4F0FF; --surface-2:#E9E1FF;
  --accent:#7444F2; --accent-dark:#4B1FC0; --accent-wash:#E4DAFF;
  --seal:#7444F2; --seal-wash:#E4DAFF;
  --grid:rgba(116,68,242,.32);
  --dots:#D3C4FF;
}

/* ---------- dark ---------- */
@media (prefers-color-scheme: dark){
  :root[data-app]:not([data-theme="light"]){
    --ink:#F3F0FF; --muted:#B6B0D6; --muted-2:#8781AD;
    --border:#0A0820; --hair:#3A3462;
    --surface:#27224A; --surface-2:#211C40; --bg:#17132F;
    --on-accent:#FFFFFF;
    --edge:#0A0820; --stk-shadow:0 var(--stk) 0 #0A0820;
    --ok:#3DDC8B; --ok-wash:#163D2C; --bad:#FF6B7C; --bad-wash:#46202A;
    --sun-wash:#3D3214; --gold:#FFC83D; --gold-wash:#3D3214;
    --dots:#2A2450;
    color-scheme:dark;
  }
  :root[data-app="zh"]:not([data-theme="light"]){--accent:#FF6A50;--accent-dark:#FFB4A4;--accent-wash:#4A2420;--seal:#FF6A50;--seal-wash:#4A2420;--tian:rgba(255,106,80,.5);--tian-2:rgba(255,106,80,.2);}
  :root[data-app="ja"]:not([data-theme="light"]){--accent:#FF5C9A;--accent-dark:#FFB0CF;--accent-wash:#4A1F33;--seal:#FF5C9A;--seal-wash:#4A1F33;--grid:rgba(255,92,154,.4);}
  :root[data-app="en"]:not([data-theme="light"]){--accent:#5E88FF;--accent-dark:#B5C9FF;--accent-wash:#1F2C57;--seal:#5E88FF;--seal-wash:#1F2C57;--rule:rgba(94,136,255,.45);--line:rgba(94,136,255,.2);}
  :root[data-app="ko"]:not([data-theme="light"]){--accent:#9A72FF;--accent-dark:#D2C0FF;--accent-wash:#33235E;--seal:#9A72FF;--seal-wash:#33235E;--grid:rgba(154,114,255,.4);}
}
:root[data-app][data-theme="dark"]{
  --ink:#F3F0FF; --muted:#B6B0D6; --muted-2:#8781AD;
  --border:#0A0820; --hair:#3A3462;
  --surface:#27224A; --surface-2:#211C40; --bg:#17132F;
  --edge:#0A0820; --stk-shadow:0 var(--stk) 0 #0A0820;
  --ok:#3DDC8B; --ok-wash:#163D2C; --bad:#FF6B7C; --bad-wash:#46202A;
  --sun-wash:#3D3214; --gold:#FFC83D; --gold-wash:#3D3214; --dots:#2A2450;
  color-scheme:dark;
}

/* ---------- base ---------- */
:root[data-app] body{
  font-family:var(--font-th);
  background-color:var(--bg);
  background-image:radial-gradient(var(--dots) 1.4px, transparent 1.6px);
  background-size:22px 22px;
}
:root[data-app] #app{background:transparent;}

/* หัวเรื่องใช้ Mitr */
:root[data-app] .greeting,
:root[data-app] .section-title h2,
:root[data-app] .page-header h1,
:root[data-app] .brand-text b,
:root[data-app] .auth-title,
:root[data-app] .action-card h3,
:root[data-app] .lr-name,
:root[data-app] .sb-num,
:root[data-app] .stat-hero-num b,
:root[data-app] .sum-pct,
:root[data-app] .sum-score,
:root[data-app] .btn,
:root[data-app] .flash-btn,
:root[data-app] .nav-lb{
  font-family:var(--font-head);
  font-weight:500;
  letter-spacing:0;
}
:root[data-app] .section-title h2{font-size:17px;}
:root[data-app] .page-header h1{font-size:19px;}

/* ---------- header ---------- */
:root[data-app] .topbar{
  background:var(--accent);
  color:#fff;
  border-bottom:none;
  border-radius:0 0 28px 28px;
  padding-bottom:18px;
  position:relative;
  overflow:hidden;
}
:root[data-app] .topbar::after{          /* วงกลมตกแต่ง */
  content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:rgba(255,255,255,.12);pointer-events:none;
}
:root[data-app] .topbar > *{position:relative;z-index:1;}
:root[data-app] .topbar .brand-text b{color:#fff;font-size:18px;}
:root[data-app] .topbar .brand-text span,
:root[data-app] .topbar .greeting-sub{color:rgba(255,255,255,.85);}
:root[data-app] .topbar .greeting{color:#fff;font-size:22px;}
:root[data-app] .brand-mark{
  background:var(--sun);color:var(--ink);
  border:2px solid #1E1A3C;box-shadow:0 2px 0 var(--edge);
  border-radius:11px;transform:rotate(-6deg);
}
:root[data-app] .topbar .lang-switch,
:root[data-app] .topbar .icon-btn,
:root[data-app] .topbar .avatar-badge{
  background:#fff;color:#1E1A3C;border:2px solid #1E1A3C;box-shadow:0 2px 0 #1E1A3C;
}
:root[data-app] .topbar .sync-pill{
  background:rgba(255,255,255,.18);border:none;color:#fff;
}
:root[data-app] .topbar .sync-dot{background:var(--sun);}
:root[data-app] .topbar .sync-dot.off{background:rgba(255,255,255,.5);}
:root[data-app] .topbar button.sync-pill.cta{background:var(--sun);color:#1E1A3C;border:2px solid #1E1A3C;font-weight:600;}
:root[data-app] .search-box{
  background:#fff;border:2px solid #1E1A3C;border-radius:16px;box-shadow:0 3px 0 #1E1A3C;
}
:root[data-app] .search-box input{color:#1E1A3C;font-size:15px;}
:root[data-app] .search-box input::placeholder{color:#8C87AA;}
:root[data-app] .search-box svg{color:#5E5980;}

/* ---------- sticker cards ---------- */
:root[data-app] .today-card,
:root[data-app] .action-card,
:root[data-app] .level-card,
:root[data-app] .stat-box,
:root[data-app] .stat-hero,
:root[data-app] .quiz-card,
:root[data-app] .flash-card,
:root[data-app] .fc-face,
:root[data-app] .sheet,
:root[data-app] .root-card,
:root[data-app] .tts-box,
:root[data-app] .usage-box,
:root[data-app] .empty-state,
:root[data-app] .acct-row{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:22px;
  box-shadow:var(--stk-shadow);
}
:root[data-app] .today-card{
  position:relative;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box;
}
:root[data-app] .today-card::before{        /* ป้าย "คำวันนี้" แบบดาว */
  content:"★";position:absolute;top:-14px;right:16px;width:30px;height:30px;border-radius:50%;
  background:var(--sun);border:2px solid var(--border);color:#1E1A3C;font-size:15px;
  display:flex;align-items:center;justify-content:center;transform:rotate(12deg);
}
:root[data-app] .action-card .action-icon{border:2px solid var(--border);border-radius:13px;}
:root[data-app] .sheet{border-radius:26px 26px 0 0;border-bottom:none;box-shadow:0 -4px 0 var(--border);}
:root[data-app] .fc-face{border-radius:26px;}

/* ---------- press feel ---------- */
:root[data-app] .btn,
:root[data-app] .action-card,
:root[data-app] .quiz-opt,
:root[data-app] .flash-btn,
:root[data-app] .word-row,
:root[data-app] .level-card,
:root[data-app] .auth-google,
:root[data-app] .lang-switch,
:root[data-app] .icon-btn,
:root[data-app] .back-btn{
  transition:transform .08s ease, box-shadow .08s ease;
}
:root[data-app] .btn:active,
:root[data-app] .action-card:active,
:root[data-app] .quiz-opt:active,
:root[data-app] .flash-btn:active,
:root[data-app] .word-row:active,
:root[data-app] .level-card:active,
:root[data-app] .auth-google:active,
:root[data-app] .lang-switch:active,
:root[data-app] .icon-btn:active,
:root[data-app] .back-btn:active{
  transform:translateY(var(--stk));
  box-shadow:0 0 0 var(--edge);
}

/* ---------- buttons ---------- */
:root[data-app] .btn{
  border:2px solid var(--border);
  border-radius:16px;
  min-height:50px;
  font-size:16px;
  box-shadow:var(--stk-shadow);
}
:root[data-app] .btn:not(.secondary){background:var(--accent);color:#fff;}
:root[data-app] .btn.secondary{background:var(--surface);color:var(--ink);border:2px solid var(--border);}
:root[data-app] .btn:disabled{opacity:.45;box-shadow:none;transform:none;}
:root[data-app] .back-btn,
:root[data-app] .icon-btn{border:2px solid var(--border);box-shadow:0 2px 0 var(--edge);background:var(--surface);}
:root[data-app] .lang-switch{border:2px solid var(--border);box-shadow:0 2px 0 var(--edge);font-weight:600;}
:root[data-app] .auth-google{border:2px solid var(--border);border-radius:16px;box-shadow:var(--stk-shadow);background:var(--surface);}
:root[data-app] .auth-input{border:2px solid var(--border);border-radius:14px;}

/* segmented + toggles */
:root[data-app] .seg,
:root[data-app] .mode-toggle{
  background:var(--accent-wash);border:2px solid var(--border);border-radius:16px;padding:4px;
}
:root[data-app] .seg-btn.on,
:root[data-app] .mode-toggle button.on{
  background:var(--surface);color:var(--ink);border-radius:11px;box-shadow:0 2px 0 var(--edge);
}
:root[data-app] .seg-btn,
:root[data-app] .mode-toggle button{color:var(--accent-dark);}
:root[data-app] .pill-tab,
:root[data-app] .chip-toggle,
:root[data-app] .root-chip,
:root[data-app] .rad-chip{border-width:2px;border-radius:999px;}

/* ---------- lists ---------- */
:root[data-app] .word-row{
  border:2px solid var(--border);border-radius:18px;box-shadow:0 2px 0 var(--edge);margin-bottom:11px;
}
:root[data-app] .level-row{border-bottom:2px dashed var(--hair);}
:root[data-app] .level-row .lr-bar,
:root[data-app] .lv-progress-track,
:root[data-app] .quiz-progress{
  height:12px;border-radius:999px;background:var(--surface);border:2px solid var(--border);
}
:root[data-app] .level-row .lr-bar i,
:root[data-app] .lv-progress-fill,
:root[data-app] .quiz-progress-fill{border-radius:999px;background:var(--accent);}
:root[data-app] .lv-badge{border:2px solid var(--border);background:var(--sun) !important;color:#1E1A3C !important;}
:root[data-app] .progress-pill,
:root[data-app] .pos-pill{border:2px solid var(--border);background:var(--sun-wash);color:var(--ink);font-weight:600;}

/* ---------- quiz ---------- */
:root[data-app] .quiz-opt{
  border:2px solid var(--border);border-radius:18px;min-height:58px;font-size:15.5px;
  box-shadow:var(--stk-shadow);background:var(--surface);
}
:root[data-app] .quiz-opt .opt-num{border:2px solid var(--border);background:var(--sun);color:#1E1A3C;border-radius:9px;}
:root[data-app] .quiz-opt.correct{
  border-color:var(--ok);background:var(--ok-wash);color:var(--ok);box-shadow:0 var(--stk) 0 var(--ok);
  animation:jj-pop .35s cubic-bezier(.3,1.6,.5,1);
}
:root[data-app] .quiz-opt.correct .opt-num{background:var(--ok);color:#fff;border-color:var(--ok);}
:root[data-app] .quiz-opt.wrong{
  border-color:var(--bad);background:var(--bad-wash);color:var(--bad);box-shadow:0 var(--stk) 0 var(--bad);
  animation:jj-shake .35s ease;
}
:root[data-app] .quiz-opt.wrong .opt-num{background:var(--bad);color:#fff;border-color:var(--bad);}
:root[data-app] .flash-btn{border:2px solid var(--border);border-radius:16px;min-height:54px;font-size:15px;box-shadow:var(--stk-shadow);}
:root[data-app] .flash-btn.again{background:var(--bad-wash);color:var(--bad);}
:root[data-app] .flash-btn.good{background:var(--ok-wash);color:var(--ok);}
:root[data-app] .spell-input{border:2px solid var(--border);border-radius:14px;}
:root[data-app] .sum-pct{color:var(--accent);}

@keyframes jj-pop{0%{transform:scale(.96)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes jj-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* ---------- stats ---------- */
:root[data-app] .stat-box:nth-child(4n+1){background:var(--accent-wash);}
:root[data-app] .stat-box:nth-child(4n+2){background:var(--sun-wash);}
:root[data-app] .stat-box:nth-child(4n+3){background:var(--ok-wash);}
:root[data-app] .bar-fill{background:var(--accent);border-radius:8px 8px 3px 3px;}

/* ---------- bottom nav ---------- */
:root[data-app] .bottom-nav{
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  width:calc(100% - 24px);max-width:456px;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:24px;
  box-shadow:0 4px 0 var(--edge);
  padding:6px;
}
:root[data-app] .bottom-nav .nav-item{border-radius:17px;min-height:54px;color:var(--muted);}
:root[data-app] .nav-item.active{background:var(--accent);color:#fff;}
:root[data-app] .nav-item.active .nav-ic{animation:jj-bounce .4s cubic-bezier(.3,1.7,.5,1);}
@keyframes jj-bounce{0%{transform:translateY(0)}40%{transform:translateY(-5px)}100%{transform:translateY(0)}}
:root[data-app] .content{padding-bottom:120px;}

/* ---------- toast ---------- */
:root[data-app] .toast{
  bottom:100px;background:var(--sun);color:#1E1A3C;border:2px solid #1E1A3C;
  box-shadow:0 3px 0 #1E1A3C;font-weight:600;
}
:root[data-app] .toast.show{opacity:1;}

/* ---------- focus + motion ---------- */
:root[data-app] button:focus-visible,
:root[data-app] a:focus-visible,
:root[data-app] input:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  :root[data-app] *{animation:none !important;transition:none !important;}
}

/* ---------- chips / tabs ---------- */
:root[data-app] .pill-tab.on,
:root[data-app] .chip-toggle.on,
:root[data-app] .root-chip.on,
:root[data-app] .rad-chip.on{
  background:var(--sun);border-color:var(--edge);color:#1E1A3C;box-shadow:0 2px 0 var(--edge);
}
:root[data-app] .topbar .pill-tab,
:root[data-app] .topbar .chip-toggle{background:#fff;color:#1E1A3C;border:2px solid #1E1A3C;}
:root[data-app] .topbar .pill-tab.on,
:root[data-app] .topbar .chip-toggle.on{background:var(--sun);}
:root[data-app] .topbar .back-btn{background:#fff;color:#1E1A3C;border-color:#1E1A3C;box-shadow:0 2px 0 #1E1A3C;}
:root[data-app] .topbar .page-header h1{color:#fff;}
:root[data-app] .acc-btn{border:2px solid var(--border);box-shadow:0 2px 0 var(--edge);}