:root{
  --bg:#0f1623; --panel:#16203200; --card:#1b2638; --card2:#202d44;
  --line:#2a3a55; --text:#e6edf6; --muted:#8aa0bd; --accent:#2f9e57; --accent2:#3b82f6;
  --danger:#e0533d; --warn:#d9a531;
}
*{box-sizing:border-box}
body{margin:0;background:#0f1623;color:var(--text);font-family:"Segoe UI",Tahoma,system-ui,sans-serif;font-size:14px}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0c1320;padding:2px 6px;border-radius:5px;color:#9fd3ff;direction:ltr;display:inline-block}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:#13192a;border-bottom:1px solid var(--line)}
.brand{font-weight:700}
.nav a,.nav .link-btn{margin-inline-start:16px;color:var(--muted);font-weight:600;background:none;border:none;cursor:pointer;font-size:14px;font-family:inherit}
.nav a.active{color:var(--text)}
.nav a:hover{color:var(--text);text-decoration:none}

.container{max-width:1200px;margin:22px auto;padding:0 18px}
h2{margin:8px 0 6px}
.muted{color:var(--muted)}
.center{text-align:center}
.row-between{display:flex;justify-content:space-between;align-items:center;margin-top:18px}

.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.card-n{font-size:26px;font-weight:800}
.card-l{color:var(--muted);margin-top:4px}
.warn-card .card-n{color:var(--danger)}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;margin-top:12px}
table{width:100%;border-collapse:collapse;background:var(--card);min-width:900px}
th,td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
th{background:#172033;color:var(--muted);font-weight:700;position:sticky;top:0}
td.prod{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;gap:6px;flex-wrap:wrap}

.badge{padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.b-done{background:#143a25;color:#5fd38a}
.b-sent,.b-created{background:#14304a;color:#67b6ff}
.b-processing,.b-received{background:#3a3414;color:#e3c84e}
.b-failed{background:#3d1c17;color:#ff8a72}
.b-ignored{background:#2a2a2a;color:#9aa}
.err-txt{color:#ff8a72}

.btn{background:var(--card2);color:var(--text);border:1px solid var(--line);padding:9px 16px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600}
.btn:hover{filter:brightness(1.15)}
.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.mini{background:var(--card2);color:var(--text);border:1px solid var(--line);padding:5px 10px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:12px}
.mini:hover{filter:brightness(1.2)}
.mini.danger{background:#3d1c17;border-color:#5a2a22;color:#ff8a72}
.link-btn:hover{color:var(--text)}

.alert{padding:11px 14px;border-radius:10px;margin:12px 0}
.alert.ok{background:#13321f;color:#7ee2a4;border:1px solid #1f5c39}
.alert.err{background:#3a1a15;color:#ff9b86;border:1px solid #6a2a20}
.alert.warn{background:#3a3214;color:#e9d063;border:1px solid #6a5a20}

label{display:block;margin:12px 0 5px;color:var(--muted);font-weight:600}
input,textarea,select{width:100%;background:#0e1626;border:1px solid var(--line);color:var(--text);padding:9px 11px;border-radius:8px;font-family:inherit;font-size:14px}
textarea{line-height:1.7}
fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:16px 0;background:var(--card)}
legend{padding:0 8px;color:#9fd3ff;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hint{background:#102032;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0;color:#bcd}
.mapping-add{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:12px 0}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;width:340px}
.login-card h1{margin:0 0 16px;font-size:20px;text-align:center}

/* whatsapp */
.wa-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-top:14px;text-align:center}
.wa-status{font-weight:700;margin-bottom:14px}
.wa-qr img{background:#fff;padding:10px;border-radius:12px}
.foot{text-align:center;color:var(--muted);padding:24px}

@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.grid5{grid-template-columns:1fr 1fr}}