/* =====================================================================
   هدهد العراق — console styles · the Hudhud Iraq brand
   (uiux/Hudhud-Iraq-Brand-Guidelines.pdf; the colours and the 'Hudhud'
   typeface are defined once in fonts/fonts.css). A warm paper canvas, the
   Hudhud Navy top bar, navy for actions, and the crest red for one thing at
   a time: the page you are on, and a dot that wants your attention.
   Navigation runs across the top (sections, then the open section's pages);
   on a phone the sections become a tab bar along the bottom.
   The accent keeps its historical variable name, --blue: thousands of rules
   say var(--blue), and it simply means "the accent" (Navy 2 here).
   --kohl is the dark bar and --brand-hi the crest, also for history's sake.
   ===================================================================== */
:root{
  --brand:var(--hh-navy); --brand-hi:var(--hh-crest); --kohl:var(--hh-navy); --kohl-2:var(--hh-navy-2);
  --gold:var(--hh-sand); --crest:var(--hh-crest); --cream:var(--hh-cream);
  --font:'Hudhud',Tahoma,'Segoe UI',sans-serif;
  --blue:var(--hh-navy-2); --blue-dark:var(--hh-navy);
  --blue-soft:#E8ECF5; --blue-border:#B9C3DB;
  --ink:#141B2D; --ink2:#2C3446; --ink3:#475069; --muted:#636B80;
  --line:#E8E1D3; --line2:#D8CEBB; --panel:#F4EFE4; --bg:#FAF7F0; --surface:#FFFFFF;
  --green:#127A47; --green-soft:#E7F5EC; --green-border:#A8DCBE;
  --amber:#8F5E00; --amber-soft:#FFF5D6; --amber-border:#F0D689;
  --red:#BE1E3C; --red-soft:#FDEBEE; --red-border:#F5B8C3;
  /* "for your information" stays blue whatever the accent is */
  --info:#2B5FA6; --info-soft:#EBF2FB; --info-border:#BBD0EE;
  --purple:#6E44D4;
  --shadow:0 1px 2px rgba(13,27,62,.05);
  --shadow-card:0 1px 2px rgba(13,27,62,.04),0 8px 22px -14px rgba(13,27,62,.18);
  --shadow-pop:0 22px 54px -14px rgba(13,27,62,.30),0 4px 12px rgba(13,27,62,.08);
  --shadow-btn:inset 0 0 0 1px var(--line2),0 1px 2px rgba(13,27,62,.05);
  --on-blue:#fff;   /* lettering on an accent-filled control */
  --hx-top:60px; --hx-sub:50px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:var(--blue);text-decoration:none}
/* Scrollbars stay out of sight until the pointer is over the thing that
   scrolls. Their room is kept (thin, transparent), so nothing shifts sideways
   when one appears. The standard properties are what Chrome, Edge and Firefox
   use; the -webkit- ones are for Safari. */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover{scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
*:hover::-webkit-scrollbar-thumb{background:var(--line2)}

/* ---------- sign-in ------------------------------------------------
   A dark stage. The form is a white card on the start side; beside it the
   pitch and a few message bubbles showing what the product does. The same
   classes dress the e-mail check and the social sign-up steps. */
.auth-wrap{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,480px) minmax(0,720px);grid-template-areas:"form art";
  /* the two columns stay one composition, centred, however wide the screen */
  justify-content:center;column-gap:clamp(0px,4vw,72px);
  background:var(--kohl);color:var(--cream)}
.auth-wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/brand/supergraphic-tonal.svg) 0 50%/cover no-repeat;opacity:.55}
/* phones: only the form shows, and the bird would sit behind it */
@media(max-width:1020px){.auth-wrap::before{opacity:.35}}
.auth-wrap.solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"form"}
.auth-form{grid-area:form;display:flex;align-items:center;justify-content:center;padding:40px 32px}
.auth-card{width:100%;max-width:410px;background:var(--surface);color:var(--ink);
  border-radius:26px;padding:34px 30px 28px;
  box-shadow:0 34px 90px -24px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
.auth-card h2{font-size:26px;font-weight:700;line-height:1.3}
.auth-card .sub{color:var(--muted);margin-top:6px;font-size:14px;line-height:1.75}
.auth-card form{margin-top:24px;display:flex;flex-direction:column;gap:15px}
.auth-card form .btn.primary.block{height:48px;font-size:15px;margin-top:4px}
.auth-mbrand{display:none;margin-bottom:18px}
.auth-mbrand .hx-mark{width:auto;height:48px}
/* the mark on a white card: navy lines, the darker sand */
.auth-card .hx-mark{--mk-line:var(--hh-navy);--mk-throat:#A88A5F}
.auth-switch{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}
.auth-switch b{color:var(--blue);cursor:pointer}
.auth-art{grid-area:art;min-width:0;padding:48px 64px 44px;display:flex;flex-direction:column;
  justify-content:space-between;gap:40px}
.auth-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;color:var(--cream)}
.auth-brand .hx-lockup{display:block;height:40px;width:auto}
.auth-headline{max-width:560px}
.auth-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
  font-size:13.5px;font-weight:600;color:var(--gold)}
.auth-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.auth-headline h1{font-size:clamp(34px,4vw,54px);line-height:1.4;font-weight:700;color:var(--cream)}
.auth-headline p{margin-top:18px;font-size:16.5px;line-height:1.85;color:rgba(255,241,215,.72);max-width:500px}
/* the phone-screen bubbles: the business's messages arrive on the start side,
   the customer's reply goes out on the other */
.auth-chat{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px}
.ac-msg{max-width:88%;padding:10px 14px 7px;border-radius:18px;font-size:14px;line-height:1.65;
  color:#1C2233;box-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  opacity:0;animation:acIn .55s cubic-bezier(.2,.8,.2,1) forwards}
.ac-msg.out{align-self:flex-start;background:#fff;border-start-start-radius:6px}
.ac-msg.in{align-self:flex-end;background:var(--cream);border-start-end-radius:6px}
.ac-msg:nth-child(1){animation-delay:.15s}
.ac-msg:nth-child(2){animation-delay:.55s}
.ac-msg:nth-child(3){animation-delay:1.15s}
.ac-msg b{font-weight:700;letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}
.ac-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;
  font-size:11px;color:#7A8195;direction:ltr}
.ac-meta svg{color:#2F8FD8}
@keyframes acIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ac-msg{animation:none;opacity:1}}
.auth-points{display:flex;flex-wrap:wrap;gap:8px}
.auth-point{display:inline-flex;align-items:center;gap:8px;padding-block:7px;padding-inline:8px 14px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-size:13px;color:rgba(255,241,215,.86)}
.auth-point .dot{width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--kohl);
  display:grid;place-items:center;flex-shrink:0}
@media(max-width:1020px){
  .auth-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"form";justify-content:stretch}
  .auth-art{display:none}
  .auth-mbrand{display:block}
}
/* show / hide the password (the field itself is left-to-right, so physical) */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border:none;background:none;border-radius:9px;color:var(--muted);display:grid;place-items:center}
.pw-eye:hover{background:var(--panel);color:var(--ink)}
.pw-eye[aria-pressed="true"]{color:var(--blue)}
/* social sign-in */
.oauth-sep{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--muted);font-size:12.5px}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-list{display:flex;flex-direction:column;gap:10px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 14px;border:1px solid var(--line2);border-radius:13px;background:var(--surface);
  color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .13s,border-color .13s}
.oauth-btn:hover{background:var(--panel);border-color:var(--line2)}
.oauth-btn svg{flex:none}
/* selectable chips (signup "how did you hear") */
.or-chip{border:1px solid var(--line2);background:var(--surface);color:var(--ink3);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background .13s,border-color .13s,color .13s}
.or-chip:hover{border-color:var(--line2);background:var(--panel)}
.or-chip.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.demo-note{margin-top:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--ink3);line-height:1.6}

/* ---------- shell: shared bits (layout: "HOOPOE SHELL" at the end) --- */
.bdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--biz)}
.acct-row{border-inline-start:4px solid var(--rowc, transparent) !important}
.dd-bdot{flex:none;width:12px;height:12px;margin:0 2px;border-radius:50%;background:var(--rowc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--rowc) 22%, transparent)}
span.acct-pic{cursor:default}
.acct-col{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--surface);
  background:var(--rowc);box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0}
.acct-pal{display:flex;flex-wrap:wrap;gap:8px;padding-block:8px 10px;padding-inline:18px 12px}
.acct-pal[hidden]{display:none}
.acct-pal button{width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0}
.acct-pal button.on{box-shadow:0 0 0 2px var(--ink)}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink3);display:grid;place-items:center;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--panel);color:var(--ink)}
/* avatars (the team list borrows .side-user .av for its initials) */
.side-user .av{width:34px;height:34px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);display:grid;place-items:center;font-weight:600;
  font-size:13px;color:var(--ink3)}
.user-chip{display:flex;align-items:center;gap:8px}
.user-chip .av{width:34px;height:34px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:none}
.content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 32px 44px}
/* search fields — each page's own, and the top bar's (restyled in HOOPOE SHELL) */
.searchbox{position:relative}
.searchbox>svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none}
/* physical sides on purpose: a dir="auto" field is left-to-right while empty,
   which would move logical padding away from the icon (mirrored for dir=ltr under LANGUAGE) */
.searchbox input{padding-right:36px;padding-left:12px;width:280px}

/* ---------- generic components -------------------------------------- */
.page{display:flex;flex-direction:column;gap:22px}
/* an empty mount point (a form that is not open, a hidden notice) must not
   spend one of those gaps */
.page > div:empty{display:none}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:14px}
.page-head h2{font-size:28px;font-weight:700;line-height:1.3}
.page-head p{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.7}
/* the section a page lives in, above its title */
.ph-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:12.5px;font-weight:600;color:var(--blue)}
.ph-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-card);padding:22px}
.card.flush{padding:0}
.card-head{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:15.5px;font-weight:600}
.card h3{font-size:15.5px;font-weight:600}

.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1fr 1fr}
.g-21{grid-template-columns:1.6fr 1fr}
.g-12{grid-template-columns:1.4fr 1fr}

.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--ink2)}
.field .hint{font-size:12px;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 13px;border-radius:12px;
  border:1px solid var(--line2);font-size:14px;color:var(--ink);outline:none;
  background:var(--surface);box-shadow:none;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
textarea{resize:vertical;min-height:90px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;border:none;
  transition:background .15s,box-shadow .15s,color .15s,transform .1s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn.primary{background:var(--blue);color:var(--on-blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px color-mix(in srgb,var(--blue) 90%,transparent)}
.btn.primary:hover{background:var(--blue-dark)}
.btn.ghost{background:var(--surface);color:var(--ink2);box-shadow:var(--shadow-btn)}
.btn.ghost:hover{background:var(--panel)}
.btn.soft{background:var(--blue-soft);color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue-border)}
.btn.soft.b-sendsave{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1px var(--green-border)}
/* dashboard header: equal-height action buttons */
.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.head-actions>.btn{height:42px;padding:0 16px}
.btn.danger{background:var(--red-soft);color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red-border)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.block{width:100%}

.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:500;border:1px solid var(--line2);background:var(--surface);color:var(--ink2)}
.chip.blue{background:var(--blue-soft);border-color:var(--blue-border);color:var(--blue)}
.chip.green{background:var(--green-soft);border-color:var(--green-border);color:var(--green)}
.chip.amber{background:var(--amber-soft);border-color:var(--amber-border);color:var(--amber)}
.chip.red{background:var(--red-soft);border-color:var(--red-border);color:var(--red)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}

.pill{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:8px 10px;
  border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.sent{background:var(--panel);color:var(--ink3)}
.pill.delivered{background:var(--info-soft);color:var(--info)}
.pill.read{background:var(--green-soft);color:var(--green)}
.pill.queued{background:var(--amber-soft);color:var(--amber)}
.pill.failed{background:var(--red-soft);color:var(--red)}
.pill.no_whatsapp{background:color-mix(in srgb,var(--purple) 12%,transparent);color:var(--purple)}

table{width:100%;border-collapse:collapse}
thead tr{background:transparent}
th{text-align:start;padding:12px 16px;font-size:12px;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 16px;font-size:14px;border-top:1px solid var(--line)}
thead + tbody > tr:first-child > td{border-top:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:color-mix(in srgb,var(--panel) 55%,transparent)}
td .sub{font-size:12px;color:var(--muted)}
.row-strong{font-weight:600}

/* stat cards */
.stat{padding:20px}
.stat .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stat .top span{font-size:13px;font-weight:500;color:var(--muted)}
.stat .ico{width:36px;height:36px;border-radius:12px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;flex:none}
.stat .val{font-size:30px;font-weight:700;margin-top:12px;font-variant-numeric:tabular-nums}

/* activity list */
.act{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.act:first-child{border-top:none}
.act .ico{width:38px;height:38px;border-radius:12px;background:var(--panel);color:var(--ink3);
  display:grid;place-items:center;flex-shrink:0}
.act .info{flex:1;min-width:0}
.act .info b{font-size:14px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.act .info span{font-size:12px;color:var(--muted)}

/* preview bubble */
.wa-preview{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-top:10px}
.wa-preview .head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wa-preview .head .av{width:30px;height:30px;border-radius:50%;background:var(--green-soft);
  display:grid;place-items:center}
.wa-bubble{background:#E7FCE3;border-start-start-radius:10px;border-start-end-radius:10px;border-end-end-radius:10px;border-end-start-radius:2px;padding:9px 11px;
  font-size:13px;line-height:1.5;color:var(--ink2);white-space:pre-wrap}

/* tabs / filters: pill tabs, the chosen one solid ink */
.filters{display:flex;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;align-items:center}
.filter{padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink3);text-transform:capitalize;transition:background .15s,color .15s,border-color .15s}
.filter:hover{border-color:var(--ink3);color:var(--ink)}
.filter.active{border-color:var(--ink);background:var(--ink);color:var(--surface)}

/* checkbox row */
.pick{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface)}
.pick.on{background:var(--blue-soft);border-color:var(--blue-border)}
.pick input{width:auto;box-shadow:none}
.pick .info{flex:1}
.pick .info b{font-size:13px}
.pick .info span{font-size:12px;color:var(--muted);display:block}

/* Bulk recipients — selectable contact cards */
.bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;padding:1px}
.pick-card{position:relative;overflow:hidden;border-radius:12px;padding:2px;
  background:none;outline:1px solid var(--line);cursor:pointer;transition:.15s ease-in-out}
.pick-card>input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pick-card:hover{outline-color:var(--line2)}
.pick-card .glow,#bcList .pick .glow{position:absolute;inset:0;border-radius:12px;opacity:0;pointer-events:none;
  transform:scale(2);transition:opacity .2s ease-in-out;
  background:conic-gradient(at 49% 49%,var(--brand-hi) 1%,var(--brand) 10%,var(--brand) 43%,
    var(--gold) 51%,var(--brand) 59%,var(--brand) 92%,var(--brand-hi) 100%)}
.pick-card.on{outline-color:transparent}
.pick-card.on .glow,#bcList .pick.on .glow{opacity:1;animation:pc-spin 3s linear infinite}
@keyframes pc-spin{to{transform:scale(2) rotate(360deg)}}

/* Bulk recipients — list view rows reuse the same glow (scoped) */
/* The list shares .stack, a COLUMN FLEX box, and the container is capped at
 * 420px so it can scroll. Flex items shrink to share that height by default,
 * which crushed 200+ rows into a few pixels each — they have to keep their own
 * size and let the container scroll instead. Card view escaped this because
 * .bc-grid is a grid. */
#bcList.stack{gap:8px}
#bcList.stack>*{flex:none}
/* badges sit beside the number, not stacked under each other — a list view
 * that is as tall as the cards is not a list view */
#bcList .pick .pick-badges{display:flex;align-items:center;justify-content:flex-end;
  flex:none;gap:6px;flex-wrap:wrap;max-width:55%}
#bcList .pick{position:relative;overflow:hidden;border:none;outline:1px solid var(--line);
  border-radius:9px;padding:2px;background:none}
#bcList .pick:hover{outline-color:var(--line2)}
#bcList .pick.on{outline-color:transparent}
#bcList .pick .face{position:relative;z-index:1;flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:7px;background:var(--surface)}
/* The face is what HIDES the spinning gradient behind it, leaving only the 2px
 * rim. --blue-soft is a solid hex in light mode but translucent in dark, so a
 * plain background let the whole conic gradient show through a selected row —
 * a huge blue wedge instead of a border. Paint the tint over an opaque base so
 * it covers in both themes. */
#bcList .pick.on .face{background-color:var(--surface);
  background-image:linear-gradient(var(--blue-soft),var(--blue-soft))}
/* The rim keeps spinning in list view too. It is a transform-only animation,
 * so it runs on the compositor without repainting — the cost of a few hundred
 * of them is layer memory, not frame time. If a huge selection ever feels
 * heavy, cap it here rather than freezing the effect outright. */
.pick-card .face{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border-radius:10px;padding:12px 14px;min-height:92px}
.pick-card .pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pick-card .cbx{flex:none;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--line2);background:var(--surface);display:grid;place-items:center;
  color:transparent;transition:.15s ease-in-out}
.pick-card.on .cbx{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.pick-card .cbx svg{display:block}
.pick-card .pc-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.pick-card .pc-id{display:flex;flex-direction:column;gap:2px}
.pick-card .pc-id b{font-size:14px;color:var(--ink);line-height:1.3;word-break:break-word}
.pick-card .pc-id .num{font-size:13px;font-weight:500;color:var(--ink2);
  font-variant-numeric:tabular-nums;unicode-bidi:plaintext}

/* Paste numbers — stacked one-per-line boxes */
/* ---- pasted numbers: a grid of tiles, not an ever-growing column ------
   A few hundred numbers as inline chips made one very tall box that pushed the
   send button off screen and re-rendered on every keystroke. Fixed-width tiles
   keep the block a predictable height and the list is capped — see .bc-more. */
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:8px;margin-bottom:10px}
.num-tag{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);font-size:12.5px;font-weight:500;
  font-variant-numeric:tabular-nums;min-width:0}
.num-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-tag button{flex:none;border:none;background:none;cursor:pointer;line-height:1;
  font-size:15px;color:var(--muted);padding:0 2px;border-radius:5px;transition:.13s}
.num-tag button:hover{color:var(--red);background:var(--red-soft)}

/* "Show more" for any capped list — contacts and pasted numbers both use it */
.bc-more{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;border-radius:10px;background:var(--surface);
  border:1px dashed var(--line2);color:var(--ink3);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .16s,color .16s,background .16s}
.bc-more:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.bc-more i{font-style:normal;font-weight:500;color:var(--muted)}
.bc-more:hover i{color:var(--blue)}

.chip-input.col{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px}
.chip-input.col .chip-tag{align-self:flex-start;max-width:100%;
  border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(90deg,var(--line2),var(--blue-border),var(--line2)) border-box;
  background-size:auto,200% 100%;background-repeat:no-repeat;
  animation:chip-in .22s ease,chip-sheen 3.6s linear infinite}
.chip-input.col .chip-tag>span{overflow:hidden;text-overflow:ellipsis}
.chip-input.col>input{width:100%;min-width:0}
@keyframes chip-in{from{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:none}}
@keyframes chip-sheen{to{background-position:0 0,-200% 0}}

/* Upload CSV — styled file drop zone */
.file-native{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.filedrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:20px 16px;text-align:center;cursor:pointer;border-radius:12px;
  border:1.5px dashed var(--line2);background:var(--panel);color:var(--ink2);transition:.15s ease-in-out}
.filedrop:hover{border-color:var(--blue-border);background:var(--blue-soft)}
.filedrop.drag{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue-soft)}
.filedrop .fd-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);color:var(--blue)}
.filedrop .fd-main{font-size:14px;color:var(--ink2)}
.filedrop .fd-main b{color:var(--blue);font-weight:600}
.filedrop .fd-name{font-size:12px;color:var(--muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.filedrop.has{border-style:solid;border-color:var(--blue-border);background:var(--blue-soft)}
.filedrop.has .fd-name{color:var(--blue);font-weight:600}

/* WhatsApp-style message preview */
.wa-phone{width:100%;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 6px 22px rgba(11,20,26,.09)}
.wa-head[dir="rtl"] .wa-back svg{transform:scaleX(-1)}
.wa-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#008069;color:#fff}
.wa-head .wa-back{display:flex;align-items:center;margin-inline-end:-2px;opacity:.95}
.wa-av{flex:none;width:34px;height:34px;border-radius:50%;background:#cfe9df;color:#075e54;
  display:grid;place-items:center;font-weight:700;font-size:15px}
.wa-id{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.wa-id b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-id i{font-size:11px;font-style:normal;color:rgba(255,255,255,.82)}
.wa-acts{display:flex;align-items:center;gap:15px;opacity:.95}
.wa-body{display:flex;justify-content:flex-end;align-items:flex-start;padding:16px 10px;min-height:120px;
  background-color:#efeae2;
  background-image:radial-gradient(rgba(11,20,26,.035) 1px,transparent 1px);background-size:22px 22px}
.wa-phone .wa-bubble{position:relative;max-width:90%;background:#d9fdd3;color:#111b21;
  border-radius:8px;border-start-end-radius:0;padding:6px 10px 18px;
  font-size:14px;line-height:1.55;word-break:break-word;unicode-bidi:plaintext;
  box-shadow:0 1px 1px rgba(11,20,26,.13)}
.wa-phone .wa-bubble::after{content:"";position:absolute;top:0;inset-inline-end:-8px;width:0;height:0;
  border:8px solid transparent;border-top-color:#d9fdd3;border-inline-end-width:0}
.wa-phone .wa-text{white-space:pre-line;unicode-bidi:plaintext}
.wa-phone .wa-time{position:absolute;bottom:4px;inset-inline-end:10px;font-size:11px;color:#667781;
  display:inline-flex;align-items:center;gap:3px;line-height:1}
.wa-phone .wa-time svg{color:#53bdeb}
.wa-phone .wa-empty{color:#667781;font-style:italic}
.wa-phone .pv-var{background:rgba(7,94,70,.13);color:#0a6b4f;border-radius:4px;
  padding:0 4px;font-weight:600;unicode-bidi:plaintext}
.wa-phone .pv-var.empty{display:inline;background:none;padding:0;border-radius:0;
  color:#9aa7a0;font-weight:600}
/* an example value standing in for a blank: readable as part of the sentence,
   but visibly the part that changes per customer */
.wa-phone .pv-fill{background:rgba(7,94,70,.10);border-radius:3px;padding:0 3px;
  unicode-bidi:plaintext}
.vmap-sug{font-weight:400;font-size:11px;color:var(--blue)}

/* Cards/list view toggle */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-btn)}
.seg-btn{display:grid;place-items:center;width:34px;height:30px;border:none;
  background:var(--surface);color:var(--muted);cursor:pointer;transition:.13s}
.seg-btn+.seg-btn{border-inline-start:1px solid var(--line)}
.seg-btn:hover{color:var(--ink2)}
.seg-btn.active{background:var(--blue-soft);color:var(--blue)}

/* sleek segmented control (settings toggles) */
.segpill{display:inline-flex;gap:4px;padding:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-btn)}
.segpill button{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:106px;padding:8px 18px;border:none;background:transparent;color:var(--muted);
  font-size:13.5px;font-weight:600;border-radius:9px;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s}
.segpill button:hover{color:var(--ink2)}
.segpill button.active{background:var(--surface);color:var(--blue);
  box-shadow:0 1px 3px rgba(16,24,40,.12)}
body.dark .segpill{background:var(--bg)}
body.dark .segpill button.active{background:var(--line);color:#fff}
.segpill button svg{width:15px;height:15px;flex-shrink:0}

/* USDT network picker */
.netgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.netchip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;
  font-size:11px;font-weight:600;color:var(--muted);transition:border-color .15s,background .15s,color .15s}
.netchip svg{width:22px;height:22px}
.netchip:hover{border-color:var(--blue-border)}
.netchip.active{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
@media(max-width:420px){.netgrid{grid-template-columns:repeat(3,1fr)}}

/* Website settings — tag colours */
.tc-list{display:flex;flex-direction:column;gap:10px}
.tc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tc-chip{min-width:72px;justify-content:center}
.tc-sws{display:flex;gap:6px}
.tc-sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;transition:transform .1s}
.tc-sw:hover{transform:scale(1.14)}
.tc-input{width:44px;height:30px;padding:2px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);cursor:pointer}
.ws-check{display:flex;align-items:center;gap:8px;margin-top:16px;cursor:pointer;font-size:14px}
.ws-check input{width:auto}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.ws-grid{grid-template-columns:1fr}}
.tc-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue)}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{
  animation:none!important;transition-duration:.01ms!important}
.ws-actions{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;
  gap:12px;margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb, var(--surface) 90%, transparent);backdrop-filter:blur(6px)}
.ws-unsaved{margin-inline-end:auto;font-size:13px;font-weight:600;color:var(--amber)}

.empty{padding:48px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

.alert{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;
  font-size:13px;font-weight:600}
.alert.ok{background:var(--green-soft);border:1px solid var(--green-border);color:var(--green)}
.alert.err{background:var(--red-soft);border:1px solid var(--red-border);color:var(--red)}
.alert.info{background:var(--info-soft);border:1px solid var(--info-border);color:var(--info)}
.alert.amber{background:var(--amber-soft);border:1px solid var(--amber-border);color:var(--amber)}
/* in-flight send: the button spins and the alert breathes, so the wait is
   visibly the network and not a dead click */
.btn-spin{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:.85;
  animation:btnSpin .6s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.alert.sending{animation:sendPulse 1.4s ease-in-out infinite}
@keyframes sendPulse{50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){
  .btn-spin{animation-duration:1.6s}.alert.sending{animation:none}}
@keyframes hdShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.shake{animation:hdShake .45s cubic-bezier(.36,.07,.19,.97) both}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}

/* ===== Support tickets ===== */
@keyframes tkIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tkBub{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tkPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes tkOvIn{from{opacity:0}to{opacity:1}}
.tk-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tk-fbadge{background:var(--red);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 6px;margin-inline-start:3px}
.tk-list{display:flex;flex-direction:column;gap:12px}
.tk-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 18px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  animation:tkIn .45s cubic-bezier(.2,.7,.3,1) both}
.tk-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.10);border-color:var(--line2)}
.tk-card:active{transform:translateY(0);transition-duration:.05s}
.tk-card-top{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
.tk-card-subj{font-weight:650;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-card-prev{font-size:13px;color:var(--ink2);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk-card-prev b{color:var(--muted);font-weight:600}
.tk-card-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--muted)}
.tk-card-meta svg{vertical-align:-2px}
.tk-cat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-weight:600;color:var(--ink3)}
.tk-biz{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink3)}
.tk-when{margin-inline-start:auto}
.tk-status{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:999px;white-space:nowrap;flex:none}
.tk-status.open{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-border)}
.tk-status.answered{background:var(--green-soft);color:var(--green);border:1px solid var(--green-border)}
.tk-status.closed{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.tk-empty{text-align:center;padding:56px 24px;animation:tkIn .5s both}
.tk-empty-ic{width:80px;height:80px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);animation:tkFloat 3.5s ease-in-out infinite}
.tk-empty h3{font-size:19px;margin-bottom:6px;color:var(--ink)}
.tk-empty p{color:var(--muted);font-size:14px;max-width:340px;margin:0 auto 20px;line-height:1.55}
.tk-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:tkOvIn .18s ease}
.tk-modal{background:var(--surface);border-radius:16px;width:100%;max-width:600px;height:min(88vh,720px);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.32);animation:tkPop .32s cubic-bezier(.2,.7,.3,1) both}
.tk-modal-sm{height:auto;max-width:480px}
.tk-modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
.tk-modal-title{font-size:16px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-modal-sub{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tk-x{width:32px;height:32px;border-radius:8px;border:none;background:var(--panel);color:var(--muted);font-size:20px;line-height:1;flex:none;cursor:pointer;transition:background .15s}
.tk-x:hover{background:var(--line);color:var(--ink)}
.tk-thread{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--panel)}
.tk-bubble{max-width:80%;padding:9px 13px;border-radius:15px;box-shadow:var(--shadow);animation:tkBub .34s cubic-bezier(.2,.7,.3,1) both}
.tk-bubble .who{font-size:10.5px;font-weight:700;opacity:.65;margin-bottom:2px}
.tk-bubble .txt{font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.tk-bubble .time{font-size:10px;opacity:.6;margin-top:3px;text-align:end}
.tk-bubble.them{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-end-start-radius:5px}
.tk-bubble.bot{background:var(--blue-soft);border:1px solid var(--blue-border);border-inline-start:3px solid var(--blue)}
.tk-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.tk-act{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;border:1px solid var(--blue);
  background:var(--blue);color:var(--on-blue);font-size:12.5px;font-weight:650;cursor:pointer;
  transition:transform .1s ease,filter .15s ease,background .15s ease}
.tk-act:hover{filter:brightness(1.08)}
.tk-act:active{transform:scale(.95)}
.tk-act svg{flex:none}
.tk-act.ghost{background:transparent;color:var(--blue);border-color:var(--blue-border)}
.tk-act.ghost:hover{background:#fff;filter:none}
.tk-act:disabled{opacity:.55;cursor:default}
.tk-bubble.bot .who{color:var(--blue);opacity:1;display:flex;align-items:center;gap:4px}
.tk-bubble.bot .who svg{flex:none}
.tk-bubble.me{align-self:flex-end;background:var(--blue);color:var(--on-blue);border-end-end-radius:5px}
.tk-empty-thread{text-align:center;color:var(--muted);font-size:13px;margin:auto}
.tk-compose{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface)}
.tk-compose-row{display:flex;align-items:flex-end;gap:9px}
.tk-attach{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.tk-attach:hover{background:var(--panel);color:var(--blue)}
.tk-img{max-width:230px;max-height:270px;border-radius:11px;margin:3px 0 4px;cursor:zoom-in;display:block;object-fit:cover}
.tk-preview{display:flex;gap:8px;flex-wrap:wrap}
.tk-prev-item{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.tk-prev-item img{width:100%;height:100%;object-fit:cover;display:block}
.tk-prev-x{position:absolute;top:2px;inset-inline-end:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center}
.tk-attach-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.tk-lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:tkOvIn .18s ease}
.tk-lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.tk-lb-x{position:fixed;top:16px;inset-inline-end:18px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.tk-reply{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px;font-family:inherit;
  color:var(--ink);background:var(--surface);outline:none;max-height:140px;line-height:1.4;transition:border-color .15s}
.tk-reply:focus{border-color:var(--blue)}
.tk-send{flex:none;width:42px;height:42px;border-radius:12px;border:none;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .1s}
.tk-send:hover{background:var(--blue-dark)}
.tk-send:active{transform:scale(.92)}
.tk-send.sending{opacity:.6}
.tk-closed{flex:1;text-align:center;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.tk-newbody{padding:18px;display:flex;flex-direction:column}
.tk-lbl{font-size:12.5px;font-weight:600;color:var(--ink3);margin:12px 0 6px}
.tk-lbl:first-child{margin-top:0}
.tk-cats{display:flex;gap:8px;flex-wrap:wrap}
.tk-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:13px;font-weight:600;cursor:pointer;transition:all .14s}
.tk-chip:hover{border-color:var(--line2)}
.tk-chip.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.tk-input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--surface);outline:none;transition:border-color .15s;resize:vertical}
.tk-input:focus{border-color:var(--blue)}
.tk-err{color:var(--red);font-size:13px;min-height:18px;margin-top:8px}
.tk-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line);flex:none}
@media (prefers-reduced-motion:reduce){.tk-card,.tk-bubble,.tk-modal,.tk-empty,.tk-empty-ic,.tk-overlay{animation:none}}
@media (max-width:560px){.tk-modal{height:100vh;max-width:none;border-radius:0}.tk-overlay{padding:0}}

.dashed-card{border:1.5px dashed var(--line2);box-shadow:none;display:grid;
  place-items:center;min-height:180px}

/* ---- toast ---------------------------------------------------------
   Its own fixed palette, never --ink/--surface: those flip with the theme
   and used to leave white text on a near-white pill in dark mode. A dark
   pill reads on both themes; the icon chip carries the success/error colour. */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:11px;
  max-width:min(460px,calc(100vw - 28px));padding-block:11px 11px;padding-inline:12px 16px;
  border-radius:13px;font-size:13.5px;font-weight:500;line-height:1.45;
  --tst-bg:#221C19; --tst-ink:#FBF6F1; --tst-bd:rgba(255,255,255,.12);
  --tst-ic:#4ADE97; --tst-ic-bg:rgba(74,222,151,.16);
  background:var(--tst-bg);color:var(--tst-ink);border:1px solid var(--tst-bd);
  box-shadow:0 14px 36px rgba(10,13,18,.26),0 3px 8px rgba(10,13,18,.14);
  cursor:pointer;user-select:none;-webkit-user-select:none}
body.dark .toast{--tst-bg:#13244B; --tst-bd:rgba(255,255,255,.11);
  box-shadow:0 14px 38px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4)}
.toast[hidden]{display:none}
.toast.err{--tst-ic:#FF8F84; --tst-ic-bg:rgba(255,143,132,.18);
  --tst-bd:rgba(255,143,132,.34)}
.toast-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:8px;background:var(--tst-ic-bg);color:var(--tst-ic)}
.toast-tx{min-width:0;overflow-wrap:anywhere}
/* the -50% has to ride along inside the keyframes or the pill jumps off-centre */
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.96)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translate(-50%,0) scale(1)}
  to{opacity:0;transform:translate(-50%,10px) scale(.98)}}
.toast.in{animation:toastIn .28s cubic-bezier(.2,.85,.25,1) both}
.toast.out{animation:toastOut .18s ease both}
@media (max-width:560px){.toast{bottom:16px;width:calc(100vw - 24px);
  max-width:none;font-size:13px}}
@media (prefers-reduced-motion:reduce){.toast.in,.toast.out{animation:none}}

.muted{color:var(--muted)}
.spread{display:flex;justify-content:space-between;align-items:center}
.stack{display:flex;flex-direction:column;gap:14px}
.rowflex{display:flex;gap:8px;flex-wrap:wrap}

/* responsive (the shell's own breakpoints are in "HOOPOE SHELL") */
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
  .g-21,.g-12,.g2{grid-template-columns:1fr}
}
@media(max-width:680px){
  .g4{grid-template-columns:1fr}
  .page-head{align-items:flex-start}
  .head-actions{width:100%}
  .head-actions>.btn{flex:1 1 0;min-width:0}
  .stat .val{font-size:24px}
}

/* ---- Batch 1: dashboard stat icon colours ------------------------- */
.stat .ico.s-green {background:var(--green-soft);color:var(--green)}
.stat .ico.s-blue  {background:var(--blue-soft); color:var(--blue)}
.stat .ico.s-yellow{background:var(--amber-soft);color:var(--amber)}
.stat .ico.s-red   {background:var(--red-soft);  color:var(--red)}

/* ---- balance pill (top bar) — coloured by how much is left ---------- */
.balance-pill{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:12px;
  font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--green-soft);border:1px solid var(--green-border);color:var(--green)}
.balance-pill.bal-red{background:var(--red-soft);border-color:var(--red-border);color:var(--red)}
.balance-pill.bal-yellow{background:var(--amber-soft);border-color:var(--amber-border);color:var(--amber)}
.balance-pill.bal-green{background:var(--green-soft);border-color:var(--green-border);color:var(--green)}

/* ---- Batch 3: avatars + profile dropdown -------------------------- */
.av.lg{width:56px;height:56px;font-size:18px}
.user-menu{position:relative}
.user-chip{cursor:pointer;border:none;background:none;font:inherit}
.user-dd{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:55;min-width:250px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}
.dd-who{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;margin-bottom:4px;
  border-bottom:1px solid var(--line)}
.dd-who .av{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.dd-who b{display:block;font-size:14px;font-weight:600}
.dd-who span{display:block;font-size:12px;color:var(--muted)}
.user-dd[hidden]{display:none}
.dd-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border:none;background:none;
  font:inherit;font-size:13.5px;color:var(--ink2);border-radius:10px;cursor:pointer;
  text-align:start;width:100%}
.dd-item:hover{background:var(--panel)}
.dd-item.danger{color:var(--red)}
.dd-item.danger:hover{background:var(--red-soft)}
.dd-sep{height:1px;background:var(--line);margin:4px 0}

/* ---- Batch 5: module picker (card modal) -------------------------- */
/* closed-state trigger (replaces the native <select>) */
.cs{position:relative;width:100%}
.cs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;text-align:start}
.cs-btn:hover{border-color:var(--blue-border)}
.cs-cur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.cs-car{opacity:.55;flex:none}

/* the picker modal */
/* the select picker is spawned FROM inside dialogs (.ui-ov 90, .dw-ov 90,
   .pn-ov 92), so it has to sit above all of them or tapping a select inside a
   modal opens a picker nobody can see. Below the toast (200) only. */
.csm-ov{position:fixed;inset:0;z-index:150;background:rgba(26,22,20,.48);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.csm{width:100%;max-width:680px;max-height:82vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.28)}
.csm-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 4px}
.csm-head h3{font-size:20px;font-weight:700;margin:0}
.csm-x{width:38px;height:38px;border-radius:50%;border:none;background:var(--panel);
  display:grid;place-items:center;cursor:pointer;color:var(--ink2)}
.csm-x:hover{background:var(--line)}
.csm-search{display:flex;align-items:center;gap:10px;margin:14px 24px 4px;padding:14px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--muted);
  box-shadow:0 4px 16px rgba(0,0,0,.04)}
.csm-search input{flex:1;border:none;outline:none;background:none;font:inherit;
  font-size:15px;color:var(--ink)}
.csm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 24px 24px;overflow:auto}
.csm-opt{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.04);
  cursor:pointer;font:inherit;font-size:16px;font-weight:600;color:var(--ink);text-align:start}
.csm-opt:hover{border-color:var(--blue-border);transform:translateY(-1px)}
.csm-opt .csm-tx{flex:1}
.csm-opt .csm-ck{width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--blue);
  display:grid;place-items:center;flex:none}
.csm-opt.sel{background:var(--blue);border-color:var(--blue);color:var(--on-blue);
  box-shadow:0 12px 28px color-mix(in srgb,var(--brand) 32%,transparent)}
.csm-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:24px;font-size:14px}
@media(max-width:560px){.csm-grid{grid-template-columns:1fr}.csm-head h3{font-size:17px}}

/* ---- Bulk messaging: grouped modules (compose + CSV help) ---------- */
/* name and template share a row; the sender list, the daily-room strip and the
 * duplicate warning each take a full row, and leave no hole while empty */
.bulk-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-bottom:4px}
.bulk-meta>.bm-wide{grid-column:1/-1}
.bulk-meta>.bm-wide:empty{display:none}
.bulk-meta #bFrom .field{margin:0}
.bulk-meta .cap-strip{margin-top:0}
#bBody{min-height:120px}
#bVars:empty{display:none}
.bulk-summary{display:flex;gap:10px;background:var(--panel);
  border-radius:12px;padding:10px 14px}
.bulk-summary>div{flex:1;display:flex;flex-direction:column;gap:2px}
.bulk-summary span{font-size:12px;color:var(--muted)}
.bulk-summary b{font-size:16px;color:var(--ink)}
.bulk-actions{display:flex;flex-wrap:wrap;gap:8px}
.bulk-actions .btn{margin:0;min-width:0}
.bulk-actions .b-send{flex:2 1 190px}
.bulk-actions .b-sendsave{flex:2 1 190px}
/* labels here vary in length ("Save list (251 numbers)"), so let each button
 * hold its own content and wrap onto a new row instead of overlapping */
.bulk-actions .b-save{flex:1 1 120px;min-width:max-content}
/* Schedule + Restricted always sit together on their own row. A zero-height
 * full-width item ends the line before them, so where they land never depends
 * on how wide the panel happens to be or on how long "Save list (251
 * numbers)" has grown. flex-basis:0 then splits the new line evenly — and if
 * a role has no scheduling right, the survivor simply fills it. */
.bulk-actions .flex-break{flex:0 0 100%;height:0;margin:-4px 0}
.bulk-actions .b-schedule,
.bulk-actions .b-blocked{flex:1 1 0;min-width:max-content}
@media (max-width:520px){
  .bulk-actions .b-schedule,
  .bulk-actions .b-blocked{flex:1 1 100%}
}
.csv-need{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--red);background:var(--red-soft);border:1px solid var(--red-border);
  border-radius:10px;padding:8px 10px;margin-top:8px}
.csv-sample{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:10px}
.csv-sample-h{display:flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:600;margin-bottom:6px;color:var(--muted)}
.csv-tbl{width:100%;border-collapse:collapse;font-size:12px}
.csv-tbl th,.csv-tbl td{border:1px solid var(--line);padding:4px 8px;
  text-align:start;white-space:nowrap}
.csv-tbl th{background:var(--panel);font-weight:600;color:var(--ink2)}
@media (max-width:560px){
  .bulk-meta{grid-template-columns:1fr}
}

/* ---- copyable public user ID chip --------------------------------- */
.uid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;cursor:pointer;color:var(--ink2);
  white-space:nowrap;display:inline-block}
.uid:hover{border-color:var(--blue);color:var(--blue)}

/* ---- Bulk saved-contacts: grouped Filters module ------------------ */
.bulk-mod{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden}
.bulk-mod>summary{list-style:none;cursor:pointer;padding:8px 12px;font-size:12.5px;
  font-weight:600;color:var(--ink2);background:var(--panel);
  display:flex;align-items:center;gap:8px}
.bulk-mod>summary::-webkit-details-marker{display:none}
.bulk-mod>summary::after{content:'▾';margin-inline-start:auto;color:var(--muted)}
.bulk-mod[open]>summary::after{content:'▴'}
.bulk-mod-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.bulk-mod-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.bulk-mod-row>.muted:first-child{min-width:54px}
.bulk-mod-tags{display:flex;gap:5px;flex-wrap:wrap;font-size:12.5px}
.bulk-mod-tags:empty{display:none}

/* Filters button (in the recipients card header) */
#bcFilterBtn.active{background:var(--blue-soft);color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue-border)}
#bcFilters{margin-bottom:8px}

/* Paste-numbers chip input */
.chip-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;
  min-height:42px;padding:6px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);box-shadow:var(--shadow);cursor:text}
.chip-input:focus-within{border-color:var(--blue-border);box-shadow:0 0 0 3px var(--blue-soft)}
.chip-input .chip-tag{display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding-block:4px 4px;padding-inline:10px 6px;font-size:13px;font-variant-numeric:tabular-nums;
  unicode-bidi:plaintext}
.chip-input .chip-tag button{border:none;background:none;cursor:pointer;
  color:var(--muted);font-size:16px;line-height:1;padding:0 2px}
.chip-input .chip-tag button:hover{color:var(--red)}
.chip-input>input{flex:1;min-width:150px;border:none;outline:none;box-shadow:none;
  padding:6px 4px;font-size:14px;background:transparent}
.chip-input>input:focus{box-shadow:none;border:none}

/* ===== the brand typeface, Hudhud: Noto Kufi Arabic + Sora (fonts/fonts.css) ===== */
body{font-family:var(--font)}

/* Auto-direction: each paragraph of a field or content block takes its
 * direction from its own text, so an English name, a URL or "+964 …" keeps
 * its order inside the right-to-left page. Fields and chat bubbles also align
 * by their text, like dir="auto" (English starts at the left). Everything else
 * lines up with the page (match-parent = the right edge here), so table
 * columns and lists stay straight. Nothing in here flips: the page is rtl. */
input,textarea,select,
.cs-btn,.csm-opt,
.wa-bubble,.wa-preview .head b,
.info b,.info span,.uname,.row-strong,
td,.pick .info,.dd-item{
  unicode-bidi:plaintext;
  text-align:start;
}
.cs-btn,.csm-opt,.wa-preview .head b,
.info b,.info span,.uname,.row-strong,
td,.pick .info,.dd-item,.pick-card .pc-id .num{text-align:match-parent}

/* ===== Contacts: applied-filter chips + slide-in filter panel ===== */
.fchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
/* Logs: the dashboard's outcomes as tabs */
.ltabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.ltabs button{background:var(--surface);border:1px solid var(--line);border-radius:99px;font:inherit;
  font-size:12.5px;padding:4px 12px;color:var(--muted);cursor:pointer;transition:.13s}
.ltabs button:hover{color:var(--ink2)}
.ltabs button b{font-weight:600;color:var(--ink2);margin-inline-start:2px;font-variant-numeric:tabular-nums}
.ltabs button.on{background:var(--blue-soft);border-color:var(--blue-border);color:var(--blue)}
.ltabs button.on b{color:var(--blue)}
.mbrk-i[data-out]{cursor:pointer;border-radius:6px}
.mbrk-i[data-out]:hover{background:var(--panel)}
.fchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);
  color:var(--blue-dark);border:1px solid var(--blue-border);border-radius:999px;
  padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;user-select:none}
.fchip b{font-weight:700;opacity:.6}
.fchip:hover b{opacity:1}
.fchip-clear{background:none;border:none;color:var(--muted);font-size:12px;
  font-weight:600;cursor:pointer;padding:3px 6px;text-decoration:underline}
.fcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;border-radius:999px;background:var(--blue);color:var(--on-blue);
  font-size:11px;font-weight:700;margin-inline-start:2px}
.iconbtn{background:none;border:none;color:var(--ink3);cursor:pointer;padding:4px;
  border-radius:8px;display:inline-flex;align-items:center}
.iconbtn:hover{background:var(--panel);color:var(--ink)}

.slidewrap{position:fixed;inset:0;z-index:70}
.slide-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.42);
  opacity:0;transition:opacity .22s ease}
.slidewrap.open .slide-backdrop{opacity:1}
.slide-panel{position:absolute;top:0;inset-inline-end:0;height:100%;width:360px;max-width:90vw;
  background:var(--surface);box-shadow:-12px 0 40px rgba(0,0,0,.18);display:flex;
  flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.slidewrap.open .slide-panel{transform:translateX(0)}
.slide-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.slide-head h3{margin:0;font-size:16px}
.slide-body{flex:1;overflow-y:auto;padding:6px 18px 18px}
.slide-foot{display:flex;flex-direction:column;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.slide-foot>.btn{width:100%;justify-content:center}

.fgrp{border-bottom:1px solid var(--line);padding:4px 0}
.fgrp summary{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:10px 2px;font-size:13px;font-weight:600;color:var(--ink);
  list-style:none}
.fgrp summary::-webkit-details-marker{display:none}
.fgrp summary svg{color:var(--muted);transition:transform .18s ease}
.fgrp[open] summary svg{transform:rotate(180deg)}
.fopts{display:flex;flex-direction:column;gap:2px;padding:2px 2px 10px}
.fopt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);
  padding:5px 6px;border-radius:8px;cursor:pointer}
.fopt:hover{background:var(--panel)}
.fopt input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}

.fgrp-saved{padding:12px 0 14px;border-bottom:1px solid var(--line)}
.fgrp-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.fsaved-list{display:flex;flex-wrap:wrap;gap:6px}
.fsaved{display:inline-flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding-block:3px 3px;padding-inline:10px 6px;font-size:12px}
.fsaved span{cursor:pointer;font-weight:600;color:var(--ink2)}
.fsaved span:hover{color:var(--blue)}
.fsaved b{cursor:pointer;color:var(--muted);font-weight:700;padding:0 2px}
.fsaved b:hover{color:var(--red)}

/* ===== Contacts: export dropdown ===== */
.expwrap{position:relative;display:inline-block}
.expmenu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;min-width:172px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 16px 40px rgba(15,23,42,.16);display:flex;flex-direction:column;gap:2px}
.expmenu[hidden]{display:none}
.expmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  background:none;border:none;cursor:pointer;font-size:13px;font-weight:500;
  color:var(--ink2);padding:9px 10px;border-radius:8px}
.expmenu button:hover{background:var(--panel);color:var(--ink)}
.expmenu button svg{color:var(--muted)}

/* ===== Contacts: imported badge + import drop zone ===== */
.tag-imported{display:inline-block;margin-top:3px;font-size:10px;font-weight:600;
  color:var(--ink3);background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:1px 7px;letter-spacing:.02em;text-transform:lowercase}
.imdrop{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;
  border:1.5px dashed var(--line2);border-radius:12px;background:var(--panel);
  color:var(--ink2);transition:border-color .15s,background .15s}
.imdrop:hover{border-color:var(--blue);background:var(--blue-soft)}
.imdrop.drag{border-color:var(--blue);background:var(--blue-soft)}
.imdrop.has{border-style:solid;border-color:var(--green-border);background:var(--green-soft)}
.imdrop svg{color:var(--muted);flex:none}
.imdrop.has svg{color:var(--green)}

/* ===== Filter panels: in-app date-range calendar ===== */
.dpwrap{margin-top:8px}
.dp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-title{font-size:13.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.dp-year{border:1px solid var(--line);border-radius:7px;padding:2px 6px;font-size:13px;
  font-weight:700;color:var(--ink);background:var(--surface);font-family:inherit;cursor:pointer}
.dp-year:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.dp-nav{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:8px;
  cursor:pointer;font-size:18px;line-height:1;color:var(--ink2);display:flex;
  align-items:center;justify-content:center}
.dp-nav:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow span{text-align:center;font-size:11px;font-weight:600;color:var(--muted)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{height:36px;border:none;background:none;border-radius:9px;cursor:pointer;
  font-size:13px;color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:inherit;padding:0}
.dp-day.empty{visibility:hidden}
.dp-day:hover:not(.empty){background:var(--blue-soft)}
.dp-day.today{font-weight:700;box-shadow:inset 0 0 0 1.5px var(--blue-border)}
.dp-day.in-range{background:var(--blue-soft);border-radius:0}
.dp-day.start,.dp-day.end,.dp-day.sel{background:var(--blue);color:var(--on-blue);font-weight:700}
.dp-day.start{border-start-start-radius:9px;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:9px}
.dp-day.end{border-start-start-radius:0;border-start-end-radius:9px;border-end-end-radius:9px;border-end-start-radius:0}
.dp-day.sel{border-radius:9px}
.dp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.dp-sum{font-size:12px;font-weight:600;color:var(--ink2)}
.dp-clear{background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px}
.dp-clear:hover{text-decoration:underline}

/* ===== Reports: date-range popover trigger ===== */
.drpop{position:relative}
.drpop-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;width:100%;
  justify-content:space-between}
.drpop-btn:hover{border-color:var(--blue)}
.drpop-btn>span{flex:1;text-align:start}
.drpop-btn svg{color:var(--muted);flex:none}
.drpop-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:40;width:300px;max-width:88vw}
.drpop-menu[hidden]{display:none}
.drpop-menu .dp{box-shadow:0 16px 40px rgba(15,23,42,.18)}

/* ===== Team & Roles ===== */
.rolechip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;color:var(--rc,var(--brand));
  background:color-mix(in srgb, var(--rc,var(--brand)) 15%, var(--surface));
  border:1px solid color-mix(in srgb, var(--rc,var(--brand)) 30%, #fff)}
.role-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.role-pick{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;
  color:var(--ink2);background:var(--surface);border:1.5px solid var(--line);font-family:inherit;transition:all .12s}
.role-pick:hover{border-color:var(--rc,var(--blue))}
.role-pick.on{color:#fff;background:var(--rc,var(--blue));border-color:var(--rc,var(--blue))}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px;margin-top:6px;
  max-height:58vh;overflow:auto;padding:2px}
.perm-grp{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.perm-grp-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;cursor:pointer;
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.perm-grp-h input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}
.perm-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);
  padding:4px 2px;cursor:pointer}
.perm-opt input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}
@media(max-width:560px){.perm-grid{grid-template-columns:1fr}}

/* ===== Role editor (luxury / Finup) ===== */
.re-modal{display:flex;flex-direction:column;animation:reIn .24s cubic-bezier(.16,.84,.34,1)}
@keyframes reIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.re-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:16px 16px;padding-inline:22px 20px;border-bottom:1px solid var(--line)}
.re-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink3);font-size:20px;line-height:1;display:grid;place-items:center;flex-shrink:0;
  transition:background .14s,color .14s}
.re-x:hover{background:var(--panel);color:var(--ink)}
.re-preview{display:flex;align-items:center;gap:12px;min-width:0}
.re-prevchip{padding:6px 16px;border-radius:999px;font-weight:600;font-size:13px;
  background:var(--rc,var(--brand));color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 18%,transparent);
  max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .18s}
.re-prevcount{font-size:12.5px;color:var(--muted);white-space:nowrap}

.re-body{padding:20px 26px;display:flex;flex-direction:column;gap:16px}
.re-row2{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}
.re-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink3);margin-bottom:7px}
.re-input{width:100%;height:42px;border:1.5px solid var(--line);border-radius:9px;padding:0 14px;
  font-size:14px;color:var(--ink);transition:border .14s,box-shadow .14s}
.re-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.re-colorbox{display:flex;flex-direction:column;gap:11px}
.re-swatches{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.re-sw{width:26px;height:26px;border-radius:50%;background:var(--sw);border:none;cursor:pointer;
  position:relative;box-shadow:0 0 0 1px rgba(10,13,18,.08);transition:transform .12s,box-shadow .12s}
.re-sw:hover{transform:scale(1.14)}
.re-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sw);transform:scale(1.06)}
.re-sw.on::after{content:"";position:absolute;left:50%;top:47%;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.re-hexgrp{display:flex;align-items:center;gap:9px}
.re-color-chip{position:relative;width:38px;height:38px;border-radius:9px;cursor:pointer;
  overflow:hidden;border:1.5px solid var(--line);flex-shrink:0;box-shadow:inset 0 0 0 2px #fff}
.re-color-chip input{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0}
.re-hexin{display:flex;align-items:center;gap:3px;height:38px;border:1.5px solid var(--line);
  border-radius:9px;padding:0 13px;background:var(--surface);transition:border .14s,box-shadow .14s}
.re-hexin:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.re-hexin[hidden]{display:none}
.re-hexin span{color:var(--muted);font-size:14px;font-weight:600}
.re-hexin input{border:none;outline:none;width:80px;font-size:14px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:none;padding:0}

.re-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.re-meta{font-size:13px;color:var(--ink2)} .re-meta b{color:var(--blue);font-weight:700}
.re-tools{display:flex;align-items:center;gap:10px}
.re-link{border:none;background:none;color:var(--blue);font-weight:600;font-size:13px;padding:2px}
.re-link:hover{text-decoration:underline}
.re-dot{color:var(--line2);font-size:10px}

.re-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.re-card{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;
  transition:box-shadow .16s,border-color .16s,transform .16s}
.re-card:hover{border-color:var(--line2);box-shadow:0 6px 18px rgba(10,13,18,.07);transform:translateY(-1px)}
.re-card.full{border-color:var(--blue-border);box-shadow:0 0 0 1px var(--blue-border),0 6px 18px color-mix(in srgb,var(--brand) 10%,transparent)}
.re-card-h{display:flex;align-items:center;gap:10px;padding:12px 13px;border-bottom:1px solid var(--line);
  background:var(--panel)}
.re-card-ic{width:30px;height:30px;border-radius:9px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;flex-shrink:0}
.re-card.full .re-card-ic{background:var(--blue);color:var(--on-blue)}
.re-card-t{font-size:13.5px;font-weight:700;color:var(--ink);flex:1}
.re-badge{font-size:11px;font-weight:600;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;transition:all .14s}
.re-badge.on{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-border)}
.re-opts{padding:7px 7px 9px}
.re-opt{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:9px;cursor:pointer;transition:background .12s}
.re-opt:hover{background:var(--blue-soft)}
.re-opt input{position:absolute;opacity:0;width:0;height:0}
.re-check{width:19px;height:19px;border-radius:6px;border:1.7px solid var(--line2);background:var(--surface);
  display:grid;place-items:center;flex-shrink:0;transition:all .14s}
.re-check::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);margin-top:-2px;transition:transform .14s}
.re-opt input:checked + .re-check{background:var(--blue);border-color:var(--blue)}
.re-opt input:checked + .re-check::after{transform:rotate(45deg) scale(1)}
.re-opt-l{font-size:13px;color:var(--ink2)}
.re-switch{position:relative;display:inline-flex;flex-shrink:0}
.re-switch input{position:absolute;opacity:0;width:0;height:0}
.re-slider{width:38px;height:22px;border-radius:999px;background:var(--line2);position:relative;transition:background .16s}
.re-slider::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .16s}
.re-switch input:checked + .re-slider{background:var(--blue)}
.re-switch input:checked + .re-slider::after{transform:translateX(16px)}
.re-switch input:indeterminate + .re-slider{background:var(--blue-border)}
.re-switch input:indeterminate + .re-slider::after{transform:translateX(8px)}

.re-full{display:flex;align-items:center;gap:15px;padding:20px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue-soft),var(--surface));border:1px solid var(--blue-border)}
.re-full-ic{width:46px;height:46px;border-radius:13px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;flex-shrink:0}
.re-full b{font-size:15px;color:var(--ink)} .re-full p{font-size:13px;color:var(--ink3);margin-top:3px;line-height:1.5}

.re-foot{padding:14px 26px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--surface)}
.re-save{box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 28%,transparent)}
@media(max-width:560px){.re-row2{grid-template-columns:1fr}.re-grid{grid-template-columns:1fr}}

@keyframes reFade{from{opacity:0}to{opacity:1}}

/* team list search */
.tm-search{height:34px;border:1.5px solid var(--line);border-radius:9px;padding:0 12px;font-size:13px;
  min-width:190px;color:var(--ink);background:var(--surface);transition:border .14s,box-shadow .14s}
.tm-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
@media(max-width:560px){.tm-search{min-width:0;width:130px}}

/* Profile & API — two columns. The profile is a short list of small fields,
   so it gets a capped narrow column; the API card keeps the rest of the width
   because that is where the code examples need room. */
.ps-grid{display:grid;grid-template-columns:minmax(280px,460px) minmax(0,1fr);
  gap:18px;align-items:start}
.ps-grid .ps-prof{grid-column:1;grid-row:1 / span 2}
.ps-grid .ps-bal{grid-column:2;grid-row:1}
.ps-grid .ps-api{grid-column:2;grid-row:2}
/* denser than the default form rhythm — the card is a settings list, not a page */
.ps-prof{gap:11px;padding:16px 18px}
.ps-prof h3{font-size:14px}
.ps-prof .field{gap:4px}
.ps-prof .field label{font-size:12px}
.ps-prof input{padding:7px 10px;font-size:13px;border-radius:7px}
.ps-prof .hint{font-size:11px;line-height:1.45}
/* .av only ever got a size — give the profile one the avatar chrome too */
.ps-prof .av.lg{width:42px;height:42px;font-size:15px;flex:none;display:grid;
  place-items:center;border-radius:50%;overflow:hidden;font-weight:600;
  color:var(--ink2);background:var(--panel);border:1px solid var(--line)}
.ps-prof .btn.sm{padding:5px 9px;font-size:12px}
.ps-prof #pSave{align-self:flex-start;margin-top:2px;padding:7px 14px;font-size:13px}
@media(max-width:860px){.ps-grid{grid-template-columns:1fr}
  .ps-grid .ps-prof,.ps-grid .ps-bal,.ps-grid .ps-api{grid-column:auto;grid-row:auto}}

tr.log-group:hover{background:var(--blue-soft)}

/* ---- dark mode ---------------------------------------------------- */
body.dark{
  --brand:var(--hh-navy-3); --brand-hi:var(--hh-crest); --kohl:var(--hh-deep); --kohl-2:var(--hh-navy);
  /* on navy the accent is sand, as the brand writes it; the crest stays the one red */
  --blue:var(--hh-sand); --blue-dark:#EBDCC2; --blue-soft:rgba(216,193,159,.13); --blue-border:rgba(216,193,159,.38);
  --on-blue:var(--hh-deep);
  --bg:#08122A; --surface:#0D1B3E; --panel:#13244B;
  --ink:#FBF3E4; --ink2:#E6DAC3; --ink3:#C9BBA0; --muted:#9AA6C4;
  --line:#1B2D5C; --line2:#26396B;
  --green:#4CCB8A; --green-soft:rgba(76,203,138,.14); --green-border:rgba(76,203,138,.34);
  --amber:#F2C14E; --amber-soft:rgba(242,193,78,.14); --amber-border:rgba(242,193,78,.32);
  --red:#FF7A90; --red-soft:rgba(255,122,144,.14); --red-border:rgba(255,122,144,.34);
  --info:#7FB0F0; --info-soft:rgba(127,176,240,.14); --info-border:rgba(127,176,240,.32);
  --purple:#B49BFF;
  --shadow:0 1px 2px rgba(0,0,0,.45);
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 22px 54px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,241,215,.06);
  --shadow-btn:inset 0 0 0 1px rgba(255,241,215,.12),0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* a colour the person picked themselves (Website settings) keeps white lettering */
body.dark.has-accent{--on-blue:#fff}

/* library drag-to-reorder */
.lib-grip{user-select:none}
.lib-grip:active{cursor:grabbing}
.lib-drag-ghost{opacity:.4}

/* =====================================================================
   GLOBAL SEARCH  — command-palette dropdown under the topbar search box
   ===================================================================== */
.search-results{position:absolute;top:calc(100% + 10px);inset-inline-start:0;width:380px;max-width:86vw;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-pop);padding:6px;z-index:40;
  max-height:min(62vh,440px);overflow-y:auto;
  visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.search-results.show{visibility:visible;opacity:1;transform:translateY(0);
  transition:opacity .15s ease,transform .15s ease,visibility 0s}
.sr-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:none;background:transparent;border-radius:8px;cursor:pointer;text-align:start;
  font-family:inherit;font-size:13.5px;color:var(--ink2);transition:background .1s}
.sr-item .sr-ic{color:var(--muted);display:grid;place-items:center;flex-shrink:0}
.sr-item .sr-label{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sr-item .sr-group{margin-inline-start:auto;padding-inline-start:8px;font-size:10.5px;color:var(--muted);
  font-weight:600;letter-spacing:.04em}
.sr-item:hover,.sr-item.active{background:var(--panel)}
.sr-item.active .sr-ic{color:var(--blue)}
.sr-item mark.sr-hl{background:var(--blue-soft);color:var(--blue);border-radius:3px;padding:0 1px}
.sr-empty{padding:14px 10px;text-align:center;font-size:13px;color:var(--muted)}
.sr-foot{margin-top:4px;padding:7px 10px 4px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.sr-foot kbd{font-family:inherit;background:var(--panel);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;font-size:10.5px;color:var(--ink3)}

/* =====================================================================
   TOP-UP modal — clean, stepped, FARFETCH-style checkout
   ===================================================================== */
.tu-h{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 10px}
.tu-methods{display:flex;flex-direction:column;gap:10px;margin:2px 0 4px}
.tu-method{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  cursor:pointer;text-align:start;transition:.13s;font-family:inherit}
.tu-method:hover{border-color:var(--line2)}
.tu-method.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tu-method .mlogo{flex:none;display:grid;place-items:center}
.tu-method .mname{flex:1;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25}
.tu-method .msub{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.tu-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);
  display:grid;place-items:center}
.tu-method.sel .tu-radio{border-color:var(--ink)}
.tu-method.sel .tu-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.tu-next{width:100%;padding:14px;border:none;border-radius:999px;background:var(--ink);
  color:var(--bg);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:.13s}
.tu-next:hover{opacity:.88}
.tu-next:disabled{opacity:.5;cursor:not-allowed}
.tu-due{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tu-due .k{font-size:12.5px;color:var(--muted)}
.tu-due .big{font-size:20px;font-weight:700;color:var(--ink);margin-top:3px}
.tu-due .sm{font-size:13.5px;font-weight:600;margin-top:3px}
.tu-badge{background:#1BA97A;color:#fff;text-align:center;padding:9px 12px;
  border-radius:10px 10px 0 0;font-size:12.5px;font-weight:600}
.tu-addr{border:1px dashed #1BA97A;border-top:none;border-radius:0 0 10px 10px;
  padding:12px 14px;display:flex;align-items:center;gap:10px}
.tu-addr code{flex:1;font-family:ui-monospace,monospace;font-size:12.5px;
  word-break:break-all;line-height:1.55;color:var(--ink)}
.tu-addr button{flex:none;background:none;border:none;cursor:pointer;color:var(--muted);
  padding:5px;border-radius:6px}
.tu-addr button:hover{background:var(--panel);color:var(--ink)}
.tu-warn{font-size:11.5px;color:var(--muted);text-align:center;margin:10px 6px 0;line-height:1.5}
.tu-qr-wrap{text-align:center;margin:18px 0 4px}
.tu-qr-wrap .lbl{font-size:13px;color:var(--muted);margin-bottom:10px}
.tu-qr-wrap img{width:168px;height:168px;border-radius:12px;border:1px solid var(--line)}
.tu-timer{display:flex;justify-content:center;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border-radius:10px;padding:9px 12px;margin-top:14px;
  font-size:12px;color:var(--ink3);font-weight:500}
.tu-timer .clk{display:inline-flex;align-items:center;gap:5px}
.tu-success{text-align:center;padding:28px 10px 12px}
.tu-check{width:66px;height:66px;border-radius:50%;background:#1BA97A;display:grid;
  place-items:center;margin:0 auto 18px;animation:tuPop .3s ease}
@keyframes tuPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.tu-success h3{font-size:20px;font-weight:700;margin:0 0 6px}
.tu-success p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}

/* ===================================================================== */
/*  Manage Business modal — tabbed, near full-screen                     */
/* ===================================================================== */
.mg-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);
  overflow-x:auto;flex:none;background:var(--surface)}
.mg-tab{padding:13px 16px;border:none;background:none;font-family:inherit;font-size:13.5px;
  font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:.12s}
.mg-tab:hover{color:var(--ink2)}
.mg-tab svg{opacity:.85}
.mg-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.mg-tab.danger.active{color:var(--red);border-bottom-color:var(--red)}
.mg-body{padding:18px 22px;overflow:auto;flex:1;min-height:0;background:var(--panel)}
.mg-panel{display:flex;flex-direction:column;gap:16px}
.mg-panel[hidden]{display:none}
@media(max-width:560px){
  .mg-tab{padding:11px 12px;font-size:12.5px}
  .mg-body{padding:14px}
}

/* =====================================================================
   RESPONSIVE HARDENING  — make the whole console usable on phones/tablets.
   Appended last so these rules win on equal specificity. Additive only.
   ===================================================================== */

/* ---- data tables: scroll inside the card, never the whole page ------ */
@media(max-width:820px){
  /* every console table becomes its own horizontal scroll region */
  .content table{display:block;width:100%;max-width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .content table thead,.content table tbody{display:table;width:100%;min-width:max-content}
}
@media(max-width:680px){
  .content th{padding:8px 10px;font-size:11px}
  .content td{padding:9px 10px;font-size:13px}
  .content td .sub{font-size:11px}
  .page-head h2{font-size:20px}
  .page-head p{font-size:13.5px}
  /* Reports page: collapse the inline fixed-count grids (beat inline via !important) */
  .content [style*="repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  .content [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* class-less fixed-width filters / selects -> full width & tappable */
  #ntFilter,#aUser,#aAction,#rLang,#cSearch,#lSearch,#libQ,#libSearch{width:100%!important}
  .rowflex>[style*="width:170px"]{width:100%!important;margin-inline-start:0!important}
}
@media(max-width:430px){
  .content [style*="repeat(5,1fr)"]{grid-template-columns:1fr!important}
}

/* ---- CSV / preview tables live in body-level modals (outside .content) */
.csv-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.csv-tbl>*{min-width:max-content}

/* ---- impersonation banner: wrap instead of overflowing the topbar ---- */
.imp-banner{gap:10px}
@media(max-width:560px){
  .imp-banner{flex-wrap:wrap;padding:9px 14px!important;font-size:12.5px!important}
  .imp-banner>span{min-width:0}
  .imp-banner .btn.sm{width:100%}
}

/* ---- fluid topbar search so it shrinks before it is hidden ---------- */
.searchbox{min-width:0}
.searchbox input{max-width:280px}

/* ---- auth screen padding / type on small phones --------------------- */
@media(max-width:480px){
  .auth-form{padding:24px 18px}
  .auth-card h2{font-size:21px}
}

/* ---- modals / dialogs: footers wrap, controls become touch-sized ---- */
@media(max-width:560px){
  .re-toolbar{flex-wrap:wrap;justify-content:flex-start;gap:8px}
  .re-tools{width:100%;justify-content:flex-start}
  .re-foot{flex-wrap:wrap;flex-direction:column-reverse;gap:8px}
  .re-foot>.btn{width:100%}
  #aUser,#aAction{width:100%!important}
  input,select,textarea{font-size:16px}   /* >=16px stops iOS focus-zoom */
  input:not(.tc-input),select,textarea{min-height:44px}
  .btn{min-height:44px}
  .btn.sm{min-height:38px}
  /* stack paired custom-field / variable-map controls */
  .bVarCol,.cfKey{max-width:none!important;width:100%!important}
  #leLang{max-width:none!important;width:100%!important}
  #bcCC{min-width:0!important}
  /* long wallet / reference strings inside payment modals must wrap */
  .modal-card img,[style*="max-width:420px"] img,[style*="max-width:780px"] img{max-width:100%;height:auto}
}
/* =====================================================================
   TOP UP — redesigned shell, stepper, amount field, methods, animations
   Appended last so it wins over the earlier .tu-* rules.
   ===================================================================== */
@keyframes tuOv{from{opacity:0}to{opacity:1}}
@keyframes tuIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tuUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tuRing{0%{transform:scale(.85);opacity:.55}100%{transform:scale(1.75);opacity:0}}
@keyframes tuDraw{to{stroke-dashoffset:0}}
@keyframes tuSpin{to{transform:rotate(360deg)}}
@keyframes tuPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes tuQr{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}

.tu-overlay{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:22px;animation:tuOv .18s ease}
.tu-modal{background:var(--surface);border-radius:20px;width:100%;max-width:430px;max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.34);
  animation:tuIn .38s cubic-bezier(.2,.75,.3,1) both}
.tu-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;flex:none}
.tu-title{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:750;color:var(--ink)}
.tu-title svg{color:var(--blue)}
.tu-x{width:32px;height:32px;border-radius:9px;border:none;background:var(--panel);color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.tu-x:hover{background:var(--line);color:var(--ink)}

.tu-steps{display:flex;align-items:center;gap:7px;padding:0 20px 14px;flex:none}
.tu-step{display:flex;align-items:center;gap:7px;flex:none}
.tu-step i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:700;background:var(--panel);color:var(--muted);border:1px solid var(--line);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.tu-step b{font-size:11.5px;font-weight:650;color:var(--muted);transition:color .25s ease}
.tu-step.on i{background:var(--blue);color:var(--on-blue);border-color:var(--blue);transform:scale(1.09)}
.tu-step.on b{color:var(--ink)}
.tu-step.done i{background:var(--green);border-color:var(--green);color:#fff}
.tu-step.done b{color:var(--ink3)}
.tu-step-line{flex:1;height:2px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.tu-step-line::after{content:'';position:absolute;inset:0;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.tu-step-line.done::after{transform:scaleX(1)}

.tu-body{padding:4px 20px 20px;overflow:auto;flex:1;min-height:0}
.tu-body > *{animation:tuUp .42s cubic-bezier(.2,.7,.3,1) both}
.tu-body > *:nth-child(1){animation-delay:.02s}
.tu-body > *:nth-child(2){animation-delay:.08s}
.tu-body > *:nth-child(3){animation-delay:.14s}
.tu-body > *:nth-child(4){animation-delay:.20s}

.tu-sec{margin-bottom:18px}
.tu-amt-lbl{font-size:12.5px;font-weight:650;color:var(--muted);margin-bottom:8px}
.tu-amt-field{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--surface);padding:12px 16px;transition:border-color .18s ease,box-shadow .18s ease}
.tu-amt-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.tu-amt-field.err{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.tu-amt-field input{flex:1;border:none;outline:none;background:none;font-family:inherit;
  font-size:26px;font-weight:750;color:var(--ink);letter-spacing:-.02em;min-width:0;padding:0}
.tu-amt-field input::-webkit-outer-spin-button,
.tu-amt-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tu-amt-field input[type=number]{-moz-appearance:textfield}
.tu-cur{flex:none;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.03em}

.tu-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.tu-preset{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink2);font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;
  transition:transform .12s ease,background .16s ease,border-color .16s ease,color .16s ease}
.tu-preset:hover{border-color:var(--line2);transform:translateY(-1px)}
.tu-preset:active{transform:scale(.95)}
.tu-preset.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.tu-custom{display:inline-flex;align-items:center;gap:5px;color:var(--blue);border-style:dashed}
.tu-custom:hover{background:var(--blue-soft)}

.tu-method{transition:border-color .16s ease,box-shadow .16s ease,transform .12s ease,background .16s ease}
.tu-method:hover{transform:translateY(-1px)}
.tu-method.sel{border-color:var(--blue);background:var(--blue-soft);
  box-shadow:inset 0 0 0 1px var(--blue),0 4px 14px color-mix(in srgb,var(--brand) 10%,transparent)}
.tu-method.sel .tu-radio{border-color:var(--blue)}
.tu-method.sel .tu-radio::after{background:var(--blue);animation:tuPop .22s cubic-bezier(.18,.89,.32,1.28)}
.tu-radio{transition:border-color .16s ease}

.tu-next{width:100%;padding:15px;border:none;border-radius:14px;background:var(--ink);color:#fff;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s ease,filter .16s ease,opacity .16s ease}
.tu-next:hover{filter:brightness(1.12)}
.tu-next:active{transform:scale(.98)}
.tu-next:disabled{opacity:.6;cursor:default;transform:none}
.tu-next.loading::before{content:'';width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:tuSpin .7s linear infinite}

.tu-qr-wrap img{animation:tuQr .45s cubic-bezier(.2,.7,.3,1) both}
.tu-timer .clk{animation:tuPulse 2s ease-in-out infinite}

.tu-check{position:relative;animation:tuPop .55s cubic-bezier(.18,.89,.32,1.28) both;
  box-shadow:0 12px 30px rgba(27,169,122,.35)}
.tu-check::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #1BA97A;
  animation:tuRing .95s .15s ease-out both}
.tu-check path{stroke-dasharray:1;stroke-dashoffset:1;animation:tuDraw .5s .35s ease forwards}

@media (prefers-reduced-motion:reduce){
  .tu-overlay,.tu-modal,.tu-body > *,.tu-check,.tu-check::before,.tu-qr-wrap img,.tu-timer .clk{animation:none}
  .tu-check path{stroke-dashoffset:0}
}
@media (max-width:480px){
  .tu-overlay{padding:0;align-items:flex-end}
  .tu-modal{max-width:none;border-radius:20px 20px 0 0;max-height:94vh}
  .tu-amt-field input{font-size:23px}
}

/* Top Up — dark-mode fix + stacked FIB links -------------------------- */
/* In dark mode --ink flips to near-white, so background:var(--ink) with
   white text became invisible. Use the app's primary blue there instead. */
body.dark .tu-next{background:var(--blue);color:var(--on-blue)}
body.dark .tu-next:hover{background:var(--blue-dark);filter:none}
body.dark .tu-next:disabled{background:var(--blue);opacity:.5}

/* FIB app links stacked one under the other, full width */
.tu-fiblinks{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.tu-fiblinks .btn{width:100%;justify-content:center}

/* =====================================================================
   TOP UP — brand-coloured buttons. --tu-accent is set from JS to the
   selected provider's colour: FIB #009B90, Tether #50AF95, PayPal #0070BA.
   Appended last so it overrides the earlier blue/ink rules (incl. body.dark).
   ===================================================================== */
.tu-modal{--tu-accent:#009B90;--tu-accent-soft:rgba(0,155,144,.12);--tu-accent-ring:rgba(0,155,144,.22)}

.tu-next{background:var(--tu-accent);color:#fff}
.tu-next:hover{background:var(--tu-accent);filter:brightness(1.12)}
.tu-next:disabled{background:var(--tu-accent);opacity:.55}
body.dark .tu-next{background:var(--tu-accent);color:#fff}
body.dark .tu-next:hover{background:var(--tu-accent);filter:brightness(1.15)}
body.dark .tu-next:disabled{background:var(--tu-accent);opacity:.5}

.tu-title svg{color:var(--tu-accent)}
.tu-step.on i{background:var(--tu-accent);border-color:var(--tu-accent);color:#fff}

.tu-amt-field:focus-within{border-color:var(--tu-accent);box-shadow:0 0 0 4px var(--tu-accent-ring)}
.tu-preset.on{background:var(--tu-accent);border-color:var(--tu-accent);color:#fff}
.tu-custom{color:var(--tu-accent)}
.tu-custom:hover{background:var(--tu-accent-soft)}

.tu-method.sel{border-color:var(--tu-accent);background:var(--tu-accent-soft);
  box-shadow:inset 0 0 0 1px var(--tu-accent),0 4px 14px var(--tu-accent-soft)}
.tu-method.sel .tu-radio{border-color:var(--tu-accent)}
.tu-method.sel .tu-radio::after{background:var(--tu-accent)}

/* pay screen */
.tu-fiblinks .btn.primary{background:var(--tu-accent);border-color:var(--tu-accent);color:#fff;box-shadow:none}
.tu-fiblinks .btn.primary:hover{background:var(--tu-accent);filter:brightness(1.1)}
.tu-badge{background:var(--tu-accent)}
.tu-addr{border-color:var(--tu-accent)}
.netchip.active{border-color:var(--tu-accent);background:var(--tu-accent-soft);color:var(--tu-accent)}

/* FIB app links — each button in its own app's brand colour.
   Colours sampled from the official FIB app icons on Google Play:
     personal  #11998F (teal, same as our fib.svg logo)
     business  #0174B5 (blue)
     corporate #3F5EAF (indigo)                                        */
.tu-fiblinks .btn{width:100%;justify-content:center;color:#fff;border:1px solid transparent;
  box-shadow:none;font-weight:650;transition:filter .15s ease,transform .1s ease}
.tu-fiblinks .btn:hover{color:#fff;filter:brightness(1.10)}
.tu-fiblinks .btn:active{transform:scale(.985)}
.tu-fiblinks .fib-personal{background:#11998F}
.tu-fiblinks .fib-business{background:#0174B5}
.tu-fiblinks .fib-corporate{background:#3F5EAF}

/* FIB fee notice — amber tint + amber icon, but DARK readable body text
   (the plain .alert.amber colours the text amber, which reads poorly).
   Specificity kept at .alert.amber.tu-fee so it beats .alert.amber. */
.alert.amber.tu-fee{align-items:flex-start;gap:9px;line-height:1.55;font-size:12.5px;
  margin-bottom:14px;text-align:start;color:var(--ink2)}
.alert.amber.tu-fee svg{flex:none;margin-top:1px;color:var(--amber)}
.alert.amber.tu-fee b{font-weight:750;color:var(--ink)}

/* QR — a scanner needs dark modules on a LIGHT background, so the QR stays
   light. Instead of a harsh white block we present it as a compact rounded
   "scan card": soft off-white, padded (which also gives the code the quiet
   zone FIB's image ships without), with a gentle shadow so it sits calmly on
   the dark surface rather than glaring. */
.tu-qr-wrap img{width:186px;height:186px;padding:13px;border:none;border-radius:18px;
  background:#fff;box-shadow:0 4px 14px rgba(16,24,40,.10)}
/* dark: card matches the softened QR white (#F3F6F8 from softenQr) — no seam,
   and a soft shadow so the tile sits on the surface instead of glaring */
body.dark .tu-qr-wrap img{background:#F3F6F8;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* status + countdown merged into a single bar */
.tu-status{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tu-status .tu-status-l{display:inline-flex;align-items:center;gap:7px;font-weight:650}
.tu-status .tu-status-c{font-variant-numeric:tabular-nums;font-weight:700;opacity:.85;
  white-space:nowrap;font-size:12.5px}

/* balance went up — a brief pulse so the live update is noticeable.
   Scale only (no colour change): the figures sit on white, on the blue
   balance card and inside the header pill, so a tint would clash somewhere. */
@keyframes balBump{0%{transform:scale(1)}38%{transform:scale(1.08)}100%{transform:scale(1)}}
.bal-bump{animation:balBump .55s cubic-bezier(.2,.7,.3,1);display:inline-block}
.bal-card .bal-bump,.balance-pill.bal-bump{display:block}
@media (prefers-reduced-motion:reduce){.bal-bump{animation:none}}

/* =====================================================================
   Home — the wallet panel in the hero, and the light "prices" card.
   (The rows themselves come from balRates() in app.js.)
   ===================================================================== */
.hh-wallet{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;padding:22px 22px 20px;
  color:#fff;background:linear-gradient(160deg,var(--hh-navy-2) 0%,var(--hh-navy) 62%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hh-wallet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/brand/pattern-flight-lines.svg) 0 0/cover no-repeat;opacity:.32}
.hh-wallet .lbl{font-size:13px;font-weight:600;color:rgba(255,255,255,.66)}
.hh-wallet .spread svg{color:var(--brand-hi)}
.hh-wallet .amt{font-size:38px;font-weight:700;margin-top:10px;font-variant-numeric:tabular-nums;
}
.hh-wallet p{font-size:12.8px;color:rgba(255,255,255,.66);margin:6px 0 18px;line-height:1.7}

/* the wallet's actions; Top Up is the solid one */
.bal-actions{display:flex;gap:10px}
.bal-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 14px;border-radius:12px;font-family:inherit;font-size:13.5px;font-weight:600;
  color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  transition:background .16s ease,border-color .16s ease,transform .1s ease}
.bal-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.bal-btn:active{transform:scale(.97)}
.bal-btn svg{flex:none}
.bal-btn.primary{background:var(--cream);color:var(--hh-navy);border-color:transparent;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.bal-btn.primary:hover{background:#fff}

/* the prices: light rows in their own card */
.bal-fees .bf-t{display:none}
.bf-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.5px;line-height:1.5;padding:9px 0;color:var(--ink3);border-bottom:1px dashed var(--line)}
.bf-row:last-of-type{border-bottom:none}
.bf-row b{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.bf-p s{color:var(--muted);font-size:12px;margin-inline-end:6px}
.bf-p i{font-style:normal;font-size:11.5px;color:var(--green)}
p.bf-note{font-size:12.3px;line-height:1.75;color:var(--muted);margin:12px 0 0}
p.bf-note b{font-weight:600;color:var(--ink2)}
p.bf-note.bf-off{color:var(--green);font-weight:600}
@media (max-width:560px){.hh-wallet .amt{font-size:32px}}

/* Top Up presets — fit all four (incl. Custom) on one row.
   The currency is already shown in the amount field, so the chips are
   just the number. Tighter padding/gap gives Custom room beside 100,000. */
.tu-presets{gap:7px}
.tu-preset{padding:8px 12px}


/* ==================================================================== *
 *  In-app dialogs — replaces window.alert / confirm / prompt
 * ==================================================================== */
.ui-ov{position:fixed;inset:0;z-index:90;background:rgba(26,22,20,.52);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:uiFade .16s ease}
.ui-ov.closing{animation:uiFadeOut .13s ease forwards}
.ui-card{background:var(--surface);border-radius:20px;width:100%;
  max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.32);
  animation:uiRise .18s cubic-bezier(.2,.9,.3,1.1) both}
.ui-card .ui-head{padding:18px 22px 0}
.ui-card .ui-head h3{margin:0;font-size:17px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.ui-card .ui-body{padding:10px 22px 4px;font-size:14px;line-height:1.6;
  color:var(--ink3);white-space:pre-line}
.ui-card .ui-body .ui-msg{margin:0 0 12px}
.ui-card .ui-body .field{margin-top:2px}
.ui-card .ui-foot{padding:16px 22px 18px;display:flex;gap:8px;
  justify-content:flex-end}
.ui-card .ui-foot .btn[disabled]{opacity:.5;pointer-events:none}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
@keyframes uiFadeOut{to{opacity:0}}
@keyframes uiRise{from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}}

/* ---- full-screen progress ring -> tick ---- */
.ui-ov-plain{background:rgba(15,23,42,.62)}
.ui-prog{display:flex;flex-direction:column;align-items:center;gap:20px}
.ui-ring{width:104px;height:104px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  border:5px solid rgba(255,255,255,.18);border-top-color:#fff;
  animation:uiSpin .75s linear infinite;
  transition:border-color .28s ease,background .28s ease}
.ui-ring.ok,.ui-ring.err{animation:uiPop .42s cubic-bezier(.18,.89,.32,1.28) both;
  border-color:transparent}
.ui-ring.ok{background:var(--green,#12B76A);box-shadow:0 14px 40px rgba(18,183,106,.45)}
.ui-ring.err{background:var(--red,#F04438);box-shadow:0 14px 40px rgba(240,68,56,.45)}
.ui-ring .ui-mark{width:52px;height:52px}
.ui-ring .ui-mark path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.ui-ring.ok .ui-mark path,.ui-ring.err .ui-mark path{
  animation:uiDraw .34s .18s ease forwards}
.ui-prog-msg{color:#fff;font-size:15.5px;font-weight:600;text-align:center;
  max-width:320px;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.3)}
@keyframes uiSpin{to{transform:rotate(360deg)}}
@keyframes uiPop{0%{transform:scale(.6);opacity:.7}60%{transform:scale(1.06)}
  100%{transform:scale(1);opacity:1}}
@keyframes uiDraw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .ui-ov,.ui-card,.ui-ring,.ui-ring .ui-mark path{animation:none}
  .ui-ring{border-top-color:#fff}
  .ui-ring .ui-mark path{stroke-dashoffset:0}
}

/* ---- OAuth "finishing sign-in" waiter -------------------------------
   Bottom-right card rather than a centred full-screen overlay: the
   provider's own popup opens centred, so anything in the middle sits
   directly behind it. Non-blocking by design — the popup has focus. */
.oauth-wait{position:fixed;inset-inline-end:20px;bottom:20px;z-index:88;
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  max-width:min(340px,calc(100vw - 40px));
  animation:owIn .22s cubic-bezier(.2,.9,.3,1.1) both}
.oauth-wait-spin{flex:none;width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--line2);border-top-color:var(--blue);
  animation:uiSpin .7s linear infinite}
.oauth-wait-txt{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.4}
.oauth-wait-txt b{font-size:13.5px;font-weight:650;color:var(--ink)}
.oauth-wait-txt span{font-size:11.5px;color:var(--muted)}
.oauth-wait-x{flex:none;margin-inline-start:2px;background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:12.5px;font-weight:600;padding:5px 7px;border-radius:7px}
.oauth-wait-x:hover{background:var(--panel);color:var(--ink)}
@keyframes owIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .oauth-wait{inset-inline-start:16px;inset-inline-end:16px;bottom:16px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .oauth-wait,.oauth-wait-spin{animation:none}
}

/* ---- OAuth waiting state, taking over the sign-in card --------------
   The card's own contents fade out and the loader sits in their place, so
   the card keeps its size and the page doesn't jump. */
.auth-card.oauth-busy{position:relative}
.auth-card.oauth-busy > *:not(#oauthLoading){
  opacity:0;visibility:hidden;transition:opacity .18s ease}
.oauth-inline{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8px;gap:0;
  animation:owIn .22s cubic-bezier(.2,.9,.3,1.1) both}
.oauth-inline-h{margin-top:20px;font-size:16.5px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink)}
.oauth-inline-p{margin-top:7px;font-size:13px;line-height:1.55;color:var(--muted);
  max-width:270px}
.oauth-inline .oauth-wait-x{margin-top:18px;font-size:13px}
@media (prefers-reduced-motion:reduce){
  .oauth-inline{animation:none}
}

/* ---- orbiting-dots loader -------------------------------------------
   Dots travel one flattened ellipse. Scale + opacity are keyed to the same
   cycle, so a dot swells and brightens along the near edge and shrinks across
   the far one — a ring seen at a steep angle. The far side stays visible
   enough that the complete circle reads, not just the near crescent. */
.ldots{position:relative;width:132px;height:82px;flex:none}
.ld{position:absolute;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;   /* physical: the path is in x/y */
  border-radius:50%;background:var(--blue);
  offset-path:path("M 7,41 a 58,30 0 1,1 116,0 a 58,30 0 1,1 -116,0");
  offset-rotate:0deg;
  animation:ldRun var(--ldT,2.9s) linear infinite,
            ldDepth var(--ldT,2.9s) ease-in-out infinite;
  animation-delay:calc(var(--i) * (var(--ldT,2.9s) / -30));
}
@keyframes ldRun{to{offset-distance:100%}}
/* Phase measured off the path: 25% is the top of the ellipse (far side),
   75% is the bottom (near side), 0%/50% are the left/right extremes. */
@keyframes ldDepth{
  0%  {transform:scale(.88);opacity:.80}
  25% {transform:scale(.72);opacity:.62}   /* far edge — still clearly visible,
                                              so the ring reads as a full circle */
  50% {transform:scale(.88);opacity:.80}
  75% {transform:scale(1.22);opacity:1}    /* near edge — front of the ring */
  100%{transform:scale(.88);opacity:.80}
}
/* motion paths unavailable: fall back to a plain ring so nothing piles up */
@supports not (offset-path: path("M0,0 L1,1")){
  .ldots{width:52px;height:52px;border-radius:50%;
    border:3px solid var(--line2);border-top-color:var(--blue);
    animation:uiSpin .8s linear infinite}
  .ld{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ld{animation-duration:5.6s}
}

/* =====================================================================
   Account switcher — one "Switch account" row in the user menu that
   slides a right-hand drawer in, listing every business on the login.
   ===================================================================== */
.dd-stack{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:start}
.dd-stack>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-sub{font-size:11.5px;color:var(--muted);font-weight:500}
.dd-count{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:6px;
  background:var(--panel);color:var(--muted);font-size:11px;font-weight:700;
  display:grid;place-items:center}
.dd-item:hover .dd-count{background:var(--surface)}

/* ---- the drawer shell (uiDrawer) ---- */
/* only where the body itself scrolls — on desktop the shell scrolls its own
   panes, and toggling overflow there would pop the scrollbar and shift layout */
@media(max-width:820px){body.dw-open{overflow:hidden}}
/* Keyframes, not a class-flip transition: an animation starts the moment the
   element is inserted, so it can never be skipped by the browser folding the
   before/after styles into one pass. Only opacity + transform move, and the
   scrim is a flat dim — animating backdrop-filter re-blurs the whole viewport
   every frame, which is what makes drawers stutter. */
/* the panel slides its full width in and out; the scrim dims underneath it,
   both on the same .34s cubic-bezier(.4,.9,.3,1) so they move as one piece */
.dw-ov{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.44);
  display:flex;justify-content:flex-end;
  animation:dwFade .34s cubic-bezier(.4,.9,.3,1) both}
.dw-panel{position:relative;width:100%;height:100%;background:var(--surface);
  display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(40,40,80,.14);
  animation:dwIn .34s cubic-bezier(.4,.9,.3,1) both}
.dw-ov.closing{animation:dwFadeOut .34s cubic-bezier(.4,.9,.3,1) forwards}
.dw-ov.closing .dw-panel{animation:dwOut .34s cubic-bezier(.4,.9,.3,1) forwards}
@keyframes dwFade{from{opacity:0}to{opacity:1}}
@keyframes dwFadeOut{to{opacity:0}}
@keyframes dwIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes dwOut{to{transform:translateX(100%)}}
.dw-panel .dr-head{flex:none;display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.dr-title{flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-title span{display:block;font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.dr-x{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);display:grid;place-items:center;
  transition:background .13s,color .13s,border-color .13s}
.dr-x:hover{background:var(--panel);color:var(--ink);border-color:var(--line2)}
.dr-body{flex:1;min-height:0;overflow:auto;padding:18px}
.dr-foot{flex:none;display:flex;gap:8px;justify-content:space-between;align-items:center;
  padding:14px 18px;border-top:1px solid var(--line);background:var(--surface)}
.dr-foot .btn.ghost{display:inline-flex;align-items:center;gap:6px}
.field-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.acct-count{min-width:19px;height:19px;padding:0 6px;border-radius:6px;background:var(--panel);
  color:var(--muted);font-size:10.5px;font-weight:700;display:grid;place-items:center;
  letter-spacing:0}

/* ---- account rows ---- */
.acct-search{display:flex;align-items:center;gap:8px;padding:0 11px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);
  transition:border-color .13s}
.acct-search:focus-within{border-color:var(--blue-border)}
.acct-search input{flex:1;min-width:0;border:none;background:none;outline:none;box-shadow:none;
  -webkit-appearance:none;appearance:none;color:var(--ink);font-size:13.5px;padding:9px 0}
.acct-list{display:flex;flex-direction:column;gap:8px}

.acct-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color .14s,background .14s,box-shadow .14s}
.acct-row:hover{background:var(--panel);border-color:var(--line2)}
.acct-row.on{border-color:var(--blue-border);background:var(--blue-soft)}

.acct-pic{flex:none;position:relative;border:none;background:none;padding:0;line-height:0;
  border-radius:50%}
.acct-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);background-size:cover;background-position:center;
  color:var(--ink2);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--line)}
.acct-av[data-h="0"]{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--blue)}
.acct-av[data-h="1"]{background:rgba(105,56,239,.14);color:var(--purple)}
.acct-av[data-h="2"]{background:var(--green-soft);color:var(--green)}
.acct-av[data-h="3"]{background:var(--amber-soft);color:var(--amber)}
.acct-av[data-h="4"]{background:var(--red-soft);color:var(--red)}
.acct-av[data-h="5"]{background:var(--panel);color:var(--ink2)}
.acct-cam{position:absolute;inset-inline-end:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;
  background:var(--ink);color:var(--bg);display:grid;place-items:center;
  border:2px solid var(--surface);opacity:0;transform:scale(.7);
  transition:opacity .13s,transform .13s}
.acct-pic:hover .acct-cam,.acct-pic:focus-visible .acct-cam{opacity:1;transform:none}

.acct-main{flex:1;min-width:0;border:none;background:none;padding:0;text-align:start;
  display:flex;flex-direction:column;gap:2px}
.acct-name{font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-bal{font-size:12px;color:var(--muted)}
.acct-off{font-size:9.5px;vertical-align:middle;margin-inline-start:4px}
.acct-cur{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  font-weight:600;color:var(--blue)}
.acct-chev{flex:none;color:var(--muted);display:grid;place-items:center;
  transition:transform .14s,color .14s}
.acct-row:hover .acct-chev{color:var(--ink3);transform:translateX(2px)}
.acct-empty{padding:22px 4px;text-align:center;color:var(--muted);font-size:13px}
.acct-hint{margin-top:14px;font-size:12px;line-height:1.55;color:var(--muted)}

@media (max-width:560px){
  .dw-panel{max-width:none !important}
  .acct-cur span{display:none}
}
/* touch devices have no hover — keep the "change picture" hint visible */
@media (hover:none){.acct-cam{opacity:1;transform:none}}
/* NOTE: deliberately no prefers-reduced-motion override here. It used to cut
   the open animation to 0.01ms, which made the drawer appear instantly for
   anyone with the OS "reduce motion" setting on — while the close still ran,
   because .dw-ov.closing out-specifies it. The slide is requested behaviour. */

/* =====================================================================
   Service alerts — owner broadcasts (outages, maintenance, fixes).
   Banner stack under the topbar + the topbar bell panel + owner console.
   ===================================================================== */
/* level palette, shared by banners, bell rows and the owner list */
.ann-info{--al:var(--blue);--al-bg:var(--blue-soft);--al-bd:var(--blue-border)}
.ann-success{--al:var(--green);--al-bg:var(--green-soft);--al-bd:var(--green-border)}
.ann-warning{--al:var(--amber);--al-bg:var(--amber-soft);--al-bd:var(--amber-border)}
.ann-critical{--al:var(--red);--al-bg:var(--red-soft);--al-bd:var(--red-border)}

/* ---- banner stack ---- */
#annHost{display:flex;flex-direction:column;gap:1px}
.ann{display:flex;align-items:flex-start;gap:11px;padding:11px 20px;
  background:var(--al-bg);color:var(--ink);border-bottom:1px solid var(--al-bd);
  animation:annIn .32s cubic-bezier(.4,.9,.3,1) both}
@keyframes annIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ann-ic{flex:none;color:var(--al);display:grid;place-items:center;margin-top:1px}
.ann-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ann-tx b{font-size:13.5px;font-weight:650;line-height:1.4}
.ann-tx span{font-size:12.5px;line-height:1.55;color:var(--ink3)}
.ann-x{flex:none;width:26px;height:26px;border-radius:7px;border:none;background:none;
  color:var(--muted);display:grid;place-items:center;transition:background .13s,color .13s}
.ann-x:hover{background:rgba(0,0,0,.06);color:var(--ink)}
body.dark .ann-x:hover{background:rgba(255,255,255,.10)}
.ann-pin{flex:none;color:var(--al);opacity:.55;display:grid;place-items:center}

/* ---- topbar bell ---- */
.bell-menu{position:relative}
.bell-dot{position:absolute;top:3px;inset-inline-end:3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--surface);box-sizing:content-box}
.bell-dot[hidden]{display:none}
.bell-dd{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:55;width:330px;max-height:420px;
  overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.16);padding:6px}
.bell-dd[hidden]{display:none}
.bell-head{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;padding:8px 10px 6px}
.bell-row{display:flex;gap:9px;padding:9px 10px;border-radius:9px}
.bell-row+.bell-row{margin-top:2px}
.bell-row:hover{background:var(--panel)}
.bell-row.seen{opacity:.55}
.bell-ic{flex:none;color:var(--al);margin-top:2px}
.bell-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.bell-tx b{font-size:13px;font-weight:650;color:var(--ink);line-height:1.4}
.bell-tx span{font-size:12px;line-height:1.5;color:var(--ink3)}
.bell-tx small{font-size:11px;color:var(--muted)}
.bell-empty{display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px 16px;
  text-align:center;color:var(--muted)}
.bell-empty svg{color:var(--green)}
.bell-empty span{font-size:13px;font-weight:600;color:var(--ink2)}
.bell-empty small{font-size:11.5px;line-height:1.5}

/* ---- owner console ---- */
.al-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.al-form .wide{grid-column:1/-1}
.al-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.al-lv{display:flex;flex-direction:column;gap:1px;align-items:flex-start;padding:9px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:start;
  font-family:inherit;transition:border-color .13s,background .13s}
.al-lv b{font-size:12.5px;font-weight:650;color:var(--ink)}
.al-lv span{font-size:10.5px;color:var(--muted);line-height:1.35}
.al-lv:hover{border-color:var(--line2)}
.al-lv.on{border-color:var(--al-bd);background:var(--al-bg)}
.al-lv.on b{color:var(--al)}
.al-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.al-chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);cursor:pointer}
.al-chk input{width:16px;height:16px;accent-color:var(--blue)}

.al-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);position:relative}
.al-item:last-child{border-bottom:none}
.al-item.off{opacity:.55}
.al-bar{flex:none;width:3px;border-radius:3px;background:var(--al)}
.al-main{flex:1;min-width:0}
.al-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.al-top b{font-size:13.5px;font-weight:650;color:var(--ink)}
.al-main p{font-size:12.5px;line-height:1.55;color:var(--ink3);margin:5px 0 0}
.al-meta{font-size:11.5px;color:var(--muted);margin-top:5px}
.al-act{flex:none;display:flex;gap:6px;align-items:flex-start}
.al-act .btn.danger{color:var(--red)}

@media (max-width:820px){
  .al-form{grid-template-columns:1fr}
  .al-levels{grid-template-columns:repeat(2,1fr)}
  .ann{padding:10px 14px}
  .bell-dd{width:min(320px,calc(100vw - 24px))}
  .al-item{flex-wrap:wrap}
}

/* ---- loading skeletons (every tab) ---------------------------------- *
   Generalised from the Phone Numbers tab, which was the only screen that did
   this properly: paint something shaped like the content the instant the tab
   opens, then let the real thing fade up in its place. Everywhere else used to
   show a centred "Loading…" on an empty canvas for the whole round trip.

   Three parts, and they are deliberately independent:
     .sk-*    the placeholder shapes (shimmering bars in a page-shaped layout)
     .sk      marks a placeholder; go() holds it back ~120ms, so a screen that
              answers quickly never shows one at all
     .page>*  the entrance for the REAL content, staggered by position, which
              needs no markup changes in any view

   The shimmer reuses @keyframes nmShim (defined with the number cards below)
   rather than declaring a second identical one.                            */
/* Eases in rather than snapping. Deliberately NO animation-fill-mode: without
   it the element's resting opacity is 1, so it is visible whether or not the
   animation ever runs — a fade built on fill-mode:both leaves a blank screen
   anywhere animations do not start, which is what this used to get wrong. A
   freshly inserted element begins at frame 0, so there is no flash either. */
.sk{pointer-events:none;user-select:none;animation:skFade .2s ease}
@keyframes skFade{from{opacity:0}to{opacity:1}}
/* The bar is a SOLID block with the shimmer travelling over it, not a moving
   gradient that happens to look like a bar. A gradient-positioned bar is only
   visible while its animation is running — which meant it all but vanished for
   anyone on prefers-reduced-motion, and for the first frames after paint. */
.sk-bar{display:block;height:13px;border-radius:7px;background:var(--line);
  position:relative;overflow:hidden}
.sk-bar::after,.sk-dot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);animation:skSheen 1.5s ease-in-out infinite}
body.dark .sk-bar::after,body.dark .sk-dot::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}
@keyframes skSheen{to{transform:translateX(100%)}}
.sk-head{display:flex;flex-direction:column;gap:9px;margin-bottom:2px}
.sk-head .sk-bar:first-child{height:26px;width:min(280px,42%)}
.sk-head .sk-bar:last-child{height:13px;width:min(460px,68%)}

.sk-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:11px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sk-grid .sk-bar:nth-child(1){height:30px;width:58%}
.sk-grid .sk-bar:nth-child(2){width:88%}
.sk-grid .sk-bar:nth-child(3){height:34px;width:100%}

/* a table: the header strip, then rows of decreasing certainty */
.sk-tbl{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow)}
.sk-tbl-h{display:flex;gap:18px;padding:14px 18px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.sk-tbl-h .sk-bar{height:11px;flex:1}
.sk-row{display:flex;align-items:center;gap:18px;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.sk-row:last-child{border-bottom:none}
.sk-row .sk-bar{flex:1}
.sk-row .sk-bar:first-child{flex:2}
.sk-dot{width:32px;height:32px;border-radius:50%;flex:none;background:var(--line);
  position:relative;overflow:hidden}

/* KPI tiles above the body — dashboards and reports both open this way */
.sk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.sk-stats .sk-card{gap:9px}
.sk-stats .sk-bar:first-child{height:11px;width:52%}
.sk-stats .sk-bar:last-child{height:24px;width:74%}

/* a stack of labelled fields inside one card */
.sk-form{display:flex;flex-direction:column;gap:16px}
.sk-form .sk-fld{display:flex;flex-direction:column;gap:7px}
.sk-form .sk-fld .sk-bar:first-child{height:11px;width:120px}
.sk-form .sk-fld .sk-bar:last-child{height:38px;width:100%;border-radius:9px}

/* two-column composer: pick recipients on the left, write on the right */
.sk-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1100px){.sk-split{grid-template-columns:1fr}}

/* The real content arriving. Staggering on :nth-child rather than a --i custom
   property means no view has to change its markup to take part. */
.page > *{animation:nmIn .35s ease-out both}
.page > *:nth-child(1){animation-delay:0s}
.page > *:nth-child(2){animation-delay:.05s}
.page > *:nth-child(3){animation-delay:.10s}
.page > *:nth-child(4){animation-delay:.15s}
.page > *:nth-child(5){animation-delay:.18s}
.page > *:nth-child(n+6){animation-delay:.20s}
/* the placeholder is already the "waiting" state — it must not fade up as well */
.page.sk > *{animation:none}

/* Containers whose CHILDREN already have their own entrance must not fade too:
   two 0→1 opacity ramps multiply, so at the midpoint the content sits at ~0.25
   instead of 0.5 and the per-item stagger is lost in the mush. Phone Numbers is
   the case that matters — its cards arrive one by one via --i, and that stagger
   is the whole effect. Let the container hold still and let the cards do it. */
.page > #nmBody{animation:none}
/* set while the live poller repaints in the background: the content changes
   under the reader without the page appearing to reload itself */
#view.view-quiet .page > *{animation:none}

@media (prefers-reduced-motion:reduce){
  /* the bars stay perfectly visible without it — only the sheen is dropped */
  .sk-bar::after,.sk-dot::after{animation:none;opacity:0}
  .sk{animation:none}
  .page > *{animation:none}
}

/* ---- Number rentals (customer "Phone Numbers" tab) ----------------- *
   Cards fade up in sequence via --i, patch in place afterwards, and every
   animation is dropped under prefers-reduced-motion.                     */
.nm-bal{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.nm-bal b{color:var(--ink);font-variant-numeric:tabular-nums}
.nm-sect+.nm-sect{margin-top:26px}
.nm-h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.nm-h span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:6px;background:var(--panel);border:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:0;color:var(--ink2)}
/* wide enough that a full +964 number never has to truncate */
.nm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(318px,1fr));gap:14px}

.nm-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow);
  animation:nmIn .35s ease-out both;
  animation-delay:calc(var(--i,0) * 50ms);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .18s,border-color .18s}
/* Matches the reference build's ui-fade-in exactly: a 6px lift and nothing
   else. The scale(.985) that used to be here read as a zoom on wide cards. */
@keyframes nmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nm-avail:hover{transform:translateY(-3px);border-color:var(--line2);
  box-shadow:0 12px 26px rgba(10,13,18,.13)}
body.dark .nm-avail:hover{box-shadow:0 12px 30px rgba(0,0,0,.42)}
.nm-mine{background:linear-gradient(180deg,var(--green-soft),transparent 62%),var(--surface);
  border-color:var(--green-border)}
.nm-poor{opacity:.72}

/* the chip drops to its own line before the number is allowed to shrink */
.nm-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.nm-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--panel);color:var(--ink3)}
.nm-ic.on{background:var(--green-soft);color:var(--green)}
.nm-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nm-head b{font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.nm-head span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nm-price{display:flex;align-items:baseline;gap:7px;padding:11px 13px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line)}
.nm-price b{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.nm-price span{font-size:12px;color:var(--muted)}
.nm-mid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nm-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.nm-fact span{font-size:11px;color:var(--muted)}
.nm-fact b{font-size:13.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.nm-fact i{font-size:11px;font-style:normal;color:var(--muted)}
.nm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:11px;border-top:1px solid var(--line)}

/* auto-renew switch */
.nm-sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.nm-sw input{position:absolute;opacity:0;width:0;height:0}
.nm-sw-t{position:relative;width:36px;height:20px;border-radius:11px;background:var(--line2);
  transition:background .2s;flex:none}
.nm-sw-t::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s cubic-bezier(.2,.8,.25,1)}
.nm-sw input:checked+.nm-sw-t{background:var(--green)}
.nm-sw input:checked+.nm-sw-t::after{transform:translateX(16px)}
.nm-sw input:disabled+.nm-sw-t{opacity:.5;cursor:not-allowed}
.nm-sw-l{font-size:12.5px;color:var(--ink3)}

/* just-rented pop, and released fade-out */
.nm-won{animation:nmWon .42s cubic-bezier(.2,.9,.3,1) both;border-color:var(--green-border)}
@keyframes nmWon{40%{transform:scale(1.035)}to{transform:scale(1)}}
.nm-out{animation:nmOut .24s ease both;pointer-events:none}
@keyframes nmOut{to{opacity:0;transform:translateY(-8px) scale(.97)}}

/* loading skeletons — same footprint as a card, so nothing jumps on swap */
.nm-skel{gap:11px;pointer-events:none}
.nm-skel span{display:block;height:13px;border-radius:7px;
  background:linear-gradient(90deg,var(--panel) 25%,var(--line) 37%,var(--panel) 63%);
  background-size:400% 100%;animation:nmShim 1.3s ease-in-out infinite}
.nm-skel span:first-child{height:34px;width:60%}
.nm-skel span:nth-child(2){width:88%}
.nm-skel span:nth-child(3){height:36px;width:100%}
@keyframes nmShim{from{background-position:100% 0}to{background-position:0 0}}

/* the owner's short description of a number, under its title */
.nm-desc{font-size:12.5px;line-height:1.5;color:var(--ink3);margin:-4px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nm-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:34px 20px}
.nm-empty-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--panel);color:var(--muted);margin-bottom:2px}
.nm-empty b{font-size:14px}
.nm-empty span{font-size:12.5px;max-width:380px;line-height:1.55}
/* the way out of "Balance too low" — sits above the cards it explains */
.nm-topup{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:14px;
  padding:13px 15px;border-radius:14px;background:var(--surface);
  border:1px solid var(--blue-border,var(--line));box-shadow:0 1px 2px rgba(16,24,40,.04)}
.nm-topup .nm-empty-ic{flex:none;width:40px;height:40px;margin:0;border-radius:50%;
  background:var(--blue-soft);color:var(--blue)}
.nm-topup-t{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.nm-topup-t b{font-size:13.5px}
.nm-topup-t span{font-size:12px;line-height:1.55}
.nm-note{font-size:12px;line-height:1.6;margin-top:18px;display:flex;gap:7px;align-items:flex-start}
.nm-note svg{flex:none;margin-top:2px}

/* ---- live sending health, per number -------------------------------
   "Can this send right now", answered by Meta instead of by a failed message.
   The card is already green-washed, so the healthy state stays on plain surface
   with only the dot and label in green — that keeps amber and red loud.      */
.nm-hzw{display:flex;flex-direction:column;gap:8px}
.nm-hz{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--panel);border:1px solid transparent;
  transition:background .22s,border-color .22s}
.nm-hz-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);
  box-shadow:0 0 0 3px rgba(112,119,143,.16)}
.nm-hz-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nm-hz-t b{font-size:12.5px;font-weight:600;line-height:1.3}
.nm-hz-t span{font-size:11px;color:var(--muted);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nm-hz-ok{background:var(--surface);border-color:var(--green-border)}
.nm-hz-ok .nm-hz-dot{background:var(--green);box-shadow:0 0 0 3px rgba(7,148,85,.18)}
.nm-hz-ok .nm-hz-t b{color:var(--green)}

.nm-hz-review{background:var(--blue-soft);border-color:var(--blue-border)}
.nm-hz-review .nm-hz-dot{background:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.nm-hz-review .nm-hz-t b{color:var(--blue)}
.nm-hz-warn{background:var(--amber-soft);border-color:var(--amber-border)}
.nm-hz-warn .nm-hz-dot{background:var(--amber);box-shadow:0 0 0 3px rgba(181,71,8,.18)}
.nm-hz-warn .nm-hz-t b{color:var(--amber)}

.nm-hz-bad{background:var(--red-soft);border-color:var(--red-border)}
.nm-hz-bad .nm-hz-dot{background:var(--red);box-shadow:0 0 0 3px rgba(217,45,32,.18)}
.nm-hz-bad .nm-hz-t b{color:var(--red)}

.nm-hz-unknown{border-color:var(--line)}

/* still asking Meta — the dot breathes, so the row reads as busy, not broken */
.nm-hz-wait .nm-hz-dot{animation:nmPulse 1.15s ease-in-out infinite}
@keyframes nmPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* what Meta says is wrong, and Meta's own suggested fix underneath */
.nm-hz-x{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.nm-hz-x li{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line)}
.nm-hz-w{align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:2px 7px;border-radius:6px;
  background:var(--surface);border:1px solid var(--line)}
.nm-hz-x li b{font-size:12px;font-weight:600;line-height:1.45;color:var(--ink2)}
.nm-hz-x li i{font-size:11.5px;font-style:normal;color:var(--muted);line-height:1.5}
/* a fault is charged to someone; a note is Meta explaining an intended limit.
   Qualified with li so the shared border above cannot outrank the accent. */
.nm-hz-x li.nm-hz-e{border-inline-start:3px solid var(--red)}
.nm-hz-x li.nm-hz-n{border-inline-start:3px solid var(--line2)}

/* ---- messaging limit ------------------------------------------------
   WhatsApp's daily cap on new conversations, drawn as the one thing it never
   is on Meta's own screens: a bar you can read at a glance. The marker (u) is
   the point this console stops sending at, so "how close am I" and "when does
   it cut out" are the same picture. */
/* a number card: everything WhatsApp reports about it, folded */
.nm-facts{border:1px solid var(--line);border-radius:11px;padding:2px 12px;background:var(--surface)}
.nm-facts>summary{display:flex;align-items:center;gap:6px;padding:9px 0;font-size:12.5px;font-weight:600;
  color:var(--ink2);cursor:pointer;list-style:none}
.nm-facts>summary::-webkit-details-marker{display:none}
.nm-facts>summary::after{content:'▸';margin-inline-start:auto;color:var(--muted);transition:transform .15s}
.nm-facts[open]>summary::after{transform:rotate(90deg)}
.nm-mf{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:2px 12px;padding:7px 0;
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.45}
.nm-mf>span{color:var(--muted)}
.nm-mf>b{min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.nm-mf>b code{font-size:12px}
.nm-mf>i{grid-column:2;min-width:0;font-style:normal;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.nm-lim{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line)}
.nm-lim-h{display:flex;flex-direction:column;gap:2px}
.nm-lim-h b{font-size:12.5px;font-weight:600;color:var(--ink2)}
.nm-lim-h span{font-size:11px;color:var(--muted);line-height:1.45}
.nm-lim-bar{position:relative;height:7px;border-radius:99px;background:var(--line);
  overflow:hidden}
.nm-lim-bar i{display:block;height:100%;border-radius:99px;background:var(--green);
  transition:width .4s cubic-bezier(.4,0,.2,1)}
.nm-lim-bar u{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:2px;
  background:var(--ink2);opacity:.45}
.nm-lim-n{font-size:11.5px;color:var(--ink2);line-height:1.4}
.nm-lim-n b{font-size:13px;font-weight:700}
.nm-lim-n .muted{font-weight:400}
.nm-lim-sub{font-size:11px;color:var(--muted);line-height:1.45}
.nm-lim-warn{border-color:var(--amber-border);background:var(--amber-soft)}
.nm-lim-warn .nm-lim-bar i{background:var(--amber)}
.nm-lim-bad{border-color:var(--red-border);background:var(--red-soft)}
.nm-lim-bad .nm-lim-bar i{background:var(--red)}
.nm-lim-stop,.nm-lim-near{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;
  line-height:1.5;padding:9px 10px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line)}
.nm-lim-stop{color:var(--red);border-color:var(--red-border)}
.nm-lim-near{color:var(--amber);border-color:var(--amber-border)}
.nm-lim-stop svg,.nm-lim-near svg{flex:none;margin-top:2px}
.nm-lim-stop b{font-weight:700}

/* The health block is the only part of a held card whose height varies, so the
   footers in a row would otherwise sit at four different heights. */
.nm-mine .nm-foot{margin-top:auto}

/* nothing can go out of this one — it should not read as fine from across the room */
.nm-mine.nm-h-bad{background:var(--surface);border-color:var(--red-border)}
.nm-mine.nm-h-bad .nm-ic.on{background:var(--red-soft);color:var(--red)}

/* Recheck sits in the section heading: one request covers every number, so a
   per-card button would have been a lie about what it refreshes. */
.nm-recheck{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink3);font:inherit;font-size:11.5px;font-weight:600;letter-spacing:0;
  text-transform:none;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s,opacity .18s}
.nm-recheck:hover{border-color:var(--line2);color:var(--ink)}
.nm-recheck:disabled{opacity:.55;cursor:default}
.nm-recheck svg{flex:none}
.nm-recheck.busy svg{animation:nmSpin .8s linear infinite}
@keyframes nmSpin{to{transform:rotate(360deg)}}

@media (max-width:560px){.nm-grid{grid-template-columns:1fr}.nm-mid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
  .nm-card,.nm-won,.nm-out{animation:none}
  .nm-avail:hover{transform:none}
  .nm-skel span{animation:none}
  .nm-sw-t,.nm-sw-t::after{transition:none}
  .nm-hz-wait .nm-hz-dot,.nm-recheck.busy svg{animation:none}
}

/* ---- Phone Numbers: a list of numbers, and one number in full ------ */
.pn-list{overflow:hidden}
.pn-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border:none;
  background:none;font-family:inherit;text-align:start;border-bottom:1px solid var(--line);
  transition:background .13s}
.pn-row:last-child{border-bottom:none}
.pn-row:hover{background:var(--panel)}
.pn-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--green-soft);color:var(--green)}
.pn-num{flex:none;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.pn-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.pn-meta{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pn-go{flex:none;display:grid;place-items:center;color:var(--muted);transition:transform .15s}
.pn-row:hover .pn-go{transform:translateX(3px);color:var(--ink2)}

.pn-ov{position:fixed;inset:0;z-index:92;background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;
  align-items:flex-start;justify-content:center;padding:34px 20px;overflow:auto;
  animation:pnFade .16s ease}
@keyframes pnFade{from{opacity:0}to{opacity:1}}
.pn-modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;width:100%;
  max-width:880px;box-shadow:0 28px 70px rgba(0,0,0,.34);animation:pnRise .2s cubic-bezier(.2,.8,.25,1) both}
@keyframes pnRise{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.pn-load{padding:34px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.pn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--line)}
.pn-head h2{font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pn-head p{margin-top:3px;font-size:13px;color:var(--muted)}
.pn-x{border:none;background:none;font-size:26px;line-height:1;color:var(--muted);
  padding:0 4px;border-radius:8px;transition:color .13s,background .13s}
.pn-x:hover{color:var(--ink);background:var(--panel)}
.pn-body{padding:6px 22px 22px}
.pn-sect{padding:16px 0;border-bottom:1px solid var(--line)}
.pn-sect:last-child{border-bottom:none;padding-bottom:2px}
.pn-sect h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.pn-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 20px}
.pn-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.pn-fact span{font-size:11.5px;color:var(--muted)}
.pn-fact b{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pn-biz{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pn-biz-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--blue-soft);color:var(--blue)}
.pn-biz-tx{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px}
.pn-biz-tx b{font-size:14px}
.pn-biz-tx span{font-size:12px}
.pn-assign{padding:14px 15px;border:1px dashed var(--line2);border-radius:12px}
.pn-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink3);
  white-space:nowrap;padding-bottom:9px}
.pn-check input{width:auto;box-shadow:none}
.pn-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px}
.pn-tile{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel);
  display:flex;flex-direction:column;gap:4px}
.pn-tile span{font-size:11.5px;color:var(--muted)}
.pn-tile b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.pn-tile.ok b{color:var(--green)}
.pn-tile.bad b{color:var(--red)}
.pn-msgs{margin-top:14px;max-height:min(46vh,420px);overflow:auto;border:1px solid var(--line);
  border-radius:12px}
.pn-msgs table{width:100%}
.pn-msgs thead th{position:sticky;top:0;z-index:1;background:var(--panel)}
.pn-body-tx{font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:280px}
@media (max-width:700px){
  .pn-row{flex-wrap:wrap;gap:8px 10px}
  .pn-meta,.pn-go{display:none}
  .pn-num{font-size:15px}
  .pn-ov{padding:0}
  .pn-modal{max-width:none;border-radius:0;min-height:100%}
  .pn-body-tx{max-width:150px}
}

/* owner: per-number settings — plain rows, and choices you tap once rather than
   dropdowns that open a picker on top of a modal */
.pn-form{display:flex;flex-direction:column;gap:14px}
.pn-two{display:grid;grid-template-columns:1fr 190px;gap:14px}
.pn-form textarea{min-height:58px;line-height:1.5}
.pn-form .field label .muted{font-weight:400}

/* price with the currency parked inside the field */
.pn-money{position:relative;display:flex;align-items:center}
.pn-money input{padding-inline-end:46px;font-variant-numeric:tabular-nums}
.pn-money span{position:absolute;inset-inline-end:12px;font-size:12px;font-weight:600;color:var(--muted);
  pointer-events:none}

/* segmented choice */
.pn-seg{display:inline-flex;align-self:flex-start;max-width:100%;flex-wrap:wrap;gap:3px;
  padding:3px;border-radius:11px;background:var(--panel);border:1px solid var(--line)}
.pn-seg button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--muted);padding:7px 13px;border-radius:8px;white-space:nowrap;
  transition:background .14s,color .14s,box-shadow .14s}
.pn-seg button:hover{color:var(--ink2)}
.pn-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

.pn-allow{display:flex;flex-wrap:wrap;gap:7px;padding:10px 11px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel);max-height:150px;overflow:auto;margin-top:6px}
.pn-allow[hidden]{display:none}
.pn-allow-i{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);font-size:12.5px;cursor:pointer;
  transition:border-color .13s,background .13s}
.pn-allow-i:hover{border-color:var(--line2)}
.pn-allow-i input{width:auto;box-shadow:none;margin:0}
.pn-allow-i input:checked+span{color:var(--blue);font-weight:600}

/* a value the presets do not cover: number box revealed under the segment */
.pn-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  font-size:12.5px;color:var(--muted);animation:pnGrow .18s ease both}
.pn-custom[hidden]{display:none}
@keyframes pnGrow{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pn-custom input{width:96px;padding:7px 10px;font-size:13px;text-align:center;
  font-variant-numeric:tabular-nums}
.pn-custom-l{white-space:nowrap}

/* one holder, with the owner's remove button */
.pn-holder{display:inline-flex;align-items:center;gap:7px;padding-block:5px 5px;padding-inline:11px 6px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px}
.pn-holder.paid{border-color:var(--green-border);background:var(--green-soft)}
.pn-holder b{font-weight:600;color:var(--ink)}
.pn-holder i{font-style:normal;color:var(--muted)}
.pn-kick{display:grid;place-items:center;width:20px;height:20px;border:none;border-radius:50%;
  background:none;color:var(--muted);transition:background .13s,color .13s}
.pn-kick:hover{background:var(--red-soft);color:var(--red)}
.pn-kick:disabled{opacity:.4}

.pn-holders{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.pn-holders b{font-size:12.5px;white-space:nowrap}
.pn-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
@media (max-width:620px){.pn-two{grid-template-columns:1fr}}

/* ---- Templates: the About dialog ----------------------------------- *
   The grid of template cards is unchanged; this is the panel behind each
   card's About button — what the template is for, what the customer sees,
   and what has to be typed in each time. */
.tp-ahead{display:flex;align-items:center;gap:12px;padding:16px 18px 14px !important;
  border-bottom:1px solid var(--line)}
.tp-aic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--panel);color:var(--ink2)}
.tp-atit{flex:1;min-width:0}
.tp-atit h3{margin:0;font-size:16px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-atit p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.tp-ahead .chip{flex:none;white-space:nowrap}
.tp-ax{flex:none;border:none;background:none;color:var(--muted);padding:5px;
  border-radius:8px;transition:color .13s,background .13s}
.tp-ax:hover{color:var(--ink);background:var(--panel)}
/* .ui-body keeps newlines for plain confirm text; this one is real markup */
.tp-about{white-space:normal !important;padding:16px 18px 4px !important;color:var(--ink2) !important}
.tp-afoot{border-top:1px solid var(--line);margin-top:14px;justify-content:flex-start !important;
  flex-wrap:wrap;padding:14px 18px 16px !important}

.tp-grid{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:22px}
.tp-seg{display:inline-flex;background:var(--panel);border-radius:9px;padding:3px;gap:3px}
.tp-seg button{border:none;background:none;font-family:inherit;font-size:11.5px;
  font-weight:600;color:var(--muted);padding:5px 10px;border-radius:7px;
  transition:background .13s,color .13s}
.tp-seg button:hover{color:var(--ink2)}
.tp-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tp-tip{display:flex;gap:6px;align-items:flex-start;margin:9px 0 0;font-size:11.5px;
  line-height:1.55;color:var(--muted)}
.tp-tip svg{flex:none;margin-top:2px}
/* the words that change per customer, shown filled in */
.wa-phone .pv-fill{background:rgba(7,94,70,.10);border-radius:4px;padding:0 3px;
  font-weight:600;unicode-bidi:plaintext}

.tp-facts{display:flex;flex-direction:column;gap:15px;min-width:0}
.tp-fact h5{margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.tp-fact p{margin:0;font-size:13px;line-height:1.6;color:var(--ink2)}
.tp-vars{display:flex;flex-direction:column}
.tp-var{display:flex;gap:9px;align-items:flex-start;padding:7px 0}
.tp-var+.tp-var{border-top:1px dashed var(--line)}
.tp-vn{flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue-soft);
  color:var(--blue);font-size:11px;font-weight:700;display:grid;place-items:center;
  margin-top:1px}
.tp-var b{font-size:12.5px;font-weight:600;color:var(--ink);display:block}
.tp-var i{font-style:normal;font-size:11.5px;color:var(--muted);display:block;
  margin-top:1px;line-height:1.5}
.tp-var .pv-var{background:var(--blue-soft);color:var(--blue);border-radius:3px;
  padding:0 4px;font-weight:700}
/* the other blanks in the quoted sentence stay quiet — only this row's is blue */
.tp-var .pv-var.alt{background:var(--panel);color:var(--muted)}
.tp-vnote{margin-top:8px !important;font-size:11.5px !important;color:var(--muted) !important}
.tp-name{margin-top:7px !important;font-size:11.5px !important;color:var(--muted) !important}
.tp-name code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;background:var(--panel);border-radius:5px;padding:1px 5px;color:var(--ink2)}

@media (max-width:820px){
  .tp-grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  /* a truncated title helps nobody on a phone — let it wrap instead */
  .tp-atit h3{white-space:normal;font-size:15px}
  .tp-ahead{padding:14px 15px 12px !important;flex-wrap:wrap}
  .tp-about{padding:14px 15px 4px !important}
  .tp-afoot{padding:12px 15px 14px !important}
}

/* ---- API quick-start: language tabs + snippets --------------------- */
/* the snippet palette lives on the card, so both themes only override vars */
.qs-card{background:var(--panel);box-shadow:none;margin-top:10px;
  --qs-bg:#FAFBFD; --qs-gut:#A8B0C2; --qs-gut-line:#E4E7F0; --qs-track:#E4E7F1;
  --qs-com:#8B93A7; --qs-str:#0B7A55; --qs-kw:#7C3AED; --qs-num:#B45309;
  --qs-fn:var(--brand); --qs-cst:#C2410C; --qs-typ:#0E7490; --qs-vr:#BE1D6B;
  --qs-op:#98A0B3; --qs-tg:#6938EF;
  --qs-font:ui-monospace,SFMono-Regular,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
body.dark .qs-card{
  --qs-bg:#12161C; --qs-gut:#4C5566; --qs-gut-line:#242A33; --qs-track:#0E1217;
  --qs-com:#697386; --qs-str:#7FE0B0; --qs-kw:#C0A8FF; --qs-num:#FDB77E;
  --qs-fn:#82B1FF; --qs-cst:#FFBE7B; --qs-typ:#6FD3E8; --qs-vr:#FF9CC7;
  --qs-op:#7A8497; --qs-tg:#A48AFB}
.qs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.qs-top h3{font-size:13px;margin:0}
/* one track per language, so every tab is exactly the same width */
.qs-langs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  background:var(--qs-track);border-radius:9px;padding:3px}
.qs-lang{border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--muted);padding:5px 12px;border-radius:7px;white-space:nowrap;
  transition:background .13s,color .13s}
.qs-lang:hover{color:var(--ink2)}
.qs-lang.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* Twenty endpoints, presented as a list of things: underlined tabs choose the
   area, one panel holds the calls, hairline dividers between them, and a round
   glyph carries the verb. */
.qs-groups{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--line);
  margin-bottom:2px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.qs-groups::-webkit-scrollbar{display:none}
.qs-tab{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;
  border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--muted);padding:10px 9px 11px;border-radius:9px 9px 0 0;
  white-space:nowrap;transition:color .14s,background .14s}
.qs-tab:hover{color:var(--ink2);background:var(--panel)}
.qs-tab i{font-style:normal;font-size:11px;font-weight:700;min-width:17px;height:17px;
  display:grid;place-items:center;border-radius:999px;background:var(--panel);
  color:var(--muted);padding:0 4px;transition:background .14s,color .14s}
.qs-tab.on{color:var(--ink)}
.qs-tab.on i{background:var(--ink);color:var(--surface)}
.qs-tab.on::after{content:"";position:absolute;inset-inline-start:9px;inset-inline-end:9px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--ink)}

.qs-list{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin-top:14px;box-shadow:0 1px 2px rgba(16,24,40,.04),
  0 6px 18px -8px rgba(16,24,40,.10)}
body.dark .qs-list{box-shadow:0 1px 2px rgba(0,0,0,.4)}
.qs-item+.qs-item{border-top:1px solid var(--line)}
.qs-r{display:flex;align-items:center;gap:13px;width:100%;padding:13px 15px;border:none;
  background:none;font-family:inherit;text-align:start;transition:background .13s}
.qs-r:hover{background:var(--panel)}
.qs-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--panel);color:var(--ink2);transition:background .13s,color .13s}
.qs-av.get{color:var(--blue)}
.qs-av.post{color:var(--green)}
.qs-av.put{color:var(--amber)}
.qs-av.delete{color:var(--red)}
.qs-item.open .qs-av{background:var(--ink);color:var(--surface)}
.qs-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qs-rt b{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qs-rt i{font-style:normal;font-size:11.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.qs-rv{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:999px;background:var(--panel);color:var(--muted)}
.qs-rv.get{color:var(--blue)}
.qs-rv.post{color:var(--green)}
.qs-rv.put{color:var(--amber)}
.qs-rv.delete{color:var(--red)}
.qs-rc{flex:none;display:grid;place-items:center;color:var(--line2);
  transition:transform .18s ease,color .13s}
.qs-r:hover .qs-rc{color:var(--muted)}
.qs-item.open .qs-rc{transform:rotate(90deg);color:var(--ink3)}
@media (max-width:560px){
  .qs-rv{display:none}
  .qs-r{padding:12px}
}
.qs-more{margin:12px 2px 0;font-size:12px}
.qs-more a{font-weight:600;white-space:nowrap}
.qs-panel[hidden]{display:none}
.qs-panel{animation:qsOpen .2s ease both}
@keyframes qsOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* the box carries the language's own colour: accent bar, dot and border */
.qs-box{border:1px solid var(--line);overflow:hidden;border-radius:12px;
  background:var(--qs-bg);margin-block:0 15px;margin-inline:62px 15px}
.qs-bar{display:flex;align-items:center;gap:7px;padding:7px 11px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.qs-name{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ql,var(--ink2));
  text-transform:uppercase}
.qs-copy{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;border:none;
  background:none;color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;
  padding:2px 6px;border-radius:6px;transition:color .13s,background .13s}
.qs-copy:hover{color:var(--ink);background:rgba(127,127,127,.14)}

/* the box fits its own snippet and only scrolls past 26 lines, so short calls
   are not mostly empty and long ones never run the card off the page */
.qs-pre{font-size:11.5px;overflow:auto;background:var(--qs-bg);padding:10px 0;
  line-height:1.55;margin:0;
  max-height:var(--qs-h,calc(26 * 1.55em + 32px));
  font-family:var(--qs-font);color:var(--ink2);
  white-space:pre;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  tab-size:4;counter-reset:qsl}
.qs-pre::-webkit-scrollbar{width:9px;height:9px}
.qs-pre::-webkit-scrollbar-thumb{background:var(--qs-gut-line);border-radius:8px}
.qs-pre::-webkit-scrollbar-thumb:hover{background:var(--qs-gut)}
/* max-content keeps every line one row: the longest one sets the scroll width */
.qs-code{display:block;width:max-content;min-width:100%}
.qs-l{display:block;min-height:1.55em;padding-inline-end:14px}
/* numbered gutter — sticky so it stays put while a long line scrolls under it */
.qs-l::before{counter-increment:qsl;content:counter(qsl);
  position:sticky;inset-inline-start:0;display:inline-block;width:3.4em;padding-inline-end:1.1em;
  margin-inline-end:.9em;text-align:end;color:var(--qs-gut);background:var(--qs-bg);
  border-inline-end:1px solid var(--qs-gut-line);user-select:none;-webkit-user-select:none}
.qs-l:hover::before{color:var(--ink3)}

/* token colours */
.qs-com{color:var(--qs-com);font-style:italic}
.qs-dir{color:var(--qs-cst)}
.qs-tag{color:var(--qs-tg);font-weight:600}
.qs-flag{color:var(--qs-kw);font-weight:600}
.qs-str{color:var(--qs-str)}
.qs-kw{color:var(--qs-kw);font-weight:600}
.qs-fn{color:var(--qs-fn)}
.qs-const{color:var(--qs-cst)}
.qs-type{color:var(--qs-typ)}
.qs-var{color:var(--qs-vr)}
.qs-num{color:var(--qs-num)}
.qs-op{color:var(--qs-op)}

/* per-language accent, used for the snippet's name label */
.qs-item[data-l="curl"]  {--ql:#6E7891}
.qs-item[data-l="php"]   {--ql:#8892BF}
.qs-item[data-l="node"]  {--ql:#57A143}
.qs-item[data-l="python"]{--ql:#3B7DBF}
.qs-item[data-l="java"]  {--ql:#E1701A}
.qs-item[data-l="csharp"]{--ql:#9B4DCA}
.qs-item[data-l="cpp"]   {--ql:#2E77BC}
/* the mid-tone accents read on white; lift them a little on the dark theme */
body.dark .qs-item[data-l="curl"]  {--ql:#98A2BD}
body.dark .qs-item[data-l="csharp"]{--ql:#BE7BE4}
body.dark .qs-item[data-l="cpp"]   {--ql:#5EA0DE}
body.dark .qs-item[data-l="python"]{--ql:#63A3DC}

@media (max-width:640px){
  .qs-top{align-items:stretch;flex-direction:column}
  .qs-box{margin:0 12px 12px}
  .qs-langs{overflow-x:auto;grid-auto-columns:minmax(64px,1fr)}
  .qs-l::before{width:2.4em;padding-inline-end:.7em;margin-inline-end:.6em}
}

/* ---------- live campaign progress (Bulk) ---------------------------- *
 * The run happens on the server; this panel only reports it. Every
 * recipient lands as a chip that fills green (sent) or red (failed), so a
 * long campaign reads as movement rather than a frozen spinner.          */
.cp-card{margin-top:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);box-shadow:var(--shadow);overflow:hidden;
  animation:cpIn .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes cpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px 10px;flex-wrap:wrap}
.cp-title{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.cp-title b{font-weight:600;color:var(--ink)}
.cp-sub{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
/* the pulsing dot is the "still working" signal while the bar is between ticks */
.cp-live{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 var(--green-border);animation:cpPulse 1.6s ease-out infinite}

@keyframes cpPulse{0%{box-shadow:0 0 0 0 var(--green-border)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cp-card.done .cp-live{animation:none;background:var(--line2)}

.cp-bar{height:7px;background:var(--panel);position:relative;overflow:hidden}
.cp-bar i{display:block;height:100%;width:0;border-start-start-radius:0;border-start-end-radius:4px;border-end-end-radius:4px;border-end-start-radius:0;
  background:linear-gradient(90deg,var(--green),#12B76A);
  transition:width .45s cubic-bezier(.3,.8,.3,1)}
/* a sheen travelling over the filled part, so 1%/second still looks alive */
.cp-bar i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:cpSheen 1.7s linear infinite}
.cp-card.done .cp-bar i::after{animation:none}

.cp-stats{display:flex;gap:16px;padding:10px 14px 0;font-size:12.5px;color:var(--muted)}
.cp-stat b{font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;margin-inline-end:3px}
.cp-stat.ok b{color:var(--green)}
.cp-stat.bad b{color:var(--red)}

.cp-nums{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;max-height:190px;
  overflow-y:auto;scroll-behavior:smooth}
.cp-num{position:relative;font-size:12px;font-variant-numeric:tabular-nums;
  padding:4px 9px;border-radius:20px;border:1px solid var(--line);color:var(--ink2);
  background:var(--surface);overflow:hidden;isolation:isolate;
  animation:cpPop .34s cubic-bezier(.2,.8,.3,1.2) both}
/* the fill sweep: a coloured wipe runs left-to-right under the number */
.cp-num::before{content:"";position:absolute;inset:0;z-index:-1;transform-origin:left;
  transform:scaleX(0);animation:cpFill .45s cubic-bezier(.3,.8,.3,1) both;
  animation-delay:inherit}
.cp-num.ok{border-color:var(--green-border);color:var(--green)}
.cp-num.ok::before{background:var(--green-soft)}
.cp-num.bad{border-color:var(--red-border);color:var(--red)}
.cp-num.bad::before{background:var(--red-soft)}
.cp-more{flex-basis:100%;font-size:12px;color:var(--muted)}
.cp-acts{display:flex;gap:8px;flex:none}
.cp-acts:empty{display:none}
@keyframes cpPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes cpFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cpSheen{to{transform:translateX(100%)}}

.cp-foot{padding:0 14px 12px;margin:0;font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:6px}
.cp-foot svg{flex:none;color:var(--green)}

/* ---- Logs: watch a campaign that this tab did not start ------------- */
.lg-live{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lg-live.on{border-color:var(--green-border);color:var(--green);background:var(--green-soft)}
/* .btn sets display:inline-flex, which outranks the UA's [hidden] rule — both
   of these are toggled with the attribute, so they need it spelled out */
.lg-live[hidden],.lg-head .btn[hidden]{display:none}
.lg-ov .lg-modal{background:var(--surface);border-radius:12px;width:100%;max-width:720px;
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
.lg-head{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.lg-head h2{flex:1;min-width:0;font-size:16px;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-body{padding:16px 18px 18px;overflow:auto}
/* the shared card carries its own top margin for the inline (Bulk) case */
.lg-body .cp-card{margin-top:0}

.lg-list{display:flex;flex-direction:column;gap:8px}
.lg-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:start;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  transition:border-color .16s,background .16s}
.lg-item:hover{border-color:var(--line2);background:var(--panel)}
.lg-it-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-it-main b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-it-main span{font-size:11.5px}
.lg-it-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.lg-it-right .chip{display:inline-flex;align-items:center;gap:6px}
@media(max-width:560px){
  .lg-item{flex-direction:column;align-items:stretch}
  .lg-it-right{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .cp-card,.cp-num,.cp-num::before{animation:none}
  .cp-num::before{transform:scaleX(1)}
  .cp-live{animation:none}
  .cp-bar i{transition:none}
  .cp-bar i::after{animation:none;opacity:0}
}
@media (max-width:640px){
  .cp-top{flex-direction:column;align-items:stretch}
  .cp-acts .btn{flex:1;justify-content:center}
  .cp-nums{max-height:150px}
}

/* ---------- restricted numbers --------------------------------------- */
.b-blocked{position:relative}
.bl-count{margin-inline-start:6px;min-width:19px;height:19px;padding:0 6px;border-radius:20px;
  background:var(--red-soft);color:var(--red);border:1px solid var(--red-border);
  font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center;font-variant-numeric:tabular-nums}

/* the pre-send warning: says what will happen before it happens */
.bl-hint{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:9px 11px;
  border:1px solid var(--amber-border);background:var(--amber-soft);border-radius:10px;
  font-size:12.5px;color:var(--ink2);line-height:1.5}
.bl-hint svg{flex:none;margin-top:2px;color:var(--amber)}
.bl-hint b{font-weight:600}

.bl-head{display:flex;align-items:center;gap:11px}
.bl-hic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red);border:1px solid var(--red-border)}
.bl-htit{flex:1;min-width:0}
.bl-htit h3{font-size:15px;margin:0}
.bl-htit p{margin:1px 0 0;font-size:12.5px;color:var(--muted)}
.bl-close{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;
  border-radius:7px;flex:none}
.bl-close:hover{background:var(--panel);color:var(--ink)}

.bl-body{padding-top:14px}
.bl-add{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:12px;margin-bottom:14px}
.bl-add label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);
  margin-bottom:6px}
.bl-add textarea{width:100%;resize:vertical;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:13px}
.bl-addrow{display:flex;gap:8px;margin-top:8px}
.bl-addrow input{flex:1;min-width:0;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px}
.bl-add .hint{display:block;margin-top:7px;font-size:11.5px;color:var(--muted)}

.bl-listhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bl-search{flex:1;min-width:0;padding:8px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px}
.bl-listhead .muted{font-size:12px;white-space:nowrap}

.bl-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:11px}
.bl-row{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-bottom:1px solid var(--line);animation:blIn .2s ease both}
.bl-row:last-child{border-bottom:0}
.bl-row:hover{background:var(--panel)}
@keyframes blIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.bl-ic{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red)}
.bl-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.bl-meta b{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.bl-meta i{font-style:normal;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-x{background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;
  padding:5px;border-radius:7px;flex:none;line-height:0}
.bl-x:hover{background:var(--red-soft);color:var(--red);border-color:var(--red-border)}
.bl-x:disabled{opacity:.4;cursor:default}

.bl-empty{padding:26px 18px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.bl-empty svg{color:var(--line2)}
.bl-empty b{font-size:13.5px;color:var(--ink2)}
.bl-empty span{font-size:12.5px;color:var(--muted);max-width:340px;line-height:1.55}

@media (prefers-reduced-motion:reduce){.bl-row{animation:none}}
@media (max-width:560px){.bl-addrow{flex-direction:column}}

/* ---------- recipient identity in Logs ------------------------------- *
 * WhatsApp exposes no customer profile photo through any API, so the face
 * here is initials on a tint derived from the number — stable, so the same
 * person is recognisable at a glance down a long list.                   */
.idc{display:flex;align-items:center;gap:9px;min-width:0}
.idc-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;position:relative}
.idc-txt{display:flex;flex-direction:column;min-width:0}
.idc-txt b{font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idc-txt i{font-style:normal;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* a name that came from the person's own WhatsApp profile, not from our records */
.idc-wa{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:#fff;line-height:0}
.idc-av[data-wa]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--green-border)}

/* ---------- retry strip inside the campaign modal -------------------- */
.cm-retry{padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel);
  animation:cpIn .24s cubic-bezier(.2,.7,.3,1) both}
.cm-rtop{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.cm-rtop b{font-size:13.5px;font-weight:600;color:var(--ink)}
.cm-rtop .btn{margin-inline-start:auto}
.cm-retry .cp-bar{border-radius:4px}
.cm-retry.done .cp-live{animation:none;background:var(--line2)}
.cm-rnote{margin:8px 0 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}

/* ---------- restricted-recipients decision --------------------------- */
.bl-choice{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.bl-choice .btn{width:100%;justify-content:center}
.bl-danger{color:var(--red);border-color:var(--red-border)}
.bl-danger:hover{background:var(--red-soft);border-color:var(--red)}
.bl-warnnote{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;
  font-size:11.5px;line-height:1.55;color:var(--muted)}
.bl-warnnote svg{flex:none;margin-top:2px;color:var(--amber)}

/* ---------- Meta API call trace (Send Message) ------------------------
   The exact request this app put on the wire and the exact answer Meta gave.
   Meta's App Review for whatsapp_business_messaging / _management asks to see
   both, so the panel is built to be screen-recorded: readable at 100% zoom,
   monospace payloads, nothing that needs hovering to reveal. */
.mtr{margin-top:10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden;
  animation:mtrIn .24s cubic-bezier(.2,.7,.3,1) both}
@keyframes mtrIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.mtr-head{display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.mtr-head b{font-size:13px;font-weight:600;color:var(--ink)}
.mtr-head svg{flex:none}
.mtr.ok .mtr-head svg{color:var(--green)}
.mtr.bad .mtr-head svg{color:var(--red)}
.mtr-live{margin-inline-start:auto;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mtr-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;
  padding:12px 14px}
.mtr-kv dt{font-size:11.5px;color:var(--muted);white-space:nowrap}
.mtr-kv dd{font-size:11.5px;color:var(--ink2);min-width:0;overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mtr-kv dd .m-ok{color:var(--green);font-weight:600}
.mtr-kv dd .m-bad{color:var(--red);font-weight:600}
.mtr details{border-top:1px solid var(--line)}
.mtr summary{list-style:none;cursor:pointer;padding:9px 14px;font-size:12px;
  font-weight:600;color:var(--blue);display:flex;align-items:center;gap:6px}
.mtr summary::-webkit-details-marker{display:none}
.mtr summary svg{flex:none;transition:transform .18s ease}
.mtr details[open] summary svg{transform:rotate(90deg)}
.mtr summary:hover{background:var(--panel)}
.mtr-copy{margin-inline-start:auto;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:6px;transition:color .13s,background .13s}
.mtr-copy:hover{color:var(--ink);background:var(--panel)}
/* the payload scrolls inside its own box — a long template never pushes the
   Send button off the screen */
.mtr-pre{margin:0 14px 14px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.6;white-space:pre;overflow:auto;max-height:340px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;tab-size:2}
@media(max-width:560px){
  .mtr-kv{grid-template-columns:1fr;gap:1px}
  .mtr-kv dt{margin-top:7px}
  .mtr-live{display:none}
}

/* ---- WhatsApp Connection Beta: Find numbers by portfolio ------------- */
.wb-biz{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.wb-biz-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.wb-biz-h > svg{flex:none;color:var(--blue)}
.wb-biz-h b{display:block;font-size:14px;color:var(--ink)}
.wb-waba{display:flex;flex-direction:column;gap:5px;padding-block:11px 12px;padding-inline:40px 14px}
.wb-waba + .wb-waba{border-top:1px solid var(--line)}
.wb-waba-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-waba-h b{font-size:13.5px;color:var(--ink)}
.wb-num{display:flex;flex-direction:column;gap:5px;margin-top:4px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px}
.wb-num > b{font-size:13.5px}
.wb-empty{font-size:12.5px;padding:11px 14px}
.wb-calls summary{flex-wrap:wrap;color:var(--ink2);font-weight:500}
.wb-call{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  min-width:0;overflow-wrap:anywhere;flex:1 1 260px}
.wb-calls summary .m-ok{color:var(--green);font-weight:600;font-size:11.5px}
.wb-calls summary .m-bad{color:var(--red);font-weight:600;font-size:11.5px}
@media(max-width:560px){
  .wb-waba{padding-inline-start:14px}
}

/* ---- Logs: the rest of the list -------------------------------------
   The log is paged, and the console walks the pages on its own. This only
   appears when a very large account is stopped short of the whole thing. */
.l-more{display:flex;justify-content:center;padding:12px}
.l-more button[hidden]{display:none}

/* ---- template buttons ------------------------------------------------
   The "Add button" control from WhatsApp Manager, rebuilt so the limits Meta
   enforces at submission are visible while the template is being written. */
.tb-list{display:flex;flex-direction:column;gap:8px}
.tb-list:not(:empty){margin-bottom:9px}
.tb-row{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line)}
.tb-ic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--blue)}
.tb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.tb-kind{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
.tb-ins{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.tb-in{display:flex;flex-direction:column;gap:3px;position:relative;min-width:0}
.tb-in span{font-size:11.5px;color:var(--muted)}
.tb-in input{width:100%}
.tb-in i{position:absolute;inset-inline-end:8px;bottom:9px;font-size:10.5px;font-style:normal;
  color:var(--muted);pointer-events:none}
.tb-x{flex:none;background:none;border:0;cursor:pointer;color:var(--muted);padding:4px;
  border-radius:7px;display:grid;place-items:center}
.tb-x:hover{background:var(--red-soft);color:var(--red)}

.tb-add{position:relative;display:inline-block}
.tb-menu{position:absolute;z-index:40;top:calc(100% + 6px);inset-inline-start:0;min-width:300px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px rgba(11,20,26,.18);display:flex;flex-direction:column;gap:2px}
.tb-menu[hidden]{display:none}
.tb-mi{display:flex;gap:10px;align-items:flex-start;text-align:start;width:100%;
  background:none;border:0;cursor:pointer;padding:9px 10px;border-radius:9px;color:var(--ink2)}
.tb-mi:hover:not(:disabled){background:var(--panel)}
.tb-mi:disabled{opacity:.45;cursor:default}
.tb-mi svg{flex:none;margin-top:2px;color:var(--blue)}
.tb-mi span{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-mi b{font-size:13px;font-weight:600}
.tb-mi i{font-size:11.5px;font-style:normal;color:var(--muted);line-height:1.45}
.tb-mi-note{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;margin-top:4px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.5}
.tb-mi-note svg{flex:none;margin-top:2px}
.tb-note{display:flex;gap:7px;align-items:flex-start;margin:9px 0 0;font-size:11.5px;
  color:var(--muted);line-height:1.5}
.tb-note svg{flex:none;margin-top:2px}

/* how the buttons read in the preview bubble */
.wa-stack{display:flex;flex-direction:column;gap:2px;max-width:90%;min-width:0}
.wa-stack .wa-bubble{max-width:100%}
.wa-btns{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;
  border-radius:8px;background:#fff;color:#00a5f4;font-size:13.5px;font-weight:500;
  box-shadow:0 1px 1px rgba(11,20,26,.13)}
.wa-btn svg{flex:none}
.wa-phone .wa-foot{display:block;margin-top:4px;font-size:12px;color:#667781}

/* no tier from Meta: ask for the figure WhatsApp Manager shows */
.nm-lim-ask{border-style:dashed}
.nm-lim-set{display:flex;gap:7px;align-items:center}
.nm-lim-in{flex:1;min-width:0;max-width:150px}
.nm-lim-edit{background:none;border:0;padding:0;font:inherit;font-size:11px;
  color:var(--blue);cursor:pointer;text-decoration:underline}

/* ---- what is left on the sending number today -----------------------
   Drawn under the "Send from" picker on both compose screens. WhatsApp caps
   how many customers a number may open a conversation with in 24 hours and
   says nothing until it refuses one, so the budget is shown where the list is
   being built rather than in the error afterwards. */
.cap-strip{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 11px;
  border-radius:10px;font-size:12px;line-height:1.5;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2)}
.cap-strip svg{flex:none;margin-top:2px}
.cap-strip b{font-weight:700}
.cap-ok{border-color:var(--green-border)}
.cap-ok svg{color:var(--green)}
.cap-warn{background:var(--amber-soft);border-color:var(--amber-border);color:var(--amber)}
.cap-bad{background:var(--red-soft);border-color:var(--red-border);color:var(--red)}

/* where a messaging limit came from — reported, entered, or worked out */
.nm-lim-why{display:flex;gap:7px;align-items:flex-start;padding-top:8px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.5}
.nm-lim-tag{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--surface);
  border:1px solid var(--line);color:var(--muted)}
.nm-lim-tag-meta{color:var(--green);border-color:var(--green-border)}
.nm-lim-tag-detected{color:var(--blue)}

/* ---- character counters on template fields --------------------------
   Meta prints "5/1024" in the corner of every field it caps, and a form that
   stops accepting keystrokes without saying why is the worst version of this.
   The field is position:relative so the readout can sit inside its bottom-right
   corner the way Meta's does. */
.field.has-count{position:relative}
/* Sits on the label's line at the far right, which is where Meta puts it and
   the one spot that works whether or not the field carries a hint below. */
.cl-count{position:absolute;top:0;inset-inline-end:0;font-size:10.5px;line-height:1.55;
  color:var(--muted);pointer-events:none;font-variant-numeric:tabular-nums}
.field.has-count > label{padding-inline-end:64px}
.cl-count.near{color:var(--amber);font-weight:600}
.cl-count.full{color:var(--red);font-weight:700}

/* ---- template Content block ----------------------------------------
   The heading Meta puts above the header/body/footer group, so the two
   screens read the same way to someone moving between them. */
.tp-content{padding:12px 14px;border-radius:11px;background:var(--panel);
  border:1px solid var(--line);margin-bottom:4px}
.tp-content h4{margin:0 0 4px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.tp-content p{margin:0;font-size:12px;color:var(--muted);line-height:1.55}

/* the header as the customer meets it, inside the preview bubble */
.wa-hdr{display:block;font-weight:700;font-size:14px;margin-bottom:3px;color:#111b21}
.wa-hdr-media{display:flex;align-items:center;justify-content:center;gap:7px;
  height:86px;margin:-2px -4px 6px;border-radius:6px;background:rgba(11,20,26,.07);
  color:#667781;font-size:12px}
.wa-hdr-media i{font-style:normal;text-transform:capitalize}

/* ---- an unfinished template ----------------------------------------
   Writing one takes real effort, so the form saves itself as it is typed.
   These are the two ways back to it. */
.tpl-draft button{background:none;border:0;padding-block:0 0;padding-inline:6px 0;font:inherit;
  font-size:12px;color:var(--blue);cursor:pointer;text-decoration:underline}
.tpl-draft button:hover{color:var(--blue-dark)}

/* ---- media picker ---------------------------------------------------
   A template that opens with a picture needs a file WhatsApp can fetch.
   Asking a business to host it somewhere first was the old answer; this is
   the new one. */
.mp{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.mp-drop{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:11px;
  border:1.5px dashed var(--line2);background:var(--surface);cursor:pointer;
  transition:border-color .12s,background .12s}
.mp-drop:hover,.mp-drop:focus-visible,.mp-drop.drag{border-color:var(--blue);
  background:var(--blue-soft);outline:none}
.mp-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--panel);color:var(--blue);border:1px solid var(--line)}
.mp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-t b{font-size:13px;font-weight:600}
.mp-t i{font-size:11.5px;font-style:normal;color:var(--muted)}
.mp-recent{flex:none}

.mp-busy{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  padding:4px 2px}
.mp-done,.mp-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);width:100%;text-align:start}
.mp-item{cursor:pointer;font:inherit}
.mp-item:hover{border-color:var(--blue);background:var(--blue-soft)}
.mp-done img,.mp-item img{flex:none;width:40px;height:40px;border-radius:7px;object-fit:cover;
  background:var(--line)}
.mp-fic{flex:none;width:40px;height:40px;border-radius:7px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.mp-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-meta b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mp-meta i{font-size:11px;font-style:normal;color:var(--muted)}
.mp-x{flex:none;background:none;border:0;cursor:pointer;color:var(--muted);padding:4px;
  border-radius:7px;display:grid;place-items:center}
.mp-x:hover{background:var(--red-soft);color:var(--red)}
.mp-list{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto}

/* stored, but larger than WhatsApp will carry */
.mp-done.over,.mp-item.over{border-color:var(--amber-border);background:var(--amber-soft)}

/* a file being re-encoded, and one that came back smaller */
.mp-done.busy{border-color:var(--blue-border,var(--line));background:var(--blue-soft)}
.mp-done.ok{border-color:var(--green-border);background:var(--surface)}
.mp-done .btn-spin{width:11px;height:11px;vertical-align:-1px;margin-inline-end:3px}

/* ---- a number in a pick list ----------------------------------------
   Two opaque ids used to be the whole description. This is the rest of what
   Meta already tells us about the number, the WhatsApp account it lives on,
   and the business paying for it. */
.num-pick{cursor:pointer;text-align:start;width:100%;align-items:flex-start}
.num-pick .info{display:flex;flex-direction:column;gap:5px}
.num-pick .info > b{font-size:13.5px}
.num-det{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:1px}
.num-det span{font-size:11.5px;color:var(--ink2);display:inline-flex;gap:5px;
  align-items:baseline;min-width:0}
.num-det i{font-style:normal;color:var(--muted);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.04em;flex:none}
.num-det b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-ids{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  word-break:break-all}
.num-chips{display:flex;flex-wrap:wrap;gap:5px}
.num-chips:empty{display:none}
.num-chips .chip{font-size:10.5px;padding:1px 7px}

/* ---- template approval ----------------------------------------------
   The owner is putting this platform's name behind a message that goes to
   thousands of people, so the thing on screen is the MESSAGE, with the
   paperwork beside it rather than in front of it. */
.tpl-appr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:16px;
  align-items:start}
@media (max-width:820px){.tpl-appr-grid{grid-template-columns:minmax(0,1fr)}}
.tpl-appr-facts{display:flex;flex-direction:column;gap:8px;padding:12px 13px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px}
.tpl-appr-facts > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tpl-appr-facts i{font-style:normal;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.tpl-appr-facts b{font-size:12.5px;font-weight:600;word-break:break-word}

/* the two readings of the same template */
.tae-seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--panel);
  border:1px solid var(--line);margin-bottom:9px}
.tae-seg button{border:0;background:none;font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:7px;color:var(--muted);cursor:pointer}
.tae-seg button.on{background:var(--surface);color:var(--ink2);
  box-shadow:0 1px 2px rgba(11,20,26,.09)}

/* the editor: fields on the left, the bubble on the right, both visible */
.tae{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:18px;
  align-items:start}
@media (max-width:860px){.tae{grid-template-columns:minmax(0,1fr)}}
.tae-form{display:flex;flex-direction:column;gap:11px;min-width:0}
.tae-prev{position:sticky;top:0;min-width:0}

/* an image header actually shown in the bubble, not described */
.wa-hdr-img{display:block;width:100%;max-height:150px;object-fit:cover;border-radius:6px;
  margin:-2px -4px 6px;width:calc(100% + 8px)}

/* ---- picking numbers -------------------------------------------------
   Used where a template is being created (which accounts it goes on) and
   where a campaign is being sized (which numbers share the day's cap).

   The checkbox needs width:auto explicitly: the global rule a few hundred
   lines up gives every input width:100%, which stretched it across the whole
   row and shoved the number to the far right. */
.tn-list{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line)}
.tn-grp + .tn-grp{margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}
/* the WhatsApp account's name: what tells two groups of numbers apart, so it
 * reads as a heading, not a caption */
.tn-grp-h{display:flex;align-items:center;gap:8px;padding:6px 8px 6px;font-size:14px;
  font-weight:650;letter-spacing:0;color:var(--ink)}
.tn-grp-h svg{flex:none;width:16px;height:16px;opacity:.7}
.tn-grp-h i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;
  margin-inline-start:auto;font-size:11.5px;color:var(--muted)}

.tn-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;
  cursor:pointer;border:1px solid transparent}
.tn-item:hover{background:var(--surface);border-color:var(--line)}
.tn-item input{flex:none;width:auto;min-height:0;padding:0;margin:0;box-shadow:none;
  accent-color:var(--blue)}
.tn-item > span{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tn-item b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.tn-def{flex:none;font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--green);padding:2px 6px;border-radius:5px;
  background:var(--surface);border:1px solid var(--green-border)}
.tn-cap{font-style:normal;font-size:11.5px;color:var(--muted);margin-inline-start:auto;
  text-align:end;flex:none}
.tn-foot{display:flex;align-items:center;gap:14px;padding:8px 9px 3px;margin-top:4px;
  border-top:1px solid var(--line);font-size:11.5px}
.tn-foot button{background:none;border:0;padding:0;font:inherit;font-size:11.5px;
  color:var(--blue);cursor:pointer}
.tn-foot button:hover{text-decoration:underline}
.tn-foot .muted{margin-inline-start:auto;text-align:end;font-size:11px}

/* ---- template cards --------------------------------------------------
   One card per template, not per WhatsApp account. The same template on
   three accounts used to be three cards with the same name, which reads as
   three templates — the accounts are a detail of one, so they sit on it. */
.tpl-card{display:flex;flex-direction:column}
.tpl-name{margin:12px 0 2px;font-size:16px;line-height:1.3;word-break:break-word}
.tpl-sub{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
  margin-bottom:9px;flex-wrap:wrap}

.tpl-accts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.tpl-acct{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:99px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-acct i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.tpl-approved i{background:var(--green)}
.tpl-pending i,.tpl-draft i{background:var(--amber)}
.tpl-rejected i{background:var(--red)}
.tpl-none{border-style:dashed;color:var(--muted);font-weight:500}

/* the wording, clamped — a long Kurdish or Arabic body was burying the
   actions under six lines of text on every card */
.tpl-body{font-size:13px;line-height:1.55;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word}

.tpl-acts{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px}
.tpl-acts .btn{white-space:nowrap}
.tpl-more{position:relative;margin-inline-start:auto}
.tpl-menu{position:absolute;inset-inline-end:0;bottom:calc(100% + 6px);z-index:30;min-width:200px;
  display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(11,20,26,.18)}
.tpl-menu[hidden]{display:none}
.tpl-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  background:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;padding:8px 10px;
  border-radius:8px;color:var(--ink2)}
.tpl-menu button:hover{background:var(--panel)}
.tpl-menu button.danger{color:var(--red)}
.tpl-menu button.danger:hover{background:var(--red-soft)}

/* the reserved tail of the daily limit — hatched, and never filled */
.nm-lim-bar s{position:absolute;top:0;inset-inline-end:0;bottom:0;text-decoration:none;
  border-start-start-radius:0;border-start-end-radius:99px;border-end-end-radius:99px;border-end-start-radius:0;opacity:.7;
  background:repeating-linear-gradient(-45deg,var(--line2) 0 2px,transparent 2px 4px)}

/* ---- a failure, explained -------------------------------------------
   Meta's wording is written for whoever wrote the API. It stays available
   under the fold, because it is what you quote at support — but the line
   that leads says what actually happened and what to do. */
.err-plain{display:flex;flex-direction:column;gap:2px;margin-top:3px;max-width:44ch}
.err-plain b{font-size:12px;font-weight:600;color:var(--red);line-height:1.35}
.err-plain > span{font-size:11.5px;color:var(--muted);line-height:1.45}
.err-plain details{margin-top:2px}
.err-plain summary{font-size:10.5px;color:var(--muted);cursor:pointer;
  list-style:none;text-decoration:underline;text-underline-offset:2px}
.err-plain summary::-webkit-details-marker{display:none}
.err-plain code{display:block;margin-top:3px;font-size:10.5px;color:var(--ink2);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:5px 7px;word-break:break-word;white-space:pre-wrap}

/* ---- already had this template --------------------------------------
   Sending the same wording to the same person twice is the fastest way to be
   reported, and reports take the daily limit down. Those recipients are left
   out by default; repeating it has to be ticked. */
.dup-warn .dup-ck{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:12px;font-weight:600;cursor:pointer}
.dup-warn .dup-ck input{flex:none;width:auto;min-height:0;padding:0;margin:0;
  box-shadow:none;accent-color:var(--amber)}

/* which of the business's numbers carried a message — narrow, tabular, and
   able to list several when a campaign was split across numbers */
.num-from{font-variant-numeric:tabular-nums;font-size:12px;line-height:1.45;
  white-space:nowrap}

/* ---- Inbox -----------------------------------------------------------
   A conversation list beside the thread: the shape anyone who has used a
   messaging app already knows, so nothing here needs explaining. */
.ib-wrap{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:14px;
  height:calc(100vh - 210px);min-height:440px}
/* The Inbox takes exactly what is left of the window, whatever sits above it
   (a notice bar, the impersonation banner): the list and the thread scroll
   inside themselves and the reply box is always on screen. A fixed
   "100vh - 210px" guessed that height and lost the reply box under the fold. */
.content.view-fill{display:flex;flex-direction:column}
.content.view-fill>.page{flex:1;min-height:0}
.ib-page{gap:14px}
.ib-page .ib-wrap{flex:1;height:auto;min-height:420px}
@media (max-width:900px){.content.view-fill{display:block}
  .ib-wrap,.ib-page .ib-wrap{grid-template-columns:minmax(0,1fr);height:auto}
  .ib-main{min-height:420px}}
.ib-side,.ib-main{display:flex;flex-direction:column;min-width:0;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}

.ib-filters{display:flex;gap:2px;padding:8px 8px 0}
.ib-filters button{flex:1;background:none;border:0;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--muted);padding:6px 4px;border-radius:8px;cursor:pointer;
  white-space:nowrap}
.ib-filters button.on{background:var(--panel);color:var(--ink2)}
.ib-search{margin:8px 8px 0}
.ib-search input{width:100%}
.ib-count{padding:8px 12px 4px;font-size:11px}
.ib-list{flex:1;overflow:auto;padding:0 6px 6px}

.ib-row{display:flex;gap:10px;width:100%;text-align:start;background:none;border:0;
  font:inherit;padding:9px 8px;border-radius:10px;cursor:pointer;align-items:flex-start}
.ib-row:hover{background:var(--panel)}
.ib-row.on{background:var(--blue-soft)}
.ib-row.unread .ib-top b{font-weight:700}
/* a customer's picture: their initial on a colour of their own (WhatsApp does
   not give businesses profile photos) */
.ib-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb, var(--av, #667085) 15%, var(--surface));
  color:var(--av, #667085);font-weight:700;font-size:14.5px;line-height:1;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--av, #667085) 22%, transparent)}
.ib-av.lg{width:42px;height:42px;font-size:17px}
.ib-av.xs{width:20px;height:20px;font-size:10.5px}
.ib-av.xs svg{width:12px;height:12px}
.ib-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ib-top{display:flex;align-items:baseline;gap:8px}
.ib-top b{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ib-top i{flex:none;font-style:normal;font-size:10.5px;color:var(--muted)}
.ib-prev{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
.ib-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.ib-tag{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:1px 6px;border-radius:5px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted)}
.ib-tag.amber{color:var(--amber);border-color:var(--amber-border)}
.ib-tag.green{color:var(--green);border-color:var(--green-border)}
.ib-dot{font-size:9.5px;font-weight:700;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--green);color:#fff;display:inline-flex;
  align-items:center;justify-content:center}

.ib-head{display:flex;align-items:center;gap:11px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.ib-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ib-who b{font-size:14px}
.ib-who span{font-size:11.5px;color:var(--muted)}
.ib-win{flex:none;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.ib-win.on{color:var(--green);border-color:var(--green-border)}

.ib-msgs{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:7px;
  background-color:#efeae2;
  background-image:radial-gradient(rgba(11,20,26,.035) 1px,transparent 1px);
  background-size:22px 22px}
body.dark .ib-msgs{background-color:#0d1418}
.ib-b{max-width:74%;padding:7px 10px 5px;border-radius:9px;font-size:13.5px;line-height:1.5;
  word-break:break-word;box-shadow:0 1px 1px rgba(11,20,26,.13);color:#111b21}
.ib-b i{display:block;margin-top:3px;font-style:normal;font-size:10px;color:#667781}
.ib-b u{display:block;margin-top:4px;text-decoration:none;font-size:10.5px;color:#b42318}
.ib-b.in{align-self:flex-start;background:#fff;border-start-start-radius:0}
.ib-b.out{align-self:flex-end;background:#d9fdd3;border-start-end-radius:0}
.ib-b.out.bad{background:#ffe4e2}
.ib-media{display:flex;align-items:center;gap:6px;font-size:12px;color:#54656f;
  padding:6px 8px;margin:-2px -4px 5px;border-radius:6px;background:rgba(11,20,26,.06)}
/* the message theirs answers, quoted on top of it */
.ib-q{margin:-2px -4px 5px;padding:4px 8px;border-inline-start:3px solid #06cf9c;border-radius:5px;
  background:rgba(11,20,26,.05);font-size:12px;color:#54656f;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ib-card span{white-space:pre-line}
.ib-map{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#027eb5}
.ib-b.ib-react{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:#54656f}
.ib-b.ib-react i{flex-basis:100%;margin-top:0}
.ib-rx{font-size:20px;line-height:1}
.ib-you{font-weight:600;color:var(--ink2)}
.ib-main.ib-drop{outline:2px dashed var(--blue);outline-offset:-8px;background:var(--blue-soft)}

/* which of our own numbers a conversation is on — shown on the thread header
   always, and on a list row only when the business has more than one */
.ib-tag.num{color:var(--blue);border-color:var(--blue-border);text-transform:none;
  letter-spacing:0;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.ib-tag.num svg{opacity:.8}
.ib-on{flex:none;display:flex;align-items:center;gap:5px;font-size:11px;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);
  background:var(--panel)}
.ib-on b{font-size:11.5px;color:var(--ink2);font-weight:600}
.ib-on i{font-style:normal;font-size:10px;opacity:.75}
.ib-on svg{flex:none;opacity:.7}
@media (max-width:640px){.ib-on i{display:none}}

/* a file inside a bubble: the picture IS the message, so it gets the room */
.ib-file{margin:-3px -6px 5px;display:flex;flex-direction:column;gap:3px}
.ib-img{max-width:100%;max-height:300px;border-radius:7px;display:block;cursor:zoom-in;
  object-fit:cover}
.ib-vid{max-width:100%;max-height:300px;border-radius:7px;display:block;background:#000}
.ib-aud{width:260px;max-width:100%;height:38px;display:block}
.ib-doc{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:7px;
  background:rgba(11,20,26,.06);color:#111b21;font-size:12.5px;font-weight:500;
  text-decoration:none}
.ib-doc:hover{background:rgba(11,20,26,.1)}
.ib-doc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-doc svg{flex:none;opacity:.7}
.ib-save{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;
  font-size:10px;color:#54656f;text-decoration:none;padding:1px 0}
.ib-save:hover{color:var(--blue)}
.ib-get{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;
  font-weight:500;color:#111b21;background:rgba(11,20,26,.06);border:0;cursor:pointer;
  padding:8px 11px;border-radius:7px;margin:-2px -4px 5px}
.ib-get:hover{background:rgba(11,20,26,.11)}
.ib-get[disabled]{opacity:.65;cursor:default}
.ib-err{display:block;margin-top:4px;text-decoration:none;font-size:10.5px;color:#b42318}

/* the composer: an attachment strip, a recording bar and the row itself */
.ib-compose{padding:12px 14px 14px;border-top:1px solid var(--line);background:var(--panel)}
/* one box: who you are answering, the words, then the tools along the bottom */
.ib-box{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 12px 8px;
  border:1px solid var(--line2);border-radius:14px;background:var(--surface);
  transition:border-color .15s,box-shadow .15s}
.ib-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.ib-box-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.ib-box-h>svg{color:var(--blue);flex:none}
.ib-box-h>span:not(.ib-av){white-space:nowrap}
.ib-box-h b{font-weight:600;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-from{margin-inline-start:auto;flex:none;font-size:11px;font-variant-numeric:tabular-nums}
.ib-box textarea,.ib-box textarea:focus{width:100%;min-height:46px;max-height:180px;resize:none;
  border:0;outline:0;box-shadow:none;background:transparent;padding:4px 2px;
  font:inherit;font-size:14px;line-height:1.5;color:var(--ink)}
.ib-tools{display:flex;align-items:center;gap:2px}
.ib-tb{flex:none;width:34px;height:34px;border:0;border-radius:9px;background:none;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:background .12s,color .12s}
.ib-tb:hover{background:var(--panel);color:var(--ink)}
.ib-tb:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.ib-tb.off{opacity:.45}
.ib-tb.off:hover{opacity:1;color:var(--amber);background:var(--amber-soft)}
.ib-hint{font-size:11px;color:var(--muted);margin-inline-start:4px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.ib-sp{flex:1}
.ib-send{flex:none;display:flex;margin-inline-start:6px;border-radius:10px;overflow:hidden;
  background:var(--blue);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.ib-send button{border:0;background:none;color:#fff;cursor:pointer;display:flex;
  align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600}
.ib-send-go{padding-block:8px 8px;padding-inline:16px 13px}
.ib-send-more{padding:8px 8px;border-inline-start:1px solid rgba(255,255,255,.3)}
.ib-send button:hover{background:rgba(255,255,255,.13)}
.ib-send button:disabled{opacity:.6;cursor:default}
.ib-pop{position:absolute;bottom:calc(100% - 4px);z-index:30;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 32px rgba(16,24,40,.16)}
.ib-pop[hidden]{display:none}
.ib-emo{inset-inline-end:96px;display:grid;grid-template-columns:repeat(8,34px);gap:2px}
.ib-emo button{width:34px;height:34px;border:0;border-radius:8px;background:none;
  font-size:19px;line-height:1;cursor:pointer}
.ib-emo button:hover{background:var(--panel)}
.ib-fmt{inset-inline-end:132px;display:flex;gap:2px}
.ib-fmt button{min-width:36px;height:34px;padding:0 8px;border:0;border-radius:8px;
  background:none;color:var(--ink2);font:inherit;font-size:14px;cursor:pointer}
.ib-fmt button:hover{background:var(--panel)}
.ib-fmt code{font-size:12px}
.ib-menu{inset-inline-end:0;min-width:240px;display:flex;flex-direction:column}
.ib-menu button{display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;
  border-radius:8px;background:none;color:var(--ink2);font:inherit;font-size:13px;
  text-align:start;cursor:pointer}
.ib-menu button svg{color:var(--muted)}
.ib-menu button:hover{background:var(--panel)}
.ib-box-off{background:var(--surface)}
.ib-box-off:focus-within{border-color:var(--line2);box-shadow:none}
.ib-b code{font-size:12.5px;padding:0 3px;border-radius:4px;background:rgba(11,20,26,.07)}
@media (max-width:640px){.ib-hint,.ib-from{display:none}
  .ib-emo{inset-inline-end:0;grid-template-columns:repeat(7,34px)}.ib-fmt{inset-inline-end:40px}}
.ib-ic{flex:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;
  transition:background .12s,color .12s,border-color .12s}
.ib-ic:hover{background:var(--panel);color:var(--ink2);border-color:var(--ink3)}
.ib-ic:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* the microphone is forbidden by a header, not broken — it still explains itself */
.ib-ic.off{color:var(--line2);border-style:dashed}
.ib-ic.off:hover{color:var(--amber);border-color:var(--amber-border);background:var(--amber-soft)}

.ib-clip{display:flex;flex-direction:column;gap:7px;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel)}
.ib-clip-row{display:flex;align-items:center;gap:9px}
/* hear the voice note before it goes out */
.ib-clip-a{width:100%;height:34px;display:block}
.ib-clip.bad{border-color:var(--red-border);background:var(--red-soft)}
.ib-clip img{flex:none;width:38px;height:38px;border-radius:6px;object-fit:cover}
.ib-clip-ic{flex:none;width:38px;height:38px;border-radius:6px;display:grid;place-items:center;
  background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.ib-clip-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ib-clip-t b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ib-clip-t i{font-style:normal;font-size:11px;color:var(--muted)}
.ib-clip.bad .ib-clip-t i{color:var(--red)}
.ib-clip-x{flex:none;width:26px;height:26px;border-radius:6px;border:0;cursor:pointer;
  background:none;color:var(--muted);display:grid;place-items:center}
.ib-clip-x:hover{background:var(--surface);color:var(--red)}

.ib-rec{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--red-border);background:var(--red-soft);font-size:12.5px}
/* an author `display` beats the UA sheet's [hidden]{display:none}, so the bar
   would sit there permanently without this */
.ib-rec[hidden]{display:none}
.ib-rec b{font-weight:600;color:var(--red)}
.ib-rec span:not(.ib-rec-dot){font-variant-numeric:tabular-nums;color:var(--ink2)}
.ib-rec .btn{margin-inline-start:auto}
.ib-rec .btn+.btn{margin-inline-start:0}
.ib-rec-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;
  animation:ibpulse 1.1s ease-in-out infinite}
@keyframes ibpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ib-rec-dot{animation:none}}
.ib-closed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
  font-size:12px;color:var(--muted);line-height:1.5}
.ib-closed svg{flex:none;color:var(--amber)}
.ib-closed span{flex:1;min-width:180px}

.ib-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:40px 24px;text-align:center;color:var(--muted)}
.ib-empty b{font-size:14px;color:var(--ink2)}
.ib-empty span{font-size:12.5px;max-width:34ch;line-height:1.55}
.ib-empty svg{opacity:.4;margin-bottom:4px}

/* registering a number for the Cloud API — a PIN and a button, nothing else */
.pn-reg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pn-reg input{width:140px;flex:none;font-variant-numeric:tabular-nums;
  letter-spacing:.18em;text-align:center;font-weight:600}

/* ---- what happened to a business's messages -------------------------
   A single "16,568" counted every attempt, so a number WhatsApp refused and
   a number with no WhatsApp on it both read as a message sent. These show the
   four outcomes apart, in proportion, wherever that count used to be. */
.mout{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;max-width:230px}
.mout b{font-size:15px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.mout>span{font-size:11px;color:var(--muted)}
.mout i{flex-basis:100%;font-style:normal;font-size:11px;color:var(--muted);
  margin-top:1px;font-variant-numeric:tabular-nums}

.mbar{display:flex;width:100%;height:5px;border-radius:99px;overflow:hidden;
  background:var(--line);margin-top:6px}
.mbar u{display:block;height:100%;text-decoration:none}
.mbar u.a{background:var(--green)}
.mbar u.s{background:var(--blue)}
.mbar u.r{background:var(--red)}
.mbar u.n{background:var(--line2)}
.mbar u.q{background:var(--amber)}
.mbrk .mbar{height:8px;margin-top:0}

.mbrk{margin-top:12px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.mbrk-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:9px}
.mbrk-top b{font-size:13px;font-weight:600}
.mbrk-top span{font-size:11.5px;color:var(--muted)}
.mbrk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:4px 14px;margin-top:10px}
.mbrk-i{display:flex;align-items:baseline;gap:6px;font-size:12px;cursor:default}
.mbrk-i b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2)}
.mbrk-i span{color:var(--muted)}
.mbrk-i i{margin-inline-start:auto;font-style:normal;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.mbrk-i .dot{width:8px;height:8px;border-radius:50%;flex:none;align-self:center}
.mbrk-i .dot.a{background:var(--green)}
.mbrk-i .dot.s{background:var(--blue)}
.mbrk-i .dot.r{background:var(--red)}
.mbrk-i .dot.n{background:var(--line2)}
.mbrk-i .dot.q{background:var(--amber)}

/* ---- template review -------------------------------------------------
   The same verdict is shown on the create form, on the owner's approval card
   and on a refused request being fixed, so it is styled once. */
.rv{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);
  margin-top:10px}
.rv.green{border-color:var(--green-border);background:var(--green-soft)}
.rv.amber{border-color:var(--amber-border);background:var(--amber-soft)}
.rv.red  {border-color:var(--red-border);  background:var(--red-soft)}
.rv.busy{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.rv-top{display:flex;align-items:flex-start;gap:12px}
.rv-score{flex:none;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  font-size:17px;font-weight:700;background:var(--surface);border:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.rv.green .rv-score{color:var(--green)} .rv.amber .rv-score{color:var(--amber)}
.rv.red   .rv-score{color:var(--red)}
.rv-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rv-t b{font-size:13.5px}
.rv-t span{font-size:12.5px;color:var(--ink2);line-height:1.5}
.rv-acts{flex:none;display:flex;gap:6px;flex-wrap:wrap}
.rv-counts{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;
  color:var(--muted);font-weight:600}
.rv-counts .red{color:var(--red)} .rv-counts .amber{color:var(--amber)}
.rv-list{margin-top:10px;display:flex;flex-direction:column;gap:1px;border-radius:9px;
  overflow:hidden;border:1px solid var(--line);background:var(--line)}
.rvf{display:flex;gap:10px;padding:9px 11px;background:var(--surface);align-items:flex-start}
.rvf-sev{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:3px 7px;border-radius:5px;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);white-space:nowrap;margin-top:1px}
.rvf-sev.red{color:var(--red);border-color:var(--red-border);background:var(--red-soft)}
.rvf-sev.amber{color:var(--amber);border-color:var(--amber-border);background:var(--amber-soft)}
.rvf-sev.green{color:var(--green);border-color:var(--green-border);background:var(--green-soft)}
.rvf.allowed .rvf-b b,.rvf.allowed .rvf-b span{color:var(--muted)}
.rvf-allow{align-self:flex-start;margin-top:4px;font-size:11.5px}
.rvf-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rvf-b b{font-size:12.5px;font-weight:600}
.rvf-b span{font-size:12px;color:var(--ink2);line-height:1.5}
.rvf-b i{font-style:normal;font-size:11.5px;color:var(--green);display:flex;gap:4px;
  align-items:flex-start;line-height:1.5;margin-top:2px}
.rvf-b i svg{flex:none;margin-top:3px}
.rvf-by{flex:none;font-size:9.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-top:3px;cursor:help}
.rv-hint{margin-top:9px;font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:5px}
.rv-rw{margin-top:10px;border:1px dashed var(--line2);border-radius:9px;overflow:hidden}
.rv-rw-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;background:var(--surface);font-size:12px}
.rv-rw pre{margin:0;padding:10px;font:inherit;font-size:12.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;background:var(--surface);
  border-top:1px solid var(--line)}
.rv-meta{margin-top:8px;font-size:10.5px;color:var(--muted)}
.rv-meta.stale{color:var(--amber);font-weight:600}

/* a business's own approval requests, refused ones kept for good */
.treq{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:8px;
  background:var(--surface)}
.treq:last-child{margin-bottom:0}
.treq.rejected{border-color:var(--red-border)}
.treq.pending{border-color:var(--blue-border)}
.treq-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.treq-h b{font-size:13px}
.treq-h i{font-style:normal;font-size:11px;color:var(--muted)}
.treq-when{margin-inline-start:auto;font-size:11px;color:var(--muted)}
.treq-body{margin-top:6px;font-size:12.5px;color:var(--ink2);line-height:1.55;
  white-space:pre-line;word-break:break-word}
.treq-why{margin-top:7px;display:flex;gap:6px;align-items:flex-start;font-size:12px;
  color:var(--red);line-height:1.5}
.treq-why svg{flex:none;margin-top:2px}
.treq-link{margin-top:6px;font-size:11.5px;color:var(--muted);display:flex;gap:5px;
  align-items:center}
.treq-acts{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
.treq-acts:empty{display:none}

/* what the reviewer looks at, on the owner's settings page */
.ai-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){.ai-two{grid-template-columns:1fr}}
.ai-two b{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:6px}
.ai-two ul{margin:0;padding-inline-start:18px}
.ai-two li{font-size:12px;color:var(--ink2);line-height:1.65}

/* ---- how a campaign is divided between several numbers ---------------
   WhatsApp caps conversations per number, so three numbers are three caps —
   but filling one before touching the next, sharing evenly and taking turns
   are three different decisions with three different consequences, and the
   customer makes it. */
.bspread{margin-top:10px}
.bspread-opts{display:flex;flex-direction:column;gap:6px}
.bspread-o{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  transition:border-color .12s,background .12s}
.bspread-o:hover{border-color:var(--line2)}
.bspread-o input{flex:none;width:auto;margin:2px 0 0}
.bspread-o:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.bspread-o span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bspread-o b{font-size:12.5px;font-weight:600}
.bspread-o i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.5}

.bplan{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel)}
.bplan.short{border-color:var(--red-border);background:var(--red-soft)}
.bplan-h{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);
  margin-bottom:7px}
.bplan-h b{color:var(--ink2)}
.bplan-r{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:12px}
.bplan-r.none{opacity:.5}
.bplan-n{flex:none;width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bplan-bar{flex:1;min-width:40px;height:6px;border-radius:99px;background:var(--line);
  overflow:hidden}
.bplan-bar u{display:block;height:100%;background:var(--blue);text-decoration:none}
.bplan-r.none .bplan-bar u{background:var(--line2)}
.bplan-v{flex:none;width:62px;text-align:end;font-weight:600;
  font-variant-numeric:tabular-nums}
.bplan-room{flex:none;width:96px;text-align:end;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.bplan-short{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:11.5px;
  color:var(--red)}
@media (max-width:560px){
  .bplan-n{width:auto;flex:1}
  .bplan-bar{display:none}
  .bplan-room{width:auto}
}

/* ---- hidden parts & Edit layout -------------------------------------
   [data-uih] marks a part hidden for the signed-in person (app.js uiApply).
   In Edit layout it stays on screen, dimmed, so it can be clicked back. */
body:not(.ui-edit) [data-uih]{display:none!important}
body.ui-edit [data-uih]{opacity:.38;outline:2px dashed var(--red);outline-offset:2px}
body.ui-edit-pick .uie-hl{outline:2px solid var(--blue)!important;outline-offset:2px;cursor:pointer}
body.ui-edit .content{padding-bottom:88px}
.uie-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:95;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.22);padding:8px 12px;font-size:13px;color:var(--ink)}
.uie-t{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--blue)}
.uie-for{display:inline-flex;gap:6px;align-items:center;color:var(--ink3);font-size:12.5px}
.uie-for select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;max-width:220px}
.uie-hint{color:var(--muted);font-size:12px}
.uie-pop{position:fixed;z-index:96;min-width:260px;max-width:min(400px,calc(100vw - 16px));
  max-height:60vh;overflow:auto;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(15,23,42,.24);padding:8px}
.uie-who{font-size:12px;color:var(--ink3);padding:2px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:2px}
.uie-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px;font-size:13px}
.uie-row+.uie-row{border-top:1px dashed var(--line)}
.uie-lock{font-size:11.5px;color:var(--amber);white-space:nowrap}
@media (max-width:640px){ .uie-hint{display:none} }

/* owner's permission switch-lists (Prices & Access, a business, one person).
 * Own class names: the role editor's older .perm-grid capped its height and
 * scrolled, and the global input rule stretched every checkbox to full
 * width — which is what pushed the labels out of their boxes. */
.pk{display:flex;flex-direction:column;gap:10px}
.pk-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--muted)}
.pk-sum b{color:var(--ink2);font-weight:600}
.pk-dirty{color:var(--amber);font-weight:600}
.pk-undo{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--blue);cursor:pointer}
.pk-undo:hover{text-decoration:underline}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:start}
.pk-grp{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.pk-h{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.pk-h b{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink)}
.pk-n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-n.part{color:var(--amber);font-weight:600}
.pk-items{display:flex;flex-direction:column;padding:4px 0}
.pk-ck{display:flex;align-items:center;gap:10px;padding:7px 12px;margin:0;cursor:pointer;
  font-size:13px;font-weight:400;line-height:1.35;color:var(--ink2);transition:background .12s}
.pk-ck:hover{background:var(--panel)}
.pk-l{flex:1;min-width:0}
.pk-tag{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;
  padding:1px 7px;border-radius:99px;color:var(--muted);background:var(--panel);white-space:nowrap}
.pk-tag.off{display:none;color:var(--red);background:var(--red-soft)}
.pk-ck.is-off .pk-tag.off{display:inline-flex}
.pk-ck.is-off .pk-l{color:var(--muted)}
.pk-ck.is-up,.pk-ck.is-up input{cursor:not-allowed}
.pk-ck.is-up .pk-l,.pk-ck.is-na .pk-l{opacity:.6}
.pk-ck.is-changed{background:var(--amber-soft)}
.pk-ck.is-changed .pk-l::after{content:' •';color:var(--amber);font-weight:700}
/* the switch: on = allowed */
.pk input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:32px;height:18px;
  margin:0;padding:0;border:0;border-radius:99px;background:var(--line2);position:relative;
  cursor:pointer;box-shadow:none;transition:background .15s}
.pk input[type=checkbox]::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.pk input[type=checkbox]:checked{background:var(--green)}
.pk input[type=checkbox]:checked::after{transform:translateX(14px)}
.pk input[type=checkbox].is-mixed{background:var(--amber)}
.pk input[type=checkbox].is-mixed::after{transform:translateX(7px)}
.pk input[type=checkbox]:disabled{opacity:.45}
.pk input[type=checkbox]:focus{box-shadow:none}
.pk input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:560px){.pk-grid{grid-template-columns:1fr}}
/* WhatsApp Connection: accounts in three lists */
.wl-sec{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:2px 12px 4px}
.wl-sec.bad{border-color:var(--red-border)}
.wl-h{display:flex;align-items:center;gap:8px;padding:9px 0;font-size:13.5px;list-style:none}
.wl-h::-webkit-details-marker{display:none}
.wl-h b{font-weight:650;color:var(--ink)}
.wl-h span{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--panel);color:var(--ink2)}
.wl-sec.bad .wl-h b{color:var(--red)}
.wl-sec.bad .wl-h span{background:var(--red-soft);color:var(--red)}
.wl-sec.good .wl-h span{background:var(--green-soft);color:var(--green)}
.wl-h i{font-style:normal;font-size:12px;color:var(--muted);margin-inline-start:auto}
details.wl-sec>summary{cursor:pointer}
details.wl-sec>summary::after{content:'▸';color:var(--muted);margin-inline-start:6px;transition:transform .15s}
details.wl-sec[open]>summary::after{transform:rotate(90deg)}
.wl-why{display:flex;gap:6px;align-items:flex-start;margin-top:5px;font-size:12px;color:var(--red);line-height:1.45}
.wl-why svg{flex:none;margin-top:2px}
.hid-list{display:flex;flex-direction:column}
.hid-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px}
.hid-row+.hid-row{border-top:1px dashed var(--line)}

/* a business's price per category: how it is set, the value, the result */
.prule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.prule{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.prule-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.prule-h .muted{font-size:11.5px}
.prule-in{display:flex;align-items:center;gap:8px}
.prule-in .field{flex:1;min-width:0}
.prule-in input{width:84px;flex:none}
.prule-eq{flex:none;font-size:13px;white-space:nowrap;color:var(--blue)}

/* Bulk page: the most per send, under the recipient count */
.b-max{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}
.b-max.over{color:var(--red);font-weight:600}

/* a discount: the regular price struck through beside today's */
.pr-was{color:var(--muted);font-weight:400;text-decoration:line-through;margin-inline-end:2px}
.pr-now{color:var(--muted);font-weight:400}
.bf-p{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
/* on the dark balance card only; the light prices card keeps .bf-p s/i above */
.bal-card .bf-p s{color:rgba(255,255,255,.5);font-size:.92em}
.bal-card .bf-p i{font-style:normal;color:rgba(255,255,255,.6);font-size:.9em}
.bal-card p.bf-off{color:rgba(255,255,255,.85);margin-bottom:-4px}
.tpl-cat{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.tpl-price{font-size:12px;color:var(--ink2);white-space:nowrap}
.s-cost b{color:var(--ink)}

/* a business's messages by kind (owner's Manage window) */
.mkind{margin-top:12px;overflow-x:auto}
.mkind table{font-size:12.5px}
.mkind th,.mkind td{white-space:nowrap}
.mkind-note{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 0}
.mkind-note b{color:var(--ink2)}
/* "Why N IQD": the bill under the outcome bar */
.mbill{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-size:12.5px}
.mbill-h{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--ink)}
.mbill-sub{margin:6px 0 0;color:var(--muted);line-height:1.55}
.mbill-sub b{color:var(--ink2)}
.mbill-row{display:flex;justify-content:space-between;gap:12px;margin-top:6px;
  font-variant-numeric:tabular-nums;color:var(--ink2)}
.mbill-row b{color:var(--ink);white-space:nowrap}
.mbill-tot{border-top:1px dashed var(--line);padding-top:6px}
.mbill-bad{color:var(--red)}
/* the fold under the outcome bar */
.mbrk-more{margin-top:10px}
/* Restricted list: the Quality Guard's own, resting entries */
.bl-auto{border-top:1px solid var(--line)}
.bl-auto>summary{cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 11px;
  font-size:12.5px;font-weight:600;color:var(--ink2)}
.bl-auto-why{margin:0;padding:2px 11px 8px;font-size:11.5px;color:var(--muted);line-height:1.5}
.bl-auto-row .bl-ic{color:var(--muted)}
/* Quality check dialog */
.nm-qc{margin-top:8px}
.qc-head{display:flex;align-items:flex-start;gap:10px}
.qc-head h3{margin:0;font-size:16px}
.qc-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.qc-head .bl-close{margin-inline-start:auto}
.qc-hic{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  border-radius:10px;background:var(--blue-soft);color:var(--blue);flex:none}
.ui-card .qc-body{white-space:normal;padding-bottom:10px}
.qc-load{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:18px 2px}
.qc-sum{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;font-size:13px;
  margin-bottom:12px;border:1px solid}
.qc-sum.qc-bad{background:var(--red-soft);border-color:var(--red-border);color:var(--red)}
.qc-sum.qc-warn{background:var(--amber-soft,#FFFAEB);border-color:var(--amber-border,#FEDF89);color:var(--amber,#B54708)}
.qc-sum.qc-ok{background:var(--green-soft);border-color:var(--green-border);color:var(--green)}
.qc-list{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.qc-row{display:flex;gap:10px;padding:11px 12px;border-top:1px solid var(--line)}
.qc-row:first-child{border-top:none}
.qc-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;background:var(--line2)}
.qc-bad .qc-dot{background:var(--red)}
.qc-warn .qc-dot{background:var(--amber,#F79009)}
.qc-ok .qc-dot{background:var(--green)}
.qc-t{min-width:0}
.qc-t b{display:block;font-size:13px;color:var(--ink)}
.qc-t p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.qc-t i{display:flex;gap:4px;align-items:flex-start;margin-top:5px;font-style:normal;font-size:12.5px;
  color:var(--ink2);line-height:1.5}
.qc-t i svg{flex:none;margin-top:3px;color:var(--blue)}
.qc-foot{margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.mbrk-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--blue);padding:3px 0;user-select:none}
.mbrk-more>summary::-webkit-details-marker{display:none}
.mbrk-more>summary svg{transition:transform .15s}
.mbrk-more[open]>summary svg{transform:rotate(180deg)}
.mbrk-more[open] .mm-closed,.mbrk-more:not([open]) .mm-open{display:none}

/* ---- Auto replies ---- */
.ar-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.ar-how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ar-how{grid-template-columns:minmax(0,1fr)}}
.ar-how-i{display:flex;gap:10px;align-items:flex-start}
.ar-how-i>svg{flex:none;color:var(--blue);margin-top:2px}
.ar-how-i b{display:block;font-size:13px;color:var(--ink)}
.ar-how-i span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.ar-list{display:flex;flex-direction:column;gap:10px}
.ar-card{display:flex;gap:14px;align-items:flex-start;padding:14px 16px}
.ar-card.off{opacity:.62}
.ar-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ar-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-top b{font-size:14px}
.ar-when{font-size:12.5px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ar-kw{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:12px}
.ar-what{display:flex;gap:8px;align-items:center;min-width:0;font-size:12.5px}
.ar-type{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--blue);font-weight:600}
.ar-snip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ar-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px}
.ar-count b{font-size:15px}
.ar-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 18px;text-align:center}
.ar-empty>b{font-size:15px}
.ar-empty>span{font-size:13px;color:var(--muted)}
.ar-starters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;width:100%;max-width:760px}
@media (max-width:700px){.ar-starters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ar-start{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.ar-start:hover{border-color:var(--blue-border);background:var(--blue-soft)}
.ar-start svg{color:var(--blue)}
.ar-start b{font-size:13px}
.ar-start i{font-style:normal;font-size:11.5px;color:var(--muted)}
/* on/off switch */
.ar-sw{position:relative;flex:none;width:38px;height:22px;display:inline-block;cursor:pointer;margin-top:2px}
.ar-sw input{position:absolute;opacity:0;width:0;height:0}
.ar-sw span{position:absolute;inset:0;border-radius:99px;background:var(--line2);transition:background .15s}
.ar-sw span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.ar-sw input:checked+span{background:var(--green)}
.ar-sw input:checked+span::after{transform:translateX(16px)}
.ar-sw input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.ar-sw input:disabled+span{opacity:.6;cursor:default}
/* the editor */
.ui-card.ar-card-ui{padding:0}
.ar-ed{display:flex;flex-direction:column;max-height:92vh}
.ar-ed-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.ar-ed-h h3{margin:0;font-size:17px}
.ar-ed-b{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;min-height:0;overflow:auto}
@media (max-width:860px){.ar-ed-b{grid-template-columns:minmax(0,1fr)}}
.ar-form{padding:16px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ar-form .field{margin:0}
.ar-sec{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.ar-sec.sm{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink2);margin-top:4px}
.ar-hint{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.ar-seg{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.ar-seg button{flex:1;min-width:max-content;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--muted);padding:7px 10px;border-radius:8px;cursor:pointer}
.ar-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.1)}
.ar-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.ar-types button{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer;text-align:start}
.ar-types button svg{flex:none;color:var(--muted)}
.ar-types button.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}
.ar-types button.on svg{color:var(--blue)}
/* several messages in one auto reply */
.ar-msgs{display:flex;flex-wrap:wrap;gap:6px}
.ar-msgs button{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer}
.ar-msgs button b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--panel);font-size:11px}
.ar-msgs button svg{color:var(--muted)}
.ar-msgs button.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}
.ar-msgs button.on b{background:var(--blue);color:var(--on-blue)}
.ar-msgs button.on svg{color:var(--blue)}
.ar-msg-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ar-msg-bar>span{flex:1;min-width:180px}
.ar-msg-add{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:10px;border:1px dashed var(--line);
  background:none;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;text-align:start}
.ar-msg-add b{color:var(--blue);font-weight:600}
.ar-msg-add svg{flex:none;color:var(--blue)}
.ar-msg-add:hover{border-color:var(--blue);background:var(--blue-soft)}
.ar-then{flex:none;font-size:11.5px;color:var(--blue);white-space:nowrap}
.ar-radio{display:flex;flex-direction:column;gap:4px;font-size:13px}
.ar-days{display:flex;flex-wrap:wrap;gap:6px}
.ar-days label{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:99px;border:1px solid var(--line);
  font-size:12.5px;cursor:pointer;user-select:none}
.ar-days label.on{background:var(--blue-soft);border-color:var(--blue-border);color:var(--blue)}
.ar-days input{display:none}
.ar-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.ar-item.ar-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) auto}
@media (max-width:600px){.ar-item,.ar-item.ar-row{grid-template-columns:minmax(0,1fr)}}
.ar-cnt{float:inline-end;font-size:11px;color:var(--muted)}
.ar-cnt.over{color:var(--red);font-weight:600}
.ar-media{display:flex;flex-direction:column;gap:6px}
.ar-mf{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:12.5px;min-width:0}
.ar-mf img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.ar-mf span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-ed-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
/* the preview phone */
.ar-pv{padding:16px 18px;background:var(--panel);border-inline-start:1px solid var(--line)}
@media (max-width:860px){.ar-pv{border-inline-start:0;border-top:1px solid var(--line)}}
.ar-pv-t{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ar-phone{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:14px;min-height:300px;
  background-color:#efeae2;background-image:radial-gradient(rgba(11,20,26,.035) 1px,transparent 1px);background-size:22px 22px}
.ar-in{align-self:flex-end;max-width:80%;background:#d9fdd3;color:#111b21;padding:6px 10px;border-radius:9px;border-start-end-radius:0;font-size:13px;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.ar-b{align-self:flex-start;max-width:88%;background:#fff;color:#111b21;padding:6px 9px 7px;border-radius:9px;border-start-start-radius:0;
  font-size:13px;line-height:1.45;box-shadow:0 1px 1px rgba(11,20,26,.13);display:flex;flex-direction:column;gap:4px;min-width:150px;word-break:break-word}
.ar-b-h{font-weight:700}
.ar-b-img{width:100%;border-radius:6px;display:block;max-height:180px;object-fit:cover}
.ar-b-file{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;background:#f0f2f5;font-size:12px;color:#54656f}
.ar-b-f{font-size:11.5px;color:#667781}
.ar-b-sub{font-size:11.5px;color:#667781}
.ar-b-btn{align-self:flex-start;max-width:88%;min-width:150px;background:#fff;color:#027eb5;text-align:center;padding:8px 10px;border-radius:9px;
  font-size:13px;font-weight:500;box-shadow:0 1px 1px rgba(11,20,26,.13);display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.ar-b-btn i,.ar-b-sheet i{font-style:normal;font-size:10.5px;color:#667781;flex-basis:100%;text-align:center}
.ar-b-list{border-top:1px solid #e9edef;margin:4px -9px -7px;padding:8px;text-align:center;color:#027eb5;font-weight:500;
  display:flex;gap:6px;justify-content:center;align-items:center}
.ar-b-sheet{align-self:stretch;background:#fff;border-radius:12px;padding:4px 0;box-shadow:0 1px 3px rgba(11,20,26,.18)}
.ar-b-sheet div{display:flex;flex-direction:column;padding:7px 12px;border-bottom:1px solid #f0f2f5;font-size:12.5px}
.ar-b-sheet div:last-child{border-bottom:0}
.ar-b-sheet span{font-size:11.5px;color:#667781}
.ar-b-sheet i{text-align:start}
.ar-b-card{flex-direction:row;align-items:center;gap:10px}
.ar-b-card>svg{color:#54656f}
.ar-b-card div{display:flex;flex-direction:column}
.ar-b-card span{font-size:12px;color:#667781}
.ar-b-map{height:90px;border-radius:6px;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(135deg,#dfe9d8,#cfe0f1)}
.ib-auto{display:inline-flex;align-items:center;gap:3px;color:#027eb5;font-weight:600}

/* ===== RTL ======================================================== */
[dir=rtl] .rtl-flip{transform:scaleX(-1)}
/* phone numbers, ids, code, URLs and e-mail addresses always read left to
   right — unless the markup says otherwise (a template rewrite is <pre dir=auto>) */
code:not([dir]),pre:not([dir]),kbd:not([dir]),samp:not([dir]),.ltr:not([dir]),.mono:not([dir]),input[type=tel]:not([dir]),input[type=email]:not([dir]),input[type=url]:not([dir]),input[type=password]:not([dir]),input[inputmode=numeric]:not([dir]){direction:ltr;unicode-bidi:isolate}
input[type=tel],input[type=email],input[type=url],input[type=password],input[inputmode=numeric]{text-align:end}
/* a block-level .ltr (a number under a name, an id in a cell) still lines up
   with the page's right edge */
.ltr{text-align:match-parent}
/* bare phone numbers shown on their own keep "+964 …" in order */
.pn-num,.nm-head b,.num-tag>span,.cp-num{direction:ltr;unicode-bidi:isolate}
.nm-head b{text-align:match-parent}
/* ```mono``` inside a WhatsApp message is the customer's words, any language */
.ib-b code,.ar-phone code{unicode-bidi:plaintext}

/* ---- RTL: what logical properties cannot express --------------------
   Logical properties (inset-inline-*, margin-inline-*, text-align:start …)
   already mirror the layout. What follows is written in physical X — slides,
   nudges, switch knobs, sweeps, rotating chevrons — and is mirrored here.
   Centring (left:50% + translateX(-50%)) stays physical on purpose. */

/* the unread badge belongs at the row's far end; app.js gives it an inline
   margin-left:auto, which in a right-to-left row would park it by the label */
.nav-item .notif-badge{margin-inline:2px 0 !important}

/* side panels open from the left edge, their shadow falling on the page */
[dir=rtl] .slide-panel{transform:translateX(-100%);box-shadow:12px 0 40px rgba(0,0,0,.18)}
[dir=rtl] .dw-panel{box-shadow:20px 0 50px rgba(40,40,80,.14);animation-name:dwInRtl}
[dir=rtl] .dw-ov.closing .dw-panel{animation-name:dwOutRtl}
@keyframes dwInRtl{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes dwOutRtl{to{transform:translateX(-100%)}}

/* hover nudges follow the (mirrored) chevrons */
[dir=rtl] .acct-row:hover .acct-chev{transform:translateX(-2px)}
[dir=rtl] .pn-row:hover .pn-go{transform:translateX(-3px)}
/* the dashboard "New message" arrow is a raw svg, not icon(): mirror it here */
[dir=rtl] .cb-ar{transform:scaleX(-1)}
[dir=rtl] .beam-host:hover .cb-ar{transform:scaleX(-1) translateX(3px)}
/* open/closed chevrons that rotate: the mirrored ones turn the other way */
[dir=rtl] .qs-item.open .qs-rc{transform:rotate(-90deg)}
[dir=rtl] .mtr details[open] summary svg{transform:scaleX(-1) rotate(90deg)}
[dir=rtl] .nm-facts>summary::after,[dir=rtl] details.wl-sec>summary::after{content:'◂'}
[dir=rtl] .nm-facts[open]>summary::after,[dir=rtl] details.wl-sec[open]>summary::after{transform:rotate(-90deg)}

/* switches: the knob rests on the right, so "on" slides it left */
[dir=rtl] .re-switch input:checked + .re-slider::after{transform:translateX(-16px)}
[dir=rtl] .re-switch input:indeterminate + .re-slider::after{transform:translateX(-8px)}
[dir=rtl] .nm-sw input:checked+.nm-sw-t::after{transform:translateX(-16px)}
[dir=rtl] .pk input[type=checkbox]:checked::after{transform:translateX(-14px)}
[dir=rtl] .pk input[type=checkbox].is-mixed::after{transform:translateX(-7px)}
[dir=rtl] .ar-sw input:checked+span::after{transform:translateX(-16px)}

/* progress grows from the right */
[dir=rtl] .tu-step-line::after,[dir=rtl] .cp-num::before{transform-origin:right}
[dir=rtl] .cp-bar i{background:linear-gradient(270deg,var(--green),#12B76A)}
/* the daily-limit bar: app.js places its guard marker with an inline left:%,
   so lay the bar out left-to-right and mirror it whole — fill, hatched
   reserve and marker keep their places relative to each other */
[dir=rtl] .nm-lim-bar{direction:ltr;transform:scaleX(-1)}
/* decorative sweeps run right-to-left: scale:-1 1 mirrors each one about its
   own centre, so the same keyframes play from the other side */
[dir=rtl] .sk-bar::after,[dir=rtl] .sk-dot::after,[dir=rtl] .cp-bar i::after,[dir=rtl] .nm-skel span{scale:-1 1}
/* a restricted number slides in from the right */
[dir=rtl] .bl-row{animation-name:blInRtl}
@keyframes blInRtl{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[dir=rtl] .bl-row{animation:none}}
/* API tabs: the "more tabs" fade sits on the left, where the strip overflows */
[dir=rtl] .qs-groups{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(270deg,#000 calc(100% - 22px),transparent)}
/* button fields: the character count sits inside at the end; keep the text
   (which may start at either side) clear of it */
.tb-in input{padding-inline-end:48px}

/* WhatsApp preview phone. The bubble carries dir="auto" so its TEXT reads the
   right way, but its side, tail, square corner and time belong to the phone:
   a right-to-left phone (the default here) has the sent bubble on the left,
   tail top-left. When the composer marks the header dir="ltr" (Latin-only
   text) the whole phone turns left-to-right, not just its header. */
[dir=rtl] .wa-head:not([dir="ltr"]) .wa-back svg{transform:scaleX(-1)}
[dir=rtl] .wa-phone .wa-bubble{border-radius:8px;border-top-left-radius:0}
[dir=rtl] .wa-phone .wa-bubble::after{left:-8px;right:auto;border-width:8px;border-left-width:0}
[dir=rtl] .wa-phone .wa-time{left:10px;right:auto}
.wa-head[dir="ltr"] ~ .wa-body{direction:ltr}
[dir=rtl] .wa-head[dir="ltr"] ~ .wa-body .wa-bubble{border-radius:8px;border-top-right-radius:0}
[dir=rtl] .wa-head[dir="ltr"] ~ .wa-body .wa-bubble::after{right:-8px;left:auto;border-width:8px;border-right-width:0}
[dir=rtl] .wa-head[dir="ltr"] ~ .wa-body .wa-time{right:10px;left:auto}

/* Arabic letters join: tracking (the spaced-out small labels) pulls them apart
   and negative tracking crushes them, so Arabic text keeps normal spacing.
   Latin-only bits — HTTP verbs, language names, codes, PIN and hex boxes,
   amounts — keep theirs. */
:lang(ar) :is(.oauth-sep,.nav-label,.tk-status,.tag-imported,.perm-grp-h,.sr-item .sr-group,.tu-cur,
  .bal-card .lbl,.bal-fees .bf-t,.dr-title,.dr-title span,.field-label,.acct-av,.idc-av,.bell-head,
  .nm-h,.nm-hz-w,.pn-sect h3,.tp-fact h5,.mtr-live,.tb-kind,.nm-lim-tag,.num-det i,
  .tpl-appr-facts i,.tn-def,.ib-tag,.rvf-sev,.rvf-by,.ar-sec,.ar-pv-t,
  .auth-headline h1,.auth-card h2,.page-head h2,.pn-head h2,.ui-card .ui-head h3,.oauth-inline-h){letter-spacing:normal}

/* =====================================================================
   HOOPOE SHELL — the frame around every page.
   Exactly the viewport: the bars stay put and only .content scrolls.
     .hx-top   the kohl bar: mark, business, sections, search and tools
     .hx-sub   the open section's pages, and "New message"
     .content  the page itself
     .hx-dock  phones only: the sections as a tab bar along the bottom
   Last in the file on purpose, so it wins over the generic sections above.
   ===================================================================== */
.shell{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
.content>.page{width:100%;max-width:1440px;margin-inline:auto}

.hx-top{flex:none;height:var(--hx-top);display:flex;align-items:center;gap:14px;padding:0 20px;
  position:relative;z-index:30;background:var(--kohl);color:var(--cream)}
/* the business you are in: its colour as a line along the bottom of the bar */
.has-biz .hx-top{box-shadow:inset 0 -2px 0 var(--biz)}
.hx-home{display:flex;align-items:center;gap:10px;flex:none;padding:3px;border:none;border-radius:12px;
  background:none;color:#fff}
.hx-lockup{display:block;flex:none;height:34px;width:auto}
.hx-home .hx-mark{display:none}
/* the bird: cream lines and sand throat by default; --mk-* recolour it on light surfaces */
.hx-mark{display:block;flex:none}
.hx-mark .mk-l{fill:var(--mk-line,#FFF1D7)}
.hx-mark .mk-t{fill:var(--mk-throat,#D8C19F)}
.hx-mark .mk-c{fill:#FD4E19}
.hx-ws{display:inline-flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;max-width:210px;
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  font-size:12.5px;font-weight:600;color:rgba(255,241,215,.88)}
.hx-ws-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-ws .bdot{background:var(--biz,var(--brand-hi))}
.hx-ws-owner{color:var(--gold)}

/* sections */
.hx-secs{display:flex;align-items:center;gap:2px;min-width:0;margin-inline-start:8px}
.hx-sec{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border:none;border-radius:11px;background:transparent;color:rgba(255,241,215,.64);
  font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.hx-sec:hover{color:#fff;background:rgba(255,255,255,.06)}
.hx-sec.active{color:#fff;background:rgba(255,255,255,.11)}
.hx-sec.active svg{color:var(--brand-hi)}
.hx-sec.has-dot::after,.hx-dock-btn.has-dot::after{content:"";position:absolute;top:7px;inset-inline-end:7px;
  width:8px;height:8px;border-radius:50%;background:var(--brand-hi);box-shadow:0 0 0 2px var(--kohl)}

/* tools */
.hx-tools{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex:none}
.hx-top .searchbox{position:relative;display:flex;align-items:center}
.hx-top .searchbox>svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:rgba(255,241,215,.5);pointer-events:none}
.hx-top .searchbox input{width:250px;max-width:none;height:38px;padding-block:0;padding-right:36px;padding-left:62px;
  border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);
  color:#fff;font-size:13.5px}
.hx-top .searchbox input::placeholder{color:rgba(255,241,215,.46)}
.hx-top .searchbox input:focus{background:rgba(255,255,255,.1);border-color:rgba(216,193,159,.7);
  box-shadow:0 0 0 3px rgba(216,193,159,.18)}
/* kbd is forced left-to-right (RTL section), which would flip inline-end, so sides are physical (mirrored for dir=ltr under LANGUAGE) */
.hx-kbd{position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:inherit;font-size:11px;line-height:1;padding:4px 6px;border-radius:6px;direction:ltr;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:rgba(255,241,215,.55)}
.hx-search-btn{display:none}
.hx-top .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,241,215,.86)}
.hx-top .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.hx-top .bell-dot{border-color:var(--kohl)}
.hx-top .balance-pill{height:38px;padding:0 13px;border-radius:11px;font-size:14px;
  background:rgba(93,211,158,.1);border-color:rgba(93,211,158,.3);color:#9BE7C2}
.hx-top .balance-pill.bal-yellow{background:rgba(245,196,81,.12);border-color:rgba(245,196,81,.34);color:#F7D27A}
.hx-top .balance-pill.bal-red{background:rgba(255,99,120,.14);border-color:rgba(255,99,120,.4);color:#FFB3BF}
.hx-top .user-chip{height:42px;padding:3px;padding-inline-end:12px;gap:9px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;font:inherit}
.hx-top .user-chip:hover{background:rgba(255,255,255,.1)}
.hx-top .user-chip .av{background-color:var(--gold);color:var(--hh-navy)}
.hx-top .uchip-txt{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:start}
.hx-top .uname{font-size:13px;font-weight:600;line-height:1.2;max-width:140px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hx-top .urole{font-size:11px;font-weight:500;color:rgba(255,241,215,.55)}
.uchip-car{opacity:.55;flex:none}

/* the open section's pages */
.hx-sub{flex:none;height:var(--hx-sub);display:flex;align-items:center;gap:12px;padding:0 20px;
  position:relative;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hx-pages{display:flex;align-items:stretch;gap:2px;height:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
.hx-pages::-webkit-scrollbar{display:none}
.hx-sub .nav-item{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;
  width:auto;height:100%;margin:0;padding:0 13px;border:none;border-radius:0;background:none;
  color:var(--ink3);font-size:14px;font-weight:500;white-space:nowrap;transition:color .15s}
.hx-sub .nav-item[hidden]{display:none}
.hx-sub .nav-item svg{color:var(--muted);transition:color .15s}
.hx-sub .nav-item:hover{color:var(--ink);background:none}
.hx-sub .nav-item::after{content:"";position:absolute;inset-inline:10px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--crest);transform:scaleY(0);transform-origin:bottom;
  transition:transform .18s ease}
.hx-sub .nav-item.active{color:var(--ink);font-weight:600}
.hx-sub .nav-item.active svg{color:var(--blue)}
.hx-sub .nav-item.active::after{transform:none}
.hx-new{margin-inline-start:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 15px;border:none;border-radius:11px;background:var(--blue);color:var(--on-blue);
  font-size:13.5px;font-weight:600;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--blue) 90%,transparent);
  transition:background .15s}
.hx-new:hover{background:var(--blue-dark)}

.hx-dock{display:none}

/* narrower desktops: shed the extras before anything wraps */
@media(max-width:1500px){
  .hx-top .uchip-txt,.uchip-car{display:none}
  .hx-top .user-chip{padding-inline-end:3px}
  .hx-top .searchbox input{width:210px}
}
@media(max-width:1320px){.hx-ws{display:none}}
@media(max-width:1180px){
  .hx-top .searchbox{display:none}
  .hx-search-btn{display:grid}
  body.hx-searching .hx-top .searchbox{display:flex;position:absolute;inset:10px 16px;z-index:5}
  body.hx-searching .hx-top .searchbox input{width:100%;height:40px;background:var(--kohl-2)}
  .hx-sec{padding:0 11px}
}
@media(max-width:1040px){.hx-home .hx-lockup{display:none}.hx-home .hx-mark{display:block}}

/* phones and small tablets: sections move to the bottom tab bar */
@media(max-width:900px){
  .hx-top{padding:0 12px;gap:8px}
  .hx-secs{display:none}
  .hx-ws{display:inline-flex;max-width:150px}
  .hx-kbd{display:none}
  body.hx-searching .hx-top .searchbox{inset:10px 12px}
  .hx-top .balance-pill{padding:0 10px;font-size:13px}
  .hx-sub{height:46px;padding:0 6px;gap:6px}
  .hx-sub .nav-item{padding:0 10px;font-size:13.5px}
  .hx-new{width:36px;padding:0}
  .hx-new span{display:none}
  .content{padding:18px 14px 26px}
  .hx-dock{display:flex;flex:none;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 24px -20px rgba(13,27,62,.35)}
  .hx-dock-btn{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px 5px;border:none;border-radius:12px;background:none;color:var(--muted);
    font-size:11px;font-weight:600}
  .hx-dock-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hx-dock-btn.active{color:var(--blue);background:var(--blue-soft)}
  .hx-dock-btn.has-dot::after{top:4px;inset-inline-end:calc(50% - 18px);box-shadow:0 0 0 2px var(--surface)}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media(max-width:420px){
  .hx-ws{display:none}
  .hx-top .balance-pill svg{display:none}
}
@media (prefers-reduced-motion:reduce){.hx-sub .nav-item::after{transition:none}}

/* =====================================================================
   HOME — greeting with the wallet beside it, the four figures (each with
   a bar for its share where there is a whole to measure against), then
   recent activity and the prices.
   ===================================================================== */
.hh{gap:20px}
.hh-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:24px;align-items:stretch;padding:24px;
  border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
/* faint crest stripes behind the greeting */
.hh-hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset-block:-30%;inset-inline-start:-8%;
  width:62%;background:repeating-linear-gradient(118deg,color-mix(in srgb,var(--brand) 7%,transparent) 0 2px,transparent 2px 22px);
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent);mask-image:radial-gradient(closest-side,#000 20%,transparent)}
.hh-greet{display:flex;flex-direction:column;justify-content:center;padding:4px 6px}
.hh-date{font-size:13px;font-weight:600;color:var(--blue);margin-bottom:6px}
.hh-greet h1{font-size:32px;font-weight:700;line-height:1.35}
.hh-greet p{margin-top:6px;color:var(--muted);font-size:15px;line-height:1.7}
.hh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hh-actions .btn{height:44px;padding:0 18px}
.btn.hh-ghost{background:var(--panel);color:var(--ink2)}
.btn.hh-ghost:hover{background:color-mix(in srgb,var(--panel) 55%,var(--line2))}
.hh-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hh-kpi{display:flex;flex-direction:column}
.hh-kpi[data-tone=green]{--tone:var(--green)}
.hh-kpi[data-tone=blue]{--tone:var(--blue)}
.hh-kpi[data-tone=yellow]{--tone:var(--amber)}
.hh-kpi[data-tone=red]{--tone:var(--red)}
.hh-meter{height:6px;margin-top:14px;border-radius:6px;background:var(--panel);overflow:hidden}
.hh-meter i{display:block;height:100%;min-width:3px;border-radius:inherit;background:var(--tone,var(--blue))}
.hh-sub{margin-top:8px;font-size:12px;line-height:1.6;color:var(--muted)}
.hh-card-h{margin-bottom:6px}
.hh-rates .hh-card-h svg{color:var(--muted)}
.hh-link{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border:none;border-radius:9px;
  background:none;color:var(--blue);font-size:13px;font-weight:600}
.hh-link:hover{background:var(--blue-soft)}
.hh-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 16px;
  text-align:center;color:var(--muted);font-size:13.5px;line-height:1.7}
.hh-empty svg{width:46px;height:46px;padding:12px;margin-bottom:6px;border-radius:15px;
  background:var(--blue-soft);color:var(--blue)}
.hh-empty b{color:var(--ink);font-size:15px}
@media(max-width:1100px){
  .hh-hero{grid-template-columns:minmax(0,1fr)}
  .hh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .hh-hero{padding:16px;border-radius:20px;gap:16px}
  .hh-greet h1{font-size:25px}
  .hh-actions .btn{flex:1 1 auto}
  .hh-kpis{gap:10px}
  .hh-kpi{padding:14px}
  .hh-kpi .val{font-size:22px}
}

/* =====================================================================
   The rest of the family: rounder, warmer pickers and controls.
   ===================================================================== */
.seg{border-radius:12px}
.segpill{border-radius:14px}
.segpill button{border-radius:10px}
.cs-btn{padding:10px 13px;border-color:var(--line2);border-radius:12px}
.csm{border-radius:24px}
.bell-dd{border-radius:16px;box-shadow:var(--shadow-pop)}
.empty{color:var(--muted)}

/* =====================================================================
   LANGUAGE — the switch on the sign-in screen, and the English console
   (app.en.js is served with dir=ltr). Logical properties mirror on their
   own; these are the few rules above written with physical sides.
   ===================================================================== */
.auth-lang{position:absolute;top:20px;inset-inline-end:24px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:rgba(255,241,215,.9);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s}
.auth-lang:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
@media(max-width:480px){.auth-lang{top:12px;inset-inline-end:12px}}
[dir=ltr] .searchbox>svg,[dir=ltr] .hx-top .searchbox>svg{right:auto;left:12px}
[dir=ltr] .searchbox input{padding-right:12px;padding-left:36px}
[dir=ltr] .hx-top .searchbox input{padding-right:62px;padding-left:36px}
[dir=ltr] .hx-kbd{left:auto;right:8px}
/* ids, numbers and passwords line up with the page's start: the RTL rule
   above aligns them to their end, which in an English page is the right edge */
[dir=ltr] :is(input[type=tel],input[type=email],input[type=url],input[type=password],input[inputmode=numeric]){text-align:left}
/* English words run longer than the Arabic headline they replace */
html[lang=en] .auth-headline h1{font-size:clamp(32px,3.4vw,48px)}

/* =====================================================================
   TEMPLATE STUDIO — building a WhatsApp template (Templates → New).
   Numbered sections down a rail, the message on a phone beside them,
   the actions pinned to the bottom of the view.
   ===================================================================== */
.ts [hidden]{display:none !important}
.ts{display:flex;flex-direction:column;gap:18px}
.ts-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ts-title{display:flex;align-items:center;gap:14px;min-width:0}
.ts-badge{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:var(--kohl);color:var(--brand-hi)}
.ts-title h3{font-size:21px;font-weight:700}
.ts-title p{margin-top:3px;font-size:13.5px;color:var(--muted);line-height:1.6}
.ts-start{display:flex;align-items:center;gap:14px;padding-block:10px;padding-inline:16px 10px;border-radius:16px;
  border:1.5px dashed var(--line2);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.ts-start b{display:block;font-size:13px}
.ts-start span{display:block;font-size:12px;color:var(--muted)}

.ts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:26px;align-items:start}
.ts-main{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
/* the rail that threads the numbered sections */
.ts-main::before{content:"";position:absolute;top:24px;bottom:90px;inset-inline-start:19px;width:2px;
  border-radius:2px;background:linear-gradient(var(--line2),var(--line2)) center/2px 100% no-repeat}
.ts-sec{position:relative;padding-inline-start:56px}
.ts-num{position:absolute;inset-inline-start:0;top:14px;z-index:1;width:40px;height:40px;border-radius:13px;
  display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--ink3);
  background:var(--bg);border:2px solid var(--line2);transition:background .15s,color .15s,border-color .15s}
.ts-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px 20px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px;
  transition:border-color .15s,box-shadow .15s}
.ts-sec:focus-within .ts-num{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.ts-sec:focus-within .ts-card{border-color:var(--blue-border);box-shadow:0 0 0 4px var(--blue-soft),var(--shadow-card)}
.ts-sec-h h4{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.ts-sec-h p{margin-top:2px;font-size:13px;color:var(--muted);line-height:1.6}
.ts-opt{font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:var(--panel);color:var(--muted)}
.ts-last .ts-num{color:var(--green)}
.ts-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}

/* category tiles */
.ts-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ts-cat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;
  border-radius:15px;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);
  text-align:start;font:inherit;transition:border-color .15s,background .15s,box-shadow .15s}
.ts-cat:hover{border-color:var(--ink3)}
.ts-cat-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:6px;
  background:var(--panel);color:var(--ink3)}
.ts-cat b{font-size:14px}
.ts-cat > span:last-child{font-size:12px;color:var(--muted);line-height:1.5}
.ts-cat::after{content:"";position:absolute;top:14px;inset-inline-end:14px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line2);background:var(--surface)}
.ts-cat.on{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue-soft)}
.ts-cat.on .ts-cat-ic{background:var(--blue);color:var(--on-blue)}
.ts-cat.on::after{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 3px var(--surface)}

/* header-type tiles */
.ts-hdrs{display:flex;flex-wrap:wrap;gap:8px}
.ts-hdr{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--line2);background:var(--surface);color:var(--ink3);font:inherit;font-size:13px;font-weight:600;
  transition:background .15s,color .15s,border-color .15s}
.ts-hdr span{text-transform:capitalize}
.ts-hdr:hover{border-color:var(--ink3);color:var(--ink)}
.ts-hdr.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* the pinned actions */
.ts-actions{position:sticky;bottom:0;z-index:6;display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin-inline-start:56px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 -10px 30px -18px rgba(13,27,62,.35)}
.ts-actions #tCancel{margin-inline-end:auto}

/* the phone */
.ts-side{position:sticky;top:6px;display:flex;flex-direction:column;gap:14px}
.ts-side-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink3)}
.ts-device{position:relative;padding:14px 12px 16px;border-radius:38px;background:var(--kohl);
  box-shadow:0 30px 60px -28px rgba(13,27,62,.6),inset 0 0 0 2px rgba(255,255,255,.06)}
.ts-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:84px;height:6px;border-radius:6px;
  background:rgba(255,255,255,.14)}
.ts-device .wa-phone{display:flex;flex-direction:column;border:none;border-radius:26px;overflow:hidden;
  min-height:430px;background:#efeae2}
/* the bubble is built from an indented template: only the message text keeps
   its line breaks (.wa-text is pre-line), the markup around it must not */
#tPrev .wa-bubble{white-space:normal}
.ts .hint{font-size:12.5px;color:var(--muted);line-height:1.6}
.ts-flow{padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.ts-flow b{font-size:13.5px}
.ts-flow ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:tsf}
.ts-flow li{position:relative;padding-inline-start:32px;font-size:12.8px;line-height:1.6;color:var(--ink3);counter-increment:tsf}
.ts-flow li::before{content:counter(tsf);position:absolute;inset-inline-start:0;top:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;background:var(--panel);color:var(--ink2)}

@media(max-width:1100px){
  .ts-grid{grid-template-columns:minmax(0,1fr)}
  .ts-side{position:static;order:-1}
  .ts-device .wa-phone{min-height:0}
}
@media(max-width:640px){
  .ts-sec{padding-inline-start:0}
  .ts-main::before,.ts-num{display:none}
  .ts-actions{margin-inline-start:0;flex-wrap:wrap}
  .ts-cats{grid-template-columns:minmax(0,1fr)}
  .ts-row{grid-template-columns:minmax(0,1fr)}
  .ts-start{width:100%}
}

/* =====================================================================
   TOP-UP SETTINGS (Platform → Top-up settings) and the parts of the
   customer's top-up window they drive.
   ===================================================================== */
.tp-fx{display:flex;flex-direction:column;gap:16px}
.tp-fx-main{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.tp-k{font-size:13px;font-weight:600;color:var(--muted)}
.tp-rate{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.tp-rate b{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums}
.tp-rate span{font-size:14px;color:var(--muted)}
.tp-sub{font-size:13px;color:var(--ink3);margin-top:2px}
.tp-conv{display:flex;flex-direction:column;gap:6px;min-width:250px;padding:14px 16px;border-radius:14px;background:var(--panel)}
.tp-conv div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px}
.tp-conv div span{color:var(--muted)}
.tp-conv div b{font-variant-numeric:tabular-nums}
.tp-conv p{margin-top:4px;font-size:11.5px;color:var(--muted);line-height:1.6;max-width:280px}
.tp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tp-grid.tp-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tp-grid[hidden]{display:none}
.tp-acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.tp-sec-h{margin-top:6px}
.tp-sec-h h3{font-size:19px;font-weight:700}
.tp-sec-h p{margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.7}
.tp-sec-h p b{color:var(--ink)}
.tp-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.tp-m{padding:0;overflow:hidden}
.tp-m-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.tp-m-logo{flex:none;display:grid}
.tp-m-logo img,.tp-m-logo svg{border-radius:11px}
.tp-m-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tp-m-t b{font-size:15.5px}
.tp-m-t span{font-size:12.5px;color:var(--muted);line-height:1.5}
.tp-m-b{display:flex;flex-direction:column;gap:12px;padding:16px 18px}
.tp-m-f{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel)}
.tp-nets{display:flex;flex-wrap:wrap;gap:8px}
.tp-net{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line2);
  font-size:13px;font-weight:600;cursor:pointer;color:var(--ink3)}
.tp-net input{width:auto;margin:0;accent-color:var(--blue)}
.tp-net:has(input:checked){border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.tp-pre,.tp-who{display:flex;flex-direction:column;gap:10px}
.tp-pre h3,.tp-who h3{font-size:16px}
.tp-pre p,.tp-who p{font-size:13px;line-height:1.7}
.tp-pre-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:1100px){.tp-methods{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.tp-grid,.tp-grid.tp-3{grid-template-columns:minmax(0,1fr)}.tp-rate b{font-size:32px}}

/* customer's window: loading, the manual method's instructions, its WhatsApp button */
.tu-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 0;color:var(--muted);font-size:14px}
.tu-manual{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  font-size:14px;line-height:1.8;white-space:pre-line;unicode-bidi:plaintext}
.tu-next.tu-wa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;text-decoration:none;
  background:#1FA855;color:#fff}