:root {
  --wa: #128c7e; --wa-dark: #075e54; --wa-soft: #e7f5f2;
  --ok: #1a9e5c; --bad: #d64545; --info: #2f6fdb; --warn: #c98a00;
  --ink: #1f2937; --muted: #6b7280; --line: #e6e9ee; --bg: #f4f6f9;
}
body { background: var(--bg); color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
main { min-width: 0; }
a { color: var(--wa); }

/* sidebar */
.layout { min-height: 100vh; }
.sidebar { flex-shrink: 0; width: 240px; min-height: 100vh; background: linear-gradient(180deg, #0b4d45 0%, #073b35 100%); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { color: #fff; font-weight: 600; font-size: 1.05rem; padding: 1.1rem 1rem; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.logo { width: 34px; height: 34px; border-radius: 10px; background: #25d366; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.sidebar nav { padding: .6rem; flex: 1; }
.sidebar nav a { color: #cfe5e0; text-decoration: none; display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: .5rem; font-size: .93rem; margin-bottom: 2px; }
.sidebar nav a i { font-size: 1.05rem; opacity: .85; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.active { background: rgba(37,211,102,.18); color: #fff; box-shadow: inset 3px 0 0 #25d366; }
.who { color: #fff; padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.credit-pill { display: inline-flex; gap: .35rem; align-items: center; background: rgba(255,255,255,.12); border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; }

/* page */
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-head h4, .page-head h3 { margin: 0; font-weight: 600; }
.card { border-radius: .8rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; }
.btn-wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.btn-wa:hover, .btn-wa:focus { background: var(--wa-dark); color: #fff; border-color: var(--wa-dark); }
.btn-outline-wa { color: var(--wa); border-color: var(--wa); background: #fff; }
.btn-outline-wa:hover, .btn-check:checked + .btn-outline-wa { background: var(--wa-soft); color: var(--wa-dark); border-color: var(--wa); box-shadow: 0 0 0 2px var(--wa) inset; }
.btn-check + .btn-outline-wa { text-align: left; }
.form-control:focus, .form-select:focus { border-color: var(--wa); box-shadow: 0 0 0 .2rem rgba(18,140,126,.15); }
.form-check-input:checked { background-color: var(--wa); border-color: var(--wa); }
.table { --bs-table-bg: transparent; }
.table td, .table th { vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; border-bottom-width: 1px; }

/* KPI cards */
.kpi .card-body { padding: 1rem 1.1rem; }
.kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.kpi-n { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.tone-wa { background: var(--wa-soft); color: var(--wa); }
.tone-ok { background: #e3f6ec; color: var(--ok); }
.tone-bad { background: #fbe9e9; color: var(--bad); }
.tone-info { background: #e8effc; color: var(--info); }
.tone-warn { background: #fdf3dc; color: var(--warn); }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--wa); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }

/* chart */
.chart { max-height: 240px; }
.chart .c-ok { fill: var(--ok); }
.chart .c-fail { fill: var(--bad); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 10px; }
.chart .bar:hover rect.c-ok, .chart .bar:hover rect.c-fail { opacity: .8; }
i.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
i.lg.c-ok { background: var(--ok); } i.lg.c-fail { background: var(--bad); }

/* misc */
.mono { font-family: Consolas, Menlo, monospace; font-size: .85rem; word-break: break-all; }
.qr-box { min-height: 300px; display: flex; align-items: center; justify-content: center; }
.qr-box img { width: 280px; height: 280px; }
pre.code { background: #111827; color: #e5e7eb; padding: .9rem; border-radius: .6rem; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
.imp-bar { background: #ffc107; padding: .45rem 1rem; }

/* login */
.login-wrap { min-height: 100vh; display: flex; }
.login-art { flex: 1; background: radial-gradient(circle at 20% 20%, #1aa38f 0%, #075e54 55%, #053f39 100%); color: #fff; display: flex; align-items: center; padding: 3rem 4rem; }
.login-art h1 { font-weight: 700; margin-top: 1rem; }
.login-art li { margin-bottom: .45rem; }
.logo-lg { width: 64px; height: 64px; border-radius: 18px; background: #25d366; display: inline-flex; align-items: center; justify-content: center; font-size: 2.1rem; }
.login-form { width: 460px; max-width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 2rem; }

/* row menus: float above the table, clean list */
.dropdown-menu { border: 0; border-radius: .75rem; box-shadow: 0 12px 32px rgba(16,24,40,.18); padding: .35rem; min-width: 230px; font-size: .9rem; z-index: 1080; }
.dropdown-item { border-radius: .5rem; padding: .45rem .7rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item i { width: 1.1rem; text-align: center; color: var(--muted); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--wa-soft); color: var(--wa-dark); }
.dropdown-item.text-danger i { color: var(--bad); }
.dropdown-item.text-danger:hover { background: #fbe9e9; color: var(--bad) !important; }
.dropdown-divider { margin: .3rem 0; }
.act { display: inline-flex; gap: .3rem; align-items: center; }
.act .btn { width: 32px; height: 31px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.acc { font-family: Consolas, Menlo, monospace; background: var(--wa-soft); color: var(--wa-dark); border-radius: .35rem; padding: 0 .35rem; font-size: .78rem; }
.chip { display: inline-flex; gap: .4rem; align-items: center; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .88rem; }
.chip span { background: var(--bg); border-radius: 999px; padding: 0 .45rem; font-size: .78rem; color: var(--muted); }
.chip.active { background: var(--wa); border-color: var(--wa); color: #fff; }
.chip.active span { background: rgba(255,255,255,.22); color: #fff; }

/* send page */
.send-tabs .nav-link { color: var(--ink); border-radius: .6rem; padding: .45rem .9rem; }
.send-tabs .nav-link.active { background: var(--wa); color: #fff; }
.group-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: .6rem; }
.g-row { display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem; border-bottom: 1px solid var(--line); cursor: pointer; margin: 0; }
.g-row:last-child { border-bottom: 0; }
.g-row:hover { background: var(--wa-soft); }
.preview { white-space: pre-wrap; background: #e7ffdb; border-radius: .6rem; padding: .6rem .8rem; color: var(--ink); font-size: .88rem; max-width: 420px; }
.camp-bar { height: 8px; background: var(--line); }
.pb-ok { background: var(--ok); } .pb-sent { background: #7cc8a3; } .pb-bad { background: var(--bad); }
.otp-in { letter-spacing: .6em; font-size: 1.6rem; font-weight: 600; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; min-height: auto; height: auto; position: static; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .sidebar nav a { padding: .45rem .6rem; font-size: .85rem; }
  .login-wrap { flex-direction: column; }
  .login-art { padding: 2rem 1.5rem; }
  .login-form { width: 100%; }
  .kpi-n { font-size: 1.3rem; }
}
.logo.logo-white, .logo-lg.logo-white { background: #fff; width: auto; padding: 4px 8px; }
.logo.logo-white img { height: 26px; max-width: 110px; object-fit: contain; }
.logo-lg.logo-white { padding: 10px 16px; }
.logo-lg.logo-white img { height: 48px; max-width: 260px; object-fit: contain; }
.logo-prev { min-height: 90px; display: flex; align-items: center; justify-content: center; background: #f4f6f9; border-radius: .6rem; padding: 1rem; }
.logo-prev img { max-height: 80px; max-width: 100%; object-fit: contain; }
.link-tabs .nav-link{color:#334155}.link-tabs .nav-link.active{background:#25d366;color:#fff}
.pair-code .code-big{font:700 2rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.2em;color:#075e54;background:#ecfdf3;border:2px dashed #25d366;border-radius:12px;padding:.6rem 1rem;display:inline-block;margin:.3rem .3rem .3rem 0}

/* top bar (round 4) */
.main-col { min-width: 0; }
.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 1020; }
.user-btn { border: 1px solid transparent; padding: .25rem .5rem; border-radius: 999px; }
.user-btn:hover, .user-btn[aria-expanded=true] { background: #f1f5f9; border-color: #e2e8f0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #075e54; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }
.credit-top { background: #ecfdf3; color: #075e54; border: 1px solid #bbf7d0; border-radius: 999px; padding: .25rem .75rem; font-size: .85rem; font-weight: 600; }
/* recharge / payments */
.plan-card { cursor: pointer; border: 2px solid transparent !important; transition: .15s; }
.plan-card:hover { border-color: #bbf7d0 !important; }
.plan-card.on { border-color: #25d366 !important; background: #f0fdf4; }
.plan-amt { font-size: 1.6rem; font-weight: 700; color: #075e54; }
.pay-qr { max-width: 240px; width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px; background: #fff; }
.pay-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb; }
.send-note { font-size: .88rem; white-space: normal; }
/* help & guide */
.help-toc { display: flex; flex-wrap: wrap; gap: .4rem; }
.help-toc a { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: .25rem .75rem; font-size: .82rem; text-decoration: none; color: #075e54; }
.help-sec { margin-bottom: 1rem; scroll-margin-top: 70px; }
.lang-block { display: none; } .lang-block.on { display: block; }
.lang-name { display: none; font-weight: 600; font-size: .8rem; margin-top: .6rem; }
.way { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: .7rem; height: 100%; }
.terms h6 { color: #075e54; }
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .imp-bar, .np, .page-head .btn, #toasts, .copy, .btn { display: none !important; }
  body, .layout, .main-col, main { background: #fff !important; display: block !important; padding: 0 !important; }
  .print-only { display: block; }
  .card { box-shadow: none !important; border: 1px solid #e5e7eb !important; break-inside: auto; }
  .lang-block { display: block !important; } .lang-name { display: block; }
  .help-sec { break-inside: avoid-page; }
  pre.code { white-space: pre-wrap; word-break: break-all; font-size: 10px; }
  iframe { display: none; }
}
/* notice line + email bar (round 5) */
.notice-bar { overflow: hidden; white-space: nowrap; font-size: .88rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.notice-bar .nt-track { display: inline-block; padding: .45rem 0; padding-left: 100%; animation: ntmove 30s linear infinite; }
.notice-bar:hover .nt-track { animation-play-state: paused; }
.nt-item { padding: 0 .5rem; } .nt-sep { opacity: .5; padding: 0 1rem; }
.nt-info { background: #e0f2fe; color: #075985; } .nt-warning { background: #fef3c7; color: #92400e; } .nt-success { background: #dcfce7; color: #166534; } .nt-danger { background: #fee2e2; color: #991b1b; }
@keyframes ntmove { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .notice-bar .nt-track { animation: none; padding-left: 1rem; white-space: normal; } }
.mail-bar { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; }
.app-badges a { display: inline-flex; align-items: center; gap: .5rem; background: #111827; color: #fff; border-radius: 10px; padding: .45rem .9rem; text-decoration: none; font-size: .85rem; margin: 0 .4rem .4rem 0; }
.app-badges a i { font-size: 1.4rem; } .app-badges a small { display: block; font-size: .65rem; opacity: .75; line-height: 1; }
.quota-bar { height: 8px; border-radius: 99px; background: #e5e7eb; overflow: hidden; } .quota-bar > div { height: 100%; background: #25d366; } .quota-bar.over > div { background: #dc2626; }
.rate-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: .6rem .8rem; }

/* report: WhatsApp-style ticks (round 30) */
.wa-tick { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:.82rem; padding:2px 9px; border-radius:999px; background:#f1f5f9; color:#475569; }
.wa-tick.wa-pending { background:#fff7e0; color:#9a6b00; }
.wa-tick.wa-sent, .wa-tick.wa-delivered { background:#eef2f5; color:#667781; }
.wa-tick.wa-read { background:#e3f5fd; color:#1d9bd1; }
.wa-tick.wa-failed { background:#fde8e8; color:#c62828; }
.rp-hide-ip .rp-ip { display:none; }

/* top bar: how many of my WhatsApp numbers are connected (round 30) */
.wa-top { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.85rem; padding:5px 11px; border-radius:999px; border:1px solid transparent; }
.wa-top.ok { background:#e8f7ee; color:#157347; border-color:#c6ebd5; }
.wa-top.part { background:#fff7e0; color:#9a6b00; border-color:#f3e2a6; }
.wa-top.off { background:#fde8e8; color:#c62828; border-color:#f5c2c2; }
.wa-top-wait { background:#fff; border-radius:999px; padding:0 7px; color:#9a6b00; }