:root{
  --navy:#12265A;--blue:#1F3C88;--orange:#F47B20;--bg:#F6F8FC;--card:#fff;
  --text:#172033;--muted:#6B7280;--line:#E5E7EB;--danger:#B42318;--ok:#067647;
  --radius:18px;--shadow:0 12px 32px rgba(18,38,90,.08)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy),#0a173d);color:#fff;padding:24px 18px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}
.brand img{width:44px;height:44px;border-radius:12px}
.brand strong{font-size:18px;display:block}.brand small{opacity:.72}
.nav button{width:100%;border:0;background:transparent;color:#dbe4ff;padding:13px 14px;border-radius:12px;text-align:left;margin:4px 0}
.nav button.active,.nav button:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar-foot{position:absolute;left:18px;right:18px;bottom:20px;font-size:12px;color:#b8c5ee}
.main{min-width:0}
.topbar{height:72px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.menu-btn{display:none;border:0;background:#eef2ff;border-radius:10px;padding:10px}
.top-actions{display:flex;gap:10px;align-items:center}
.net{font-size:12px;padding:7px 10px;border-radius:999px;background:#e8f7ef;color:var(--ok)}
.net.offline{background:#fff0ed;color:var(--danger)}
.install-btn{border:1px solid #d8def1;background:#fff;color:var(--navy);padding:9px 12px;border-radius:10px}
.content{padding:28px;max-width:1400px;margin:auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.page-head h1{margin:0 0 4px;font-size:28px}.muted{color:var(--muted)}
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #edf0f6}
.stat b{font-size:30px;color:var(--navy);display:block;margin-top:8px}
.panel{background:#fff;border:1px solid #edf0f6;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.panel h2{margin:0 0 16px;font-size:18px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:0;border-radius:11px;padding:11px 14px;font-weight:650}
.btn-primary{background:var(--navy);color:#fff}.btn-accent{background:var(--orange);color:#fff}
.btn-soft{background:#eef2ff;color:var(--navy)}.btn-danger{background:#fff0ed;color:var(--danger)}
.btn-call{background:#e8f7ef;color:#067647}.btn-sms{background:#eef2ff;color:#1d4ed8}.btn-wa{background:#e9fbef;color:#087f3f}
.filters{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:10px;margin-bottom:16px}
.input,.select,.textarea{width:100%;border:1px solid #d7dce8;background:#fff;border-radius:11px;padding:11px 12px;outline:none}
.input:focus,.select:focus,.textarea:focus{border-color:#6b7ec7;box-shadow:0 0 0 3px rgba(31,60,136,.08)}
.textarea{min-height:92px;resize:vertical}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid #eef0f4;text-align:left;white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;background:#eef2ff;color:var(--blue)}
.badge.warn{background:#fff5e8;color:#9a4d00}.badge.off{background:#f2f4f7;color:#667085}
.cards-mobile{display:none}
.disc-card{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.disc-card h3{margin:0 0 6px}.disc-meta{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.modal{position:fixed;inset:0;background:rgba(8,17,42,.58);display:grid;place-items:center;padding:18px;z-index:100}
.modal-card{background:#fff;border-radius:20px;width:min(760px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.22)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal-body{padding:22px}.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.icon-btn{border:0;background:#f1f3f8;border-radius:10px;padding:9px 11px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-size:13px;font-weight:650;margin-bottom:6px}.field.full{grid-column:1/-1}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:200;display:grid;gap:10px}
.toast{background:#172033;color:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow);max-width:360px}.toast.error{background:#8e1b12}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top right,#dfe8ff,transparent 35%),var(--bg)}
.login-card{width:min(430px,100%);background:#fff;padding:28px;border-radius:24px;box-shadow:0 20px 70px rgba(18,38,90,.15)}
.login-logo{width:68px;height:68px;border-radius:18px;margin-bottom:14px}
.login-card h1{margin:0 0 8px}.login-card form{display:grid;gap:13px;margin-top:20px}
.followup{padding:14px 0;border-bottom:1px solid #eef0f4}.followup:last-child{border:0}.followup b{color:var(--navy)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.syncbar{display:none;background:#fff3db;color:#7a4b00;padding:10px 28px;font-size:13px}.syncbar.show{display:block}
.drawer-backdrop{display:none}

@media(max-width:980px){
  .app{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;z-index:80;transition:.25s}.sidebar.open{left:0}
  .drawer-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:70}
  .menu-btn{display:inline-flex}.grid-stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.topbar{padding:0 16px}.content{padding:18px}
}
@media(max-width:680px){
  .grid-stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:15px}.stat b{font-size:25px}
  .page-head{align-items:flex-start;flex-direction:column}.filters{grid-template-columns:1fr}
  .table-wrap{display:none}.cards-mobile{display:block}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .content{padding:14px}.topbar h3{font-size:16px}.install-btn{display:none}
  .modal{padding:8px;align-items:end}.modal-card{border-radius:20px 20px 0 0;max-height:94vh;width:100%}
  .actions .btn{flex:1;text-align:center}.syncbar{padding:9px 14px}
}