:root {
  --bg: #eef1f4; --panel: #ffffff; --ink: #1f2933; --muted: #66727f; --line: #dde3e9; --line2: #eef1f4;
  --brand: #0b6e4f; --brand-ink: #ffffff; --brand-soft: #e3f2ec; --brand-dark: #08563e;
  --side: #1e282c; --side-2: #2c3b41; --side-ink: #b8c7ce;
  --warn: #9a5b00; --warn-soft: #fff4e0; --bad: #c0392b; --bad-soft: #fdecea; --ok: #0b6e4f; --ok-soft: #e3f2ec;
  --radius: 4px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(16, 24, 32, .06);
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "Segoe UI", "Source Sans Pro", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 21px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.2px; } h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; } h3 { font-size: 14px; margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 20px; }

/* ---------- admin shell (classic sidebar) ---------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.logo { color: #fff; font-weight: 600; font-size: 14px; padding: 0 16px; height: 56px; display: flex; gap: 10px; align-items: center; background: var(--brand-dark); }
.logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo i { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; background: #25d366; display: inline-grid; place-items: center; color: #0f1f19; font-style: normal; font-size: 14px; font-weight: 800; }
.side-nav { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
.side-sec { padding: 14px 18px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6d8590; font-weight: 600; }
.side a { display: flex; align-items: center; gap: 11px; color: var(--side-ink); padding: 10px 18px; border-left: 3px solid transparent; font-size: 14px; }
.side a svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.side a:hover { background: #1a2226; color: #fff; text-decoration: none; }
.side a.on { background: #1a2226; color: #fff; border-left-color: #25d366; }
.side a.on svg { color: #25d366; opacity: 1; }
.side .who { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--side-2); font-size: 12px; }
.who-av { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--side-2); color: #fff; display: grid; place-items: center; font-weight: 700; }
.who-t { min-width: 0; } .who-t b { display: block; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-t small { color: #7f949d; }
.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top { justify-content: space-between; height: 56px; padding: 0 28px; box-shadow: var(--shadow); }
.crumb { color: var(--muted); font-size: 13px; } .crumb b { color: var(--ink); font-weight: 600; }
.admin-top .btn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
main { padding: 24px 28px 48px; max-width: 1280px; width: 100%; }
.admin-main main { flex: 1; }
.foot { padding: 14px 28px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: #fff; }

/* ---------- panels ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; box-shadow: var(--shadow); }
.card > h2:first-child, .card > input[type=hidden]:first-child + h2 { margin: -18px -18px 16px; padding: 11px 18px; border-bottom: 1px solid var(--line); background: #fafbfc; font-size: 15px; }
.card.row { border-top-width: 1px; border-top-color: var(--line); background: #fafbfc; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 20px; }
.cols { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.stat { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat small { color: var(--muted); }
.hero { background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.hero span, .hero small { color: #cfe8dd; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: #48545f; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #f4f6f8; border-bottom: 2px solid var(--line); white-space: nowrap; }
tbody tr:nth-child(even) td { background: #fbfcfd; }
tbody tr:hover td { background: #f1f8f5; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); margin-bottom: 20px; }
.empty { color: var(--muted); padding: 26px; text-align: center; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pill.active, .pill.paid, .pill.credit, .pill.info { background: var(--ok-soft); color: var(--ok); }
.pill.blocked, .pill.failed, .pill.error, .pill.debit { background: var(--bad-soft); color: var(--bad); }
.pill.created, .pill.warn, .pill.low { background: var(--warn-soft); color: var(--warn); }
.pill.gst { background: #e8eefc; color: #2449a8; } .pill.nongst { background: #f0ecf8; color: #5b3a91; }

/* ---------- forms & buttons ---------- */
form.stack label, .field { display: block; margin-bottom: 14px; }
label span { display: block; font-size: 13px; color: #3b4651; margin-bottom: 5px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 8px 10px; min-height: 36px; border: 1px solid #c9d1d9; border-radius: var(--radius); font: inherit; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input[type=radio], input[type=checkbox] { width: auto; min-height: 0; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 110, 79, .14); }
.row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }
.row > .shrink { flex: 0 0 auto; }
.row .field { margin-bottom: 0; }
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand-dark); padding: 7px 16px; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid #c9d1d9; }
.btn.ghost:hover { background: #f4f6f8; }
.btn.danger { background: var(--bad); border-color: #a5281c; }
.btn.sm { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.inline { display: inline; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.head .sub { margin: 0; }

.flash { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 18px; font-weight: 500; border-left: 4px solid; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } .flash.err { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.banner { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; border-left: 4px solid; }
.banner.warn { background: var(--warn-soft); color: var(--warn); } .banner.bad { background: var(--bad-soft); color: var(--bad); }
.muted { color: var(--muted); } .mono { font-family: var(--mono); font-size: 12px; }
.bar { height: 8px; border-radius: 4px; background: var(--brand); min-width: 2px; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
details summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #1e282c 0%, #0b6e4f 100%); }
.login .card { width: 100%; max-width: 390px; padding: 30px; border-top: 4px solid #25d366; box-shadow: 0 12px 40px rgba(0,0,0,.25); }

/* invoice */
.invoice { max-width: 800px; margin: 24px auto; background: #fff; padding: 36px; border: 1px solid var(--line); }
.invoice table td, .invoice table th { padding: 8px; }
.invoice .top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.noprint { text-align: center; margin: 16px; }
@media print { .noprint { display: none; } body { background: #fff; } .invoice { border: 0; margin: 0; } }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .side-nav { display: flex; flex-wrap: wrap; padding: 6px; } .side-sec { display: none; }
  .side a { padding: 8px 10px; border-left: 0; border-radius: 4px; }
  .side .who { display: none; }
  .admin-top { padding: 0 16px; }
  main { padding: 18px 16px 40px; }
  .cols { grid-template-columns: 1fr; }
}
.logo.dark { color: var(--ink); padding: 0 0 18px; height: auto; background: none; font-size: 16px; }

/* inbox chat */
.chat { display: flex; flex-direction: column; gap: 8px; background: #efeae2; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; max-height: 60vh; overflow-y: auto; }
.bubble { max-width: 75%; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.bubble.out { align-self: flex-end; background: #d9fdd3; }
.bubble small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; text-align: right; }
pre.code { background: #0f1f19; color: #d7efe4; padding: 14px; border-radius: 8px; overflow-x: auto; font: 12px/1.5 var(--mono); white-space: pre; }
.secret { font-family: var(--mono); background: var(--warn-soft); padding: 10px; border-radius: 7px; word-break: break-all; font-size: 13px; }

/* ---------- dashboards ---------- */
.welcome { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, #0b6e4f 0%, #0f5f47 55%, #134e3f 100%); color: #fff; border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; position: relative; overflow: hidden; }
.welcome::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(37, 211, 102, .16); }
.welcome h1 { font-size: 22px; margin: 0; } .welcome p { margin: 4px 0 0; color: #cfe8dd; }
.welcome .btn { background: #fff; color: #0b6e4f; } .welcome .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.welcome .actions { position: relative; z-index: 1; }
.welcome .big { font-size: 34px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: end; }
.kpi .lbl { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .ico { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 14px; }
.kpi b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.kpi small { grid-column: 1 / -1; color: var(--muted); }
.kpi .spark { width: 110px; height: 32px; }
.delta { font-weight: 600; } .delta.up { color: #0a7d3c; } .delta.down { color: #b3261e; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; } .panel-head .muted { font-size: 12px; }
.dash { display: grid; gap: 18px; grid-template-columns: 2fr 1fr; } .dash > * { min-width: 0; margin-bottom: 0; }
.dash + .dash { margin-top: 18px; }
.cbox { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: 210px 22px; margin-top: 8px; }
.cbox .plot { position: relative; }
.cbox .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cbox .plot rect[data-tip]:hover, .cbox .plot rect.tip-on { fill: rgba(11, 110, 79, .06); }
.ylab, .xlab { position: relative; font-size: 11px; color: #7b8781; font-variant-numeric: tabular-nums; }
.ylab span { position: absolute; right: 8px; transform: translateY(-50%); white-space: nowrap; }
.xlab span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 600px) { .cbox { grid-template-rows: 170px 22px; } }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.legend i, .tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.as-table summary { font-size: 12px; color: var(--muted); font-weight: 500; margin: 6px 0 0; }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.hbar-top b { font-variant-numeric: tabular-nums; }
.hbar-track { height: 8px; background: #eef2f0; border-radius: 4px; overflow: hidden; }
.hbar-track > div { height: 100%; border-radius: 4px; }
.hbar small { color: var(--muted); font-size: 11px; }
.hbar.tip-on .hbar-track { outline: 2px solid #d8e6df; }
.tip { position: fixed; z-index: 50; pointer-events: none; display: none; background: #0f1f19; color: #eaf4ef; font-size: 12px; line-height: 1.6; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 260px; }
.list-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; }
.list-row:last-child { border-bottom: 0; }
.list-row > b, .list-row > span:last-child { white-space: nowrap; flex-shrink: 0; }
.list-row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
@media (max-width: 980px) { .dash { grid-template-columns: 1fr; } }

/* ---------- client portal (icon rail, AiSensy-style) ---------- */
body.portal { display: flex; min-height: 100vh; }
.rail { width: 84px; flex: 0 0 84px; background: var(--side); color: #cfe3da; display: flex; flex-direction: column; align-items: stretch; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 10px 0; }
.rail-logo { width: 40px; height: 40px; margin: 2px auto 12px; border-radius: 12px; background: #25d366; color: #0f2b22 !important; display: grid; place-items: center; font-weight: 800; font-size: 18px; text-decoration: none !important; }
.rail a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; color: #cfe3da; font-size: 11px; text-decoration: none; border-left: 3px solid transparent; }
.rail a svg { width: 22px; height: 22px; }
.rail a:hover { background: #1a2226; text-decoration: none; }
.rail a.on { background: #1a2226; color: #fff; border-left-color: #25d366; }
.rail a em { position: absolute; top: 4px; right: 14px; background: #25d366; color: #0f2b22; font-style: normal; font-weight: 700; font-size: 10px; border-radius: 99px; padding: 0 5px; min-width: 16px; text-align: center; }
.rail-end { margin-top: auto; }
.rail-end form { margin: 0; text-align: center; }
.rail-end button { background: none; border: 0; color: #8fb3a4; font: inherit; font-size: 11px; cursor: pointer; padding: 6px; text-decoration: underline; }
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 12px 28px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.topbar > b { font-size: 17px; margin-right: auto; }
.tb-item { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.tb-wallet { font-size: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; background: var(--brand-soft); }
.tb-wallet b { color: var(--brand); }
.subtabs { display: flex; gap: 4px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subtabs a { padding: 11px 14px; color: var(--muted); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.subtabs a.on { color: var(--brand); border-bottom-color: var(--brand); }
.subtabs a:hover { text-decoration: none; color: var(--ink); }
.portal main { padding: 24px 28px 60px; max-width: 1240px; width: 100%; }
.portal main.wide { max-width: none; padding: 0; }

/* status cards (dashboard) */
.status-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }
.status-row > div { padding: 16px 20px; border-right: 1px solid var(--line); }
.status-row > div:last-child { border-right: 0; }
.status-row span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.status-row span.big-pill { display: inline-block; font-size: 13px; margin: 0; }
.status-row b { font-size: 18px; }
.big-pill { display: inline-block; padding: 3px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; }
.big-pill.ok { background: #d6f5e3; color: #0a7d3c; } .big-pill.mid { background: #fff1d6; color: #8a5a00; } .big-pill.bad { background: var(--bad-soft); color: var(--bad); } .big-pill.na { background: #eef1ef; color: var(--muted); }

/* live chat: 3 panes */
.lc { display: grid; grid-template-columns: 320px 1fr 290px; height: calc(100vh - 57px); background: #fff; }
.lc-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.lc-search { padding: 12px; border-bottom: 1px solid var(--line); }
.lc-tabs { display: flex; background: #12352b; }
.lc-tabs a { flex: 1; text-align: center; color: #b9d4c8; font-size: 12px; font-weight: 600; padding: 11px 4px; letter-spacing: .03em; border-bottom: 3px solid transparent; }
.lc-tabs a.on { color: #fff; border-bottom-color: #25d366; }
.lc-tabs a:hover { text-decoration: none; color: #fff; }
.lc-items { overflow-y: auto; flex: 1; }
.lc-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f0f3f1; color: var(--ink); align-items: center; }
.lc-item:hover { background: #f6faf8; text-decoration: none; }
.lc-item.on { background: #e8f5ef; }
.av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #f3ebe1; color: #b0532c; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.lc-item .meta { min-width: 0; flex: 1; }
.lc-item .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lc-item .meta small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-item .side-info { text-align: right; font-size: 11px; color: var(--muted); white-space: nowrap; }
.lc-item .side-info em { display: inline-block; margin-top: 4px; background: #25d366; color: #0f2b22; font-style: normal; font-weight: 700; border-radius: 99px; padding: 0 6px; }
.lc-conv { display: flex; flex-direction: column; min-height: 0; background: #efeae2; }
.lc-head { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.lc-head .grow { flex: 1; min-width: 0; }
.lc-msgs { flex: 1; overflow-y: auto; padding: 18px 6%; display: flex; flex-direction: column; gap: 8px; }
.lc-empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 20px; }
.lc-compose { background: #f6f6f4; border-top: 1px solid var(--line); padding: 10px 14px; }
.lc-compose textarea { resize: none; }
.lc-compose .row { align-items: center; }
.lc-closed { background: var(--warn-soft); color: var(--warn); padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.lc-profile { border-left: 1px solid var(--line); overflow-y: auto; padding: 0 0 20px; }
.lc-profile h3 { background: #12352b; color: #fff; margin: 0; padding: 13px 16px; font-size: 15px; text-align: center; font-weight: 600; }
.lc-profile .pbody { padding: 16px; }
.lc-profile .av { width: 64px; height: 64px; font-size: 26px; margin: 6px auto 10px; }
.tag { display: inline-block; background: #e8eefc; color: #2449a8; border-radius: 99px; padding: 1px 9px; font-size: 12px; margin: 0 4px 4px 0; }
.bubble .by { font-size: 11px; color: #3b7a5f; font-weight: 600; }
@media (max-width: 1100px) { .lc { grid-template-columns: 280px 1fr; } .lc-profile { display: none; } }
@media (max-width: 760px) {
  body.portal { flex-direction: column; }
  .rail { position: static; width: 100%; flex: none; height: auto; flex-direction: row; overflow-x: auto; padding: 0; }
  .rail-logo { display: none; } .rail a { min-width: 72px; border-left: 0; border-bottom: 3px solid transparent; } .rail a.on { border-bottom-color: #25d366; }
  .rail-end { margin: 0; display: flex; }
  .topbar { padding: 10px 16px; } .portal main { padding: 16px 16px 40px; } .subtabs { padding: 0 12px; }
  .lc { grid-template-columns: 1fr; height: auto; } .lc-list { max-height: 45vh; } .lc-conv { min-height: 60vh; }
}
.btn.fb-btn { background: #1877f2; display: inline-flex; gap: 8px; align-items: center; padding: 11px 18px; font-size: 15px; }
.btn.fb-btn[disabled] { opacity: .6; cursor: wait; }

/* ---------- user manage (SMS-panel style) ---------- */
.um { padding: 0; overflow: hidden; border-top: 1px solid var(--line); }
.um-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: var(--side); color: #fff; }
.um-head h2 { margin: 0; color: #fff; font-size: 17px; }
.um-tools { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.um-tools .search { display: flex; max-width: 380px; flex: 1; }
.um-tools .search input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.um-tools .search .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.um-tools select { width: auto; }
.btn.ok { background: #28a745; border-color: #1e8e3a; } .btn.ok:hover { background: #1e8e3a; }
.um .table-wrap { overflow-x: auto; }
.um-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.um-table th, .um-table td { border-top: 1px solid var(--line, #e5e7eb); padding: 10px 12px; text-align: left; vertical-align: middle; }
.um-table th { background: #f4f6f8; white-space: nowrap; }
.um-table td.n, .um-table th.n { text-align: right; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; border-top: 1px solid var(--line, #e5e7eb); }
.pager .pages { display: flex; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; overflow: hidden; }
.pager .pages a, .pager .pages b, .pager .pages span { padding: 7px 12px; border-left: 1px solid var(--line, #e5e7eb); text-decoration: none; }
.pager .pages > :first-child { border-left: 0; }
.pager .pages b.on { background: var(--brand, #2a78d6); color: #fff; }
.pager .pages .off { color: #aaa; }
.topup-form { max-width: 760px; }
.um-table { font-size: 13.5px; }
.um-table th, .um-table td { padding: 9px 10px; white-space: nowrap; }
.um-table td .btn { min-height: 28px; }
.um-head .btn.danger { background: #28a745; border-color: #1e8e3a; }

/* ================= v2: attractive + simple ================= */
:root { --radius: 10px; --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); --shadow-lg: 0 10px 30px rgba(16,24,40,.08);
  --g1: linear-gradient(135deg,#0b6e4f,#14a06f); --g2: linear-gradient(135deg,#2563eb,#3b82f6); --g3: linear-gradient(135deg,#7c3aed,#a855f7); --g4: linear-gradient(135deg,#ea580c,#f59e0b); }
body { background: #f3f6f9; }
/* sidebar */
.side { background: linear-gradient(180deg,#0e2b23 0%,#0f1f1a 100%); }
.logo { background: transparent; border-bottom: 1px solid rgba(255,255,255,.07); height: 64px; font-size: 15px; }
.logo i { background: linear-gradient(135deg,#25d366,#128c7e); color: #fff; border-radius: 9px; width: 32px; height: 32px; flex-basis: 32px; box-shadow: 0 4px 12px rgba(37,211,102,.35); }
.side-sec { color: #5f8a7b; }
.side a { margin: 2px 10px; padding: 9px 12px; border-radius: 8px; border-left: 0; color: #b9d0c7; }
.side a:hover { background: rgba(255,255,255,.06); }
.side a.on { background: linear-gradient(90deg,#14a06f,#0b6e4f); color: #fff; box-shadow: 0 4px 14px rgba(20,160,111,.35); }
.side a.on svg { color: #fff; }
.side .who { border-top: 1px solid rgba(255,255,255,.07); }
.who-av { background: linear-gradient(135deg,#25d366,#128c7e); }
/* top bar */
.admin-top { height: 64px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); }
.crumb b { font-size: 15px; }
/* page head */
.head { border-bottom: 0; padding-bottom: 0; }
.head h1 { font-size: 23px; }
/* cards */
.card { border: 1px solid #e6ebf0; border-top: 1px solid #e6ebf0; border-radius: 12px; box-shadow: var(--shadow); }
.card > h2:first-child, .card > input[type=hidden]:first-child + h2 { background: #fff; border-bottom: 1px solid #eef2f5; border-radius: 12px 12px 0 0; font-size: 16px; position: relative; padding-left: 30px; }
.card > h2:first-child::before, .card > input[type=hidden]:first-child + h2::before { content: ""; position: absolute; left: 18px; top: 13px; bottom: 13px; width: 4px; border-radius: 4px; background: var(--g1); }
.card.row { background: #fff; border-radius: 12px; }
/* colourful stat tiles */
.stat { border: 0; border-radius: 12px; color: #fff; background: var(--g1); box-shadow: var(--shadow-lg); padding: 18px 20px; position: relative; overflow: hidden; }
.grid > .stat:nth-child(4n+2) { background: var(--g2); } .grid > .stat:nth-child(4n+3) { background: var(--g3); } .grid > .stat:nth-child(4n+4) { background: var(--g4); }
.stat::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); }
.stat span, .stat small { color: rgba(255,255,255,.85); } .stat b { font-size: 26px; }
.kpi { border-radius: 12px; border-color: #e6ebf0; box-shadow: var(--shadow); }
.panel { border-radius: 12px; border-color: #e6ebf0; box-shadow: var(--shadow); }
.welcome { border-radius: 16px; background: linear-gradient(120deg,#0b6e4f 0%,#14a06f 60%,#25d366 130%); box-shadow: var(--shadow-lg); }
/* tables */
.tbl { border-radius: 12px; border-color: #e6ebf0; overflow: hidden; }
th { background: #f7f9fb; color: #5b6b7a; border-bottom: 1px solid #e6ebf0; }
tbody tr:nth-child(even) td { background: #fff; }
tbody tr:hover td { background: #f3faf7; }
/* buttons & inputs */
.btn, button.btn { border-radius: 8px; border: 0; background: var(--g1); box-shadow: 0 2px 6px rgba(11,110,79,.25); transition: transform .08s, box-shadow .15s, filter .15s; }
.btn:hover { background: var(--g1); filter: brightness(1.07); box-shadow: 0 4px 12px rgba(11,110,79,.3); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid #d5dde5; box-shadow: none; }
.btn.ghost:hover { background: #f6f8fa; filter: none; }
.btn.danger { background: linear-gradient(135deg,#dc2626,#ef4444); box-shadow: 0 2px 6px rgba(220,38,38,.25); }
.btn.ok { background: linear-gradient(135deg,#16a34a,#22c55e); }
input, select, textarea { border-radius: 8px; border-color: #d5dde5; background: #fbfcfd; }
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(20,160,111,.15); }
.pill { border-radius: 99px; padding: 2px 10px; }
.flash { border-radius: 10px; border-left-width: 0; box-shadow: var(--shadow); }
/* user manage */
.um { border-radius: 12px; }
.um-head { background: linear-gradient(120deg,#0b6e4f,#14a06f); padding: 14px 18px; }
.um-head .btn.danger { background: #fff; color: #0b6e4f; box-shadow: none; }
.um-table th { background: #f7f9fb; }
.pager .pages { border-radius: 8px; }
/* client portal rail */
.rail { background: linear-gradient(180deg,#0e2b23 0%,#0f1f1a 100%); }
.rail a.on { background: rgba(37,211,102,.12); }
.rail-logo { background: linear-gradient(135deg,#25d366,#128c7e); color: #fff !important; box-shadow: 0 4px 12px rgba(37,211,102,.35); }
.subtabs a.on { color: var(--brand); border-bottom: 3px solid #14a06f; }
.tb-wallet { background: var(--g1); color: #fff; border: 0; } .tb-wallet b { color: #fff; }
.grid > .stat.red { background: linear-gradient(135deg,#dc2626,#f87171); }

/* ================= v3: Liquid Glass ================= */
:root {
  --glass: rgba(255,255,255,.58); --glass-strong: rgba(255,255,255,.74); --glass-brd: rgba(255,255,255,.75);
  --glass-shadow: 0 8px 32px rgba(15,40,35,.10), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25);
  --blur: blur(22px) saturate(180%);
}
body {
  background:
    radial-gradient(900px 600px at 8% 10%, rgba(37,211,102,.35), transparent 60%),
    radial-gradient(800px 600px at 95% 5%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(900px 700px at 80% 95%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(700px 500px at 20% 100%, rgba(20,184,166,.28), transparent 60%),
    #eef3f2;
  background-attachment: fixed;
}
/* floating glass sidebar */
.shell { grid-template-columns: 260px 1fr; }
.side { margin: 12px; height: calc(100vh - 24px); top: 12px; border-radius: 24px; color: var(--ink);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); overflow: hidden; }
.logo { color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.6); }
.side-sec { color: #6b7d78; }
.side a { color: #33423e; }
.side a svg { opacity: .7; }
.side a:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.side a.on { color: #064e3b; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(209,250,229,.75));
  box-shadow: 0 4px 16px rgba(11,110,79,.15), inset 0 1px 0 #fff; border: 1px solid rgba(255,255,255,.9); }
.side a.on svg { color: #0b6e4f; opacity: 1; }
.side .who { border-top: 1px solid rgba(255,255,255,.6); }
.who-t b { color: var(--ink); } .who-t small { color: var(--muted); }
/* floating glass top bar */
.admin-top { margin: 12px 12px 0 0; border-radius: 20px; height: 60px; border: 1px solid var(--glass-brd);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); position: sticky; top: 12px; }
.foot { background: transparent; border: 0; }
/* glass surfaces */
.card, .tbl, .panel, .kpi, .um, .status-row {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd) !important; border-radius: 20px; box-shadow: var(--glass-shadow); }
.card > h2:first-child, .card > input[type=hidden]:first-child + h2 { background: rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.6); border-radius: 20px 20px 0 0; }
.card.row { background: var(--glass); }
/* glossy stat tiles */
.stat { border-radius: 20px; border: 1px solid rgba(255,255,255,.35); backdrop-filter: var(--blur);
  box-shadow: 0 10px 30px rgba(15,40,35,.15), inset 0 1px 0 rgba(255,255,255,.45); }
.stat::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.welcome { border-radius: 24px; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 12px 40px rgba(11,110,79,.25), inset 0 1px 0 rgba(255,255,255,.4); }
/* tables on glass */
th { background: rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.7); }
td { border-bottom: 1px solid rgba(255,255,255,.6); }
tbody tr:nth-child(even) td, tbody tr td { background: transparent; }
tbody tr:hover td { background: rgba(255,255,255,.5); }
.um-head { border-radius: 20px 20px 0 0; background: linear-gradient(120deg, rgba(11,110,79,.92), rgba(20,160,111,.85)); }
.um-table th { background: rgba(255,255,255,.45); }
.pager { border-top: 1px solid rgba(255,255,255,.6); }
.pager .pages { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.5); border-radius: 12px; }
/* inputs & buttons */
input, select, textarea { background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(15,40,35,.06); }
input:focus, select:focus, textarea:focus { background: rgba(255,255,255,.95); border-color: #14a06f; }
.btn, button.btn { border-radius: 12px; box-shadow: 0 4px 14px rgba(11,110,79,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.ghost { background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.9); backdrop-filter: var(--blur); box-shadow: 0 2px 8px rgba(15,40,35,.06), inset 0 1px 0 #fff; }
.pill { backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); }
.flash { background-clip: padding-box; backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.7); border-radius: 14px; }
.flash.ok { background: rgba(209,250,229,.75); } .flash.err { background: rgba(254,226,226,.8); }
/* login */
.login { background: radial-gradient(800px 500px at 15% 20%, rgba(37,211,102,.55), transparent 60%), radial-gradient(800px 600px at 90% 80%, rgba(59,130,246,.45), transparent 60%), radial-gradient(600px 500px at 70% 10%, rgba(168,85,247,.35), transparent 60%), #0f2a24; }
.login .card { border-radius: 24px; background: rgba(255,255,255,.62); border-top: 1px solid var(--glass-brd); box-shadow: 0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 #fff; }
/* client portal: floating glass rail + bars */
.rail { margin: 12px 0 12px 12px; height: calc(100vh - 24px); top: 12px; border-radius: 24px; color: #33423e;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); }
.rail a { color: #33423e; border-left: 0; margin: 2px 8px; border-radius: 14px; }
.rail a:hover { background: rgba(255,255,255,.55); }
.rail a.on { color: #064e3b; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(209,250,229,.75)); box-shadow: 0 4px 14px rgba(11,110,79,.15), inset 0 1px 0 #fff; }
.rail-end button { color: #4b5d58; }
.topbar { margin: 12px 12px 0; border-radius: 20px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); top: 12px; }
.subtabs { margin: 10px 12px 0; border-radius: 16px; background: var(--glass); backdrop-filter: var(--blur); border: 1px solid var(--glass-brd); }
.lc { margin: 12px; border-radius: 20px; overflow: hidden; background: var(--glass-strong); height: calc(100vh - 100px); }
@media (max-width: 820px) { .side { margin: 8px; height: auto; position: static; } .admin-top { margin: 0 8px; } }
@media (max-width: 760px) { .rail { margin: 8px; height: auto; position: static; } .topbar { margin: 8px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .tbl, .panel, .kpi, .um, .side, .rail, .topbar, .admin-top { background: rgba(255,255,255,.92); }
}
.shell { grid-template-columns: 244px 1fr; }
.admin-main main { padding: 20px 20px 40px 16px; }
.admin-top { margin-left: 4px; }
.login .card { background: rgba(255,255,255,.8); }
.login .logo.dark { border-bottom: 0; }
.um-table th, .um-table td { padding: 9px 8px; }


/* ================= Command box (light glass, default) ================= */
.cmd { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; height: 40px; border-radius: 14px;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 2px rgba(15,40,35,.06), 0 2px 10px rgba(15,40,35,.05); transition: box-shadow .2s, border-color .2s; }
.cmd:focus-within { border-color: #14a06f; box-shadow: 0 0 0 4px rgba(20,160,111,.15), 0 6px 24px rgba(20,160,111,.15); background: #fff; }
.cmd-ico { color: #0b6e4f; font-size: 15px; }
.cmd input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0; padding: 0; }
.cmd kbd { font: 11px var(--mono); color: #5d6b65; border: 1px solid #d5dde5; border-radius: 6px; padding: 2px 6px; background: rgba(255,255,255,.8); white-space: nowrap; }
.admin-top { gap: 16px; } .crumb { white-space: nowrap; } .crumb span { color: #0b6e4f; font-weight: 600; }
.theme-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.95); background: rgba(255,255,255,.7); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
body.dark .theme-btn { background: rgba(255,255,255,.06); border-color: rgba(148,197,255,.2); color: #ffd36b; }
.admin-top .actions { gap: 8px; flex-wrap: nowrap; }
@media (max-width: 820px) { .admin-top { flex-wrap: wrap; height: auto !important; padding: 10px 14px; } .cmd { order: 3; max-width: none; flex-basis: 100%; } }
/* ================= v4: AI Command Center (dark glass) ================= */
body.admin.dark, body.dark .login {
  --ink: #e6f1ff; --muted: #8aa0b8; --line: rgba(255,255,255,.1); --panel: rgba(255,255,255,.05);
  --brand: #22d3a6; --brand-soft: rgba(34,211,166,.14); --ok: #34e3b0; --ok-soft: rgba(52,227,176,.14);
  --bad: #ff6b81; --bad-soft: rgba(255,107,129,.14); --warn: #ffc857; --warn-soft: rgba(255,200,87,.14);
  --glass: rgba(16,24,40,.52); --glass-strong: rgba(16,24,40,.72); --glass-brd: rgba(148,197,255,.16);
  --glass-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --neon: 0 0 0 1px rgba(34,211,166,.35), 0 0 24px rgba(34,211,166,.25);
  --g1: linear-gradient(135deg,#0ea5a4,#22d3a6); --g2: linear-gradient(135deg,#2563eb,#38bdf8); --g3: linear-gradient(135deg,#7c3aed,#c084fc); --g4: linear-gradient(135deg,#f97316,#facc15);
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(34,211,166,.22), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(900px 700px at 90% 100%, rgba(168,85,247,.22), transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 40px 40px,
    #060a14;
  background-attachment: fixed;
}
body.admin.dark a { color: #5eead4; }
body.admin.dark h1, body.admin.dark h2, body.admin.dark h3 { color: #f1f7ff; }
body.admin.dark .sub, body.admin.dark .muted, body.admin.dark .hint { color: var(--muted); }
/* sidebar */
body.admin.dark .side { color: var(--ink); }
body.admin.dark .logo { color: #fff; border-bottom-color: var(--line); }
body.admin.dark .logo i { background: linear-gradient(135deg,#22d3a6,#0ea5e9); box-shadow: 0 0 20px rgba(34,211,166,.55); }
body.admin.dark .side-sec { color: #5b7390; }
body.admin.dark .side a { color: #b6c6da; }
body.admin.dark .side a:hover { background: rgba(255,255,255,.06); color: #fff; }
body.admin.dark .side a.on { color: #fff; background: linear-gradient(135deg, rgba(34,211,166,.22), rgba(14,165,233,.14)); border: 1px solid rgba(34,211,166,.4); box-shadow: 0 0 20px rgba(34,211,166,.2), inset 0 1px 0 rgba(255,255,255,.1); }
body.admin.dark .side a.on svg { color: #5eead4; }
body.admin.dark .side .who { border-top-color: var(--line); }
body.admin.dark .who-t b { color: #fff; }
/* top bar + command box */
body.admin.dark .admin-top { gap: 16px; }
body.admin.dark .crumb { white-space: nowrap; } body.admin.dark .crumb span { color: #5eead4; font-weight: 600; letter-spacing: .02em; }
body.dark .cmd { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; height: 40px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(94,234,212,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: box-shadow .2s, border-color .2s; }
body.dark .cmd:focus-within { border-color: #22d3a6; box-shadow: 0 0 0 4px rgba(34,211,166,.15), 0 0 30px rgba(34,211,166,.2); }
body.dark .cmd-ico { color: #5eead4; font-size: 15px; text-shadow: 0 0 10px rgba(94,234,212,.8); }
body.admin.dark .cmd input { border: 0; background: transparent; box-shadow: none; min-height: 0; padding: 0; color: #fff; }
body.admin.dark .cmd input::placeholder { color: #7f93ab; }
body.dark .cmd kbd { font: 11px var(--mono); color: #93a7bf; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 2px 6px; background: rgba(255,255,255,.05); white-space: nowrap; }
/* surfaces */
body.admin.dark .card > h2:first-child, body.admin.dark .card > input[type=hidden]:first-child + h2 { background: rgba(255,255,255,.03); border-bottom-color: var(--line); }
body.admin.dark .card > h2:first-child::before, body.admin.dark .card > input[type=hidden]:first-child + h2::before { background: linear-gradient(180deg,#22d3a6,#38bdf8); box-shadow: 0 0 10px rgba(34,211,166,.7); }
body.admin.dark .stat { border-color: rgba(255,255,255,.15); box-shadow: 0 10px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
body.admin.dark .grid > .stat:nth-child(4n+1) { box-shadow: 0 10px 34px rgba(0,0,0,.4), 0 0 26px rgba(34,211,166,.25), inset 0 1px 0 rgba(255,255,255,.25); }
body.admin.dark .stat b { text-shadow: 0 0 18px rgba(255,255,255,.35); }
body.admin.dark .grid > .stat.red { background: linear-gradient(135deg,#e11d48,#fb7185); }
body.admin.dark .welcome { background: linear-gradient(120deg, rgba(14,165,164,.55), rgba(37,99,235,.45) 60%, rgba(124,58,237,.45)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: var(--blur); box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 40px rgba(34,211,166,.15); }
body.admin.dark .welcome .btn { background: #fff; color: #064e3b; } body.admin.dark .welcome .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
body.admin.dark .kpi .ico { background: rgba(34,211,166,.15); color: #5eead4; }
body.admin.dark .hbar-track { background: rgba(255,255,255,.08); }
body.admin.dark .ylab, body.admin.dark .xlab { color: #7f93ab; }
body.admin.dark .cbox svg line, body.admin.dark .cbox svg path[stroke="#eef2f0"] { stroke: rgba(255,255,255,.08); }
body.admin.dark .list-row { border-bottom-color: var(--line); }
/* tables */
body.admin.dark th { background: rgba(255,255,255,.04); color: #8fb3cf; border-bottom-color: var(--line); }
body.admin.dark td { border-bottom-color: rgba(255,255,255,.06); color: #dbe7f5; }
body.admin.dark tbody tr:hover td { background: rgba(34,211,166,.06); }
body.admin.dark .um-head { background: linear-gradient(120deg, rgba(14,165,164,.5), rgba(37,99,235,.35)); border-bottom: 1px solid var(--line); }
body.admin.dark .um-head .btn.danger { background: #fff; color: #064e3b; }
body.admin.dark .um-table th { background: rgba(255,255,255,.04); }
body.admin.dark .um-table td, body.admin.dark .um-table th { border-top-color: rgba(255,255,255,.06); }
body.admin.dark .pager { border-top-color: var(--line); }
body.admin.dark .pager .pages { background: rgba(255,255,255,.04); border-color: var(--line); }
body.admin.dark .pager .pages a, body.admin.dark .pager .pages b, body.admin.dark .pager .pages span { border-left-color: var(--line); }
body.admin.dark .pager .pages b.on { background: var(--g1); color: #04201a; }
body.admin.dark .pager .pages .off { color: #4f6178; }
/* forms */
body.admin.dark label span, body.admin.dark .field > label { color: #b6c6da; }
body.admin.dark input, body.admin.dark select, body.admin.dark textarea { background: rgba(255,255,255,.05); border: 1px solid rgba(148,197,255,.18); color: #f1f7ff; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
body.admin.dark input::placeholder, body.admin.dark textarea::placeholder { color: #61758e; }
body.admin.dark input:focus, body.admin.dark select:focus, body.admin.dark textarea:focus { background: rgba(255,255,255,.08); border-color: #22d3a6; box-shadow: 0 0 0 4px rgba(34,211,166,.15); }
body.admin.dark select option { background: #0d1524; color: #e6f1ff; }
body.admin.dark input[type=date] { color-scheme: dark; }
body.admin.dark input[type=radio], body.admin.dark input[type=checkbox] { accent-color: #22d3a6; }
body.admin.dark .btn, body.admin.dark button.btn { background: var(--g1); color: #03211a; box-shadow: 0 0 0 1px rgba(34,211,166,.4), 0 6px 20px rgba(34,211,166,.25), inset 0 1px 0 rgba(255,255,255,.35); }
body.admin.dark .btn.ghost { background: rgba(255,255,255,.06); color: #e6f1ff; border: 1px solid rgba(148,197,255,.2); box-shadow: none; }
body.admin.dark .btn.ghost:hover { background: rgba(255,255,255,.1); }
body.admin.dark .btn.danger { background: linear-gradient(135deg,#e11d48,#fb7185); color: #fff; }
body.admin.dark .btn.ok { background: var(--g1); color: #03211a; }
body.admin.dark .pill { border-color: rgba(255,255,255,.12); }
body.admin.dark .pill.gst { background: rgba(56,189,248,.15); color: #7dd3fc; } body.admin.dark .pill.nongst { background: rgba(192,132,252,.15); color: #d8b4fe; }
body.admin.dark .flash.ok { background: rgba(34,211,166,.12); color: #5eead4; border-color: rgba(34,211,166,.35); }
body.admin.dark .flash.err { background: rgba(255,107,129,.12); color: #ff8fa3; border-color: rgba(255,107,129,.35); }
body.admin.dark .banner.warn { background: rgba(255,200,87,.1); } body.admin.dark .banner.bad { background: rgba(255,107,129,.1); }
body.admin.dark pre.code { background: rgba(0,0,0,.4); border: 1px solid var(--line); }
body.admin.dark .secret { background: rgba(255,200,87,.1); color: #ffe08a; }
body.admin.dark .foot { color: #5b7390; }
body.admin.dark details summary { color: #b6c6da; }
body.admin.dark .tip { background: #0d1524; border: 1px solid var(--line); }
/* login */
body.dark .login .card { background: rgba(16,24,40,.6); border: 1px solid rgba(148,197,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(34,211,166,.15), inset 0 1px 0 rgba(255,255,255,.08); }
body.dark .login .logo.dark { color: #fff; } body.dark .login h1 { color: #fff; } body.dark .login .sub { color: var(--muted); }
body.dark .login label span { color: #b6c6da; }
body.dark .login input { background: rgba(255,255,255,.06); border: 1px solid rgba(148,197,255,.2); color: #fff; }
body.dark .login input:focus { background: rgba(255,255,255,.1); border-color: #22d3a6; box-shadow: 0 0 0 4px rgba(34,211,166,.15); }
body.dark .login .btn { background: var(--g1); color: #03211a; box-shadow: 0 6px 20px rgba(34,211,166,.3); }
@media (max-width: 980px) { .cmd kbd { display: none; } }
@media (max-width: 820px) { body.admin.dark .admin-top { flex-wrap: wrap; height: auto; padding: 10px 14px; } body.dark .cmd { order: 3; max-width: none; flex-basis: 100%; } }
.theme-btn svg { width: 18px; height: 18px; color: #0b6e4f; } body.dark .theme-btn svg { color: #ffd36b; }

/* ================= v5: WATI-style green & white (light default) ================= */
body:not(.dark) {
  --brand: #00a884; --brand-dark: #008069; --brand-soft: #d9fdd3; --ok: #00a884; --ok-soft: #d9fdd3;
  --ink: #1f2d3d; --muted: #6b7a8c; --line: #e7ecf1;
  --g1: linear-gradient(135deg,#00a884,#25d366);
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  background: #f0f2f5;
}
body:not(.dark) a { color: #00a884; }
/* sidebar: white, green active */
body:not(.dark) .side, body:not(.dark) .rail { margin: 0; top: 0; height: 100vh; border-radius: 0; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-right: 1px solid #e7ecf1; box-shadow: none; }
body:not(.dark) .shell { grid-template-columns: 240px 1fr; }
body:not(.dark) .logo { border-bottom: 1px solid #eef1f4; height: 64px; }
body:not(.dark) .logo i, body:not(.dark) .rail-logo { background: #00a884; box-shadow: none; color: #fff; }
body:not(.dark) .side-sec { color: #98a4b3; }
body:not(.dark) .side a { color: #4a5868; margin: 1px 12px; border-radius: 8px; border: 0; }
body:not(.dark) .side a svg { opacity: 1; color: #8794a4; }
body:not(.dark) .side a:hover { background: #f3f6f9; color: #1f2d3d; }
body:not(.dark) .side a.on { background: #d9fdd3; color: #008069; font-weight: 600; box-shadow: none; border: 0; position: relative; }
body:not(.dark) .side a.on::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: #00a884; }
body:not(.dark) .side a.on svg { color: #00a884; }
body:not(.dark) .side .who { border-top: 1px solid #eef1f4; }
body:not(.dark) .who-av { background: #00a884; }
body:not(.dark) .rail a { color: #4a5868; }
body:not(.dark) .rail a:hover { background: #f3f6f9; }
body:not(.dark) .rail a.on { background: #d9fdd3; color: #008069; box-shadow: none; }
body:not(.dark) .rail a.on svg { color: #00a884; }
/* top bars: flat white */
body:not(.dark) .admin-top, body:not(.dark) .topbar { margin: 0; border-radius: 0; top: 0; height: 64px; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-bottom: 1px solid #e7ecf1; box-shadow: none; padding: 0 24px; }
body:not(.dark) .topbar { height: auto; padding: 12px 24px; }
body:not(.dark) .subtabs { margin: 0; border-radius: 0; background: #fff; backdrop-filter: none; border: 0; border-bottom: 1px solid #e7ecf1; }
body:not(.dark) .subtabs a.on { color: #00a884; border-bottom-color: #00a884; }
body:not(.dark) .crumb span { color: #00a884; }
body:not(.dark) .cmd { background: #f0f2f5; border: 1px solid #e3e8ee; box-shadow: none; border-radius: 10px; }
body:not(.dark) .cmd:focus-within { background: #fff; border-color: #00a884; box-shadow: 0 0 0 3px rgba(0,168,132,.15); }
body:not(.dark) .cmd-ico { color: #00a884; }
body:not(.dark) .theme-btn { background: #f0f2f5; border: 1px solid #e3e8ee; border-radius: 10px; }
body:not(.dark) .theme-btn svg { color: #4a5868; }
body:not(.dark) .admin-main main { padding: 24px; }
body:not(.dark) .foot { color: #98a4b3; }
/* cards: white, thin border */
body:not(.dark) .card, body:not(.dark) .tbl, body:not(.dark) .panel, body:not(.dark) .kpi, body:not(.dark) .um, body:not(.dark) .status-row {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #e7ecf1 !important; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
body:not(.dark) .card > h2:first-child, body:not(.dark) .card > input[type=hidden]:first-child + h2 { background: #fff; border-bottom: 1px solid #eef1f4; border-radius: 12px 12px 0 0; padding-left: 18px; }
body:not(.dark) .card > h2:first-child::before, body:not(.dark) .card > input[type=hidden]:first-child + h2::before { display: none; }
body:not(.dark) .card.row { background: #fff; }
/* stats: white tiles with green number + coloured top line */
body:not(.dark) .stat { background: #fff; color: var(--ink); border: 1px solid #e7ecf1; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); backdrop-filter: none; }
body:not(.dark) .stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: #00a884; }
body:not(.dark) .stat::after { display: none; }
body:not(.dark) .stat span, body:not(.dark) .stat small { color: #6b7a8c; }
body:not(.dark) .stat b { color: #1f2d3d; text-shadow: none; }
body:not(.dark) .grid > .stat:nth-child(n) { background: #fff; }
body:not(.dark) .grid > .stat:nth-child(4n+2)::before { background: #3b82f6; } body:not(.dark) .grid > .stat:nth-child(4n+3)::before { background: #a855f7; } body:not(.dark) .grid > .stat:nth-child(4n+4)::before { background: #f59e0b; }
body:not(.dark) .grid > .stat.red::before { background: #ef4444; } body:not(.dark) .grid > .stat.red b { color: #dc2626; }
body:not(.dark) .grid > .stat:first-child b { color: #00a884; }
body:not(.dark) .stat.hero { background: #00a884 !important; color: #fff; } body:not(.dark) .stat.hero b, body:not(.dark) .stat.hero span, body:not(.dark) .stat.hero small { color: #fff !important; }
body:not(.dark) .kpi .ico { background: #d9fdd3; color: #00a884; }
body:not(.dark) .welcome { background: linear-gradient(120deg,#00a884,#25d366); border: 0; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,168,132,.2); }
body:not(.dark) .welcome::after { background: rgba(255,255,255,.12); }
body:not(.dark) .welcome .btn { background: #fff; color: #008069; box-shadow: none; } body:not(.dark) .welcome .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
/* tables */
body:not(.dark) th { background: #f8fafb; color: #6b7a8c; border-bottom: 1px solid #e7ecf1; }
body:not(.dark) td { border-bottom: 1px solid #eef1f4; }
body:not(.dark) tbody tr:hover td { background: #f0faf3; }
body:not(.dark) .um-head { background: #fff; border-bottom: 1px solid #eef1f4; border-radius: 12px 12px 0 0; }
body:not(.dark) .um-head h2 { color: #1f2d3d; }
body:not(.dark) .um-head .btn.danger { background: #00a884; color: #fff; }
body:not(.dark) .um-table th { background: #f8fafb; }
body:not(.dark) .pager { border-top: 1px solid #eef1f4; }
body:not(.dark) .pager .pages { background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; }
body:not(.dark) .pager .pages b.on { background: #00a884; }
/* forms & buttons */
body:not(.dark) input, body:not(.dark) select, body:not(.dark) textarea { background: #fff; border: 1px solid #dfe5eb; border-radius: 8px; box-shadow: none; }
body:not(.dark) input:focus, body:not(.dark) select:focus, body:not(.dark) textarea:focus { border-color: #00a884; box-shadow: 0 0 0 3px rgba(0,168,132,.15); }
body:not(.dark) input[type=radio], body:not(.dark) input[type=checkbox] { accent-color: #00a884; }
body:not(.dark) .btn, body:not(.dark) button.btn { background: #00a884; color: #fff; border-radius: 8px; box-shadow: none; }
body:not(.dark) .btn:hover { background: #008069; filter: none; box-shadow: none; }
body:not(.dark) .btn.ghost { background: #fff; color: #1f2d3d; border: 1px solid #dfe5eb; backdrop-filter: none; box-shadow: none; }
body:not(.dark) .btn.ghost:hover { background: #f0f2f5; }
body:not(.dark) .btn.ok { background: #00a884; }
body:not(.dark) .btn.danger { background: #ef4444; }
body:not(.dark) .pill { border: 0; backdrop-filter: none; }
body:not(.dark) .pill.active, body:not(.dark) .pill.paid, body:not(.dark) .pill.credit { background: #d9fdd3; color: #008069; }
body:not(.dark) .flash { backdrop-filter: none; border: 1px solid transparent; border-radius: 10px; }
body:not(.dark) .flash.ok { background: #d9fdd3; color: #008069; border-color: #b5ecc0; }
body:not(.dark) .tb-wallet { background: #d9fdd3; color: #1f2d3d; } body:not(.dark) .tb-wallet b { color: #008069; }
/* login: white card on soft green */
body:not(.dark) .login { background: linear-gradient(160deg,#d9fdd3 0%,#ffffff 55%,#f0f2f5 100%); }
body:not(.dark) .login .card { background: #fff; border: 1px solid #e7ecf1; box-shadow: 0 10px 40px rgba(16,24,40,.08); border-radius: 16px; border-top: 4px solid #00a884; }
body:not(.dark) .login .btn { background: #00a884; }
@media (max-width: 820px) { body:not(.dark) .side { height: auto; position: static; } }
@media (max-width: 760px) { body:not(.dark) .rail { height: auto; position: static; } }

/* WhatsApp touches */
body:not(.dark) .logo i, body:not(.dark) .rail-logo, body:not(.dark) .who-av { background: #25d366; }
body:not(.dark) .welcome { background: linear-gradient(120deg,#008069 0%,#00a884 70%,#25d366 130%); }
body:not(.dark) .welcome::after { background: rgba(255,255,255,.10); }
body:not(.dark) .admin-top { border-top: 4px solid #00a884; }
body:not(.dark) .topbar { border-top: 4px solid #00a884; }
body:not(.dark) .login { background: linear-gradient(180deg,#00a884 0,#00a884 220px,#f0f2f5 220px); }
body:not(.dark) .login .card { border-top: 0; box-shadow: 0 17px 50px rgba(11,20,26,.19); }
body:not(.dark) .bubble.out { background: #d9fdd3; }

/* ================= client portal v2: same shell as admin ================= */
body.pv2 { display: block; }
body.pv2 .shell { grid-template-columns: 240px 1fr; }
body.pv2 .logo { text-decoration: none; }
body.pv2 .side a em.badge { margin-left: auto; background: #25d366; color: #fff; font-style: normal; font-weight: 700; font-size: 11px; border-radius: 99px; padding: 0 7px; }
body.pv2 .admin-top .actions { gap: 12px; }
body.pv2 .admin-top .tb-item { white-space: nowrap; }
body.pv2 .subtabs { padding: 0 24px; }
body.pv2 main { max-width: 1280px; }
body.pv2 main.wide { max-width: none; padding: 0; }
body.pv2 .lc { margin: 0; border-radius: 0; height: calc(100vh - 64px - 49px); }
body.pv2:not(.dark) .side { background: #fff; }
/* dark mode for the portal */
body.pv2.dark { --ink: #e6f1ff; --muted: #8aa0b8; --line: rgba(255,255,255,.1); color: var(--ink); background: #0b141a; }
body.pv2.dark .side, body.pv2.dark .admin-top, body.pv2.dark .subtabs { background: #111b21; border-color: rgba(255,255,255,.08); box-shadow: none; margin: 0; border-radius: 0; }
body.pv2.dark .side a { color: #c3d0da; } body.pv2.dark .side a.on { background: rgba(0,168,132,.18); color: #fff; }
body.pv2.dark .logo, body.pv2.dark .who-t b, body.pv2.dark h1, body.pv2.dark h2 { color: #fff; }
body.pv2.dark .card, body.pv2.dark .tbl, body.pv2.dark .panel, body.pv2.dark .kpi, body.pv2.dark .stat, body.pv2.dark .status-row { background: #111b21; border-color: rgba(255,255,255,.08) !important; color: var(--ink); }
body.pv2.dark th { background: #1a252c; color: #9fb3c2; } body.pv2.dark td { border-color: rgba(255,255,255,.06); }
body.pv2.dark input, body.pv2.dark select, body.pv2.dark textarea { background: #1a252c; border-color: rgba(255,255,255,.12); color: #fff; }
body.pv2.dark .tb-wallet { background: rgba(0,168,132,.18); color: #fff; } body.pv2.dark .tb-wallet b { color: #5eead4; }
@media (max-width: 820px) { body.pv2 .shell { grid-template-columns: 1fr; } body.pv2 .side { position: static; height: auto; } body.pv2 .admin-top .actions { flex-wrap: wrap; } }
body:not(.dark) .subtabs a { color: #6b7a8c; } body:not(.dark) .subtabs a.on { color: #008069; }
body:not(.dark) .side a, body:not(.dark) .side a:hover { text-decoration: none; }

/* ===== Send message: steps + live WhatsApp phone preview ===== */
.send-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.send-form { padding: 6px 22px 18px; }
.step { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px dashed #e3e8ed; }
.step:last-of-type { border-bottom: 0; }
.step-n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #25d366; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; margin-top: 1px; }
.step-b { flex: 1; min-width: 0; }
.step-b h3 { margin: 3px 0 12px; font-size: 15px; }
.step-b > label, .step-b .row { margin-bottom: 10px; }
.step-b textarea[data-numbers] { font-family: var(--mono); font-size: 13px; min-height: 150px; }
.tpl-meta { font-size: 13px; } .tpl-meta .banner { margin-top: 8px; }
.num-count { display: flex; gap: 0; margin: -4px 0 6px; justify-content: flex-end; }
.num-count .nc { font-size: 12px; color: #fff; padding: 3px 10px; }
.num-count .nc b { font-weight: 700; }
.num-count .t { background: #2a8bd6; border-radius: 6px 0 0 6px; } .num-count .d { background: #f0a020; } .num-count .i { background: #e04848; border-radius: 0 6px 6px 0; }
.seg { display: inline-flex; border: 1px solid #d6dde3; border-radius: 10px; padding: 3px; background: #f4f6f8; margin-bottom: 12px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: 7px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; color: #55616d; margin: 0; }
.seg input:checked + span { background: #fff; color: #0b6e4f; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg input:focus-visible + span { outline: 2px solid #25d366; }
.sched { background: #f6fbf8; border: 1px solid #d8eee2; border-radius: 10px; padding: 12px 14px 4px; margin-bottom: 12px; }
.sched .row { max-width: 320px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.chip { border: 1px solid #cfe3d8; background: #fff; color: #0b6e4f; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.chip:hover, .chip.on { background: #25d366; border-color: #25d366; color: #fff; }
.send-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid #eef1f4; }
.btn.big { min-height: 44px; padding: 10px 22px; font-size: 15px; border-radius: 10px; }
.drop { position: relative; border: 2px dashed #b8dcc8; border-radius: 12px; background: #f7fcf9; padding: 26px 16px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; margin-bottom: 8px; }
.drop:hover, .drop.over { background: #ecf8f1; border-color: #25d366; }
.drop.done { border-style: solid; border-color: #25d366; }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-ico { width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 20px; }
.drop b { display: block; font-size: 15px; } .drop small { color: var(--muted); }
.map { margin-top: 10px; }
.tbl.mini { box-shadow: none; margin-bottom: 4px; } .tbl.mini th, .tbl.mini td { padding: 6px 10px; font-size: 12px; }
.confirm { border-top: 3px solid #25d366 !important; }
.confirm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.confirm-head h2 { margin: 0; } .confirm-head .sub { margin: 2px 0 0; }

.phone-col { position: sticky; top: 84px; }
.phone { width: 300px; margin: 0 auto; border-radius: 34px; border: 9px solid #1d252c; background: #1d252c; box-shadow: 0 18px 40px rgba(20, 40, 30, .22); overflow: hidden; }
.ph-top { background: #075e54; color: #fff; display: flex; align-items: center; gap: 9px; padding: 22px 12px 10px; }
.ph-top b { display: block; font-size: 14px; line-height: 1.2; } .ph-top small { opacity: .8; font-size: 11px; }
.ph-back { font-size: 22px; line-height: 1; opacity: .9; }
.ph-av { width: 32px; height: 32px; border-radius: 50%; background: #25d366; display: grid; place-items: center; font-weight: 700; }
.ph-chat { background: #efeae2; background-image: radial-gradient(#e2dbd0 1px, transparent 1px); background-size: 14px 14px; min-height: 380px; max-height: 470px; overflow: auto; padding: 10px 10px 14px; }
.ph-day { text-align: center; margin: 4px 0 10px; } .ph-day::before { content: 'TODAY'; display: none; }
.ph-day { font-size: 10px; color: #54656f; } 
.ph-bubble { background: #fff; border-radius: 0 9px 9px 9px; padding: 7px 9px 4px; max-width: 92%; box-shadow: 0 1px .5px rgba(0,0,0,.13); font-size: 13.5px; line-height: 1.4; color: #111b21; position: relative; word-wrap: break-word; }
.ph-h { font-weight: 700; margin-bottom: 4px; }
.ph-b { white-space: pre-wrap; }
.ph-f { color: #8696a0; font-size: 12px; margin-top: 5px; }
.ph-t { text-align: right; color: #8696a0; font-size: 10.5px; margin-top: 2px; }
.ph-var { background: #fff3c4; color: #8a6100; border-radius: 4px; padding: 0 3px; font-size: 12px; }
.ph-btn { background: #fff; max-width: 92%; margin-top: 3px; border-radius: 9px; text-align: center; color: #027eb5; font-size: 13.5px; padding: 8px; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.ph-empty { text-align: center; color: #54656f; font-size: 13px; background: #fff8d6; border-radius: 9px; padding: 14px; margin: 30px 8px; }
.ph-input { background: #f0f2f5; padding: 9px 10px 14px; } .ph-input span { display: block; background: #fff; border-radius: 20px; padding: 7px 14px; color: #8696a0; font-size: 13px; }
body.dark .send-form .step { border-color: rgba(255,255,255,.08); }
body.dark .seg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } body.dark .seg input:checked + span { background: rgba(37,211,102,.18); color: #7ee2a8; }
body.dark .sched, body.dark .drop { background: rgba(37,211,102,.05); border-color: rgba(37,211,102,.3); }
body.dark .chip { background: transparent; color: #7ee2a8; border-color: rgba(37,211,102,.35); }
@media (max-width: 1100px) { .send-wrap { grid-template-columns: 1fr; } .phone-col { position: static; } }

/* Scheduled / reports / queue */
.sched-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; }
.sched-date { text-align: center; border-radius: 10px; background: #e7f8ee; color: #0b6e4f; padding: 8px 4px; line-height: 1.1; }
.sched-date b { display: block; font-size: 22px; } .sched-date small { font-size: 11px; text-transform: uppercase; font-weight: 700; }
.sched-card h3 { margin: 0 0 3px; font-size: 15px; }
.sched-card .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sched-card .acts form { display: flex; gap: 6px; align-items: center; } .sched-card .acts input[type=datetime-local] { width: auto; min-height: 32px; padding: 4px 8px; }
.countdown { font-weight: 700; color: #0b6e4f; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.presets a { border: 1px solid #d6dde3; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #55616d; background: #fff; }
.presets a.on, .presets a:hover { background: #25d366; border-color: #25d366; color: #fff; text-decoration: none; }
body.dark .presets a { background: transparent; color: #c9d4dc; border-color: rgba(255,255,255,.15); }
.rate { font-size: 11px; color: var(--muted); display: block; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.on { background: #25d366; box-shadow: 0 0 0 4px rgba(37,211,102,.18); } .dot.off { background: #b0b9c1; } .dot.bad { background: #e04848; box-shadow: 0 0 0 4px rgba(224,72,72,.15); }
.grid > .stat.warn { border-left-color: #f0a020; } .grid > .stat.ok { border-left-color: #25d366; }
@media (max-width: 700px) { .sched-card { grid-template-columns: 60px 1fr; } .sched-card .acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* Message box with fill-in blanks */
.msgbox { background: #fff; border: 1px solid #d6dde3; border-left: 4px solid #25d366; border-radius: 10px; padding: 12px 14px; line-height: 2.1; font-size: 14.5px; color: #111b21; margin-bottom: 6px; }
.msgbox .mb-b { white-space: pre-wrap; }
.msgbox .mb-h { font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.msgbox .mb-f { color: #8696a0; font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
.msgbox.empty { color: var(--muted); border-left-color: #d6dde3; line-height: 1.5; background: #fafbfc; }
.msgbox .vin { display: inline-block; width: auto; min-width: 8ch; max-width: 100%; min-height: 0; height: 30px; padding: 2px 8px; margin: 0 2px; border: 1px dashed #25d366; background: #fff8d6; border-radius: 6px; font: inherit; font-size: 14px; vertical-align: baseline; }
.msgbox .vin:focus { border-style: solid; background: #fff; }
.msgbox .vchip { background: #e7f8ee; color: #0b6e4f; border-radius: 5px; padding: 1px 6px; font-weight: 600; font-size: 13px; }
body.dark .msgbox { background: rgba(255,255,255,.04); color: inherit; border-color: rgba(255,255,255,.12); border-left-color: #25d366; }
body.dark .msgbox .vin { background: rgba(255,248,214,.12); color: inherit; }

/* data table: search, sort, paging (SMS usage summary) */
.dt-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dt-bar input[type=search] { max-width: 280px; }
.dt-size { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0; }
.dt-size select { width: auto; }
.dt th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt th.sortable::after { content: ' ⇅'; opacity: .35; font-size: 11px; }
.dt th[aria-sort=ascending]::after { content: ' ▲'; opacity: .9; } .dt th[aria-sort=descending]::after { content: ' ▼'; opacity: .9; }
.dt tfoot td { border-top: 2px solid var(--line); background: rgba(127,127,127,.06); }
.dt .tbl { margin-bottom: 10px; }
.dt-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.dt-pager { display: flex; gap: 4px; flex-wrap: wrap; }
.dt-pager button { border: 1px solid var(--line); background: var(--panel); color: inherit; border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.dt-pager button.on { background: #25d366; border-color: #25d366; color: #fff; }
.dt-pager button:disabled { opacity: .45; cursor: default; }
.dt-pager span { padding: 5px 4px; }

/* sent WhatsApp log */
table.wl td { vertical-align: top; }
.wl .wl-text { max-width: 380px; }
.wl-tog { width: 24px; height: 24px; border-radius: 50%; border: 0; background: #25d366; color: #fff; font-weight: 700; line-height: 1; cursor: pointer; }
.wl-row.st-failed .wl-tog { background: var(--bad); }
.wl-row.st-failed td { background: rgba(208,59,59,.05); } .wl-row.st-delivered td, .wl-row.st-read td { background: rgba(37,211,102,.05); }
.wl-row.open td { border-bottom-color: transparent; }
.wl-detail > td { background: rgba(127,127,127,.04); padding: 8px 14px 14px 48px; }
.wl-kv { width: auto; min-width: 60%; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.wl-kv th { text-align: right; width: 170px; white-space: nowrap; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 13px; }
.wl-kv th, .wl-kv td { padding: 6px 12px; }
.wl-msg { white-space: pre-wrap; margin: 0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; max-width: 760px; }
.wl-pager a, .wl-pager span { border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-size: 13px; color: inherit; background: var(--panel); }
.wl-pager span { border: 0; background: none; } .wl-pager a.on { background: #25d366; border-color: #25d366; color: #fff; } .wl-pager a:hover { text-decoration: none; border-color: #25d366; }
/* ===== Auth (sign in / sign up) — split screen ===== */
body.auth-body { margin: 0; background: #f4f7fb; }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-side { position: relative; overflow: hidden; isolation: isolate; background: #071226; color: #fff; padding: 44px 56px; display: flex; flex-direction: column; gap: 36px; }
.auth-side::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(40% 40% at 80% 20%, rgba(0,122,239,.55), transparent 70%), radial-gradient(35% 35% at 20% 85%, rgba(37,211,102,.38), transparent 70%), radial-gradient(30% 30% at 60% 60%, rgba(185,240,46,.18), transparent 70%); }
.auth-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.auth-brand i { font-style: normal; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #007aef, #25d366); box-shadow: 0 10px 24px -10px #25d366; }
.auth-brand.m { display: none; color: #0b1628; margin-bottom: 18px; }
.auth-pitch { margin-top: auto; }
.auth-pitch h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0; font-weight: 800; }
.auth-pitch h2 span { background: linear-gradient(100deg, #6cc4ff, #8ff0b5 55%, #c6f135); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-pitch p { color: #b8c7dc; font-size: 1.05rem; margin: 16px 0 0; max-width: 40ch; }
.auth-pitch ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.auth-pitch li { display: flex; align-items: center; gap: 10px; color: #dbe6f5; font-weight: 600; font-size: .95rem; }
.auth-pitch li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(37,211,102,.18); color: #5ee08f; font-size: .72rem; font-weight: 800; flex: none; }
.auth-chat { max-width: 360px; background: #0b141a; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.auth-chat .b { max-width: 85%; padding: 8px 11px; border-radius: 12px; font-size: .85rem; line-height: 1.4; color: #e9edef; }
.auth-chat .in { background: #1f2c34; border-top-left-radius: 3px; }
.auth-chat .out { background: #005c4b; justify-self: end; border-top-right-radius: 3px; }
.auth-chat small { display: block; font-size: .66rem; font-weight: 800; color: #6ee7c8; }
.auth-chat em { display: block; text-align: right; font-style: normal; font-size: .62rem; color: #53bdeb; letter-spacing: -0.2em; }
.auth-gift { align-self: flex-start; font-size: .9rem; color: #0b1628; background: #c6f135; padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 16px; }
.auth-card { width: 100%; max-width: 430px; background: #fff; border: 1px solid #e3e9f2; border-radius: 26px; padding: 36px 34px; box-shadow: 0 30px 70px -40px rgba(5,13,31,.45); }
.auth-card h1 { font-size: 1.85rem; letter-spacing: -0.03em; margin: 0; color: #0b1628; }
.auth-card .sub { margin: 6px 0 22px; color: #556479; }
.auth-card label span { font-weight: 600; color: #33415a; }
.auth-card input { border-radius: 12px; padding: 12px 14px; border: 1.5px solid #dfe6f0; background: #f9fbfe; transition: border-color .15s, box-shadow .15s; }
.auth-card input:focus { outline: none; border-color: #007aef; background: #fff; box-shadow: 0 0 0 4px rgba(0,122,239,.15); }
.auth-btn { width: 100%; padding: 13px; border-radius: 12px; font-size: 1rem; font-weight: 700; border: 0; background: linear-gradient(120deg, #007aef, #00b7f9); color: #fff; box-shadow: 0 14px 30px -14px rgba(0,122,239,.9); cursor: pointer; }
.auth-btn:hover { filter: brightness(1.06); }
.auth-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid #edf1f6; text-align: center; color: #556479; font-size: .92rem; }
.auth-alt a { color: #007aef; font-weight: 700; text-decoration: none; }
.auth-offer { display: block; background: linear-gradient(120deg, #ecfccb, #dcfce7); border: 1px solid #bbf7d0; color: #14532d; border-radius: 14px; padding: 12px 14px; margin: -6px 0 18px; font-size: .95rem; }
.auth-offer small { display: block; margin-top: 2px; color: #3f6212; font-size: .8rem; }
.auth-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-foot { color: #8a97ab; font-size: .8rem; margin: 0; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-brand.m { display: flex; }
  .auth-main { padding: 28px 16px; }
  .auth-card { padding: 28px 22px; }
}
@media (max-width: 460px) { .auth-card .row2 { grid-template-columns: 1fr; } }
body.dark.auth-body { background: #070f1d; }
/* per-domain logos */
.auth-logo { height: 34px; width: auto; display: block; }
.logo img.brand-mark { width: 30px; height: 30px; object-fit: contain; flex: none; }