/* Ported from ct_marketing_sms_prototype.html — the UI source of truth. */
:root{
  --bg:#F6F6F2; --panel:#FFFFFF; --panel2:#EFEFEA; --line:#DDDDD4;
  --ink:#171A17; --ink2:#5B615B; --ink3:#8A908A;
  --accent:#0E7A5F; --accent-ink:#fff; --accent-soft:#E1F0EA;
  --warn:#B45309; --warn-soft:#FDF0DF; --bad:#B3261E; --bad-soft:#FBE9E7; --ok:#0E7A5F; --ok-soft:#E1F0EA;
  --gp:#1CABE3; --robi:#E4002B; --bl:#F26522; --tt:#6CBE45; --unk:#9AA0A6;
  --uni:#8B5CF6; --gsm:#2563EB;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif; --bn:'Noto Sans Bengali','IBM Plex Sans',sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(20,24,20,.05),0 4px 14px rgba(20,24,20,.06);
}
[data-theme="dark"]{
  --bg:#0F1311; --panel:#171C19; --panel2:#1F2521; --line:#2B322D;
  --ink:#E8EBE7; --ink2:#A6ADA6; --ink3:#727872;
  --accent:#2FA381; --accent-ink:#08110D; --accent-soft:#173229;
  --warn:#E8A44C; --warn-soft:#2E2415; --bad:#E5776F; --bad-soft:#301A18; --ok:#2FA381; --ok-soft:#173229;
  --uni:#A78BFA; --gsm:#60A5FA;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
html{font-size:15px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;transition:background .25s,color .25s}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;color:var(--ink)}
.mono{font-family:var(--mono)}
.bn{font-family:var(--bn)}
a{color:inherit}
[x-cloak]{display:none!important}

.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border:none;background:none;text-align:left;width:100%;border-radius:8px;color:var(--ink);text-decoration:none}
.brand:hover{background:var(--panel2)}
.brand .dot{min-width:36px;height:32px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.04em}
.brand b{font-size:.95rem;letter-spacing:.02em}
.brand small{display:block;color:var(--ink3);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:none;background:none;color:var(--ink2);border-radius:8px;font-size:.9rem;font-weight:500;text-decoration:none}
.nav-btn svg{width:17px;height:17px;flex:none}
.nav-btn:hover{background:var(--panel2);color:var(--ink)}
.nav-btn.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side .spacer{flex:1}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink2);font-size:.85rem;width:100%}
.proto-tag{margin-top:10px;font-size:.66rem;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;padding:0 8px;line-height:1.5}

.main{padding:26px clamp(16px,3.5vw,42px);max-width:1200px;width:100%}
h1{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--ink2);font-size:.88rem;margin-top:3px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card .hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .hd b{font-size:.92rem}
.card .bd{padding:16px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.stat{padding:14px 16px}
.stat .k{font-size:.72rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.1em}
.stat .v{font-family:var(--mono);font-size:1.5rem;font-weight:600;margin-top:6px}
.stat .d{font-size:.75rem;color:var(--ink3);margin-top:3px}
.btn{border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:.88rem;text-decoration:none;display:inline-block}
.btn.pri{background:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.gh{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.gh:hover{background:var(--panel2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:99px}
.pill .sw{width:7px;height:7px;border-radius:50%}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)}
.p-mut{background:var(--panel2);color:var(--ink2)}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:var(--panel2)}
.opchip{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600}
.opchip .sw{width:9px;height:9px;border-radius:3px}
.plogo{width:16px;height:16px;border-radius:4px;vertical-align:-3px;flex:none;object-fit:contain}
.plogo.lg{width:20px;height:20px}
.opbar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--panel2)}
.opbar div{height:100%}
.oplegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.76rem;color:var(--ink2)}
.oplegend .mono{color:var(--ink)}

/* platform picker */
.platpick{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.ppill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:7px 14px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.ppill .sw{width:9px;height:9px;border-radius:50%}
.ppill.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* wizard */
.steps{display:flex;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.step{flex:1;padding:11px 14px;font-size:.8rem;color:var(--ink3);display:flex;align-items:center;gap:9px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step .n{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;flex:none}
.step.cur{color:var(--ink);font-weight:600;background:var(--panel2)}
.step.cur .n{border-color:var(--accent);color:var(--accent)}
.step.done{color:var(--accent)}
.step.done .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wizfoot{display:flex;justify-content:space-between;margin-top:18px}
textarea.big{width:100%;min-height:150px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px;font-family:var(--mono);font-size:.84rem;resize:vertical}
textarea.big.bn{font-family:var(--bn)}
textarea:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.hint{font-size:.78rem;color:var(--ink3);margin-top:7px;line-height:1.5}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{border:1px solid var(--line);background:none;color:var(--ink2);border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:600}
.tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.numstats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.numstats .box{background:var(--panel2);border-radius:8px;padding:10px 12px}
.numstats .box .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3)}
.numstats .box .v{font-family:var(--mono);font-size:1.15rem;font-weight:600;margin-top:3px}
.badlist{max-height:130px;overflow:auto;font-family:var(--mono);font-size:.76rem;background:var(--panel2);border-radius:8px;padding:10px 12px;margin-top:10px}
.badlist div{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:var(--ink2)}
.badlist .why{color:var(--bad)}
/* dropzone */
.drop{display:block;border:1.5px dashed var(--line);border-radius:10px;padding:26px;text-align:center;cursor:pointer;background:var(--panel2);transition:border-color .15s,background .15s}
.drop:hover,.drop.hot{border-color:var(--accent);background:var(--accent-soft)}
.drop svg{width:26px;height:26px;color:var(--ink3);margin-bottom:8px}
.drop b{display:block;font-size:.9rem}
.drop span{font-size:.78rem;color:var(--ink3)}
.csvmeta{margin-top:10px;font-size:.82rem;font-family:var(--mono);color:var(--ink2);background:var(--panel2);border-radius:8px;padding:9px 12px}

.composer{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.chip{border:1px dashed var(--line);background:var(--panel2);border-radius:99px;padding:4px 11px;font-family:var(--mono);font-size:.74rem;color:var(--accent);font-weight:600}
.chip:hover{border-color:var(--accent)}
.phone{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:16px 14px;max-width:320px;margin:0 auto}
.phone .from{font-size:.7rem;color:var(--ink3);margin-bottom:7px;font-family:var(--mono);letter-spacing:.06em}
.phone .bubble{background:var(--panel);border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:11px 13px;font-size:.86rem;line-height:1.5;min-height:52px;word-break:break-word}
.tape{margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-family:var(--mono)}
.tape .row{display:flex;justify-content:space-between;padding:7px 13px;font-size:.78rem;border-bottom:1px dashed var(--line);background:var(--panel)}
.tape .row:last-child{border-bottom:none}
.tape .total{background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.85rem}
.tape .flag{color:var(--warn)}
.guard{display:flex;gap:10px;align-items:flex-start;border-radius:8px;padding:11px 13px;font-size:.82rem;margin-top:10px;line-height:1.45}
.guard.warn{background:var(--warn-soft);color:var(--warn)}
.guard.bad{background:var(--bad-soft);color:var(--bad)}
.guard.ok{background:var(--ok-soft);color:var(--ok)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:8px 14px;font-size:.86rem}
.kv .k{color:var(--ink3)}
.prog{height:9px;border-radius:6px;background:var(--panel2);overflow:hidden;margin:10px 0}
.prog div{height:100%;background:var(--accent);width:0%;transition:width .5s}
.livegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.livegrid .box{background:var(--panel2);border-radius:8px;padding:10px 12px;text-align:center}
.livegrid .box .v{font-family:var(--mono);font-size:1.2rem;font-weight:600}
.livegrid .box .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-top:3px}
.fo-note{font-size:.8rem;margin-top:12px;color:var(--ink2)}
.fo-note b{color:var(--warn)}
.cd-num{font-family:var(--mono);font-size:2.6rem;font-weight:600;color:var(--accent)}

/* routes */
.route{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.route:last-child{border-bottom:none}
.route .l{display:flex;align-items:center;gap:11px}
.route .bal{font-family:var(--mono);font-weight:600}
.route small{display:block;color:var(--ink3);font-size:.72rem;margin-top:2px}
.route .rt{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.loginlink{font-size:.72rem;font-weight:600;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.loginlink:hover{text-decoration:underline}
.loginlink svg{width:11px;height:11px}

/* balance / masking check panel */
.balpanel{margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.balpanel .bh{padding:8px 13px;font-size:.72rem;font-weight:600;color:var(--ink2);background:var(--panel2);border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.07em}
.brow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;font-size:.8rem}
.brow .bl small{display:block;color:var(--ink3);font-family:var(--mono);font-size:.71rem;margin-top:2px}
.warnline{padding:0 13px 10px;font-size:.74rem;color:var(--warn)}

/* filters, search, menus */
.search{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:.86rem;min-width:220px}
.pillfilter{display:flex;gap:6px;flex-wrap:wrap}
.fpill{border:1px solid var(--line);background:none;color:var(--ink2);border-radius:99px;padding:6px 13px;font-size:.8rem;font-weight:600;text-decoration:none}
.fpill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tablewrap{overflow-x:auto}
.kebab{position:relative;display:inline-block}
.kbtn{border:none;background:none;color:var(--ink3);font-size:1.15rem;line-height:1;padding:4px 9px;border-radius:6px}
.kbtn:hover{background:var(--panel2);color:var(--ink)}
.kmenu{position:absolute;right:0;top:100%;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);min-width:132px;overflow:hidden}
.kmenu button,.kmenu a{display:block;width:100%;text-align:left;padding:10px 13px;border:none;background:none;color:var(--ink);font-size:.84rem;text-decoration:none}
.kmenu button:hover,.kmenu a:hover{background:var(--panel2)}
.schedopt{display:flex;gap:12px;flex-wrap:wrap}
.radio{flex:1;min-width:200px;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;background:var(--panel2)}
.radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radio input{margin-top:3px;accent-color:var(--accent)}
.radio b{font-size:.9rem;display:block}
.radio small{color:var(--ink3);font-size:.76rem}

/* analytics */
.filterbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.filterbar .platpick{margin:0}
.rangesel{display:flex;align-items:center;gap:8px}
.rangesel select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:.84rem;font-weight:600}
.rangesel .span{font-size:.76rem;color:var(--ink3);font-family:var(--mono)}
.donutwrap{display:flex;align-items:center;gap:18px}
.legend{display:flex;flex-direction:column;gap:8px;font-size:.82rem}
.legend .li{display:flex;align-items:center;gap:8px;justify-content:space-between}
.legend .li .lab{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.legend .sw{width:10px;height:10px;border-radius:3px}
.legend .val{font-family:var(--mono);font-weight:600;color:var(--ink)}
.calwrap{overflow-x:auto}
.cal-legend{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink3);margin-top:8px}
.cal-legend .sw{width:11px;height:11px;border-radius:3px}

/* login */
.loginwrap{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.logincard{width:min(380px,92vw)}
.logincard .field{margin-bottom:14px}
.logincard label{font-size:.82rem;font-weight:600;display:block;margin-bottom:5px}
.logincard input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:.9rem}

.menu-btn{display:none;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 10px;color:var(--ink)}
.htmx-indicator{opacity:0;transition:opacity .15s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .composer{grid-template-columns:1fr}
  .livegrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  html{font-size:16px}
  .shell{grid-template-columns:1fr}
  .main{padding:18px 15px 40px}
  .side{position:fixed;z-index:50;width:270px;transform:translateX(-100%);transition:transform .22s;height:100vh;padding:20px 16px}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:11px 16px;font-size:.98rem}
  .nav-btn{padding:12px 12px;font-size:1rem}
  .nav-btn svg{width:19px;height:19px}
  h1{font-size:1.5rem}
  .sub{font-size:.95rem}
  .steps{flex-direction:column}
  .step{border-right:none;border-bottom:1px solid var(--line);padding:13px 15px;font-size:.92rem}
  .g4{grid-template-columns:repeat(2,1fr)}
  .numstats{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv .k{margin-top:9px;font-size:.8rem}
  .livegrid{grid-template-columns:repeat(2,1fr)}
  .btn{padding:12px 18px;font-size:.98rem}
  .stat .v{font-size:1.65rem}
  .tab{padding:8px 16px;font-size:.88rem}
  .ppill{padding:9px 15px;font-size:.9rem}
  .composer{grid-template-columns:1fr}
  .donutwrap{flex-direction:column;align-items:flex-start;gap:14px}
  .filterbar{flex-direction:column;align-items:stretch}
  .rangesel{justify-content:space-between}
}

/* Inline spinner (background-task progress, e.g. DND sweep) */
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line,#d0d5dd);
  border-top-color:var(--brand,#2563eb);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}