/* สร้างอัตโนมัติจาก app/styles.css + app/mimo.css + web/extra.css — อย่าแก้ไฟล์นี้ */

/* ═══════════════════════════════════════════════════════════
   แอฟช่วยจำ — Cute Pastel Infographic UI
   ═══════════════════════════════════════════════════════════ */

:root{
  --lavender:#B79CED; --pink:#F7C8D8; --mint:#CFE8D5; --cream:#FFF8F3;

  --ground:#FFF8F3; --ground-2:#FDF2F6; --card:#FFFFFF;
  --ink:#4A3559; --ink-2:#8A7AA0; --ink-3:#B3A6C2;
  --line:#EFE1F1; --edge:#EADCF0;
  --lav-deep:#7C5BC0; --lav-wash:#F2EBFE; --pink-wash:#FDEEF4; --mint-wash:#EBF6EF;

  --crit:#E08585; --crit-wash:#FBE9E9;
  --warn:#DFA05A; --warn-wash:#FBF0E2;
  --ok:#69A97F;   --ok-wash:#E9F4ED;
  --info:#8E7BD6; --info-wash:#F1ECFD;

  --r-lg:30px; --r-md:20px; --r-sm:13px;
  --shadow:0 3px 0 var(--edge), 0 16px 30px -18px rgba(124,91,192,.42);
  --shadow-sm:0 2px 0 var(--edge), 0 8px 16px -12px rgba(124,91,192,.4);

  --font-display:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Segoe UI Variable Display","Leelawadee UI",system-ui,sans-serif;
  --font-body:"Leelawadee UI",ui-rounded,"SF Pro Text","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#231C30; --ground-2:#2A2138; --card:#302742;
    --ink:#F4EDFA; --ink-2:#B9A9CE; --ink-3:#8B7BA3;
    --line:#3E3355; --edge:#251E33;
    --lav-deep:#CBB4FA; --lav-wash:#372C4D; --pink-wash:#3D2B37; --mint-wash:#2A3A31;
    --crit:#F0A0A0; --crit-wash:#42292F;
    --warn:#EDBB7C; --warn-wash:#40332A;
    --ok:#96CFA9;   --ok-wash:#26382D;
    --info:#BCA8F5; --info-wash:#342A4B;
    --shadow:0 3px 0 var(--edge), 0 16px 30px -18px rgba(0,0,0,.7);
    --shadow-sm:0 2px 0 var(--edge), 0 8px 16px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#231C30; --ground-2:#2A2138; --card:#302742;
  --ink:#F4EDFA; --ink-2:#B9A9CE; --ink-3:#8B7BA3;
  --line:#3E3355; --edge:#251E33;
  --lav-deep:#CBB4FA; --lav-wash:#372C4D; --pink-wash:#3D2B37; --mint-wash:#2A3A31;
  --crit:#F0A0A0; --crit-wash:#42292F;
  --warn:#EDBB7C; --warn-wash:#40332A;
  --ok:#96CFA9;   --ok-wash:#26382D;
  --info:#BCA8F5; --info-wash:#342A4B;
  --shadow:0 3px 0 var(--edge), 0 16px 30px -18px rgba(0,0,0,.7);
  --shadow-sm:0 2px 0 var(--edge), 0 8px 16px -12px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --ground:#FFF8F3; --ground-2:#FDF2F6; --card:#FFFFFF;
  --ink:#4A3559; --ink-2:#8A7AA0; --ink-3:#B3A6C2;
  --line:#EFE1F1; --edge:#EADCF0;
  --lav-deep:#7C5BC0; --lav-wash:#F2EBFE; --pink-wash:#FDEEF4; --mint-wash:#EBF6EF;
  --crit:#E08585; --crit-wash:#FBE9E9;
  --warn:#DFA05A; --warn-wash:#FBF0E2;
  --ok:#69A97F;   --ok-wash:#E9F4ED;
  --info:#8E7BD6; --info-wash:#F1ECFD;
  --shadow:0 3px 0 var(--edge), 0 16px 30px -18px rgba(124,91,192,.42);
  --shadow-sm:0 2px 0 var(--edge), 0 8px 16px -12px rgba(124,91,192,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--ground);
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--lavender) 26%,transparent) 1px, transparent 0);
  background-size:22px 22px; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.page{max-width:1180px;margin:0 auto;padding:22px 18px 90px;position:relative;z-index:1}
.blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none;z-index:0}
.blob.a{width:360px;height:360px;background:var(--pink);top:-130px;right:-90px}
.blob.b{width:320px;height:320px;background:var(--mint);bottom:-120px;left:-100px}
.blob.c{width:260px;height:260px;background:var(--lavender);top:46%;left:54%;opacity:.24}
@media (prefers-color-scheme:dark){.blob{opacity:.18}}
:root[data-theme="dark"] .blob{opacity:.18}

.doodle{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;filter:url(#wobble);flex:none}
.doodle.fill{fill:currentColor;stroke-width:1.2}
.doodle.sm{width:17px;height:17px}
.doodle.lg{width:28px;height:28px}
.doodle.plain{filter:none}

/* ── topbar & nav ───────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(148deg,var(--lavender),var(--pink));color:#fff;box-shadow:0 3px 0 var(--edge)}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.2px;line-height:1.15}
.brand-sub{font-size:12.5px;color:var(--ink-2);line-height:1.2}

.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);font-size:13.5px;font-weight:600;
  color:var(--ink-2);box-shadow:var(--shadow-sm)}

.btn{font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;padding:9px 17px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .14s ease,box-shadow .14s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--edge)}
.btn.primary{background:var(--lavender);border-color:transparent;color:#fff;
  box-shadow:0 3px 0 #8E72CC,0 12px 22px -14px rgba(124,91,192,.9)}
.btn.primary:active{box-shadow:0 1px 0 #8E72CC}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.btn.tiny{padding:6px 12px;font-size:12px;border-radius:999px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--lav-deep);outline-offset:3px;border-radius:12px}

.nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.nav button{font:inherit;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink-2);box-shadow:var(--shadow-sm);
  transition:transform .14s ease,color .14s ease,background .14s ease}
.nav button:hover{transform:translateY(-2px)}
.nav button[aria-current="page"]{background:var(--lav-wash);color:var(--lav-deep);
  border-color:color-mix(in srgb,var(--lav-deep) 40%,transparent)}

/* ── hero ───────────────────────────────────────────────── */
.hero{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;box-shadow:var(--shadow);margin-bottom:20px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-50px;width:200px;height:200px;
  border-radius:50%;background:var(--pink-wash)}
.hero-in{position:relative;z-index:1}
.hi{font-family:var(--font-display);font-weight:800;font-size:clamp(25px,4.2vw,38px);
  line-height:1.22;margin:0 0 6px;text-wrap:balance;color:var(--lav-deep);
  -webkit-text-stroke:5px var(--card);paint-order:stroke fill;text-shadow:0 3px 0 var(--pink)}
.hi em{font-style:normal;color:var(--ink)}
.hero-note{color:var(--ink-2);font-size:14px;margin:0 0 18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{border-radius:var(--r-md);padding:14px 16px;border:1.5px solid transparent;cursor:pointer;
  text-align:left;font:inherit;transition:transform .14s ease}
.stat:hover{transform:translateY(-3px)}
.stat[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 30%,transparent)}
.stat b{display:block;font-family:var(--font-display);font-size:32px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;font-weight:700;display:block;margin-top:5px}
.stat.crit{background:var(--crit-wash);border-color:color-mix(in srgb,var(--crit) 40%,transparent);color:var(--crit)}
.stat.warn{background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.stat.info{background:var(--info-wash);border-color:color-mix(in srgb,var(--info) 40%,transparent);color:var(--info)}
.stat.ok{background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}

/* ── grid / cards ───────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start}
.card{grid-column:span 12;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow);position:relative}
@media (min-width:920px){.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}
.card-head h2{font-family:var(--font-display);font-size:17px;font-weight:800;margin:0;letter-spacing:-.2px}
.card-head .tag{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-2);
  background:var(--ground-2);border-radius:999px;padding:4px 11px;border:1.5px solid var(--line)}
.ic-badge{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none}
.ic-lav{background:var(--lav-wash);color:var(--lav-deep)}
.ic-pink{background:var(--pink-wash);color:#C97A9C}
.ic-mint{background:var(--mint-wash);color:var(--ok)}
@media (prefers-color-scheme:dark){.ic-pink{color:#F0AFC8}}
:root[data-theme="dark"] .ic-pink{color:#F0AFC8}

/* ── tasks ──────────────────────────────────────────────── */
.tasks{display:flex;flex-direction:column;gap:9px}
.task{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--ground-2);transition:transform .14s ease}
.task:hover{transform:translateX(3px)}
.task.is-done{opacity:.5}
.task.is-done .t-main b{text-decoration:line-through}
.tick{width:26px;height:26px;border-radius:9px;border:2px solid var(--ink-3);background:transparent;
  cursor:pointer;flex:none;display:grid;place-items:center;color:#fff;padding:0;
  transition:background .16s ease,border-color .16s ease}
.tick svg{opacity:0;width:15px;height:15px;stroke-width:2.6}
.task.is-done .tick{background:var(--ok);border-color:var(--ok)}
.task.is-done .tick svg{opacity:1}
.code{font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.6px;
  padding:5px 8px;border-radius:9px;color:#3A2B48;flex:none}
.t-main{min-width:0;flex:1;cursor:pointer}
.t-main b{display:block;font-size:14.5px;font-weight:700;line-height:1.35}
.t-main small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.due{text-align:right;flex:none;font-size:11.5px;color:var(--ink-2);line-height:1.35}
.due strong{display:block;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.badge{font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;flex:none;white-space:nowrap}
.b-crit{background:var(--crit-wash);color:var(--crit)}
.b-warn{background:var(--warn-wash);color:var(--warn)}
.b-info{background:var(--info-wash);color:var(--info)}
.b-ok{background:var(--ok-wash);color:var(--ok)}
.b-mute{background:var(--ground-2);color:var(--ink-3)}
@media (max-width:640px){
  .task{flex-wrap:wrap}
  .t-main{flex:1 1 100%;order:3}
  .due{order:4;margin-left:auto}
}

.empty{text-align:center;color:var(--ink-2);font-size:14px;padding:30px 10px;line-height:1.7}
.empty svg{display:block;margin:0 auto 10px;color:var(--lavender);width:38px;height:38px}

/* ── calendar ───────────────────────────────────────────── */
.cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cal-nav h3{font-family:var(--font-display);font-size:18px;font-weight:800;margin:0 auto 0 0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal .dow{font-size:11px;font-weight:800;color:var(--ink-3);padding-bottom:4px}
.day{min-height:56px;border-radius:12px;display:flex;flex-direction:column;align-items:center;
  padding:5px 2px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-2);border:1.5px solid transparent}
.day.pad{visibility:hidden}
.day.wknd{color:var(--ink-3);background:var(--ground-2)}
.day.holiday{background:var(--pink-wash);color:#C4708F}
.day.today{background:var(--lavender);color:#fff;font-weight:800;box-shadow:0 3px 0 #8E72CC}
.day.has{border-color:color-mix(in srgb,var(--lav-deep) 40%,transparent)}
.dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.dots i{width:7px;height:7px;border-radius:50%;display:block}
.legend{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:13px;border-top:1.5px dashed var(--line)}
.legend div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.legend b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;min-width:26px}
.legend i{width:9px;height:9px;border-radius:50%;flex:none}

/* ── clients ────────────────────────────────────────────── */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
.client{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--ground-2);cursor:pointer;text-align:left;
  font:inherit;color:inherit;transition:transform .14s ease,box-shadow .14s ease}
.client:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.client[aria-pressed="true"]{border-color:var(--lav-deep);box-shadow:0 0 0 3px var(--lav-wash)}
.av{width:36px;height:36px;border-radius:13px;display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-weight:800;font-size:12.5px;color:#3A2B48}
.client-n{min-width:0;flex:1}
.client-n b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-n small{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cnt{font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--card);
  border:1.5px solid var(--line);color:var(--ink-2);flex:none}
.cnt.hot{background:var(--crit-wash);color:var(--crit);border-color:transparent}

/* ── forms ──────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field > label{font-size:12.5px;font-weight:800;color:var(--ink-2);letter-spacing:.2px}
.field .hint{font-size:11.5px;color:var(--ink-3);line-height:1.5}
input[type=text],input[type=number],input[type=date],select,textarea{
  font:inherit;font-size:14.5px;color:var(--ink);background:var(--ground-2);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;width:100%;
  transition:border-color .14s ease,background .14s ease}
input:focus,select:focus,textarea:focus{background:var(--card);border-color:var(--lavender);outline:none}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:70px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 13px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--ground-2);font-size:13px;font-weight:700;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.chk input{accent-color:var(--lav-deep);width:16px;height:16px;margin:0;cursor:pointer}
.chk:has(input:checked){background:var(--lav-wash);border-color:var(--lav-deep);color:var(--lav-deep)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches label{width:34px;height:34px;border-radius:12px;cursor:pointer;border:3px solid transparent;
  display:grid;place-items:center;transition:transform .14s ease}
.swatches label:hover{transform:scale(1.1)}
.swatches input{position:absolute;opacity:0;width:0;height:0}
.swatches label:has(input:checked){border-color:var(--lav-deep)}

/* ── modal ──────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(74,53,89,.42);backdrop-filter:blur(4px);
  z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.overlay[hidden]{display:none}
.modal{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 50px -20px rgba(74,53,89,.55);width:100%;max-width:620px;padding:24px 26px;
  margin:auto;position:relative}
.modal h3{font-family:var(--font-display);font-size:19px;font-weight:800;margin:0 0 4px}
.modal .sub{font-size:13px;color:var(--ink-2);margin:0 0 18px}
.modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--ground-2);cursor:pointer;color:var(--ink-2);
  display:grid;place-items:center;font-size:18px;font-weight:800;line-height:1;padding:0}
.modal-foot{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1.5px dashed var(--line)}
.modal-foot .spacer{margin-left:auto}

/* ── filename builder ───────────────────────────────────── */
.pattern{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:13px;border-radius:var(--r-md);
  background:var(--ground-2);border:1.5px dashed var(--line);margin-bottom:14px}
.tok{font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px}
.tok.k1{background:var(--lav-wash);color:var(--lav-deep)}
.tok.k2{background:var(--pink-wash);color:#C4708F}
.tok.k3{background:var(--mint-wash);color:var(--ok)}
.tok.k4{background:var(--warn-wash);color:var(--warn)}
.tok.k5{background:var(--info-wash);color:var(--info)}
.sep{color:var(--ink-3);font-weight:800}
@media (prefers-color-scheme:dark){.tok.k2{color:#F0AFC8}}
:root[data-theme="dark"] .tok.k2{color:#F0AFC8}

.fname{display:flex;align-items:center;gap:11px;padding:14px;border-radius:var(--r-md);
  background:var(--lav-wash);border:1.5px solid color-mix(in srgb,var(--lav-deep) 30%,transparent);
  margin-top:4px}
.fname code{flex:1;font-family:var(--font-body);font-size:13.5px;font-weight:800;
  color:var(--lav-deep);word-break:break-all;line-height:1.5}
.folder-path{font-size:12px;color:var(--ink-2);margin-top:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.folder-path b{color:var(--ink);font-weight:700}

.files{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto}
.file{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--ground-2)}
.file span.n{font-size:12.5px;font-weight:600;word-break:break-all;line-height:1.45;flex:1}

/* ── figures / reconcile ────────────────────────────────── */
.rec{display:flex;flex-direction:column;gap:10px}
.rec-row{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:12px 14px;
  border-radius:var(--r-md);background:var(--ground-2);border:1.5px solid var(--line)}
.rec-row .lbl{font-size:13.5px;font-weight:700}
.rec-row .src{font-size:11.5px;color:var(--ink-2);grid-column:1}
.rec-row .val{grid-row:1/3;align-self:center;text-align:right;font-variant-numeric:tabular-nums}
.rec-row .val b{display:block;font-size:14.5px;font-weight:800}
.rec-row .val small{font-size:11.5px;font-weight:700}
.d-ok small{color:var(--ok)} .d-bad small{color:var(--crit)} .d-wait small{color:var(--ink-3)}

.gauge-nums{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:11px;gap:12px}
.gauge-nums span{display:block;font-size:12px;color:var(--ink-2);font-weight:600}
.gauge-nums b{font-family:var(--font-display);font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.track{height:22px;border-radius:999px;background:var(--ground-2);border:1.5px solid var(--line);position:relative;overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--lavender));transition:width .4s ease}
.fill.bad{background:linear-gradient(90deg,var(--warn),var(--crit))}
.thresh{position:absolute;top:-7px;bottom:-7px;width:3px;border-radius:2px;background:var(--crit)}
.gauge-cap{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin-top:9px;font-weight:600;gap:10px}
.verdict{margin-top:13px;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:var(--r-md);font-size:13px;font-weight:700;line-height:1.55}
.verdict.good{background:var(--ok-wash);color:var(--ok)}
.verdict.bad{background:var(--crit-wash);color:var(--crit)}
.verdict.mute{background:var(--ground-2);color:var(--ink-2)}

.tbl-wrap{overflow-x:auto;border-radius:var(--r-md);border:1.5px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
th,td{padding:10px 13px;text-align:right;border-bottom:1.5px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
thead th{background:var(--lav-wash);color:var(--lav-deep);font-weight:800;font-size:12px}
thead th:first-child{background:var(--lav-wash)}
tbody tr:last-child td{border-bottom:none}
tbody tr.total td{font-weight:800;background:var(--ground-2)}
tbody tr.total td:first-child{background:var(--ground-2)}
td.num{font-variant-numeric:tabular-nums}

/* ── misc ───────────────────────────────────────────────── */
.note{padding:13px 15px;border-radius:var(--r-md);font-size:13px;line-height:1.6;
  display:flex;gap:10px;align-items:flex-start}
.note.warn{background:var(--warn-wash);color:var(--warn)}
.note.info{background:var(--lav-wash);color:var(--lav-deep)}
.note b{font-weight:800}
.stack{display:flex;flex-direction:column;gap:14px}
.inline{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.hol-list{display:flex;flex-wrap:wrap;gap:7px}
.hol{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:var(--pink-wash);color:#C4708F;font-size:12px;font-weight:700}
.hol button{background:none;border:none;cursor:pointer;color:inherit;font-size:15px;line-height:1;padding:0;opacity:.6}
.hol button:hover{opacity:1}
@media (prefers-color-scheme:dark){.hol{color:#F0AFC8}}
:root[data-theme="dark"] .hol{color:#F0AFC8}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
  background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:999px;font-size:14px;
  font-weight:700;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);z-index:80;
  transition:transform .3s cubic-bezier(.2,1.3,.4,1);pointer-events:none;display:flex;align-items:center;gap:9px}
.toast.show{transform:translateX(-50%) translateY(0)}

.foot{text-align:center;margin-top:32px;color:var(--ink-2);font-size:12.5px;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;line-height:1.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ═══════════════════════════════════════════════════════════
   mimo.css — น้องมิโม่ ผู้ช่วยประจำ ARISA SMART TAX & TECH
   ═══════════════════════════════════════════════════════════ */

:root{
  --m-hair:#D9BEF7;   --m-hair-d:#C0A0EC; --m-hair-l:#EEE1FC;
  --m-pom:#F7D7E4;    --m-pom-l:#FCECF3;
  --m-bow:#BEE8CE;    --m-bow-d:#9DD8B3;
  --m-skin:#FFF0E4;   --m-skin-d:#F6D9C6;
  --m-eye:#5E3496;    --m-eye-l:#9A6FD4;
  --m-blush:#F7B4C7;
  --m-cream:#FFFAF4;  --m-cream-d:#EFE0D2;
  --m-pur:#C9A9F0;    --m-pur-d:#A87FE1;
  --m-clip:#F3D0DE;   --m-teal:#6FC3AE;
  --m-mouth:#C2607F;
}

.mimo{
  position:fixed; right:20px; bottom:18px; z-index:70;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  transition:transform 3.2s cubic-bezier(.42,0,.58,1), opacity .35s ease;
}
.mimo[hidden]{display:none}
@media (max-width:640px){ .mimo{right:12px; bottom:12px} }

.mimo-stage{
  width:104px; cursor:pointer; background:none; border:none; padding:0;
  display:block; transition:transform .3s ease;
  filter:drop-shadow(0 10px 14px rgba(124,91,192,.28));
}
@media (max-width:640px){ .mimo-stage{width:78px} }
.mimo-stage svg{width:100%; height:auto; display:block; overflow:visible}
.mimo-stage:active{transform:scale(.94)}

/* ── ขยับ ─────────────────────────────────────────────── */
.m-body{animation:m-bob 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom center}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}

.m-eye{animation:m-blink 5.4s infinite; transform-box:fill-box; transform-origin:center}
@keyframes m-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}

/* ── ผม: จุดหมุนอยู่ตรงที่ผมติดหัว ─────────────────────── */
.m-lock,.m-lock-r,.m-wisp,.m-wisp-r,.m-pom,.m-pom-r,.m-hairback{transform-box:view-box}
.m-hairback{transform-origin:60px 28px}
.m-lock   {transform-origin:31px 53px}
.m-lock-r {transform-origin:89px 53px}
.m-wisp   {transform-origin:34px 48px}
.m-wisp-r {transform-origin:86px 48px}
.m-pom    {transform-origin:32px 38px}
.m-pom-r  {transform-origin:88px 38px}

.m-lock,.m-lock-r{animation:m-sway 3.4s ease-in-out infinite}
.m-wisp,.m-wisp-r{animation:m-sway-wisp 2.9s ease-in-out infinite}
.m-pom,.m-pom-r  {animation:m-sway 3.4s ease-in-out infinite}
.m-lock-r,.m-pom-r{animation-delay:-1.7s}
.m-wisp-r{animation-delay:-1.45s}
@keyframes m-sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes m-sway-wisp{0%,100%{transform:rotate(-3.4deg)}50%{transform:rotate(3.4deg)}}

/* เดิน — ผมสะบัดตามจังหวะก้าว ปลายผมตามหลังนิดหน่อย */
.mimo.is-walking .m-lock   {animation:m-flow .6s ease-in-out infinite -.08s}
.mimo.is-walking .m-lock-r {animation:m-flow .6s ease-in-out infinite -.22s}
.mimo.is-walking .m-wisp   {animation:m-flow-tip .6s ease-in-out infinite -.14s}
.mimo.is-walking .m-wisp-r {animation:m-flow-tip .6s ease-in-out infinite -.3s}
.mimo.is-walking .m-hairback{animation:m-flow-back .6s ease-in-out infinite -.12s}
.mimo.is-walking .m-pom    {animation:m-pom-bounce .3s ease-in-out infinite}
.mimo.is-walking .m-pom-r  {animation:m-pom-bounce .3s ease-in-out infinite -.06s}
@keyframes m-flow      {0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes m-flow-tip  {0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes m-flow-back {0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
@keyframes m-pom-bounce{0%,100%{transform:translateY(0) rotate(-2.5deg)}
                        50%{transform:translateY(1.8px) rotate(2.5deg)}}

/* ── ข้อต่อ: ไหล่/ข้อศอก · สะโพก/หัวเข่า ─────────────── */
.m-arm-l,.m-arm-r,.m-fore-l,.m-fore-r,
.m-leg-l,.m-leg-r,.m-shin-l,.m-shin-r{transform-box:view-box}
.m-arm-l {transform-origin:44px 96px}   /* ไหล่ซ้าย   */
.m-fore-l{transform-origin:36px 108px}  /* ข้อศอกซ้าย */
.m-arm-r {transform-origin:76px 96px}   /* ไหล่ขวา    */
.m-fore-r{transform-origin:88px 104px}  /* ข้อศอกขวา  */
.m-leg-l {transform-origin:50px 125px}  /* สะโพกซ้าย  */
.m-shin-l{transform-origin:50px 142px}  /* หัวเข่าซ้าย */
.m-leg-r {transform-origin:70px 125px}
.m-shin-r{transform-origin:70px 142px}

/* ยืนเฉย ๆ — หายใจ แกว่งแขนเบา ๆ ถ่ายน้ำหนักขา */
.m-arm-l {animation:m-idle-armL 3.8s ease-in-out infinite}
.m-fore-l{animation:m-idle-foreL 3.8s ease-in-out infinite}
.m-arm-r {animation:m-idle-armR 3.8s ease-in-out infinite -1.3s}
.m-fore-r{animation:m-idle-foreR 3.8s ease-in-out infinite -1.3s}
.m-leg-l {animation:m-idle-legL 3.8s ease-in-out infinite}
.m-leg-r {animation:m-idle-legR 3.8s ease-in-out infinite}
@keyframes m-idle-armL {0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2.4deg)}}
@keyframes m-idle-foreL{0%,100%{transform:rotate(1.6deg)}50%{transform:rotate(-2.4deg)}}
@keyframes m-idle-armR {0%,100%{transform:rotate(2.6deg)}50%{transform:rotate(-3.4deg)}}
@keyframes m-idle-foreR{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(4.5deg)}}
@keyframes m-idle-legL {0%,100%{transform:rotate(0)}     50%{transform:rotate(1.4deg)}}
@keyframes m-idle-legR {0%,100%{transform:rotate(0)}     50%{transform:rotate(-1.4deg)}}

/* เดิน — ขาสลับก้าว เข่างอ แขนแกว่งสวนทาง ตัวเด้ง 2 จังหวะต่อก้าว */
.mimo.is-walking .m-leg-l {animation:m-walk-thigh .6s ease-in-out infinite}
.mimo.is-walking .m-leg-r {animation:m-walk-thigh .6s ease-in-out infinite -.3s}
.mimo.is-walking .m-shin-l{animation:m-walk-shin  .6s ease-in-out infinite}
.mimo.is-walking .m-shin-r{animation:m-walk-shin  .6s ease-in-out infinite -.3s}
.mimo.is-walking .m-arm-r {animation:m-walk-arm   .6s ease-in-out infinite}
.mimo.is-walking .m-fore-r{animation:m-walk-fore  .6s ease-in-out infinite}
.mimo.is-walking .m-arm-l {animation:m-walk-armL  .6s ease-in-out infinite -.3s}
.mimo.is-walking .m-fore-l{animation:m-walk-foreL .6s ease-in-out infinite -.3s}
.mimo.is-walking .m-body  {animation:m-bob .3s ease-in-out infinite}
/* ตัวหันหน้าเข้าหาคนดู ถ้าแกว่งขาซ้าย-ขวาจะไขว้กัน จึงใช้ยกเข่าขึ้น-ลงแทน */
@keyframes m-walk-thigh{0%,100%{transform:translateY(0) rotate(4deg)}
                        50%{transform:translateY(-7px) rotate(-7deg)}}
@keyframes m-walk-shin {0%,100%{transform:rotate(0)}25%{transform:rotate(16deg)}
                        50%{transform:rotate(34deg)}80%{transform:rotate(12deg)}}
@keyframes m-walk-arm  {0%,100%{transform:rotate(-15deg)}50%{transform:rotate(13deg)}}
@keyframes m-walk-fore {0%,100%{transform:rotate(-12deg)}50%{transform:rotate(7deg)}}
@keyframes m-walk-armL {0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
@keyframes m-walk-foreL{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* โบกมือ — ยกแขนขวาขึ้นค้าง แล้วสะบัดข้อศอก */
.mimo.is-waving .m-arm-r {animation:m-wave-arm 2.1s ease-in-out}
.mimo.is-waving .m-fore-r{animation:m-wave-fore .36s ease-in-out 5 .18s}
@keyframes m-wave-arm {0%,100%{transform:rotate(0)}12%,88%{transform:rotate(-34deg)}}
@keyframes m-wave-fore{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(18deg)}}

/* ดีใจ — กระโดดพร้อมชูแขน หดขา */
.mimo.is-happy .m-body  {animation:m-jump .52s ease-out 2}
.mimo.is-happy .m-arm-l {animation:m-cheerL .52s ease-out 2}
.mimo.is-happy .m-arm-r {animation:m-cheerR .52s ease-out 2}
.mimo.is-happy .m-leg-l,
.mimo.is-happy .m-leg-r {animation:m-tuck .52s ease-out 2}
.mimo.is-happy .m-shin-l,
.mimo.is-happy .m-shin-r{animation:m-tuck-shin .52s ease-out 2}
@keyframes m-jump     {0%,100%{transform:translateY(0)}38%{transform:translateY(-14px)}}
@keyframes m-cheerL   {0%,100%{transform:rotate(0)}38%{transform:rotate(26deg)}}
@keyframes m-cheerR   {0%,100%{transform:rotate(0)}38%{transform:rotate(-28deg)}}
@keyframes m-tuck     {0%,100%{transform:rotate(0)}38%{transform:rotate(-16deg)}}
@keyframes m-tuck-shin{0%,100%{transform:rotate(0)}38%{transform:rotate(34deg)}}

.m-spark{animation:m-twinkle 2.1s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.m-spark-2{animation-delay:-.7s} .m-spark-3{animation-delay:-1.4s}
@keyframes m-twinkle{0%,100%{transform:scale(.55);opacity:.35}50%{transform:scale(1);opacity:1}}

/* ── บอลลูนข้อความ ────────────────────────────────────── */
.mimo-bubble{
  max-width:250px; background:var(--card); border:1.5px solid var(--line);
  border-radius:20px 20px 6px 20px; padding:12px 14px 10px; box-shadow:var(--shadow);
  font-size:13px; line-height:1.55; font-weight:600; color:var(--ink);
  transform-origin:bottom right; position:relative;
  animation:m-pop .34s cubic-bezier(.2,1.4,.4,1);
}
.mimo-bubble[hidden]{display:none}
@keyframes m-pop{from{transform:scale(.5) translateY(10px);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:640px){ .mimo-bubble{max-width:min(230px,62vw); font-size:12.5px} }

.mimo-bubble.crit{background:var(--crit-wash);border-color:color-mix(in srgb,var(--crit) 45%,transparent);color:var(--crit)}
.mimo-bubble.warn{background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}
.mimo-bubble.good{background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.mimo-bubble.info{background:var(--lav-wash);border-color:color-mix(in srgb,var(--lav-deep) 40%,transparent);color:var(--lav-deep)}

.mimo-bubble .m-go{
  display:block; margin-top:8px; font:inherit; font-size:12px; font-weight:800;
  background:var(--card); color:var(--lav-deep); border:1.5px solid var(--lav-deep);
  border-radius:999px; padding:5px 13px; cursor:pointer; width:100%;
}
.mimo-bubble .m-go:hover{background:var(--lav-wash)}
.mimo-foot{display:flex; gap:10px; margin-top:7px; font-size:11px; font-weight:700; opacity:.72}
.mimo-foot button{background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-decoration:underline}
.mimo-foot button:hover{opacity:1}

.mimo-toggle{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--lav-wash);border:1.5px solid color-mix(in srgb,var(--lav-deep) 25%,transparent)}
.mimo-toggle .m-mini{width:44px;flex:none}
.mimo-toggle .m-mini svg{width:100%;height:auto;display:block}
.mimo-toggle b{display:block;font-size:13.5px}
.mimo-toggle small{display:block;font-size:11.5px;color:var(--ink-2)}
.mimo-toggle .grow{flex:1;min-width:0}

@media (prefers-reduced-motion:reduce){
  .mimo{transition:none}
  .mimo *,.mimo-bubble{animation:none!important}
}


/* ═══════════════════════════════════════════════════════════════════
   extra.css — สไตล์เฉพาะเวอร์ชันคลาวด์ (ต่อท้าย styles.css + mimo.css)
   ═══════════════════════════════════════════════════════════════════ */

/* ── หน้าเข้าสู่ระบบ ──────────────────────────────────────────── */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 18px}
.gate-box{width:100%;max-width:430px}
.gate-head{text-align:center;margin-bottom:20px}
.gate-mark{width:76px;height:76px;border-radius:26px;display:grid;place-items:center;margin:0 auto 12px;
  background:linear-gradient(148deg,var(--lavender),var(--pink));color:#fff;box-shadow:0 4px 0 var(--edge)}
.gate-mark svg{width:40px;height:40px}
.gate-head h1{font-family:var(--font-display);font-weight:800;font-size:30px;margin:0 0 4px;
  color:var(--lav-deep);-webkit-text-stroke:5px var(--ground);paint-order:stroke fill;
  text-shadow:0 3px 0 var(--pink)}
.gate-head p{margin:0;color:var(--ink-2);font-size:14px}

.tabs{display:flex;gap:6px;background:var(--ground-2);padding:5px;border-radius:999px;
  border:1.5px solid var(--line);margin-bottom:18px}
.tabs button{flex:1;font:inherit;font-weight:800;font-size:14px;padding:9px;border-radius:999px;
  border:none;background:none;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--lav-deep);box-shadow:var(--shadow-sm)}

.gate .field label{font-size:13px}
.gate .btn{width:100%;justify-content:center;padding:12px}
.linkbtn{background:none;border:none;padding:0;font:inherit;font-size:13px;font-weight:700;
  color:var(--lav-deep);cursor:pointer;text-decoration:underline}
.gate-foot{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-2);
  display:flex;flex-direction:column;gap:8px;align-items:center}

.alert{padding:12px 15px;border-radius:var(--r-md);font-size:13.5px;line-height:1.6;
  display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-weight:600}
.alert svg{flex:none;margin-top:1px}
.alert.err{background:var(--crit-wash);color:var(--crit)}
.alert.good{background:var(--ok-wash);color:var(--ok)}
.alert.info{background:var(--lav-wash);color:var(--lav-deep)}
.alert.warn{background:var(--warn-wash);color:var(--warn)}
.alert b{font-weight:800}

/* ── แถบสถานะแพ็กเกจ ─────────────────────────────────────────── */
.planbar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-md);
  margin-bottom:18px;font-size:13.5px;font-weight:700;line-height:1.5;flex-wrap:wrap}
.planbar.locked{background:var(--warn-wash);color:var(--warn)}
.planbar.ok{background:var(--ok-wash);color:var(--ok)}
.planbar .grow{flex:1;min-width:180px}
.planbar .btn{flex:none}

/* ── การ์ดลูกค้าในหน้าทะเบียน ────────────────────────────────── */
.wsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wscard{padding:15px 16px;border-radius:var(--r-md);border:1.5px solid var(--line);
  background:var(--ground-2);display:flex;flex-direction:column;gap:10px;
  transition:transform .14s ease,box-shadow .14s ease}
.wscard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.wscard .top{display:flex;align-items:center;gap:11px}
.wscard .nm{min-width:0;flex:1}
.wscard .nm b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wscard .nm small{font-size:11.5px;color:var(--ink-2)}
.wscard .nums{display:flex;gap:7px;flex-wrap:wrap}
.demo-tag{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;
  background:var(--mint-wash);color:var(--ok)}

/* ── กล่องว่าง ────────────────────────────────────────────────── */
.blank{text-align:center;padding:34px 18px;color:var(--ink-2);font-size:14px;line-height:1.8}
.blank svg{display:block;margin:0 auto 12px;width:44px;height:44px;color:var(--lavender)}
.blank b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px;font-family:var(--font-display)}

/* ── กำลังโหลด ───────────────────────────────────────────────── */
.loading{display:flex;align-items:center;justify-content:center;gap:11px;padding:60px 20px;
  color:var(--ink-2);font-size:14px;font-weight:700}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--lav-wash);
  border-top-color:var(--lav-deep);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ── รายการสิทธิ์ ────────────────────────────────────────────── */
.grantrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--ground-2);font-size:13px}
.grantrow .who{flex:1;min-width:0}
.grantrow .who b{display:block;font-weight:700}
.grantrow .who small{color:var(--ink-2);font-size:11.5px}