:root{
  --ink:#14182A;            /* sidebar / deep text */
  --ink-2:#1C2138;
  --paper:#F6F7FB;          /* app background */
  --card:#FFFFFF;
  --line:#E7E9F2;
  --muted:#6B7186;
  --text:#22263A;
  --primary:#5B5BD6;        /* default brand (overridable per agency) */
  --primary-700:#4A48C2;
  --amber:#F5A524;
  --green:#1FB672;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,24,42,.04), 0 8px 24px rgba(20,24,42,.05);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:14.5px; line-height:1.5;
}
h1,h2,h3,h4,h5,.brand-font{font-family:"Plus Jakarta Sans","Inter",sans-serif; letter-spacing:-.01em;}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Auth screens ---------- */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;}
.auth-aside{background:radial-gradient(120% 120% at 0% 0%, var(--ink-2), var(--ink)); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between;}
.auth-aside .pitch{font-size:30px; font-weight:700; line-height:1.25; max-width:460px;}
.auth-aside .sub{color:#AAB0C9; max-width:420px; margin-top:14px;}
.channel-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px}
.chip{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:8px 12px; border-radius:999px; font-size:13px}
.auth-main{display:flex; align-items:center; justify-content:center; padding:32px}
.auth-card{width:100%; max-width:400px}
@media(max-width:880px){ .auth-wrap{grid-template-columns:1fr} .auth-aside{display:none} }

/* ---------- App shell ---------- */
.shell{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.sidebar{background:var(--ink); color:#C9CEE6; padding:18px 14px; position:sticky; top:0; height:100vh; overflow:auto}
.sidebar .logo{display:flex; align-items:center; gap:10px; padding:6px 8px 16px; color:#fff; font-weight:700; font-family:"Plus Jakarta Sans"}
.sidebar .logo img{height:30px; width:auto; border-radius:7px; background:#fff; object-fit:contain}
.sidebar .logo .mark{height:30px;width:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#8E8BF5);display:grid;place-items:center;color:#fff;font-weight:800}
.nav-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#5C6488; margin:16px 10px 6px}
.nav-link2{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; color:#C9CEE6; font-weight:500; margin-bottom:2px}
.nav-link2:hover{background:rgba(255,255,255,.05); color:#fff; text-decoration:none}
.nav-link2.active{background:linear-gradient(90deg, rgba(91,91,214,.22), rgba(91,91,214,.05)); color:#fff; box-shadow:inset 2px 0 0 var(--primary)}
.nav-link2 .ic{width:18px; text-align:center; opacity:.9}
.nav-link2 .pill{margin-left:auto; background:var(--amber); color:#3a2600; font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{display:flex; align-items:center; gap:16px; padding:14px 26px; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.topbar .page-title{font-weight:700; font-size:18px}
.topbar .spacer{flex:1}
.pending-badge{display:inline-flex; align-items:center; gap:8px; background:#FFF7E8; color:#9A6700; border:1px solid #F6E3B8; padding:6px 12px; border-radius:999px; font-weight:600; font-size:13px}
.pending-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--amber); box-shadow:0 0 0 0 rgba(245,165,36,.6); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,165,36,.55)}70%{box-shadow:0 0 0 8px rgba(245,165,36,0)}100%{box-shadow:0 0 0 0 rgba(245,165,36,0)}}
.avatar{height:34px;width:34px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}

.content{padding:26px; max-width:1180px; width:100%}

/* ---------- Cards / KPIs ---------- */
.card2{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card2 .hd{padding:16px 18px; border-bottom:1px solid var(--line); font-weight:700; display:flex; align-items:center; gap:10px}
.card2 .bd{padding:18px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px}
@media(max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} .shell{grid-template-columns:1fr} .sidebar{position:fixed; z-index:50; width:248px; transform:translateX(-100%); transition:.2s} .sidebar.open{transform:none} }
.kpi{padding:18px}
.kpi .label{color:var(--muted); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.kpi .value{font-size:30px; font-weight:800; font-family:"Plus Jakarta Sans"; margin-top:6px}
.kpi .sub{color:var(--muted); font-size:12.5px; margin-top:4px}

/* ---------- Channel badges ---------- */
.ch{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; color:#fff}
.ch .g{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.85}

/* ---------- Inbox ---------- */
.inbox{display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); min-height:560px}
.conv-list{border-right:1px solid var(--line); overflow:auto; max-height:72vh}
.conv{display:flex; gap:11px; padding:13px 15px; border-bottom:1px solid var(--line); cursor:pointer; border-left:3px solid transparent}
.conv:hover{background:#FAFBFF}
.conv.active{background:#F3F4FE; border-left-color:var(--primary)}
.conv .who{font-weight:600}
.conv .snippet{color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:210px}
.conv .meta{margin-left:auto; text-align:right; font-size:11px; color:var(--muted)}
.thread{display:flex; flex-direction:column; max-height:72vh}
.thread .hdr{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.thread .body{flex:1; overflow:auto; padding:20px; background:#FBFBFE}
.bubble{max-width:72%; padding:10px 13px; border-radius:14px; margin-bottom:12px; font-size:14px; line-height:1.45}
.bubble.in{background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px}
.bubble.out{background:var(--primary); color:#fff; margin-left:auto; border-bottom-right-radius:4px}
.bubble.out.auto{background:#EDEDFB; color:#3A37A8; border:1px dashed #BFBDF2}
.bubble .t{font-size:10.5px; opacity:.65; margin-top:5px}
.composer{padding:12px; border-top:1px solid var(--line); display:flex; gap:10px}
.composer textarea{flex:1; resize:none; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit}
.empty-thread{flex:1; display:grid; place-items:center; color:var(--muted); text-align:center}

/* ---------- Tables ---------- */
.table2{width:100%; border-collapse:collapse}
.table2 th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line)}
.table2 td{padding:12px 14px; border-bottom:1px solid var(--line)}
.table2 tr:last-child td{border-bottom:0}

/* ---------- Buttons / forms (bootstrap overrides) ---------- */
.btn-primary{background:var(--primary); border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-700); border-color:var(--primary-700)}
.btn-outline-primary{color:var(--primary); border-color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary); border-color:var(--primary)}
.form-control:focus,.form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(91,91,214,.15)}
.badge-status{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px}
.s-pending{background:#FFF7E8; color:#9A6700}
.s-open{background:#E8F1FF; color:#1F5FBF}
.s-closed{background:#ECEEF5; color:#5A6072}
.s-replied{background:#E7F8F0; color:#137C53}

.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);border:0;margin:18px 0}
.menu-btn{display:none;background:none;border:0;font-size:22px;color:var(--text)}
@media(max-width:900px){.menu-btn{display:inline-block}}

/* ---------------- Plans / Upgrade ---------------- */
.upgrade-wrap{max-width:980px;margin:0 auto}
.plan-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;height:100%;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.plan-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,24,42,.10)}
.plan-card.plan-pro{border-color:var(--primary);box-shadow:0 12px 36px rgba(91,91,214,.18)}
.plan-card.is-current{outline:2px solid var(--primary);outline-offset:2px}
.plan-flag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#EEF0FF;color:var(--primary);padding:4px 10px;border-radius:999px}
.plan-flag.flag-pop{background:var(--primary);color:#fff}
.plan-name{font-family:var(--display);font-weight:700;font-size:20px}
.plan-price{font-family:var(--display);font-weight:800;font-size:40px;margin:6px 0 2px;line-height:1}
.plan-price span{font-size:15px;font-weight:600;color:var(--muted)}
.plan-feats{list-style:none;padding:0;margin:16px 0 20px;display:grid;gap:9px}
.plan-feats li{font-size:14px;color:var(--text)}

/* ---------------- Master: agency requests ---------------- */
.req-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:4px 0 10px}
.req-main{min-width:0}
.req-name{font-weight:700;font-family:var(--display);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req-meta{font-size:13px;margin-top:3px}
.req-actions{display:flex;gap:8px;flex-shrink:0}

/* ---------------- Connect cards / WhatsApp QR ---------------- */
.conn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:768px){.conn-grid{grid-template-columns:1fr}}
.conn-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.conn-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.conn-dot{width:14px;height:14px;border-radius:50%;margin-top:5px;flex-shrink:0}
.conn-title{font-weight:700;font-family:var(--display)}
.conn-desc{font-size:13px;margin-top:1px}
.qr-box{display:flex;gap:14px;background:#F8FAFC;border:1px solid var(--line);border-radius:12px;padding:12px}
@media (max-width:520px){.qr-box{flex-direction:column}}
.qr-frame{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;flex-shrink:0;height:max-content}
.qr-steps ol{padding-left:18px;margin:6px 0}
.qr-steps li{font-size:13px;margin-bottom:3px}