/* SMITCH-BUILD 2026-10-19-ui */
/* SMITCH Studio — tool ၄ ခု (Audio · Video · Ads · Shop) ဘုံ CSS (ui-todo #80)
   ဒီဖိုင်ကို page တိုင်းက <link> နဲ့ အရင်ဖတ်ပြီး page ကိုယ်ပိုင် <style> က နောက်မှ ဖတ်တယ် — page မှာ ပြန်ရေးရင် page က နိုင်တယ်။
   Sidebar menu · ⚙ Settings drawer · ခလုတ် · field · panel တွေကို ဒီမှာပဲ ပြင်ပါ (page ၄ ခုမှာ လိုက်ကူးစရာ မလိုတော့ဘူး)။ */

/* Color system — "Graphite + Blue action" (ui-todo #93, 2026-10-10)
   neutral = cool graphite (အပြာ ၂% ပဲ) · ပုံပြကွက် = gray စစ်စစ် (--well — client ပုံ အရောင်မှန်) · accent တစ်ခုတည်း = အပြာ (လုပ်ဆောင်ချက်) ·
   ရွှေ = ပိုက်ဆံကုန် · အစိမ်း = ပြီး · အနီ (--danger) = error ပဲ · SMITCH အနီ (--brand) = logo ပဲ။ အချိုး neutral 85 · အပြာ tint 13 · အပြာ solid ≤2
   အမှောင် → အလင်း: canvas → panel → အဆင့် panel (အပြာနု) → ထုတ်မယ် ခလုတ် (အလင်း + အရောင် အပြည့်ဆုံး) — မျက်လုံးက အဲ့အစဉ်အတိုင်း သွား
   မြန်မာစာ = --ink60 အထက်ပဲ (8:1)၊ --ink30 (4.9:1) = ဂဏန်း / English mono ပဲ */
:root{
  --base:#0F1115; --side:#0B0D11; --surface:#16191F; --surface2:#1D2129; --field:#0B0D11; --well:#161616;
  --ink:#EDF0F5; --ink60:#A9B1BF; --ink30:#7F8898;
  --line:#2A2F3A; --line2:#3A4150;
  --accent:#2E6BE6; --accent-h:#3D7BF2; --accent-p:#245BCB; --accent-t:#7AAAFF;
  --accent-bg:#17243B; --accent-ln:#274A80; --tinta:rgba(46,107,230,.14); --glowa:rgba(46,107,230,.24);
  --danger:#FF6B78; --danger-bg:#2E1519; --danger-ln:#5A2830; --tintd:rgba(255,107,120,.12);
  --brand:#FF5A5A;
  --gold:#E9B949; --gold-ln:#8A6D2A; --tintg:rgba(233,185,73,.12);
  --live:#3DD68C; --live-ln:rgba(61,214,140,.42);
  --t-audio:#9D8CFF; --t-video:#2DD4BF; --t-ads:#F472B6; --t-shop:#FB923C; --t-explainer:#A3E635;   /* tool အရောင် — menu icon · Dashboard ဇယား ပဲ */
  /* နာမည်ဟောင်း — page တွေထဲက var(--magenta) / --tintm / --glow က လုပ်ဆောင်ချက် (ခလုတ် · ရွေးထား · focus) မို့ အပြာကို ချိတ်
     (error / ဖျက် နေရာတွေကို --danger ကို ပြောင်းပြီးပြီ) */
  --magenta:var(--accent); --glow:var(--glowa); --tintm:var(--tinta);
  --display:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --my:'Noto Sans Myanmar','Padauk',sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
html,body{margin:0;padding:0}
body{
  background-color:var(--base); color:var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:40px 40px;
  font-family:var(--my); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1360px;margin:0 auto;padding:0 20px 80px;container-type:inline-size}

/* ---------- masthead ---------- */
.masthead{padding:30px 0 20px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink60)}
.title{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.8vw,44px);line-height:1;letter-spacing:-.03em;margin:10px 0 6px}
.title em{font-style:normal;color:var(--brand)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.45)}
.panel + .panel{margin-top:16px}
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.plabel{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink60)}
.pnote{font-family:var(--mono);font-size:12px;color:var(--ink30)}
.pbody{padding:18px}
.phead.click{cursor:pointer;user-select:none}
.phead.click:hover .plabel{color:var(--accent-t)}
.caret{display:inline-block;font-size:11px;color:var(--ink30);transition:transform .18s;margin-left:3px}
.panel.shut .caret{transform:rotate(-90deg)}
.panel.shut .pbody{display:none}
.panel.shut .phead{border-bottom:none;border-radius:15px}
@media(prefers-reduced-motion:reduce){.caret{transition:none}}

label.f{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink60);margin:0 0 6px}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
input[type=text],input[type=search],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;font-family:var(--my);font-size:14px;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-h);box-shadow:0 0 0 3px var(--tinta)}
textarea{resize:vertical;line-height:1.9}
.hint{font-size:12px;color:var(--ink60);margin:6px 0 0;line-height:1.6}
.row{display:flex;gap:10px}
.row > *{flex:1;min-width:0}

/* ---------- buttons ---------- */
button{font-family:var(--display);cursor:pointer;border-radius:50px;transition:.18s ease}
.btn{background:var(--surface2);color:var(--ink);border:1px solid var(--line);padding:11px 18px;font-size:14px;font-weight:500}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{background:var(--surface2);color:var(--ink30);border-color:var(--line);cursor:not-allowed}
.btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff;width:100%;padding:14px;font-size:16px;box-shadow:0 8px 24px var(--glow);font-family:var(--my)}
.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h);transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.btn-primary:disabled{background:var(--surface2);color:var(--ink30);box-shadow:none;transform:none;border-color:var(--line);cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);padding:8px 13px;font-size:13px;font-family:var(--my)}
.btn-ghost:hover{border-color:var(--ink30);background:var(--surface2)}
.btn-ghost:disabled{color:var(--ink30);cursor:not-allowed;background:transparent}
.btn-sm{padding:6px 11px;font-size:12px}
/* ခလုတ် အဓိပ္ပာယ် (ui-todo #86) — အနီ (.btn-primary) = screen တစ်ခုရဲ့ အဓိက ထုတ်မယ် · ရွှေ (.btn-gold) = AI ခေါ်တယ် (ပိုက်ဆံ ကုန်) · ghost = ကျန်တာ */
.btn-gold{width:100%;background:var(--tintg);color:var(--gold);border:1px solid var(--gold-ln);padding:12px;font-size:14px;font-weight:700;box-shadow:none;font-family:var(--my)}
.btn-gold:hover{background:rgba(233,185,73,.2);border-color:var(--gold);transform:translateY(-2px)}
.btn-gold:disabled{background:var(--surface2);color:var(--ink30);border-color:var(--line);box-shadow:none;transform:none;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--accent-h);outline-offset:2px}
.dl{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}

/* ---------- segmented toggle ---------- */
.segbar{display:flex;border:1px solid var(--line);border-radius:50px;overflow:hidden;margin:0 0 12px}
.segbtn{flex:1;background:transparent;border:none;border-right:1px solid var(--line);
  padding:9px 6px;font-family:var(--my);font-size:13px;color:var(--ink60);border-radius:0}
.segbtn:last-child{border-right:none}
.segbtn:hover{background:var(--surface2);color:var(--ink)}
.segbtn.on{background:var(--accent);color:#fff;font-weight:700}

/* ---------- အသိပေးစာ ---------- */
.err{background:var(--tintd);border:1px solid var(--danger);border-radius:12px;padding:12px 14px;font-size:13px;margin-top:14px;display:none;white-space:pre-wrap}
.err.on{display:block}
.ok{background:rgba(61,214,140,.1);border:1px solid var(--live-ln);border-radius:12px;padding:12px 14px;font-size:13px;margin-top:14px;display:none}
.ok.on{display:block}
.hide{display:none !important}
footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;color:var(--ink60);letter-spacing:.06em}
footer b{color:var(--brand);font-weight:700}

/* Google sign-in — masthead ညာဘက်ထောင့် */
.authbar{display:flex;justify-content:flex-end;align-items:center;gap:9px;min-height:30px;margin-bottom:8px}
.authpic{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:block}
.authname{font-family:var(--mono);font-size:11px;color:var(--ink60);
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Google login gate ---------- */
body.locked .wrap{display:none}
.gate{position:fixed;inset:0;z-index:900;background-color:var(--base);
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:40px 40px;
  display:flex;align-items:center;justify-content:center;padding:24px}
.gatebox{width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);padding:34px 30px}
.gatemark{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink60)}
.gatetitle{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:-.03em;margin:10px 0 8px}
.gatetitle em{font-style:normal;color:var(--brand)}
.gatesub{color:var(--ink60);font-size:13px;margin:0 0 22px;line-height:1.8}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--surface2);color:var(--ink);border:1px solid var(--line);
  border-radius:50px;padding:14px;font-size:14px;cursor:pointer;
  font-family:var(--my);transition:.18s ease}
.gbtn:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.gbtn:disabled{background:var(--surface2);color:var(--ink30);box-shadow:none;cursor:default}
.gbtn svg{width:18px;height:18px;flex:0 0 auto}
.gateerr{margin:16px 0 0;font-size:12.5px;color:var(--danger);line-height:1.8}
.gswitch{display:block;margin:12px auto 0;background:none;border:0;color:var(--ink60);font-family:var(--my);font-size:12.5px;text-decoration:underline;cursor:pointer}   /* approve စောင့် — အခြား account (ui-todo #89) */

/* ---------- ⚙ Settings drawer (API Key · Model · Webhook) — smitch.js က ဖွင့်/ပိတ် ----------
   page ရဲ့ .wrap အပြင်မှာ ထားရမယ် — .wrap မှာ container-type ရှိလို့ အထဲမှာဆို position:fixed က viewport နဲ့ မချိန်ဘူး */
.drawer{position:fixed;inset:0;z-index:890}
.dscrim{position:absolute;inset:0;background:rgba(5,7,10,.62)}
.dpanel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--base);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.5);animation:din .18s ease}
@keyframes din{from{transform:translateX(30px);opacity:.4}}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dhead b{font-family:var(--display);font-size:18px}
.dbody{flex:1;overflow:auto;padding:14px 16px 40px}
body.dopen{overflow:hidden}
.fgh{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line);padding-top:14px;margin:18px 0 12px}
.pcx{flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink60);font-size:14px}
.pcx:hover{border-color:var(--danger);color:var(--danger)}
/* ⚙ Settings ▸ Users (owner ပဲ — smitch.js mountUsers, ui-todo #89) */
.urow{display:flex;gap:8px;margin-bottom:12px}
.urow input{flex:1;min-width:0;padding:8px 12px;font-size:13px}
.ulist{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ulist .hint{margin:0 0 6px}
.uitem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.uwho{flex:1;min-width:0;line-height:1.35}
.uwho b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uwho small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink30);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ust{flex:0 0 auto;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--ink60);white-space:nowrap}
.ust.s-approved{color:var(--live);border-color:var(--live-ln)}
.ust.s-pending{color:var(--gold);border-color:var(--gold-ln)}
.ust.s-blocked{color:var(--danger);border-color:var(--danger-ln)}
/* ⑦ SMITCH credit — row ရဲ့ အောက်တန်း: ဒီလ သုံးစွဲမှု · Credit $ · Approve / ပိတ် (ui-todo #90) */
.uctl{flex:1 0 100%;display:flex;align-items:center;gap:8px;padding-top:7px;border-top:1px dashed var(--line)}
.uuse{flex:1;min-width:0;font-family:var(--mono);font-size:11px;color:var(--ink60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucred{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--ink60);white-space:nowrap;margin:0}
.ucred input{width:62px;padding:4px 6px;font-size:12px}


/* ---------- Tool layout (ui-todo #82) — Top bar · အသိပေးစာ · အဆင့် panel (①②③ အလိုလို) · ထုတ်မယ် ----------
   Shop Content ရဲ့ ပုံစံကို စံထားတယ်။ page မှာ class တွေ ထည့်ရုံ — .topbar / .vtabs / .gear · .grid.numsteps + .panel.step · aside > .rail > .rsteps + .gopanel */
/* top bar — tool နာမည် · view / mode tab · login · ⚙ (scroll လုပ်လည်း အပေါ်မှာ ကပ်) */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:8px 0;background:var(--base)}
.vtabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px}
.vtab{background:none;border:0;border-radius:9px;padding:6px 13px;font-family:var(--my);font-size:13.5px;color:var(--ink60);display:flex;gap:7px;align-items:center}
.vtab:hover{color:var(--ink)}
.vtab b{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--surface2);color:var(--ink60);border-radius:10px;padding:0 6px;font-variant-numeric:tabular-nums}
.vtab[aria-selected="true"]{background:var(--surface2);color:var(--ink)}
.vtab[aria-selected="true"] b{background:var(--accent);color:#fff}
.gear{margin-left:auto;width:38px;height:38px;padding:0;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink60);font-size:17px;display:grid;place-items:center}
.gear:hover{color:var(--ink);border-color:var(--ink30)}
@media(max-width:760px){.topbar{position:static}.topbar.tfull{position:sticky}}   /* ဖုန်း App bar (ui-todo #157) — tfull ပဲ ကပ်
/* top bar ကပ်နေလို့ scrollIntoView(start) က အောက်မှာ မဝင်အောင် */
html{scroll-padding-top:84px}
@media(max-width:760px){html{scroll-padding-top:60px}}
.topbar.tfull{padding:12px 0;margin-bottom:8px;border-bottom:1px solid var(--line)}
.tbtitle{margin:0 6px 0 0;font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
.tbtitle em{font-style:normal;color:inherit}   /* SMITCH အနီက logo ပဲ (ui-todo #93) */
.tbtitle .tbhot{color:var(--brand)}            /* tool ခေါင်းစဉ် ပထမစာလုံး အနီ (Video · Audio · Ads · Shop · AI — ui-todo #151) */
.topbar .authbar{margin:0 0 0 auto;min-height:0}
.topbar .authbar:not(.hide) + .gear{margin-left:0}
/* ကုန်ကျစရိတ် chip (ui-todo #88) — ညာဘက်ကပ်၊ နောက်က login / ⚙ က အဲ့ဘေးမှာ */
.costchip{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink60);background:var(--surface);border:1px solid var(--line);border-radius:50px;padding:5px 11px;white-space:nowrap;cursor:help}
.topbar .costchip ~ .authbar, .topbar .costchip ~ .gear{margin-left:0}
@media(max-width:760px){.costchip{font-size:10.5px;padding:4px 9px}}
/* ခလုတ်ပေါ် ခန့်မှန်းစျေး — SM.cost.mark(el, usd) က data-est ထည့်တယ် */
.btn-gold[data-est]::after, .btn-primary[data-est]::after{content:"  ≈ " attr(data-est);font-family:var(--mono);font-size:.78em;font-weight:400;opacity:.8;white-space:nowrap}
/* ဖုန်း — နာမည် · login · ⚙ က အပေါ်တန်း၊ mode / view tab က အောက်တန်း အပြည့် */
@media(max-width:760px){.topbar.tfull .vtabs{order:3;flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none}.topbar.tfull .vtab{flex:1 0 auto;justify-content:center;padding:6px 10px;white-space:nowrap}}
/* error / ok — မျက်နှာပြင် အပေါ်အလယ် (box မှာ data-note ထည့်ရင် smitch.js က ဒီထဲ ရွှေ့တယ်)။
   wrapper က .nwrap — .note က Audio / Video မှာ ရွှေရောင် info box အဖြစ် သုံးပြီးသားမို့ နာမည်မတိုက်အောင် */
.notes{position:fixed;z-index:895;top:14px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));display:grid;gap:8px;pointer-events:none}
.nwrap{position:relative;pointer-events:auto}
.notes .err,.notes .ok{margin-top:0;padding-right:44px;box-shadow:0 14px 34px rgba(0,0,0,.55);max-height:40vh;overflow:auto}
.notes .err{background:var(--danger-bg)} .notes .ok{background:#12291F}
.nx{position:absolute;top:8px;right:8px;display:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--ink);font-size:16px;line-height:28px}
.nwrap:has(.on) .nx{display:block}
/* အဆင့် နံပါတ် — .numsteps ထဲက မြင်ရတဲ့ .step panel တွေကို အစဉ်လိုက် ① ② ③ (ဖျောက်ထားတဲ့ panel က နံပါတ် မယူဘူး) */
@counter-style circled{system:fixed;symbols:"①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨"}
.numsteps{counter-reset:step}
.step{counter-increment:step}
.step > .phead .plabel::before{content:counter(step, circled);margin-right:.45em;font-size:1.15em;color:var(--accent-t)}
/* အုပ်စု panel (ui-todo #84) — .grp ထဲမှာ sub panel (မူရင်း section · ID မပြောင်း) တွေကို ခလုတ်တန်း (.subbar) နဲ့ တစ်ခုစီ ပြ။
   .rail[data-accordion] ထဲက .acc panel တစ်ခု ဖွင့်ရင် ကျန်တာ ပိတ် — smitch.js က ချိတ်တယ် */
.grp > .phead .plabel, .acc > .phead .plabel{flex:0 0 auto}
.acc > .phead .pnote{display:flex;align-items:baseline;gap:4px;min-width:0}
.acc > .phead .pnote > span:not(.caret){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc > .phead .caret{flex:0 0 auto}
.subbar{margin-bottom:16px}
.grp .panel{background:none;border:0;border-radius:0;box-shadow:none}
.grp .panel + .panel{margin-top:0}
.grp .panel > .phead{display:none}
.grp .panel > .pbody{padding:0}
.grp .panel.shut > .pbody{display:block}
.grp .panel:not(.cur){display:none}
/* ညာဘက်တန်း — scroll ဆင်းလည်း ကပ်နေ။ အဆင့်တွေ (.rsteps) ရှည်ရင် သူ့ဘာသာ scroll၊ "ထုတ်မယ်" (.gopanel) က အဲ့အောက်မှာ
   သီးသန့်မို့ ဘယ်အဆင့်ကိုမှ မဖုံးဘဲ အမြဲမြင်ရ (အရင် sticky-bottom က ① ဖွင့်ထားရင် ②③ ကို ဖုံးလို့ ပြောင်းတာ) */
aside:has(> .rail){align-self:stretch}
.rail{position:sticky;top:var(--railtop,74px);max-height:calc(100vh - var(--railtop,74px) - 26px);display:flex;flex-direction:column}
.rsteps{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -14px;padding:0 14px 14px;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}   /* အောက်ခြေ မှိန် = ဆက်ရှိသေးတယ် */
.rail > .gopanel{flex:none;margin-top:2px}
/* ③ အဆင့် panel — ညာဘက်တန်း (ထိန်းချုပ်ဇုန်) က အပြာနု၊ ဘယ်ဘက် ရလဒ်ဇုန်က neutral (ui-todo #93)။ အုပ်စုထဲက sub panel (.grp .panel) က မထိ */
.rsteps > .panel, .rail > .gopanel{background:var(--accent-bg);border-color:var(--accent-ln)}
.rsteps > .panel > .phead, .rail > .gopanel > .phead{border-bottom-color:var(--accent-ln)}
.rsteps > .panel.acc:not(.shut){border-color:var(--accent-h)}
.useline{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--ink30);text-align:center}
.useline b{color:var(--ink60);font-weight:400}
/* ---------- ဘယ်ဘက် Menu bar ----------
   HTML ကို smitch.js က ဆောက်တယ် — page မှာ <nav class="side" id="side" data-tool="…"></nav> ပဲ ထားပါ */
body{--sidew:228px;padding-left:var(--sidew)}
body.side-mini{--sidew:68px}
body.side-anim, body.side-anim .side{transition:padding-left .18s ease,width .18s ease}
body.locked .side, body.locked .smenu{display:none}
.side{position:fixed;top:0;bottom:0;left:0;z-index:800;width:var(--sidew);
  display:flex;flex-direction:column;gap:4px;padding:18px 12px 14px;overflow:hidden;
  background:var(--side);border-right:1px solid var(--line)}
.sbrand{display:flex;align-items:center;gap:11px;padding:2px 6px 18px;margin-bottom:10px;
  border-bottom:1px solid var(--line)}
.smark{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-family:var(--display);font-weight:700;font-size:17px;
  box-shadow:0 6px 18px rgba(255,90,90,.25)}
.sname{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
a.sbrand{text-decoration:none;color:inherit}   /* logo → Landing (home.html) */
.sname em{font-style:normal;color:var(--brand)}
.ssec{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink30);padding:4px 10px 6px;white-space:nowrap}
.sitem{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:12px;
  border:1px solid transparent;color:var(--ink60);text-decoration:none;transition:.18s}
.sitem svg{flex:0 0 auto;width:20px;height:20px}
.stext{min-width:0;font-size:14px;line-height:1.4;white-space:nowrap}
.stext small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink30)}
.sitem:hover{background:var(--surface2);color:var(--ink)}
.sitem.on{background:var(--surface2);border-color:var(--line2);color:var(--ink);cursor:default}
.sitem.on svg, .sitem:hover svg{color:var(--tc,var(--accent-t))}   /* tool အရောင် — smitch.js က --tc ထည့် */
.sfold{margin-top:auto;display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:12px;
  background:none;border:1px solid transparent;color:var(--ink30);text-align:left;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;white-space:nowrap}
.sfold:hover{background:var(--surface2);color:var(--ink)}
.sfold svg{flex:0 0 auto;width:20px;height:20px;transition:transform .18s}
body.side-mini .sname, body.side-mini .ssec, body.side-mini .stext, body.side-mini .sfold span{display:none}
body.side-mini .sfold svg{transform:rotate(180deg)}
/* ⚙ Settings — Menu အောက်ခြေ၊ ဒီ page ရဲ့ Settings drawer ကို ဖွင့်တယ် */
button.sitem{width:100%;background:none;font-family:var(--my);text-align:left;cursor:pointer}
.sgear{margin-top:auto}
.sgear + .sfold{margin-top:0}
/* ---------- ဖုန်း (≤760px) — Menu ကို ဘေးမှာ မပြ · App bar ရဲ့ S နှိပ်မှ ဘယ်ဘက်ကနေ လျှောထွက် (ui-todo #157, 2026-10-17) ----------
   အကျယ် ⅔ (240–300px — မြန်မာ tool နာမည် + ၄၈px နှိပ်ကွက်) · နောက်ခံ scrim · ပွတ်ဆွဲ ပိတ် · Back = ပိတ် (smitch.js ⑨)
   Account (ဓာတ်ပုံ · နာမည် · ကုန်ကျစရိတ်) · ထွက်မယ် က Menu ထဲ — App bar မှာ S · ခေါင်းစဉ် · chip အတို · ⚙ ပဲ */
.smenu, .side .sm-only, .sscrim{display:none}
.shead{display:contents}             /* Desktop — logo အရင်အတိုင်း (✕ က ဖုန်းမှာပဲ) */
@media(max-width:760px){
  body, body.side-mini{padding-left:0}
  .side{position:fixed;top:0;bottom:0;left:0;z-index:900;width:clamp(240px,66vw,300px);
    padding:max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;
    transform:translateX(-104%);visibility:hidden;
    transition:transform .2s cubic-bezier(.4,0,1,1), visibility 0s linear .2s}
  body.nav-open .side{transform:none;visibility:visible;box-shadow:24px 0 60px rgba(0,0,0,.55);
    transition:transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s}
  .side.dragging{transition:none}
  /* ဖုန်းမှာ ချုံ့ထား (side-mini) မသက်ရောက် — Menu အပြည့် */
  body.side-mini .sname, body.side-mini .ssec, body.side-mini .stext{display:block}
  .sfold{display:none}
  .side .sm-only{display:flex}
  .shead{display:flex;align-items:center;gap:8px;padding:0 0 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
  .shead .sbrand{flex:1 1 auto;min-width:0;padding:2px 6px;margin:0;border:0}
  .side .sx{flex:0 0 auto;width:40px;height:40px;padding:0;border-radius:12px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink60);font-size:15px;display:grid;place-items:center}
  .side .sx:active{background:var(--surface2)}
  .sitem{min-height:48px;padding:10px 12px}
  .sacct{align-items:center;gap:11px;padding:10px;margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .sacct img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
  .sacct img[src=""], .sacct img:not([src]){display:none}
  .sacct div{min-width:0;font-size:13.5px;line-height:1.45}
  .sacct b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sacct small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink30);white-space:normal}
  .sacct.hide, .sout.hide{display:none}
  .sgear{margin-top:auto}
  .sout{color:var(--danger)}
  .sscrim{display:block;position:fixed;inset:0;z-index:899;background:rgba(5,7,10,.58);opacity:0;visibility:hidden;
    transition:opacity .2s, visibility 0s linear .2s;-webkit-tap-highlight-color:transparent}
  body.nav-open .sscrim{opacity:1;visibility:visible;transition:opacity .24s, visibility 0s}
  body.nav-open{overflow:hidden}
  /* App bar — S (Menu) · ခေါင်းစဉ် · chip · ⚙ တစ်တန်းတည်း */
  .smenu{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;padding:0;border:0;background:none;border-radius:12px;
    -webkit-tap-highlight-color:transparent}
  .smenu .smark{width:34px;height:34px;font-size:18px;transition:transform .15s}
  .smenu:active .smark{transform:scale(.92)}
  /* ပထမတန်း = S · ခေါင်းစဉ် (ကျန်နေရာ — ကျဉ်းရင် … ) · chip · ⚙ / ကျန်တာ (select · tab · stamp) = အောက်တန်း အပြည့် */
  .topbar.tfull{gap:8px;padding:8px 0;top:0}
  .topbar.tfull > *{order:5}
  .topbar.tfull > .smenu{order:0}
  .topbar.tfull > .tbtitle{order:1;flex:1 1 0;min-width:0;font-size:18px;overflow:hidden;text-overflow:ellipsis;margin:0}
  .topbar.tfull > .costchip{order:2;margin-left:0}
  .topbar.tfull > .gear{order:3;margin-left:0}
  /* ⚙ နောက်မှာ တန်းခွဲ (select · tab ရှိမှ) → ဆိုင်/Channel ရွေး + tab တွေက ဒုတိယတန်း အတူ (tab က ကျန်နေရာ · ဘေးတိုက် scroll) */
  .topbar.tfull:has(> select, > .vtabs, > .dstamp)::before{content:"";order:4;flex:1 1 100%;height:0}
  .topbar.tfull > select, .topbar.tfull > .vtabs, .topbar.tfull > .dstamp{order:5;min-width:0}
  .topbar.tfull > .vtabs{flex:1 1 0}
  .topbar .authbar{display:none !important}
  /* chip — ဒီလ ကုန်ကျစရိတ် ဂဏန်းပဲ (အပြည့်က Menu ထဲ · title tooltip) */
  .costchip[data-m]{font-size:0;padding:6px 10px}
  .costchip[data-m]::before{content:attr(data-m);font-size:11px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){ .side, body.nav-open .side, .sscrim, body.nav-open .sscrim{transition:none} }

/* ---------- ⑨ Motion (ui-todo #142, 2026-10-16) — "ဘာဖြစ်နေလဲ" သိအောင်ပဲ (အလှဆင် မဟုတ်) · 150–350ms ·
   Windows "Animation effects" ပိတ်ထားရင် (prefers-reduced-motion) အကုန် ငြိမ်။ JS ဘက်က smitch.js ⑧ ---------- */
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes sm-sweep{from{background-position:-70% 0}to{background-position:170% 0}}
@keyframes sm-pop{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:none}}
@keyframes sm-in{from{opacity:0;transform:translateY(10px)}}
@keyframes sm-breath{50%{opacity:.55}}
@keyframes sm-note{from{opacity:0;transform:translateY(-14px)}}
@keyframes sm-noteout{to{opacity:0;transform:translateY(-10px)}}
@keyframes sm-fade{from{opacity:0}}
@keyframes sm-fadeout{to{opacity:0}}
@keyframes sm-dout{to{transform:translateX(40px);opacity:0}}
@keyframes sm-drop{50%{transform:scale(1.012)}}
/* ③ ခလုတ်ထဲ progress — SM.busy(el, 42) = % အရောင်ဖြည့် · SM.busy(el, true) = % မသိ (အလင်းတန်း ဖြတ်) · SM.done(el) = ✓ pop
   disabled ဖြစ်နေလည်း စာကို မမှိန်စေ (အလုပ်လုပ်နေမှန်း မြင်ရ) · data-prog = ခလုတ်နောက်က % / ကျန်ချိန် (≈ ဈေးနေရာမှာ) */
button.sm-prog, button.sm-prog:disabled, button.sm-busy, button.sm-busy:disabled{color:var(--ink);cursor:progress;--prog-c:rgba(46,107,230,.42)}
.btn-gold.sm-prog, .btn-gold.sm-busy{--prog-c:rgba(233,185,73,.34)}
button.sm-prog, button.sm-prog:disabled{background-image:linear-gradient(90deg,var(--prog-c) var(--p),transparent var(--p));
  transition:--p .4s ease,background-color .18s ease,color .18s ease}
button.sm-busy, button.sm-busy:disabled{background-image:linear-gradient(90deg,transparent,var(--prog-c),transparent);
  background-size:45% 100%;background-repeat:no-repeat;animation:sm-sweep 1.4s linear infinite}
button.sm-prog[data-prog]::after, button.sm-busy[data-prog]::after{content:"  " attr(data-prog);font-family:var(--mono);font-size:.8em;font-weight:400;opacity:.85;white-space:nowrap}
button.sm-done{animation:sm-pop .5s cubic-bezier(.3,1.5,.5,1)}
button.sm-done::before{content:"✓ ";color:var(--live)}
.btn-primary.sm-done::before{color:inherit}
/* ⑤ AI ထုတ်နေတဲ့ ကတ် — page က .sm-skel (ထုတ်နေ) · SM.reveal(el) (ရပြီ) */
.sm-skel{animation:sm-breath 1.3s ease-in-out infinite}
.sm-in{animation:sm-in .38s cubic-bezier(.2,.8,.2,1)}
/* ④ အောင် / မအောင် စာ — အပေါ်ကနေ ဆင်းလာ · အောင်စာက ၈ စက္ကန့်နေ အလိုလို ဖျောက် (smitch.js) */
.notes .err.on, .notes .ok.on{animation:sm-note .32s cubic-bezier(.3,1.25,.5,1)}
.notes .ok.sm-out{animation:sm-noteout .25s ease forwards}
/* ② segbar — "on" အပြာ pill လျှောရွေ့ (smitch.js က .segpill ထည့်) */
.segbar.haspill{position:relative;isolation:isolate}
.segbar.haspill > .segbtn{position:relative;z-index:1}
.segbar.haspill > .segbtn.on{background:transparent}
.segpill{position:absolute;left:0;top:0;z-index:0;background:var(--accent);pointer-events:none;
  transition:transform .3s cubic-bezier(.3,1.15,.5,1),width .3s cubic-bezier(.3,1.15,.5,1),height .3s ease,opacity .15s}
/* အုပ်စု (.grp) ထဲ sub panel ပြောင်းရင် fade */
.grp .panel.cur.sm-in{animation:sm-fade .22s ease}
/* ⚙ drawer — ဖွင့်ရင် scrim fade · ပိတ်ရင် လျှောထွက် (smitch.js .sm-closing) */
.dscrim{animation:sm-fade .18s ease}
.drawer.sm-closing .dpanel{animation:sm-dout .18s ease forwards}
.drawer.sm-closing .dscrim{animation:sm-fadeout .18s ease forwards}
/* ① panel ဖွင့်/ပိတ် — smitch.js က အမြင့် animate (ပိတ်နေတုန်း pbody ကို ခဏ ပြထား) */
.panel.shut.sm-closing > .pbody{display:block}
/* ⑥ cost chip — ဂဏန်း တက်ရင် ခဏ ရွှေ */
.costchip{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.costchip.sm-flash{background:var(--tintg);color:var(--gold);border-color:var(--gold-ln)}
/* Video / ပုံ ဆွဲချတဲ့ နေရာ — ဖိုင် ဆွဲလာရင် လှုပ် */
.drop.over{animation:sm-drop 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  button.sm-busy, button.sm-busy:disabled, button.sm-done, .sm-skel, .sm-in, .notes .err.on, .notes .ok.on, .notes .ok.sm-out,
  .grp .panel.cur.sm-in, .dscrim, .dpanel, .drawer.sm-closing .dpanel, .drawer.sm-closing .dscrim, .drop.over{animation:none}
  button.sm-busy, button.sm-busy:disabled{background-size:100% 100%}
  button.sm-prog, .segpill, .costchip{transition:none}
}

/* ---------- ⑩ ညာဘက် ဘေးတိုက် tab (ui-todo #149, 2026-10-16) — <div class="rail" data-tabs><div class="segbar rtabs"></div><div class="rsteps">…
   smitch.js က .rsteps > .panel တစ်ခုချင်းအတွက် tab ခလုတ် ဆောက်ပြီး တစ်ခါ တစ်ခုပဲ ပြ (.tab-on) · ခေါင်းစဉ် (.phead) မလို · ဖွင့်/ပိတ် (.shut) လျစ်လျူ ---------- */
.rtabs{flex:none;margin:0 0 12px}
.rtabs .segbtn{padding:9px 4px;font-size:13px;white-space:nowrap}
.rail[data-tabs] .rsteps > .panel{display:none}
.rail[data-tabs] .rsteps > .panel.tab-on{display:block}
.rail[data-tabs] .rsteps > .panel > .phead{display:none}
.rail[data-tabs] .rsteps > .panel.shut > .pbody{display:block}
.rail[data-tabs] .rsteps > .panel + .panel{margin-top:0}
.rail[data-tabs] .rsteps > .panel.tab-on{border-color:var(--accent-ln)}
@media(max-width:760px){ .rtabs{overflow-x:auto;scrollbar-width:none} .rtabs .segbtn{flex:1 0 auto;padding:9px 12px} }

/* ---------- ⑪ ကိုယ်ပိုင်အသံ Clone (ElevenLabs IVC — smitch.js SM.el.attach · ui-todo #164) ---------- */
.elclone{margin-top:8px}
.clonebox{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--field)}
.clonebox .chk{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:13px;line-height:1.5}
.clonelist{display:grid;gap:6px;margin-top:10px}
.clonelist:empty{display:none}
.clonelist .ci{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--ink60);
  padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.clonelist .ci span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clonelist .ci b{font-weight:500;color:var(--ink)}
.clonelist .ci button{background:none;border:0;color:var(--ink30);font-size:14px;padding:0 2px;cursor:pointer}
.clonelist .ci button:hover{color:var(--danger)}
.clonelist .tot{font-family:var(--mono);font-size:11px;color:var(--ink30);text-align:right}
.cl-rec.rec{border-color:var(--danger);color:var(--danger)}
.cl-msg{font-size:12px;line-height:1.5;margin-top:8px;color:var(--ink60)}
.cl-msg:empty{display:none}
.cl-msg.bad{color:var(--danger)}
/* ElevenLabs ပြောပုံ (ui-todo #184) — SM.el.vsUI */
.elvs{margin-top:12px}
.elvs .segbar{margin-bottom:8px}
.elvs .segbtn{font-size:12px;padding:8px 6px}
.elvs .vsl{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12.5px;color:var(--ink60)}
.elvs .vsl span{flex:0 0 112px}
.elvs .vsl input[type=range]{flex:1;min-width:0}
.elvs .vsl b{font-family:var(--mono);font-size:11px;color:var(--gold);font-weight:400;min-width:40px;text-align:right}

/* ==========================================================================================
   ⑫ UI ပုံစံ — Dark neumorphic + အနီ→အပြာ gradient (ui-todo #186, 2026-10-19 · user mockup mockups/2026-10-19-video-reskin.jpg)
   Layout မပြောင်း — အသွင်ပဲ။ ဒီ block တစ်ခုလုံး ဖျက်ရင် အရင်ပုံစံ ပြန်ရ။
   · ကြွ (raised) = panel · ကတ် · ခလုတ် · Menu item / နစ် (inset) = ဖြည့်ကွက် · segbar ခံ
   · gradient = "ရွေးထားတာ" (Menu · segbar · tab) + အဓိက ခလုတ် (.btn-primary) ပဲ · ရွှေ (.btn-gold) = ပိုက်ဆံကုန် ဆက်ထား
   · ဖွင့်ထားတဲ့ ညာဘက် tab panel = gradient ဘောင် + glow ပါးပါး (preview ကို မလု) · tab အဆင့်: ညာ tab = outline · အုပ်စု (subbar) = မျဉ်းအောက်ခံ · ရွေးစရာ segbar = ဖြည့်
   · စာ = အဖြူ / --ink60 (အနီစာ = error ပဲ) · နောက်ခံ glow = static radial-gradient (blur / animation မသုံး) · ဖုန်းမှာ shadow လျှော့
   page <style> က နောက်မှ ဖတ်လို့ page ကိုယ်ပိုင် class (.drop · range · checkbox) ကို :root နဲ့ specificity မြှင့်
   ========================================================================================== */
:root{
  --base:#14161C; --side:#111318; --surface:#1A1D25; --surface2:#222630; --field:#101218;
  --line:#272C37; --line2:#353B48;
  --hot:#FF4D6A; --cool:#3D6BFF;
  --grad:linear-gradient(90deg,#3D6BFF 0%,#7A55E8 48%,#FF4D6A 100%);
  --grad-soft:linear-gradient(120deg,rgba(61,107,255,.10),rgba(255,77,106,.10));
  --raise:6px 6px 16px rgba(0,0,0,.5),-4px -4px 12px rgba(255,255,255,.028);
  --raise-sm:3px 3px 8px rgba(0,0,0,.45),-2px -2px 6px rgba(255,255,255,.025);
  --inset:inset 3px 3px 7px rgba(0,0,0,.55),inset -2px -2px 5px rgba(255,255,255,.025);
  --glow-grad:0 0 0 1px rgba(255,255,255,.02),0 8px 26px rgba(61,107,255,.16),0 10px 30px rgba(255,77,106,.12);
}
body{background-image:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 55vh at 78% 108%,rgba(255,77,106,.13),transparent 62%),
    radial-gradient(55vw 50vh at 45% 115%,rgba(122,85,232,.10),transparent 60%),
    radial-gradient(60vw 45vh at 35% -12%,rgba(61,107,255,.08),transparent 60%)}
.gate{background-image:none}

/* panel — ကြွ */
.panel{background:var(--surface);border:1px solid rgba(255,255,255,.045);border-radius:20px;box-shadow:var(--raise)}
.panel.shut .phead{border-radius:19px}
.phead{border-bottom-color:rgba(255,255,255,.05)}
.rsteps > .panel, .rail > .gopanel{background:var(--surface);border-color:rgba(255,255,255,.05)}
.rsteps > .panel > .phead, .rail > .gopanel > .phead{border-bottom-color:rgba(255,255,255,.05)}
.rsteps > .panel.acc:not(.shut){border-color:rgba(255,255,255,.08)}
/* ဖွင့်ထားတဲ့ ညာဘက် tab panel — gradient ဘောင် + glow ပါးပါး */
.rail[data-tabs] .rsteps > .panel.tab-on, .rsteps > .panel.acc:not(.shut){
  border:1px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(61,107,255,.75),rgba(122,85,232,.45) 50%,rgba(255,77,106,.75)) border-box;
  box-shadow:var(--raise),var(--glow-grad)}
.rsteps{padding-top:4px}
.grp .panel{background:none;border:0;box-shadow:none}

/* ဖြည့်ကွက် — နစ် */
input[type=text],input[type=search],input[type=password],input[type=number],input[type=date],select,textarea{
  background:var(--field);border:1px solid rgba(255,255,255,.04);border-radius:14px;box-shadow:var(--inset)}
input:focus,select:focus,textarea:focus{border-color:rgba(61,107,255,.7);box-shadow:var(--inset),0 0 0 3px rgba(61,107,255,.16)}
:root body input[type=checkbox]{accent-color:var(--hot)}

/* slider — gradient track + ကြွ thumb */
:root input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:22px;padding:0;border:none;accent-color:var(--cool)}
:root input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,#FF4D6A,#7A55E8 50%,#3D6BFF);opacity:.95;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
:root input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;
  background:#262B36;border:2px solid #6E8CFF;box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 3px rgba(61,107,255,.15)}
:root input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:linear-gradient(90deg,#FF4D6A,#7A55E8 50%,#3D6BFF)}
:root input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#262B36;border:2px solid #6E8CFF}
:root input[type=range]:disabled{opacity:.45}

/* ခလုတ် */
.btn{background:var(--surface);border-color:rgba(255,255,255,.05);box-shadow:var(--raise-sm)}
.btn:hover{background:var(--grad);border-color:transparent}
.btn-primary{background:var(--grad);border:1px solid rgba(255,255,255,.08);color:#fff;
  box-shadow:var(--raise-sm),0 10px 28px rgba(61,107,255,.22),0 10px 30px rgba(255,77,106,.18)}
.btn-primary:hover{background:var(--grad);filter:brightness(1.08);border-color:rgba(255,255,255,.14);
  box-shadow:var(--raise-sm),0 14px 32px rgba(61,107,255,.28),0 14px 34px rgba(255,77,106,.24)}
.btn-primary:disabled{background:var(--surface2);filter:none;border-color:var(--line)}
.btn-ghost{background:var(--surface);border:1px solid rgba(255,255,255,.05);box-shadow:var(--raise-sm)}
.btn-ghost:hover{background:var(--surface2);border-color:rgba(255,255,255,.1)}
.btn-ghost:disabled{background:var(--surface);box-shadow:none}
.btn-gold{box-shadow:var(--raise-sm)}
button.sm-prog, button.sm-busy{--prog-c:rgba(122,85,232,.45)}

/* segbar — ခံ နစ် · ခလုတ်ကြား မျဉ်း မရှိ · ရွေးထား = gradient ဖြည့် */
.segbar{background:var(--field);border:1px solid rgba(255,255,255,.04);box-shadow:var(--inset);padding:3px;gap:2px}
.segbtn{border-right:none;border-radius:50px}
.segbtn:hover{background:rgba(255,255,255,.04)}
.segbtn.on, .segpill{background:var(--grad);color:#fff;border-radius:50px;box-shadow:0 4px 14px rgba(61,107,255,.25),0 4px 16px rgba(255,77,106,.2)}
.segbar.haspill > .segbtn.on{box-shadow:none}
/* အုပ်စု ခလုတ်တန်း (Size · Color · Blur · Logo) — ကြွ pill + gradient မျဉ်းအောက်ခံ (segbar ရွေးစရာနဲ့ မတူအောင်) */
.subbar .segbtn{white-space:nowrap;padding-left:4px;padding-right:4px}
.subbar .segbtn.on{background:transparent;color:var(--ink);font-weight:700}
.subbar .segpill{background:var(--surface2) padding-box;box-shadow:var(--raise-sm)}
.subbar .segpill::after{content:"";position:absolute;left:22%;right:22%;bottom:3px;height:2px;border-radius:2px;background:var(--grad)}
/* ညာဘက် tab (စာတန်း · အသံ · …) + top bar mode tab — outline glow (မဖြည့်) */
.rtabs{background:var(--surface);box-shadow:var(--raise)}
.rtabs .segbtn.on{background:transparent;color:#AFC3FF}
.rtabs .segpill{border:1px solid transparent;
  background:linear-gradient(var(--field),var(--field)) padding-box,linear-gradient(135deg,rgba(61,107,255,.9),rgba(255,77,106,.8)) border-box;
  box-shadow:var(--inset),0 0 14px rgba(61,107,255,.25)}
.vtabs{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:14px;box-shadow:var(--raise-sm)}
.vtab[aria-selected="true"]{background:var(--field);color:#AFC3FF;box-shadow:var(--inset),inset 0 0 0 1px rgba(110,140,255,.45)}

/* top bar — ကြွ chip · ⚙ */
.topbar{background:rgba(20,22,28,.9)}
.topbar.tfull{border-bottom-color:rgba(255,255,255,.05)}
.costchip{background:var(--surface);border-color:rgba(255,255,255,.05);box-shadow:var(--raise-sm)}
.gear{background:var(--surface);border-color:rgba(255,255,255,.05);border-radius:50%;box-shadow:var(--raise-sm)}
.topbar .authbar:not(.hide){background:var(--surface);border-radius:50px;padding:4px 6px 4px 5px;box-shadow:var(--raise-sm)}

/* Menu — item တစ်ခုစီ ကြွ ကတ် · ရွေးထား = gradient */
.side{background:var(--side);border-right-color:rgba(255,255,255,.04);gap:7px}
.sbrand{border-bottom-color:rgba(255,255,255,.05)}
.sitem{background:var(--surface);border-color:rgba(255,255,255,.04);box-shadow:var(--raise-sm)}
.sitem:hover{background:var(--surface2)}
.sitem.on{background:var(--grad);border-color:rgba(255,255,255,.12);color:#fff;
  box-shadow:var(--raise-sm),0 8px 22px rgba(61,107,255,.25),0 8px 24px rgba(255,77,106,.2)}
.sitem.on .stext small{color:rgba(255,255,255,.78)}
.sitem.on svg{color:#fff}
.sfold{background:var(--surface);box-shadow:var(--raise-sm)}

/* Video / ပုံ ဆွဲချတဲ့ နေရာ — အနီ dashed + gradient tint */
:root .drop{border:1.5px dashed rgba(255,77,106,.55);background:var(--grad-soft),var(--field);border-radius:18px}
:root .drop:hover, :root .drop.over{border-color:var(--hot);background:linear-gradient(120deg,rgba(61,107,255,.16),rgba(255,77,106,.16)),var(--field)}

/* footer — ကြွ pill */
footer{border-top:0;background:var(--surface);border-radius:50px;padding:12px 22px;box-shadow:var(--raise);border:1px solid rgba(255,255,255,.04)}

/* ⚙ drawer · gate · အသိပေးစာ */
.dpanel{background:var(--base)}
.gatebox{box-shadow:var(--raise),0 24px 60px rgba(0,0,0,.5)}
.clonebox{box-shadow:var(--inset)}

/* ဖုန်း — shadow လျှော့ (16px gutter မှာ နေရာ မစား) */
@media(max-width:760px){
  :root{--raise:0 4px 12px rgba(0,0,0,.42);--raise-sm:0 2px 6px rgba(0,0,0,.38);--glow-grad:0 6px 18px rgba(61,107,255,.12)}
  footer{border-radius:18px}
  .subbar .segbtn{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .btn-primary:hover{filter:none} }