/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --bg:         #0f1117;
  --surface:    #1a1d27;
  --surface2:   #252836;
  --border:     #2d3147;
  --text:       #e8eaf0;
  --text2:      #9095ab;
  --accent:     #05A1DE;
  --accent-h:   #1FB8E8;
  --green:      #34d399;
  --red:        #f87171;
  --yellow:     #fbbf24;
  --orange:     #fb923c;
  --purple:     #a78bfa;
  --teal:       #22d3ee;
  --indigo:     #818cf8;
  --sidebar-w:  240px;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --bg:       #f0f2f8;
  --surface:  #ffffff;
  --surface2: #f5f7ff;
  --border:   #dde1ef;
  --text:     #1a1d2e;
  --text2:    #6b7285;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* ── Splash ──────────────────────────────────────────────────────────────── */
.splash {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.splash-inner { display:flex; flex-direction:column; align-items:center; gap:20px; }
.splash-spinner {
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}

/* ── Login ───────────────────────────────────────────────────────────────── */
.login {
  display:none; align-items:center; justify-content:center;
  min-height:100vh; padding:20px;
}
.login-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px 36px;
  width:100%; max-width:380px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.login-box .logo { text-align:center; padding-bottom:6px; }
.login-box .logo img { height:52px; object-fit:contain; }
.login-box .sub { text-align:center; font-size:.8rem; color:var(--text2); }
.login-box input {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:11px 14px; color:var(--text); width:100%; font-size:.95rem;
}
.login-box input:focus { outline:none; border-color:var(--accent); }
.login-box button {
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:12px; font-size:1rem; font-weight:600; width:100%;
  transition:.15s;
}
.login-box button:hover { background:var(--accent-h); }
.login-box .err { color:var(--red); font-size:.85rem; display:none; text-align:center; }

/* ── App Layout ──────────────────────────────────────────────────────────── */
.app {
  display:none; min-height:100vh;
  background:var(--bg);
}
@media (min-width:769px) {
  .app { display:flex; }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  height:100vh; position:sticky; top:0;
  overflow-y:auto;
}
.sidebar-top {
  padding:18px 16px 14px;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:center; align-items:center;
}
.sidebar-logo { height:40px; object-fit:contain; max-width:190px; display:block; }

.sidebar-nav {
  flex:1; overflow-y:auto; padding:10px 0;
}
.nav-group-label {
  padding:10px 16px 4px;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  color:var(--text2); letter-spacing:.08em;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 16px;
  background:none; border:none; color:var(--text2);
  font-size:.88rem; text-align:left;
  border-radius:0;
  transition:.15s;
  position:relative;
}
.nav-item:hover { background:var(--surface2); color:var(--text); }
.nav-item.active {
  background:rgba(5,161,222,.15);
  color:var(--accent);
  font-weight:600;
  border-left:3px solid var(--accent);
}
.nav-icon {
  width:20px; height:20px; flex-shrink:0; display:inline-block;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* Ícones SVG inline coloridos por categoria */
.ni-monitor  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.ni-phone    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z'/%3E%3C/svg%3E"); }
.ni-trunk    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305A1DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E"); }
.ni-group    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb923c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E"); }
.ni-ivr      { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M9 9h6M9 12h6M9 15h4'/%3E%3C/svg%3E"); }
.ni-queue    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.ni-conf     { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 100 6 3 3 0 000-6zM6 8a3 3 0 100 6 3 3 0 000-6zM18 8a3 3 0 100 6 3 3 0 000-6z'/%3E%3Cpath d='M9 14.5L12 13l3 1.5M9 11l-3 1.5M15 11l3 1.5'/%3E%3C/svg%3E"); }
.ni-clock    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.ni-voicemail{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb923c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='11.5' r='4.5'/%3E%3Ccircle cx='18.5' cy='11.5' r='4.5'/%3E%3Cpath d='M5.5 16H18.5'/%3E%3C/svg%3E"); }
.ni-cdr      { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305A1DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.ni-rec      { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23f87171'/%3E%3C/svg%3E"); }
.ni-block    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M4.93 4.93l14.14 14.14'/%3E%3C/svg%3E"); }
.ni-geo      { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.ni-settings { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239095ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); }
.ni-info     { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305A1DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.nav-label { flex:1; }
.nav-badge {
  background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700;
  padding:1px 7px; border-radius:20px;
}

.sidebar-foot {
  padding:12px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.sidebar-foot-row { display:flex; gap:8px; align-items:center; }
.sidebar-btn {
  flex:1; background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:8px 10px;
  font-size:.82rem; transition:.15s;
}
.sidebar-btn:hover { background:var(--border); }
.sidebar-btn-danger { background:rgba(248,113,113,.1); border-color:var(--red); color:var(--red); }
.sidebar-btn-danger:hover { background:var(--red); color:#fff; }
.sidebar-icon-btn {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; font-size:1rem;
  color:var(--text); transition:.15s;
}
.sidebar-icon-btn:hover { background:var(--border); }

/* ── Main ────────────────────────────────────────────────────────────────── */
.main {
  flex:1; min-width:0; min-height:100vh;
  display:flex; flex-direction:column;
}
.page-hdr {
  padding:20px 24px 0;
}
.page-title { font-size:1.5rem; font-weight:700; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
  padding:16px 24px;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:4px;
}
.stat-num { font-size:1.8rem; font-weight:800; color:var(--accent); }
.stat-lbl { font-size:.8rem; font-weight:600; color:var(--text); }
.stat-sub { font-size:.72rem; color:var(--text2); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tab-panel { display:none; padding:0 24px 24px; flex:1; }
.tab-panel.active { display:block; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:16px 0 12px;
}
.search {
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; color:var(--text);
  font-size:.88rem; flex:1; max-width:280px;
}
.search:focus { outline:none; border-color:var(--accent); }

/* ── List cards ──────────────────────────────────────────────────────────── */
.list { display:flex; flex-direction:column; gap:8px; }
.list-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
  display:flex; align-items:center; gap:14px;
  transition:.15s;
}
.list-card:hover { border-color:var(--accent); }
.card-disabled { opacity:.55; }
.card-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
  background:var(--surface2);
}
.icon-green  { color:var(--green);  background:rgba(52,211,153,.12); }
.icon-gray   { color:var(--text2);  background:var(--surface2); }
.icon-blue   { color:var(--accent); background:rgba(5,161,222,.12); }
.icon-purple { color:var(--purple); background:rgba(167,139,250,.12); }
.icon-orange { color:var(--orange); background:rgba(251,146,60,.12); }
.icon-teal   { color:var(--teal);   background:rgba(34,211,238,.12); }
.icon-indigo { color:var(--indigo); background:rgba(129,140,248,.12); }
.icon-yellow { color:var(--yellow); background:rgba(251,191,36,.12); }
.card-body { flex:1; min-width:0; }
.card-title { font-weight:600; font-size:.95rem; }
.card-sub   { font-size:.8rem; color:var(--text2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-actions { display:flex; gap:6px; flex-shrink:0; }
.badge-num {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:1px 8px; font-size:.78rem; font-weight:600;
  color:var(--text2); margin-left:6px;
}

.list-meta { font-size:.8rem; color:var(--text2); padding-bottom:4px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:9px 16px; font-size:.88rem; font-weight:600;
  transition:.15s; white-space:nowrap;
}
.btn-primary:hover { background:var(--accent-h); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-secondary {
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:9px 16px; font-size:.88rem;
}
.btn-secondary:hover { background:var(--border); }
.btn-sm {
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border); border-radius:7px;
  padding:5px 12px; font-size:.8rem;
  white-space:nowrap; transition:.15s;
}
.btn-sm:hover { background:var(--border); }
.btn-danger { background:rgba(248,113,113,.1); border-color:var(--red); color:var(--red); }
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-warn { background:rgba(251,191,36,.1); border-color:var(--yellow); color:var(--yellow); }
.btn-warn:hover { background:var(--yellow); color:#000; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.65); z-index:1000;
  align-items:center; justify-content:center; padding:16px;
}
.modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px;
  width:100%; max-width:540px;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow);
}
.modal h2 { font-size:1.1rem; margin-bottom:18px; }
#modalForm { display:flex; flex-direction:column; gap:12px; }
#modalForm label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--text2); }
.field {
  background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:9px 12px; color:var(--text); font-size:.9rem;
}
.field:focus { outline:none; border-color:var(--accent); }
.field-select {
  background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:9px 12px; color:var(--text); font-size:.9rem;
  cursor:pointer;
}
.field-select:focus { outline:none; border-color:var(--accent); }
.check-label { flex-direction:row !important; align-items:center; gap:8px !important; cursor:pointer; color:var(--text) !important; }
.modal-err {
  display:none; background:rgba(248,113,113,.1);
  border:1px solid var(--red); border-radius:8px;
  padding:10px 14px; font-size:.85rem; color:var(--red); margin-top:8px;
}
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.creds-box {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.cred-row { display:flex; justify-content:space-between; font-size:.88rem; }
.cred-row span { color:var(--text2); }
.cred-row strong { color:var(--text); font-weight:600; }

/* ── Form extras ─────────────────────────────────────────────────────────── */
.sched-grid { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.sched-row { display:flex; align-items:center; gap:10px; }
.sched-day-lbl { width:72px; font-weight:600; color:var(--text); font-size:.85rem; flex-shrink:0; }
.sched-time { flex:1; }

.ivr-opts-section { border:1px solid var(--border); border-radius:8px; padding:12px; }
.ivr-opts-hdr {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; font-size:.85rem; font-weight:600;
}
.ivr-opt-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ivr-key { max-width:60px; }

.settings-form {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  display:flex; flex-direction:column; gap:14px; max-width:560px;
}
.settings-form h3 { font-size:1rem; color:var(--text); padding-bottom:6px; border-bottom:1px solid var(--border); }
.settings-hint { font-size:.82rem; color:var(--text2); }

/* ── Table ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.table {
  width:100%; border-collapse:collapse; font-size:.85rem;
}
.table th {
  background:var(--surface2); padding:10px 12px;
  text-align:left; font-size:.78rem; text-transform:uppercase;
  color:var(--text2); letter-spacing:.06em;
  border-bottom:1px solid var(--border);
}
.table td { padding:10px 12px; border-bottom:1px solid var(--border); }
.table tr:hover td { background:var(--surface2); }

.badge-status {
  padding:2px 10px; border-radius:20px; font-size:.75rem; font-weight:600;
}
.badge-status.answered, .badge-status.answer { background:rgba(52,211,153,.15); color:var(--green); }
.badge-status.no\ answer, .badge-status.noanswer { background:rgba(251,191,36,.15); color:var(--yellow); }
.badge-status.busy { background:rgba(248,113,113,.15); color:var(--red); }
.badge-status.failed { background:rgba(248,113,113,.15); color:var(--red); }

/* ── Monitor ─────────────────────────────────────────────────────────────── */
.monitor-bar {
  display:flex; align-items:center; gap:12px;
  padding:14px 0 10px; font-size:.85rem;
}
.monitor-live { color:var(--text2); }
.monitor-live.live { color:var(--green); }
.monitor-live.offline { color:var(--red); }
.monitor-calls { font-weight:600; color:var(--accent); }
.monitor-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.monitor-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
  display:flex; align-items:center; gap:10px;
  transition:.15s;
}
.mon-online { border-color:rgba(52,211,153,.3); }
.mon-icon { font-size:1.2rem; flex-shrink:0; }
.mon-body { flex:1; min-width:0; }
.mon-name { font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mon-num  { font-size:.78rem; color:var(--text2); }
.mon-status { font-size:.75rem; color:var(--text2); }
.mon-online .mon-status { color:var(--green); }

/* ── GeoBlock ────────────────────────────────────────────────────────────── */
.gb-header {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
  display:flex; flex-direction:column; gap:12px;
}
.gb-toggle-row { display:flex; align-items:center; justify-content:space-between; font-weight:600; }
.gb-mode-row { display:flex; gap:20px; flex-wrap:wrap; font-size:.87rem; }
.gb-mode-row label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.gb-toolbar {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-bottom:12px;
}
.gb-count { font-size:.82rem; color:var(--text2); margin-left:auto; }
.gb-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:6px; max-height:420px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius); padding:10px;
  background:var(--surface);
}
.gb-country {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:.12s;
  font-size:.83rem; user-select:none;
}
.gb-country:hover { background:var(--surface2); }
.gb-selected {
  background:rgba(5,161,222,.12);
  border-color:rgba(5,161,222,.4);
  box-shadow:0 0 0 1px rgba(5,161,222,.2);
}
.gb-country input { display:none; }
.gb-flag-img {
  width:28px; height:20px;
  object-fit:cover; border-radius:3px;
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.gb-name {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--text); flex:1;
}
.gb-footer { display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }
.gb-footer small { color:var(--text2); font-size:.78rem; }

/* ── Toggle Switch ───────────────────────────────────────────────────────── */
.toggle-switch { display:inline-flex; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-track {
  width:44px; height:24px; background:var(--border); border-radius:12px;
  display:flex; align-items:center; padding:2px; transition:.2s;
}
.toggle-switch input:checked + .toggle-track { background:var(--accent); }
.toggle-thumb {
  width:20px; height:20px; background:#fff; border-radius:50%;
  transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform:translateX(20px); }

/* ── Info ────────────────────────────────────────────────────────────────── */
.info-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; max-width:600px;
}
.info-grid { display:flex; flex-direction:column; gap:0; }
.info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.88rem;
}
.info-row:last-child { border-bottom:none; }
.info-row span { color:var(--text2); }
.info-row strong { color:var(--text); font-weight:600; }

/* ── Empty / Error ───────────────────────────────────────────────────────── */
.empty-hint {
  padding:32px 20px; text-align:center;
  color:var(--text2); font-size:.9rem;
  background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--radius);
}
.error { color:var(--red); font-size:.85rem; padding:12px; }
.loading {
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--accent);
  animation:spin .8s linear infinite; margin:32px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:20px; right:20px; z-index:9000;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:12px 20px;
  font-size:.88rem; max-width:340px;
  box-shadow:var(--shadow); pointer-events:none;
  opacity:0; transform:translateY(10px);
  transition:.25s;
}
.toast.show { opacity:1; transform:translateY(0); }
.toast-success { border-color:var(--green); color:var(--green); }
.toast-error   { border-color:var(--red);   color:var(--red); }
.toast-info    { border-color:var(--accent); color:var(--accent); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
.mobile-bar {
  display:none;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 16px;
  align-items:center; gap:12px; flex-shrink:0;
}
.burger-btn {
  background:none; border:none; color:var(--text);
  font-size:1.4rem; padding:0 4px; line-height:1;
}
.mobile-brand { flex:1; font-weight:700; font-size:1rem; }
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:50;
}
.sidebar-overlay.show { display:block; }

@media (max-width:768px) {
  .app { display:flex; flex-direction:column; }
  .mobile-bar { display:flex; }
  .sidebar {
    position:fixed; top:0; left:0; height:100vh; z-index:100;
    transform:translateX(-100%); transition:.25s; box-shadow:var(--shadow);
  }
  .sidebar.open { transform:translateX(0); }
  .main { flex:1; overflow-y:auto; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .monitor-grid { grid-template-columns:repeat(2,1fr); }
  .card-actions { flex-wrap:wrap; }
}