/* ============================================================
   ChatXFlow — styles
   Saare rang CSS variables se aate hain. Naya theme = neeche ek
   [data-theme="..."] block. Baaki CSS ko haath lagane ki zarurat nahi.
   ============================================================ */

/* Token note (WCAG AA, 2026-07-31 audit):
   --accent      = accent ka TEXT rang (link, summary, icon) -> card par >=4.5:1
   --accent-fill = bhare hue primary button ka BACKGROUND, label --on-accent  -> >=4.5:1
   --danger      = danger button ka background, label --on-danger             -> >=4.5:1
   --red         = error TEXT ka rang (button bg ke liye --danger use karo)   -> >=4.5:1
   --field-line  = sirf form controls ka border -> card ke against >=3:1 (WCAG 1.4.11).
                   --line decorative divider hai, use gehra karne se cards bhaari lagte hain.
   Ye alag isliye hain ki ek hi rang "dark bg par padhne layak text" aur "white label
   ke neeche bharaav" dono nahi ho sakta — dono ki zarurat ulti hoti hai.        */

/* ---- theme: dark (default) ---- */
:root,
:root[data-theme="dark"]{
  --accent:#60a5fa; --accent-d:#1d4ed8; --accent-fill:#1d4ed8; --on-accent:#ffffff;
  --bg:#0f1419; --card:#1b2430; --sunk:#0f1620; --line:#2a3646; --field-line:#6b7c93;
  --text:#e6edf3; --muted:#8b98a5;
  --red:#f87171; --danger:#dc2626; --on-danger:#ffffff; --amber:#f59e0b;
  --chip:#ffffff; --chip-text:#20303f;
  /* topbar ka chip har theme me lagbhag safed hai, isliye uspar red TEXT gehra chahiye.
     Sirf yahan define hai — :root sab themes par lagta hai, to sabko inherit ho jaata hai. */
  --chip-red:#b91c1c;
  --shadow:0 18px 45px #000000a6;
  --bar:linear-gradient(90deg,var(--accent-d),var(--accent));
}
:root[data-theme="light"]{
  --accent:#2563eb; --accent-d:#1e40af; --accent-fill:#2563eb; --on-accent:#ffffff;
  --bg:#f4f7f9; --card:#ffffff; --sunk:#f0f4f7; --line:#dde5ec; --field-line:#8b8b8b;
  --text:#16232e; --muted:#5c6b7a;
  --red:#d23b3b; --danger:#dc2626; --on-danger:#ffffff; --amber:#a15c00;
  --chip:#ffffff; --chip-text:#16232e;
  --shadow:0 16px 40px #0f253a26;
  --bar:linear-gradient(90deg,var(--accent-d),var(--accent));
}
:root[data-theme="emerald"]{
  --accent:#34d399; --accent-d:#047857; --accent-fill:#34d399; --on-accent:#022c22;
  --bg:#07130f; --card:#0f2620; --sunk:#0a1c17; --line:#1d4438; --field-line:#4f7d6c;
  --text:#e3fbf1; --muted:#87b3a4;
  --red:#f87171; --danger:#b91c1c; --on-danger:#ffffff; --amber:#fbbf24;
  --chip:#ffffff; --chip-text:#08281f;
  --shadow:0 18px 45px #00170f9e;
  --bar:linear-gradient(90deg,var(--accent-d),var(--accent));
}
:root[data-theme="ocean"]{
  --accent:#38bdf8; --accent-d:#0369a1; --accent-fill:#38bdf8; --on-accent:#04202e;
  --bg:#0a1420; --card:#132437; --sunk:#0d1c2b; --line:#23415e; --field-line:#5b7ba0;
  --text:#e4f1fb; --muted:#8fabc4;
  --red:#fb7185; --danger:#be123c; --on-danger:#ffffff; --amber:#fbbf24;
  --chip:#ffffff; --chip-text:#0d2438;
  --shadow:0 18px 45px #00101ea6;
  --bar:linear-gradient(90deg,var(--accent-d),var(--accent));
}
:root[data-theme="sunset"]{
  --accent:#fb923c; --accent-d:#c2410c; --accent-fill:#fb923c; --on-accent:#2a1206;
  --bg:#170f14; --card:#28191f; --sunk:#1d1218; --line:#4a2c30; --field-line:#8a5f5f;
  --text:#fdeee4; --muted:#c0a094;
  --red:#f87171; --danger:#b91c1c; --on-danger:#ffffff; --amber:#fcd34d;
  --chip:#ffffff; --chip-text:#2c161a;
  --shadow:0 18px 45px #12070aa6;
  --bar:linear-gradient(90deg,var(--accent-d),var(--accent));
}
:root[data-theme="grape"]{
  --accent:#a78bfa; --accent-d:#6d28d9; --accent-fill:#a78bfa; --on-accent:#1b1030;
  --bg:#120f1c; --card:#1f1a2e; --sunk:#171325; --line:#372d52; --field-line:#7d6ea8;
  --text:#eee9fb; --muted:#a599c4;
  --red:#f87171; --danger:#b91c1c; --on-danger:#ffffff; --amber:#fbbf24;
  --chip:#ffffff; --chip-text:#1e1533;
  --shadow:0 18px 45px #0a0616a6;
  --bar:linear-gradient(90deg,var(--accent-d),var(--accent));
}
:root[data-theme="contrast"]{
  --accent:#ffe600; --accent-d:#000000; --accent-fill:#ffe600; --on-accent:#000000;
  --bg:#000000; --card:#0d0d0d; --sunk:#000000; --line:#ffffff; --field-line:#ffffff;
  --text:#ffffff; --muted:#d4d4d4;
  /* yahan label kaala rakha hai — bright red par white se sirf 3.03:1 aata tha */
  --red:#ff5c5c; --danger:#ff5c5c; --on-danger:#000000; --amber:#ffd400;
  --chip:#ffffff; --chip-text:#000000;
  --shadow:none;
  --bar:var(--accent);
}

*{box-sizing:border-box}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

body{
  margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--muted);font-weight:400}

/* focus hamesha dikhna chahiye (keyboard users) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Skip link — keyboard/screen-reader user ko har page par topbar ke saare links
   Tab kar ke paar karne ki zarurat na pade. Dikhta sirf tab hai jab focus aaye. */
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:60;
  padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;
  background:var(--card);color:var(--accent);border:1px solid var(--accent);
  border-radius:0 0 9px 9px;font-weight:700;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:0}

/* ---------------- topbar ---------------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 20px;background:var(--bar);color:var(--on-accent);
  position:sticky;top:0;z-index:30;flex-wrap:wrap;
}
:root[data-theme="contrast"] .topbar{border-bottom:2px solid var(--line)}
.brand{font-weight:800;font-size:19px;display:flex;gap:9px;align-items:center;white-space:nowrap;
  letter-spacing:-.01em}
/* Logo mark: mask + currentColor, taaki har theme ke topbar text ka rang le le
   (High contrast me black, baaki me white). Ek hi SVG file, koi duplicate markup nahi. */
.logo-mark{
  width:1.35em;height:1.35em;flex:0 0 auto;background:currentColor;
  -webkit-mask:url(/logo-mark.svg) center/contain no-repeat;
          mask:url(/logo-mark.svg) center/contain no-repeat;
}
/* mask support na ho to solid block dikhega — usse chhupa do, wordmark kaafi hai */
@supports not ((-webkit-mask: url(#a)) or (mask: url(#a))){ .logo-mark{display:none} }
.pills{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{
  padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600;
  background:#ffffff2e;border:none;color:var(--on-accent);
}
.pill-red{background:var(--chip);color:var(--chip-red)}
.pill-green{background:var(--chip);color:var(--accent-d)}
:root[data-theme="contrast"] .pill-green{color:#0a7a3c}
.pill-gray{background:var(--chip);color:var(--chip-text)}
.pill-amber{background:var(--chip);color:var(--amber);font-weight:600}
.pill-btn{cursor:pointer;transition:transform .12s ease,filter .12s ease}
.pill-btn:active,.pm-link:active,.datecard:active{filter:brightness(.92)}
@media (hover:hover) and (pointer:fine){ .pill-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} }
.pill-guide{background:var(--chip);color:var(--accent-d)}

/* compact settings popover (secondary pages) */
.setwrap{position:relative}
.setbtn{font-size:15px;line-height:1;padding:7px 11px}
.setmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:250px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;color:var(--text)}

.langsel,.themesel{
  background:var(--chip);color:var(--chip-text);border:none;padding:6px 10px;
  border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;max-width:150px;
}

/* ---------------- profile ---------------- */
.profile{position:relative}
.avatar{
  position:relative;
  width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:var(--card);color:var(--accent);border:2px solid #ffffffb3;
  font-weight:800;font-size:14px;text-transform:uppercase;line-height:1;
  transition:box-shadow .15s ease,border-color .15s ease;
}
@media (hover:hover) and (pointer:fine){ .avatar:hover{border-color:#fff} }
.avatar.open{border-color:#fff;box-shadow:0 0 0 3px #ffffff4d}
.avatar-lg{width:46px;height:46px;font-size:19px;border-color:var(--accent);cursor:default;flex:0 0 auto}

.profile-menu{
  position:absolute;right:0;top:calc(100% + 10px);width:400px;max-width:92vw;
  max-height:78vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);color:var(--text);z-index:40;text-align:left;
  animation:pmIn .16s ease;
}
@keyframes pmIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.pm-head{
  display:flex;gap:12px;align-items:center;padding:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent);
}
.pm-name{font-weight:700;font-size:15px;word-break:break-word}
.pm-email{color:var(--muted);font-size:12.5px;word-break:break-all}
/* "grouped settings" look — har hissa apna alag soft card, jagah-jagah full-width border ki jagah */
.pm-facts,.pm-nav,.pm-set,.pm-sec{
  margin:0 10px 10px;background:var(--sunk);border:1px solid var(--line);border-radius:12px;
}
.pm-facts{padding:11px 13px;display:flex;flex-direction:column;gap:7px}
.fact{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.fact span{color:var(--muted)}
.fact b{font-weight:600;text-align:right;word-break:break-all}
/* status ko plain bold text ki jagah rangeen "pill" — ek nazar me scan ho jaye */
.bill-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;
  font-size:12px;font-weight:700;white-space:nowrap}
.bill-badge.st-active{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.bill-badge.st-trial{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.bill-badge.st-expired{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.bill-badge.st-admin{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent)}
/* profile menu ke andar: links + settings */
.pm-nav{display:flex;flex-direction:column;padding:6px;gap:1px}
.pm-link{display:block;padding:9px 10px;border-radius:9px;color:var(--text);
  text-decoration:none;font-size:13.5px;font-weight:600;transition:background .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){ .pm-link:hover{background:var(--card);color:var(--accent)} }
.pm-set{padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.pm-setrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:12.5px;color:var(--muted);cursor:pointer}
.pm-select{background:var(--card);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;font-size:12.5px;max-width:60%;cursor:pointer}

.pm-sec{padding:14px 15px}
.pm-sec h3{margin:0 0 4px;font-size:14px}
.pm-note{margin:0 0 10px;color:var(--muted);font-size:12px}
.pm-field{display:block;margin-bottom:4px;font-size:12px;color:var(--muted)}
.pm-field.pm-gap{margin-top:10px}
.pm-sec>input,.pm-sec .copyrow input{width:100%;font-size:12.5px}
.pm-samples summary{cursor:pointer;color:var(--accent);font-size:13px}
.pm-samples h4{margin:10px 0 5px;font-size:12px;color:var(--muted);font-weight:600}
.pm-samples .code{white-space:pre-wrap;word-break:break-all;font-size:11px}
.pm-wide{width:100%;margin-top:12px}
.keyrow{display:flex;gap:8px;align-items:center}
.keyrow input{flex:1}
/* wrapper div ke andar hai isliye .pm-sec>input isko nahi pakadta */
#aiKeyInput{width:100%;font-size:12.5px}
/* padding-inline-start taaki RTL (ar/fa/he/ur) me number list ka indent ulti taraf na ho */
.pm-steps{margin:8px 0 0;padding-inline-start:18px;font-size:12px;color:var(--muted);line-height:1.7}
.pm-steps a{color:var(--accent)}
.pm-foot{background:transparent;border:none;margin:2px 10px 10px;padding:10px 0 0;border-top:1px solid var(--line)}
.pm-foot .pm-wide{margin-top:0}

/* ---------------- layout ---------------- */
.wrap{max-width:900px;margin:0 auto;padding:22px 20px 60px;display:flex;flex-direction:column;gap:16px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 2px #0000000d;
}
.card h2{margin:0 0 12px;font-size:17px;letter-spacing:-.01em}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cardhead h2{margin:0 0 12px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);flex:1;min-width:200px}
label.inline{flex-direction:row;align-items:center;gap:8px;min-width:auto}
.radios label{flex-direction:row;align-items:center;gap:8px;color:var(--text);min-width:auto}
.hint{color:var(--muted);font-size:12px;line-height:1.5}

/* ---------------- form controls ----------------
   Touch: har interactive cheez kam se kam 44px unchi (Apple HIG / MD 48dp).
   touch-action:manipulation mobile ka 300ms double-tap delay hata deta hai. */
input,select,textarea,button{font:inherit}
input,select,textarea,button,.linkbtn,summary,a{touch-action:manipulation}
input,select,textarea{
  background:var(--sunk);color:var(--text);border:1px solid var(--field-line);
  border-radius:9px;padding:9px 11px;outline:none;transition:border-color .15s ease;
}
input,select{min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{width:100%;resize:vertical;line-height:1.55}
input[type=file]{padding:7px 10px}
/* checkbox/radio 13px ke the — ungli ke liye bahut chhote. Wrapping label ko
   44px ka bana diya hai (neeche label.inline), isliye poori line tappable hai. */
input[type=checkbox],input[type=radio]{
  width:20px;height:20px;min-height:0;accent-color:var(--accent-fill);flex:0 0 auto;margin:0;
}
button{
  cursor:pointer;background:var(--sunk);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 14px;min-height:44px;font-weight:600;
  transition:border-color .15s ease,transform .1s ease,filter .15s ease;
}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
button.danger{background:var(--danger);color:var(--on-danger);border-color:var(--danger)}
button.ghost{background:transparent}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.linkbtn{
  display:inline-flex;align-items:center;padding:9px 14px;min-height:44px;
  border:1px solid var(--line);
  border-radius:9px;font-weight:600;font-size:14px;color:var(--accent);text-decoration:none;
}
.mini{padding:6px 12px;font-size:12px;border-radius:7px;min-height:36px}

/* Topbar ke chhote controls — dikhne me compact rehte hain par tap area 44x44 ho
   jaata hai. skill §2: "extend hit area beyond visual bounds if needed".
   ::before isliye ki .avatar ka ::after pehle se status badge ke liye use ho raha hai.
   Layout bilkul nahi badalta, isliye topbar ki height wahi rehti hai.
   ⚠️ .pill aur .avatar par min-height:0 zaroori hai — warna upar wala
   button{min-height:44px} avatar ko oval bana deta hai aur pill buttons ko
   anchor pills se alag lambai de deta hai. */
.pill,.avatar{min-height:0}
.tap44,.pill-btn,.avatar{position:relative}
.tap44::before,.pill-btn::before,.avatar::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
/* checkbox/radio ki poori line tappable — akela 20px ka box kaafi nahi hota */
label.inline,.pickopts label,.radios label{min-height:44px}
.cond .rm{min-width:44px}
/* Link-lists par touch devices me hi 44px lagao — mouse par lamba TOC bekaar lagta hai */
.toc a{display:flex;align-items:center;min-height:32px}
@media (pointer:coarse){
  .toc a,.pm-link{min-height:44px}
}

/* Hover sirf wahan jahan asli pointer ho. Touch par :hover "chipak" jaata hai —
   tap ke baad bhi laga rehta hai jab tak kahin aur tap na karo. (skill §2 hover-vs-tap) */
@media (hover:hover) and (pointer:fine){
  input:hover,select:hover,textarea:hover{border-color:var(--muted)}
  button:hover:not(:disabled){border-color:var(--accent)}
  button.primary:hover:not(:disabled),button.danger:hover:not(:disabled){filter:brightness(1.07)}
  .linkbtn:hover{border-color:var(--accent)}
}

/* ---------------- tabs ---------------- */
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tab{background:transparent;border:1px solid var(--line)}
.tab.active{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
:root[data-theme="contrast"] .tab.active{background:var(--accent);color:#000}
.tabpane{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabpane input{flex:1;min-width:180px}

/* ---------------- info / tables ---------------- */
.info{margin-top:12px;padding:9px 12px;border-radius:9px;background:var(--sunk);
  border:1px solid var(--line);font-size:14px}
.tablewrap{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:10px}
/* Data preview + send results ka box hamesha ek hi size ka rehta hai — chahe 3 rows
   hon ya 300. Andar dono taraf scroll hota hai; header upar chipka rehta hai. */
#previewWrap,#resultWrap{height:380px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
tr:last-child td{border-bottom:none}
th{background:var(--sunk);color:var(--muted);position:sticky;top:0;font-weight:600}
.th-pick{display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.th-pick input{margin:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){ tbody tr:hover td,table tr:hover td{background:#8b98a512} }
.st-sent{color:var(--accent)} .st-failed{color:var(--red)}
.st-preview{color:var(--amber)} .st-skipped{color:var(--muted)}

/* ---------------- tokens + column picker ---------------- */
details.ai{margin-top:10px}
details.ai summary{cursor:pointer;color:var(--accent)}
details.ai input{width:100%;margin:8px 0}

.pickbox{background:var(--sunk);border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:12px}
.pickhead{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;font-size:13px}
.colpicks{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:flex;align-items:center;gap:5px;font-size:12.5px;background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){ .pick:hover{border-color:var(--accent)} }
.pick:has(input:checked){border-color:var(--accent);color:var(--accent)}
.pickacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}
.pickopts{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)}
.pickopts label{cursor:pointer}
.ai-off code{background:var(--sunk);border-radius:4px;padding:1px 5px}

/* ---------------- translate (client ki bhaasha) ---------------- */
.trbox{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--sunk)}
.trrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.trlabel{font-size:13px;font-weight:600}
.trrow select{flex:1;min-width:150px}
.trbox .warn{margin-top:8px}
/* mobile: label aur dropdown apni-apni line par, buttons neeche saath me —
   warna language ka naam kat jaata hai ("— choose a lan...") */
@media (max-width:620px){
  .trlabel,.trrow select{flex-basis:100%}
  .trrow button{flex:1}
}

/* ---------------- qr ---------------- */
.qrbox{display:flex;justify-content:center;align-items:center;min-height:240px;background:#fff;
  border-radius:11px;padding:14px;color:#333}
.qrbox img{width:240px;height:240px}

/* ---------------- send ---------------- */
.sendbar{display:flex;gap:10px;flex-wrap:wrap}
.progress{margin-top:14px}
.bar{height:12px;background:var(--sunk);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
#barFill{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.warn{color:var(--amber);font-size:12px;margin:12px 0 0;line-height:1.55}
.schedbox{margin:16px 0 0}

/* ---------------- conditions ---------------- */
.cond{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cond select,.cond input{flex:1;min-width:110px}
.cond .rm{flex:0;background:transparent;border:none;color:var(--red)}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;background:#000000b8;display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:60;backdrop-filter:blur(2px)}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
  width:640px;max-width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-box h3{margin:0 0 6px;font-size:17px}
.mo-h{margin:16px 0 6px;font-size:13px;color:var(--accent)}
.mo-list{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:5px}
.mo-list code{background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.modal-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------------- developer code blocks ---------------- */
.code{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:12px;
  overflow-x:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;
  white-space:pre;color:var(--text);margin:0}
.copyrow{display:flex;gap:8px}
.copyrow input{flex:1}

/* ---------------- events ---------------- */
.evst{padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--sunk);border:1px solid var(--line)}
.evst-pending{color:var(--amber);border-color:var(--amber)}
.evst-running{color:var(--accent);border-color:var(--accent)}
.evst-done{color:var(--accent)}
.evst-cancelled{color:var(--muted)}
.evst-failed{color:var(--red);border-color:var(--red)}
/* preview modal me message multi-line hota hai — nowrap nahi chalega */
.pv-msg{white-space:pre-wrap;word-break:break-word;max-width:420px;min-width:220px;line-height:1.5}

/* ---------------- landing (login page) ---------------- */
.landing{max-width:1000px}
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;
  padding:20px;border-radius:22px;
  /* corner "glow" — sirf background-image hai, box se kabhi bahar nahi jaata (koi overflow/scroll risk nahi) */
  background:
    radial-gradient(480px 340px at 88% -15%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
    radial-gradient(360px 280px at -8% 115%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  background-repeat:no-repeat;
}
.hero-copy{padding:6px 0}
.hero-title{
  margin:0;font-size:40px;line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--text);
}
.hero-tagline{margin:10px 0 0;font-size:19px;font-weight:600;color:var(--accent)}
.hero-sub{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:46ch}
.hero-points{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;
  font-size:13.5px;line-height:1.5}
.hero-points li{display:flex;gap:9px;align-items:flex-start}
.hero-points li::before{content:'✓';color:var(--accent);font-weight:800;flex:0 0 auto}
.auth-card{align-self:start}

/* Abstract "messages flowing out to multiple channels" illustration — sirf shapes/lines,
   jaan-boojh ke koi chat-bubble-tail shape nahi (WhatsApp-jaisi na lage, CLAUDE.md §9). */
.hero-art{width:100%;max-width:440px;height:auto;margin-top:24px;display:block;overflow:visible}
.hero-art-line{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 8;opacity:.55;fill:none}
.hero-art-line-thin{stroke-width:1.4;stroke-dasharray:2 5;opacity:.4}
.hero-art-pill{stroke:var(--accent);stroke-width:1.3}
.hero-art-pill-a{fill:color-mix(in srgb,var(--accent) 14%,var(--card))}
.hero-art-pill-b{fill:color-mix(in srgb,var(--accent) 24%,var(--card));stroke:var(--accent-d)}
.hero-art-pill-c{fill:color-mix(in srgb,var(--accent) 10%,var(--card))}
.hero-art-line-mini{fill:var(--muted);opacity:.6}
.hero-art-node{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .hero-art-node{animation:artPulse 2.4s ease-in-out infinite}
  .hero-art-node-2{animation-delay:.25s}
  .hero-art-node-3{animation-delay:.5s}
}
@keyframes artPulse{0%,100%{opacity:1}50%{opacity:.45}}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feat{display:flex;gap:12px;align-items:flex-start;background:var(--sunk);
  border:1px solid var(--line);border-radius:11px;padding:13px;
  transition:border-color .15s ease,transform .12s ease}
@media (hover:hover) and (pointer:fine){ .feat:hover{border-color:var(--accent);transform:translateY(-2px)} }
.feat-ico{
  font-size:19px;line-height:1;flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);
}
.feat b{display:block;font-size:14px;margin-bottom:3px}
.feat p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}

.startsteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;
  font-size:14px;line-height:1.55}
.startsteps li::marker{color:var(--accent);font-weight:700}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:16px;padding:16px}
  .hero-title{font-size:30px}
  .hero-tagline{font-size:17px}
  .hero-sub{max-width:none}
  .hero-art{max-width:320px;margin:18px auto 0}
}

/* ---------------- guide ---------------- */
.toc{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.toc a{color:var(--accent);text-decoration:none}
@media (hover:hover) and (pointer:fine){ .toc a:hover{text-decoration:underline} }
.gsec{scroll-margin-top:76px}
.gsec-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px}
.gsec-ico{font-size:22px;line-height:1}
.gsteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.6}
.gsteps li::marker{color:var(--accent);font-weight:700}
.gtip{margin:14px 0 0;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.55;
  background:var(--sunk);border-left:3px solid var(--accent);color:var(--text)}
.gwarn{margin:10px 0 0;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.55;
  background:var(--sunk);border-left:3px solid var(--amber);color:var(--amber)}

/* ---------------- history ---------------- */
.datecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:12px}
.datecard{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;
  transition:border-color .15s ease,transform .12s ease}
@media (hover:hover) and (pointer:fine){ .datecard:hover{border-color:var(--accent);transform:translateY(-2px)} }
.datecard .d{font-weight:700;font-size:15px}
.datecard .c{color:var(--muted);font-size:12px;margin-top:6px}
.back{cursor:pointer;color:var(--accent);display:inline-block;margin-bottom:10px}

/* ---------------- toast ---------------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--card);
  border:1px solid var(--accent);color:var(--text);padding:11px 18px;border-radius:11px;z-index:70;
  box-shadow:var(--shadow);max-width:92vw;text-align:center;animation:toastIn .18s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------------- RTL (Arabic/Urdu/Hebrew/Persian) ---------------- */
[dir="rtl"] .profile-menu{right:auto;left:0;text-align:right}
[dir="rtl"] th,[dir="rtl"] td{text-align:right}
[dir="rtl"] .fact b{text-align:left}
[dir="rtl"] .mo-list,[dir="rtl"] .toc,[dir="rtl"] .gsteps{padding-left:0;padding-right:20px}
[dir="rtl"] .gtip,[dir="rtl"] .gwarn{border-left:none;border-right:3px solid var(--accent)}
[dir="rtl"] .gwarn{border-right-color:var(--amber)}

/* ---------------- mobile ---------------- */
@media (max-width:700px){
  /* notch/rounded corners wale phones ke liye safe area */
  .topbar{padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));gap:8px}
  .brand{font-size:16px}
  .brand .logo{font-size:18px}
  /* header pills bhi ungli se dabane layak (pehle 30px the) */
  .pill{padding:10px 13px;font-size:13px;display:inline-flex;align-items:center;min-height:40px}
  .setbtn{font-size:17px;padding:9px 13px}
  .setmenu{position:fixed;inset:auto 8px 8px 8px;top:auto;min-width:0;border-radius:14px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));animation:sheetUp .2s ease}
  .setmenu .pm-select{max-width:55%;font-size:16px;padding:9px 10px}

  /* header ek hi line me rahe. Usage aur connection status dono profile menu me
     already hain; yahan status avatar par chhote green/red badge ki tarah dikhta
     hai (jaana-pehchana online-indicator pattern).
     NOTE: badge ka green jaan-boojh ke neutral #22c55e hai — WhatsApp ka brand
     green (#25d366/#128c7e) use nahi karna (Safe Browsing incident, CLAUDE.md §9). */
  #usage,#waStatus{display:none}
  .avatar::after{
    content:'';position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;
    border-radius:50%;background:var(--red);border:2px solid var(--accent-d);
  }
  .avatar.wa-on::after{background:#22c55e}
  .avatar-lg::after{content:none}

  /* file wali row stack ho jaye, warna "No fil...chosen" kat-ta hai */
  .tabpane{flex-direction:column;align-items:stretch}
  .tabpane input,.tabpane button{width:100%;min-width:0}
  .wrap{padding:14px max(14px,env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom));gap:12px}
  .card{padding:15px 14px;border-radius:12px}
  .card h2{font-size:16px}
  .row{gap:12px}
  .row label{min-width:100%;flex:1 1 100%}

  /* iOS input pe focus karte hi zoom kar deta hai agar font 16px se chhota ho */
  input,select,textarea{font-size:16px;padding:11px 12px}
  .pm-select,.pm-field input,.pm-sec input,.cond input,.cond select{font-size:16px}
  /* ungli ke liye button bade */
  button,.linkbtn{min-height:44px;padding:11px 16px}
  /* ...par avatar gol hi rehna chahiye (button hai, warna oval ho jaata hai) */
  .avatar{width:40px;height:40px;min-height:40px;padding:0}
  .mini{min-height:40px;padding:9px 14px;font-size:13.5px}
  .sendbar{gap:8px}
  .sendbar button,.modal-acts button,.pickacts button{flex:1 1 auto}
  /* tabs = segmented control (do-do karke), warna ye alag-alag buttons lagte the */
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tab{width:100%;text-align:center;font-size:13px;padding:11px 8px;line-height:1.25}
  /* "Sheet ka format dekho" tabs jaisa na lage — halka aur alag */
  .cardhead{gap:6px}
  .cardhead h2{margin:0 0 8px}
  .cardhead>button{width:100%;background:transparent;border-style:dashed;
    color:var(--accent);font-size:13.5px;margin-bottom:4px}

  /* profile menu = neeche se aane wali sheet */
  .profile{position:static}
  .profile-menu{
    position:fixed;inset:auto 0 0 0;top:auto;width:100%;max-width:none;
    max-height:82vh;border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .2s ease;
  }
  .pm-link{padding:12px 12px;font-size:15px}
  .pm-setrow{font-size:14px}
  .pm-select{max-width:55%;padding:9px 10px}

  /* modal bhi lagbhag poori screen */
  .modal{padding:0;align-items:flex-end}
  .modal-box{width:100%;max-height:92vh;border-radius:16px 16px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:sheetUp .2s ease}

  /* Tables desktop jaisi hi rehti hain — bas side me scroll hoti hain.
     Pehla column chipka rehta hai taaki scroll karte waqt pata rahe kis row me ho. */
  .tablewrap{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #previewWrap,#resultWrap{height:340px}
  .tablewrap th,.tablewrap td{padding:9px 12px;font-size:13.5px}
  .tablewrap th:first-child,.tablewrap td:first-child{
    position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line);
  }
  .tablewrap thead th:first-child{background:var(--sunk);z-index:2}
  .td-acts{white-space:nowrap}
  .pv-msg{max-width:min(70vw,340px);min-width:180px}

  /* QR chhoti screen me fit ho */
  .qrbox{min-height:0;padding:12px}
  .qrbox img{width:min(240px,68vw);height:auto}

  .datecards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .gsteps{font-size:14.5px}
  .toc{font-size:14px}
  .colpicks{gap:7px}
  .pick{padding:7px 11px;font-size:13.5px}
}
@keyframes sheetUp{from{transform:translateY(14px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* bahut chhoti screen (380px se kam) */
@media (max-width:380px){
  .brand span:not(.logo){display:none}       /* sirf icon, naam nahi */
  .tablewrap th,.tablewrap td{padding:8px 10px;font-size:13px}
}

/* animation kam chahiye to band */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}