@font-face{font-family:Montserrat;src:url('/assets/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/assets/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --text:#002b30;
  --brand:#146772;
  --brand-hover:#125f69;
  --muted:#e6efef;
  --bg:#f7fafb;
  --card:#ffffff;
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --radius:16px;
  --success:#2F7D6C;
  --info:#2C8E9B;
  --warning:#E8B351;
  --danger:#C84B4B;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:28px 20px}
.center{display:flex;justify-content:center;align-items:center}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--muted);background:#fff}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brand);text-decoration:none}
.topbar .brand img{height:34px}
.nav{display:flex;gap:12px;margin-left:10px}
.nav a{padding:8px 12px;border-radius:12px}
.nav a:hover{background:#eaf2f3}
.userbox{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn, .btn-outline{display:inline-block;border-radius:12px;padding:10px 14px;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn{background:var(--brand);color:#fff}
.btn:hover{background:var(--brand-hover)}
.btn-outline{border-color:var(--brand);color:var(--brand);background:transparent}
.btn-outline:hover{background:#eaf2f3}
.card{background:var(--card);border:1px solid var(--muted);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-weight:700;text-align:left;padding:10px 12px;color:#0A3C42}
.table td{background:#fff;border-top:1px solid var(--muted);border-bottom:1px solid var(--muted);padding:10px 12px}
.table tr td:first-child{border-left:1px solid var(--muted);border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid var(--muted);border-top-right-radius:12px;border-bottom-right-radius:12px}
.table thead th{background:#eef6f7;border-bottom:1px solid var(--muted);border-top-left-radius:12px;border-top-right-radius:12px}
.input, select, textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #cfd9dc;outline:none;background:#fff}
.input:focus, select:focus, textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #14677222}
.form-row{display:grid;gap:12px}
.form-row-3{grid-template-columns:1fr 220px 220px}
.form-row-2{grid-template-columns:1fr 220px}
.footer{border-top:1px solid var(--muted);padding:20px;color:#3a6a71}
.empty{padding:30px;text-align:center;color:#5a7f84}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi strong{font-size:22px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eaf2f3;color:var(--brand);font-weight:700;font-size:12px}
.status-active{background:#e7f5f1;color:#1e6b5b}
.status-off{background:#fff1f1;color:#9c2f2f}
.shadowbox{background:var(--card);border:1px solid var(--info);box-shadow:var(--shadow);border-radius:var(--radius);padding:22px;margin:16px auto;max-width:980px}
.shadowbox-title{font-weight:700;margin-bottom:10px;color:var(--text)}
.logo-lg{width:200px;height:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.12))}
.logo-signature{width:150px;height:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.12))}
.pagination{display:flex;gap:8px;flex-wrap:wrap}
.pagination a{padding:8px 12px;border-radius:10px;background:#eaf2f3}
.pagination a.active{background:var(--brand);color:#fff}
.small{font-size:12px;opacity:.8}
.help{color:#3a6a71}
.nomapp{margin:8px 0 0 0;color:#139ccb}

.switch { position: relative; display: inline-block; width: 52px; height: 28px; vertical-align: middle; }
.switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: #cfd9dc; transition: .2s; border-radius: 999px; border: 1px solid #c7d2d6;
}
.switch .slider:before {
  content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px;
  background: #fff; transition: .2s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input[type="checkbox"]:checked + .slider { background: var(--brand, #146772); border-color: var(--brand, #146772); }
.switch input[type="checkbox"]:checked + .slider:before { transform: translateX(24px); }

.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #e6efef; }
.setting-row:last-child { border-bottom: none; }
.setting-row .label { font-weight: 600; }
.setting-row .help { font-size: 12px; opacity: .8; margin-top: 4px; }
.danger-zone { border-left: 4px solid var(--danger, #C84B4B); }