/* ═══════════════════════════════════════════════════════════
   SHELBY WARMER v2 — Premium Dark UI
═══════════════════════════════════════════════════════════ */

:root {
  --bg:       #080b12;
  --bg2:      #0d1117;
  --bg3:      #161b27;
  --bg4:      #1e2538;
  --glass:    rgba(255,255,255,0.03);
  --glass2:   rgba(255,255,255,0.06);
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #64748b;
  --green:    #22d3a5;
  --green2:   #16a085;
  --blue:     #60a5fa;
  --blue2:    #3b82f6;
  --purple:   #a78bfa;
  --purple2:  #7c3aed;
  --orange:   #fb923c;
  --red:      #f87171;
  --teal:     #2dd4bf;
  --yellow:   #fbbf24;
  --radius:   14px;
  --radius-sm: 8px;
  --shadow:   0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.6);
  --sidebar-w: 240px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── BACKGROUND ─────────────────────────────────────────── */

.bg-particles { position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-particles .particle {
  position:absolute; border-radius:50%;
  background: rgba(34,211,165,0.15);
  animation: float linear infinite;
}

.bg-glow {
  position:fixed; border-radius:50%;
  filter: blur(80px); pointer-events:none; z-index:0;
  animation: glowPulse 8s ease-in-out infinite alternate;
}
.glow-1 { width:500px; height:500px; top:-200px; right:-100px; background:rgba(96,165,250,0.04); animation-delay:0s; }
.glow-2 { width:400px; height:400px; bottom:-150px; left:-100px; background:rgba(34,211,165,0.04); animation-delay:2.5s; }
.glow-3 { width:300px; height:300px; top:40%; left:40%; background:rgba(167,139,250,0.03); animation-delay:5s; }

@keyframes float {
  0%   { transform: translateY(100vh) rotate(0deg); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity:0; }
}
@keyframes glowPulse { from { opacity:0.5; transform:scale(1); } to { opacity:1; transform:scale(1.1); } }

/* ── LOGIN ──────────────────────────────────────────────── */

.login-screen {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 40%, rgba(34,211,165,0.06) 0%, transparent 70%), var(--bg);
}

.login-box {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 48px 40px;
  width: 400px;
  box-shadow: 0 0 80px rgba(34,211,165,0.08), var(--shadow-lg);
  animation: fadeInUp 0.5s ease;
  position:relative; z-index:1;
}

.login-logo {
  display:flex; align-items:center; gap:12px;
  font-size:24px; font-weight:700; margin-bottom:8px;
  color: var(--text);
}
.logo-icon { font-size:32px; filter: drop-shadow(0 0 12px rgba(251,146,60,0.6)); }
.login-sub { color:var(--text2); font-size:13px; margin-bottom:28px; }

.login-input-wrap input {
  width:100%; padding:14px 16px;
  background: var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius-sm); color:var(--text);
  font-size:14px; font-family:inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  margin-bottom:16px;
}
.login-input-wrap input:focus {
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,211,165,0.1);
}

.btn-login {
  width:100%; padding:14px;
  background: linear-gradient(135deg, var(--green2), var(--green));
  color:#000; border:none; border-radius:var(--radius-sm);
  font-size:15px; font-weight:600; cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  font-family:inherit;
}
.btn-login:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(34,211,165,0.3); }


/* ═══════════════════════════════════════════════════════════
   HOME SCREEN — dois caminhos de acesso
   ═══════════════════════════════════════════════════════════ */

.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 700px;
  padding: 32px 20px;
  position: relative;
  z-index: 1;
}

.home-logo {
  text-align: center;
}

.logo-fire-big {
  font-size: 56px;
  display: block;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 20px rgba(251,146,60,0.7));
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { filter: drop-shadow(0 0 16px rgba(251,146,60,0.6)); }
  50%      { filter: drop-shadow(0 0 32px rgba(251,146,60,1)); }
}

.home-title {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.home-subtitle {
  color: var(--text2);
  font-size: 13px;
}

/* ── Access cards ─────────────────────────────────────────── */

.home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

@media (max-width: 520px) {
  .home-cards { grid-template-columns: 1fr; }
}

.access-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}

.access-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.3s;
}

#card-admin::before {
  background: linear-gradient(90deg, #6d28d9, #a855f7);
}

#card-member::before {
  background: linear-gradient(90deg, var(--green2), var(--green));
}

.access-card:hover::before { opacity: 1; }

.access-card:hover {
  transform: translateY(-6px);
}

#card-admin:hover {
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 12px 40px rgba(139,92,246,0.18);
}

#card-member:hover {
  border-color: rgba(34,211,165,0.5);
  box-shadow: 0 12px 40px rgba(34,211,165,0.18);
}

.access-card-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.admin-badge {
  background: rgba(109,40,217,0.2);
  color: #c084fc;
  border: 1px solid rgba(109,40,217,0.4);
}

.member-badge {
  background: rgba(34,211,165,0.12);
  color: var(--green);
  border: 1px solid rgba(34,211,165,0.3);
}

.access-card-icon {
  font-size: 44px;
  margin: 6px 0 2px;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.15));
}

.access-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.access-card-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
}

.access-card-features {
  list-style: none;
  padding: 0;
  width: 100%;
  margin: 4px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.access-card-features li {
  font-size: 12px;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  text-align: left;
  transition: color 0.2s;
}

#card-admin:hover .access-card-features li {
  color: var(--text);
}

#card-member:hover .access-card-features li {
  color: var(--text);
}

.access-card-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: none;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  margin-top: 8px;
}

.access-card-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.access-card-btn.admin {
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  color: #fff;
  box-shadow: 0 4px 16px rgba(109,40,217,0.3);
}

.access-card-btn.admin:hover {
  box-shadow: 0 6px 24px rgba(109,40,217,0.45);
}

.access-card-btn.member {
  background: linear-gradient(135deg, var(--green2), var(--green));
  color: #000;
  box-shadow: 0 4px 16px rgba(34,211,165,0.25);
}

.access-card-btn.member:hover {
  box-shadow: 0 6px 24px rgba(34,211,165,0.4);
}

/* ── Admin login form (oculto até clicar) ─────────────────── */

.admin-login-form {
  width: 100%;
  max-width: 400px;
  animation: fadeInUp 0.35s ease;
}

.login-box-inner {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 40px 36px;
  position: relative;
}

.back-btn {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.back-btn:hover { color: var(--text); }

.login-logo-sm {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}


/* ── LAYOUT ──────────────────────────────────────────────── */

#main-panel { display:flex; min-height:100vh; position:relative; z-index:1; }

/* ── SIDEBAR ─────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction:column;
  padding: 20px 0;
  position: sticky; top:0; height:100vh; flex-shrink:0;
  backdrop-filter: blur(20px);
}

.sidebar-logo {
  display:flex; align-items:center; gap:12px;
  padding:0 20px 20px; border-bottom:1px solid var(--border);
}
.logo-fire { font-size:28px; filter:drop-shadow(0 0 10px rgba(251,146,60,0.5)); }
.logo-title { font-size:15px; font-weight:700; }
.logo-sub { font-size:11px; color:var(--green); font-weight:500; }

.sidebar-stats-mini {
  display:flex; gap:0;
  padding:12px 12px;
  border-bottom: 1px solid var(--border);
}
.mini-stat { flex:1; text-align:center; padding:8px 4px; }
.mini-val { display:block; font-size:20px; font-weight:700; line-height:1.2; }
.mini-lbl { font-size:10px; color:var(--text3); }
.mini-val.green { color:var(--green); }
.mini-val.blue  { color:var(--blue); }
.mini-val.orange { color:var(--orange); }

.sidebar-nav { flex:1; padding:12px 0; overflow-y:auto; }

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px;
  color:var(--text2); text-decoration:none;
  font-size:13.5px; font-weight:500;
  border-radius:0; position:relative;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background:var(--glass2); color:var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(34,211,165,0.12), transparent);
  color:var(--green);
  border-left:2px solid var(--green);
}
.nav-icon { font-size:16px; width:20px; text-align:center; }

.nav-badge {
  margin-left:auto; font-size:10px; font-weight:700;
  background:var(--bg4); color:var(--text2);
  padding:2px 7px; border-radius:20px; min-width:20px; text-align:center;
}
.nav-badge.red   { background:rgba(248,113,113,0.15); color:var(--red); }
.nav-badge.ia-badge { background:rgba(34,211,165,0.15); color:var(--green); }

.sidebar-footer {
  padding:16px 20px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text3);
}
.conn-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--text3); flex-shrink:0;
  transition:background 0.3s;
}
.conn-dot.online  { background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 2s infinite; }
.conn-dot.offline { background:var(--red); }

/* ── MAIN CONTENT ────────────────────────────────────────── */

.main-content {
  flex:1; padding:28px 32px;
  overflow-y:auto; min-height:100vh;
}

.aba { animation: fadeInUp 0.3s ease; }
.aba.hidden { display:none !important; }

.page-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:28px;
}
.page-header h1 { font-size:22px; font-weight:700; }
.page-sub { color:var(--text2); font-size:13px; margin-top:3px; }
.header-actions { display:flex; gap:10px; align-items:center; }

/* ── BUTTONS ─────────────────────────────────────────────── */

.btn-primary {
  padding:10px 20px;
  background: linear-gradient(135deg, var(--green2), var(--green));
  color:#000; border:none; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  font-family:inherit;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(34,211,165,0.3); }
.btn-primary.btn-large { padding:14px 28px; font-size:15px; width:100%; margin-top:12px; }

.btn-secondary {
  padding:9px 16px;
  background:var(--bg4); border:1px solid var(--border2);
  color:var(--text); border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:background var(--transition);
}
.btn-secondary:hover { background:var(--glass2); }

.btn-tiny {
  padding:4px 8px; background:var(--bg4);
  border:1px solid var(--border); color:var(--text2);
  border-radius:6px; font-size:11px; cursor:pointer; font-family:inherit;
}
.btn-icon {
  padding:6px 10px; background:transparent;
  border:1px solid var(--border); color:var(--text2);
  border-radius:6px; font-size:14px; cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.btn-icon:hover { background:var(--glass2); color:var(--text); }
.btn-danger {
  padding:6px 12px; background:rgba(248,113,113,0.1);
  border:1px solid rgba(248,113,113,0.2); color:var(--red);
  border-radius:6px; font-size:12px; cursor:pointer; font-family:inherit;
  transition:background var(--transition);
}
.btn-danger:hover { background:rgba(248,113,113,0.2); }

/* ── STATS GRID ──────────────────────────────────────────── */

.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-bottom:24px;
}

.stat-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  display:flex; align-items:center; gap:16px;
  position:relative; overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.stat-card.green::before  { background:linear-gradient(90deg, var(--green), transparent); }
.stat-card.blue::before   { background:linear-gradient(90deg, var(--blue), transparent); }
.stat-card.purple::before { background:linear-gradient(90deg, var(--purple), transparent); }
.stat-card.orange::before { background:linear-gradient(90deg, var(--orange), transparent); }
.stat-card.teal::before   { background:linear-gradient(90deg, var(--teal), transparent); }
.stat-card.red::before    { background:linear-gradient(90deg, var(--red), transparent); }
.stat-card:hover          { transform:translateY(-2px); box-shadow:var(--shadow); }

.stat-icon { font-size:28px; }
.stat-number { display:block; font-size:28px; font-weight:700; line-height:1.1; }
.stat-name   { font-size:12px; color:var(--text2); }

/* ── DASHBOARD ROW ───────────────────────────────────────── */

.dash-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.dash-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
}
.dash-card h3 { font-size:14px; font-weight:600; margin-bottom:14px; color:var(--text2); }

.dash-list { display:flex; flex-direction:column; gap:8px; }
.dash-num-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--bg4);
  border-radius:var(--radius-sm); font-size:13px;
}
.dash-num-item .num-name { font-weight:500; }
.dash-num-item .num-status { font-size:11px; }

.dash-activity { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; }
.activity-item {
  padding:8px 12px; background:var(--bg4);
  border-radius:var(--radius-sm); font-size:12px;
  border-left:2px solid var(--border2);
  color:var(--text2);
}

/* ── NÚMEROS GRID ────────────────────────────────────────── */

.numeros-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }

.numero-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  position:relative; overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.numero-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--border2); }
.numero-card::after {
  content:''; position:absolute; top:0; right:0;
  width:80px; height:80px;
  background:radial-gradient(circle, rgba(34,211,165,0.05), transparent);
  border-radius:0 var(--radius) 0 50%;
}

.card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.card-num-info .card-apelido { font-size:15px; font-weight:600; }
.card-num-info .card-numero  { font-size:12px; color:var(--text2); font-family:'JetBrains Mono',monospace; }

.status-badge {
  font-size:11px; font-weight:600; padding:4px 10px;
  border-radius:20px; white-space:nowrap;
}
.status-badge.aquecendo     { background:rgba(34,211,165,0.12); color:var(--green); border:1px solid rgba(34,211,165,0.2); }
.status-badge.aguardando_qr { background:rgba(251,146,60,0.12); color:var(--orange); border:1px solid rgba(251,146,60,0.2); }
.status-badge.aguardando_codigo { background:rgba(251,146,60,0.12); color:var(--orange); border:1px solid rgba(251,146,60,0.2); }
.status-badge.concluido     { background:rgba(96,165,250,0.12); color:var(--blue); border:1px solid rgba(96,165,250,0.2); }
.status-badge.pausado       { background:rgba(148,163,184,0.12); color:var(--text2); border:1px solid var(--border); }
.status-badge.erro          { background:rgba(248,113,113,0.12); color:var(--red); border:1px solid rgba(248,113,113,0.2); }

.card-progress { margin:12px 0; }
.progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--text2); margin-bottom:5px; }
.progress-bar   { height:4px; background:var(--bg4); border-radius:4px; overflow:hidden; }
.progress-fill  { height:100%; background:linear-gradient(90deg, var(--green2), var(--green)); border-radius:4px; transition:width 1s ease; }

.card-stats { display:flex; gap:16px; margin-bottom:14px; }
.card-stat { font-size:11px; color:var(--text2); }
.card-stat span { display:block; font-size:15px; font-weight:600; color:var(--text); }

.card-actions { display:flex; gap:6px; flex-wrap:wrap; }

.empty-state {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:var(--text2);
}
.empty-icon { font-size:48px; margin-bottom:12px; opacity:0.5; }
.empty-state p { margin-bottom:16px; }

/* ── FORMS ───────────────────────────────────────────────── */

.form-glass {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px;
}

.form-section-title {
  font-size:12px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.08em;
  margin:24px 0 14px; padding-top:24px;
  border-top:1px solid var(--border);
}
.form-section-title:first-child { margin-top:0; padding-top:0; border-top:none; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.form-group label { display:block; font-size:12px; color:var(--text2); margin-bottom:7px; font-weight:500; }

.form-group input, .form-group select {
  width:100%; padding:11px 14px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius-sm); color:var(--text);
  font-size:13.5px; font-family:inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus, .form-group select:focus {
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,211,165,0.08);
}
.form-group select { cursor:pointer; }

.input-btn-row { display:flex; gap:8px; }
.input-btn-row input { flex:1; }

/* ── RANGE SLIDERS ───────────────────────────────────────── */

.range-wrap { display:flex; align-items:center; gap:12px; }
.range-wrap input[type=range] {
  flex:1; -webkit-appearance:none; height:4px;
  background:var(--bg4); border-radius:4px;
  border:none; padding:0;
}
.range-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px;
  background:var(--green); border-radius:50%; cursor:pointer;
  box-shadow:0 0 6px rgba(34,211,165,0.4);
  transition:transform 0.15s;
}
.range-wrap input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.2); }
.range-val { font-size:13px; font-weight:600; color:var(--green); min-width:40px; text-align:right; font-family:'JetBrains Mono',monospace; }

/* ── TOGGLES ─────────────────────────────────────────────── */

.toggle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }

.toggle-item {
  display:flex; align-items:center; gap:10px;
  padding:12px; background:var(--bg4);
  border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid var(--border); font-size:13px;
  transition:border-color var(--transition);
}
.toggle-item:hover { border-color:var(--border2); }
.toggle-item input { display:none; }
.toggle-switch {
  width:36px; height:20px; background:var(--bg2);
  border-radius:20px; position:relative; flex-shrink:0;
  border:1px solid var(--border2); transition:background 0.2s;
}
.toggle-switch::after {
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; background:var(--text3);
  border-radius:50%; transition:transform 0.2s, background 0.2s;
}
.toggle-item input:checked + .toggle-switch { background:rgba(34,211,165,0.15); border-color:var(--green); }
.toggle-item input:checked + .toggle-switch::after { transform:translateX(16px); background:var(--green); }

/* ── DAYS GRID ───────────────────────────────────────────── */

.days-grid { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }

.day-btn {
  cursor:pointer;
}
.day-btn input { display:none; }
.day-btn span {
  display:block; padding:8px 14px;
  background:var(--bg4); border:1px solid var(--border2);
  border-radius:var(--radius-sm); font-size:13px; font-weight:500;
  transition:all 0.2s; color:var(--text2);
}
.day-btn input:checked + span {
  background:rgba(34,211,165,0.15); color:var(--green);
  border-color:var(--green);
}

/* ── IA SECTION ──────────────────────────────────────────── */

.ia-header-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.ia-model-info { display:flex; flex-direction:column; gap:6px; }
.ia-model-badge {
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
  color:var(--green); background:rgba(34,211,165,0.1);
  border:1px solid rgba(34,211,165,0.2); padding:5px 12px; border-radius:20px;
  display:inline-block;
}
.ia-model-info span { font-size:12px; color:var(--text2); }

.big-toggle { display:flex; align-items:center; gap:12px; cursor:pointer; }
.big-toggle input { display:none; }
.big-toggle-switch {
  width:52px; height:28px; background:var(--bg4);
  border-radius:28px; position:relative;
  border:1px solid var(--border2); transition:background 0.2s;
}
.big-toggle-switch::after {
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:var(--text3);
  border-radius:50%; transition:transform 0.2s, background 0.2s;
}
.big-toggle input:checked + .big-toggle-switch { background:rgba(34,211,165,0.2); border-color:var(--green); }
.big-toggle input:checked + .big-toggle-switch::after { transform:translateX(24px); background:var(--green); }
.big-toggle span:last-child { font-size:14px; font-weight:600; color:var(--text2); }

.ia-resultado {
  margin-top:16px; padding:16px; background:var(--bg2);
  border:1px solid var(--border2); border-radius:var(--radius-sm);
  font-size:14px; color:var(--text); font-style:italic;
  border-left:3px solid var(--green);
}

/* ── API DOCS ────────────────────────────────────────────── */

.api-base-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 24px;
  margin-bottom:24px;
}
.api-base-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.api-base-url {
  font-family:'JetBrains Mono',monospace; font-size:16px;
  color:var(--green); margin-bottom:12px;
}
.api-auth-info {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--text2);
}
.api-auth-info code {
  font-family:'JetBrains Mono',monospace;
  background:var(--bg4); padding:4px 10px; border-radius:6px;
  border:1px solid var(--border2);
}

.api-docs-grid { display:flex; flex-direction:column; gap:10px; }

.api-endpoint {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.api-ep-header {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; cursor:pointer;
  transition:background var(--transition);
}
.api-ep-header:hover { background:var(--glass2); }
.api-method {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  font-weight:700; padding:3px 8px; border-radius:4px; min-width:52px; text-align:center;
}
.api-method.GET    { background:rgba(34,211,165,0.15); color:var(--green); }
.api-method.POST   { background:rgba(96,165,250,0.15); color:var(--blue); }
.api-method.DELETE { background:rgba(248,113,113,0.15); color:var(--red); }
.api-ep-path { font-family:'JetBrains Mono',monospace; font-size:13px; flex:1; }
.api-ep-desc { font-size:12px; color:var(--text2); }

.api-ep-body {
  padding:0 16px; max-height:0; overflow:hidden;
  transition:max-height 0.3s ease, padding 0.3s;
}
.api-ep-body.open { max-height:300px; padding:12px 16px; border-top:1px solid var(--border); }

.api-curl {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text2); white-space:pre-wrap; word-break:break-all;
  position:relative;
}
.api-copy-btn {
  position:absolute; top:8px; right:8px;
  padding:4px 8px; background:var(--bg4);
  border:1px solid var(--border); color:var(--text2);
  border-radius:4px; font-size:11px; cursor:pointer; font-family:inherit;
}
.api-copy-btn:hover { color:var(--text); }

/* ── CONFIG PROBS ─────────────────────────────────────────── */

.probs-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.prob-item label { font-size:12px; color:var(--text2); font-weight:500; margin-bottom:6px; display:block; }

/* ── LOGS ────────────────────────────────────────────────── */

.select-small {
  padding:7px 10px; background:var(--bg4);
  border:1px solid var(--border2); color:var(--text);
  border-radius:var(--radius-sm); font-size:12px; font-family:inherit;
}

.logs-container {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  height:calc(100vh - 200px); overflow-y:auto;
  font-family:'JetBrains Mono',monospace; font-size:12px;
}

.log-entry {
  padding:5px 8px; border-radius:4px;
  display:flex; gap:10px; align-items:flex-start;
  line-height:1.5;
  animation: fadeInLeft 0.2s ease;
}
.log-entry:hover { background:var(--glass); }
.log-ts    { color:var(--text3); flex-shrink:0; }
.log-tag   { padding:1px 7px; border-radius:3px; font-size:10px; font-weight:700; flex-shrink:0; min-width:64px; text-align:center; }
.log-msg   { color:var(--text); word-break:break-all; }

.log-tag.SESSION { background:rgba(96,165,250,0.15); color:var(--blue); }
.log-tag.TEXT    { background:rgba(34,211,165,0.15); color:var(--green); }
.log-tag.CONVERSA { background:rgba(167,139,250,0.15); color:var(--purple); }
.log-tag.ENGINE  { background:rgba(251,191,36,0.15); color:var(--yellow); }
.log-tag.CRON    { background:rgba(45,212,191,0.15); color:var(--teal); }
.log-tag.GROQ    { background:rgba(96,165,250,0.15); color:var(--blue); }
.log-tag.WEB     { background:rgba(148,163,184,0.1); color:var(--text2); }
.log-tag.ERROR   { background:rgba(248,113,113,0.15); color:var(--red); }
.log-tag.WARN    { background:rgba(251,146,60,0.15); color:var(--orange); }

/* ── MODALS ──────────────────────────────────────────────── */

.modal {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
.modal.hidden { display:none; }

.modal-box {
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--radius); padding:32px;
  width:420px; max-width:94vw; position:relative;
  box-shadow:var(--shadow-lg);
  animation:fadeInUp 0.25s ease;
}
.modal-box.modal-large { width:600px; }

.modal-close {
  position:absolute; top:16px; right:16px;
  background:var(--bg4); border:1px solid var(--border);
  color:var(--text2); border-radius:6px;
  padding:4px 10px; cursor:pointer; font-size:14px;
}
.modal-box h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.modal-sub { font-size:13px; color:var(--text2); margin-bottom:16px; }

.conn-tabs { display:flex; gap:6px; margin-bottom:16px; }
.conn-tab {
  flex:1; padding:8px; background:var(--bg4);
  border:1px solid var(--border2); color:var(--text2);
  border-radius:var(--radius-sm); font-size:13px; cursor:pointer; font-family:inherit;
  transition:all 0.2s;
}
.conn-tab.active { background:rgba(34,211,165,0.12); color:var(--green); border-color:var(--green); }

.pairing-code-box { text-align:center; padding:20px; }
.pairing-code {
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:38px; font-weight:700; letter-spacing:10px;
  color:var(--green); background:rgba(34,211,165,0.06);
  border:2px solid rgba(34,211,165,0.2);
  border-radius:12px; padding:16px 24px; margin-bottom:10px;
}
.qr-hint { font-size:11px; color:var(--text3); text-align:center; margin-top:12px; }

.qr-loading {
  text-align:center; padding:40px;
  color:var(--text2); font-size:13px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}

.spinner {
  width:32px; height:32px; border:3px solid var(--border2);
  border-top-color:var(--green); border-radius:50%;
  animation:spin 0.8s linear infinite;
}

.hist-container { max-height:400px; overflow-y:auto; }
.hist-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); font-size:12px; }
.hist-tipo { background:var(--bg4); border-radius:20px; padding:2px 10px; font-size:10px; color:var(--blue); margin-right:10px; flex-shrink:0; }
.hist-desc { flex:1; color:var(--text); }
.hist-ts   { color:var(--text2); font-size:10px; white-space:nowrap; }

/* ── FEEDBACK MESSAGES ───────────────────────────────────── */

.feedback-msg { font-size:12px; margin-top:10px; padding:8px 12px; border-radius:var(--radius-sm); }
.feedback-msg.success { background:rgba(34,211,165,0.1); color:var(--green); border:1px solid rgba(34,211,165,0.2); }
.feedback-msg.error   { background:rgba(248,113,113,0.1); color:var(--red); border:1px solid rgba(248,113,113,0.2); }
.feedback-msg.hidden  { display:none; }
.error-msg { font-size:12px; margin-top:10px; text-align:center; color:var(--red); }
.error-msg.hidden { display:none; }

/* ── ANIMATIONS ──────────────────────────────────────────── */

@keyframes fadeInUp    { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft  { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
@keyframes spin        { to { transform:rotate(360deg); } }
@keyframes pulse       { 0%,100% { box-shadow:0 0 6px var(--green); } 50% { box-shadow:0 0 14px var(--green); } }

/* ── SCROLLBAR ───────────────────────────────────────────── */

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border2); }

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width:900px) {
  .sidebar { width:200px; }
  .main-content { padding:16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .dash-row { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .toggle-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:680px) {
  :root { --sidebar-w:60px; }
  .sidebar-logo .logo-title, .sidebar-logo .logo-sub,
  .sidebar-stats-mini, .nav-item span:not(.nav-icon),
  .nav-badge, .sidebar-footer #conn-label { display:none; }
  .nav-item { justify-content:center; padding:12px; }
  .stats-grid { grid-template-columns:1fr; }
  .toggle-grid { grid-template-columns:1fr; }
}

/* ── PROTECTION ──────────────────────────────────────────── */
.prot-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0; }

.ip-list { display:flex; flex-direction:column; gap:6px; max-height:140px; overflow-y:auto; }
.ip-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; background:var(--bg4); border-radius:6px;
  font-family:'JetBrains Mono',monospace; font-size:12px;
}

.prot-table-wrap { overflow-x:auto; }
.prot-table { width:100%; border-collapse:collapse; font-size:12px; }
.prot-table th { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text3); font-weight:500; }
.prot-table td { padding:8px 10px; border-bottom:1px solid var(--border); font-family:'JetBrains Mono',monospace; }
.prot-table tr:hover td { background:var(--glass); }

@media(max-width:900px) { .prot-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   KEYS — Banner explicativo
   ═══════════════════════════════════════════════════════════ */

.keys-explainer {
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(168,85,247,0.04));
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.keys-explainer-icon {
  font-size: 36px;
  flex-shrink: 0;
  margin-top: 2px;
}

.keys-explainer-body {
  flex: 1;
  min-width: 240px;
}

.keys-explainer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.keys-explainer-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 16px;
}

.keys-explainer-text strong {
  color: var(--text);
}

.keys-explainer-text code {
  background: rgba(139,92,246,0.15);
  color: #c084fc;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.keys-explainer-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kstep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text2);
}

.kstep code {
  background: rgba(139,92,246,0.15);
  color: #c084fc;
  padding: 1px 6px;
  border-radius: 4px;
}

.kstep-num {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.keys-explainer-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
  transition: opacity 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.keys-explainer-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL ENHANCEMENTS — Animations, Shadows, Polish
═══════════════════════════════════════════════════════════ */

/* ── New Keyframe Animations ───────────────────────────── */

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes fadeInRight {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}

@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}

@keyframes borderGlow {
  0%,100% { border-color:var(--border); }
  50%     { border-color:rgba(34,211,165,0.3); }
}

@keyframes ripple {
  0%   { transform:scale(0); opacity:0.5; }
  100% { transform:scale(4); opacity:0; }
}

@keyframes breathe {
  0%,100% { box-shadow:0 0 0 0 rgba(34,211,165,0); }
  50%     { box-shadow:0 0 0 6px rgba(34,211,165,0.08); }
}

@keyframes countUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes dotPulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.4); }
}

/* ── Enhanced Stat Cards ───────────────────────────────── */

.stat-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  animation: fadeInUp 0.4s ease backwards;
}
.stat-card:nth-child(1) { animation-delay:0.05s; }
.stat-card:nth-child(2) { animation-delay:0.1s; }
.stat-card:nth-child(3) { animation-delay:0.15s; }
.stat-card:nth-child(4) { animation-delay:0.2s; }
.stat-card:nth-child(5) { animation-delay:0.25s; }
.stat-card:nth-child(6) { animation-delay:0.3s; }

.stat-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.stat-card.green:hover  { box-shadow:0 8px 32px rgba(34,211,165,0.12); }
.stat-card.blue:hover   { box-shadow:0 8px 32px rgba(96,165,250,0.12); }
.stat-card.purple:hover { box-shadow:0 8px 32px rgba(167,139,250,0.12); }
.stat-card.orange:hover { box-shadow:0 8px 32px rgba(251,146,60,0.12); }
.stat-card.teal:hover   { box-shadow:0 8px 32px rgba(45,212,191,0.12); }

.stat-number {
  animation: countUp 0.5s ease backwards;
  animation-delay: 0.3s;
}

/* ── Enhanced Numero Cards ─────────────────────────────── */

.numero-card {
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  animation: fadeInUp 0.35s ease backwards;
}
.numero-card:nth-child(1) { animation-delay:0.05s; }
.numero-card:nth-child(2) { animation-delay:0.1s; }
.numero-card:nth-child(3) { animation-delay:0.15s; }
.numero-card:nth-child(4) { animation-delay:0.2s; }
.numero-card:nth-child(5) { animation-delay:0.25s; }
.numero-card:nth-child(6) { animation-delay:0.3s; }

.numero-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(34,211,165,0.1);
}

/* ── Enhanced Form Glass ───────────────────────────────── */

.form-glass {
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: box-shadow var(--transition), border-color var(--transition);
  animation: fadeInUp 0.35s ease backwards;
}

.form-glass:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border-color: var(--border2);
}

/* ── Enhanced Buttons ──────────────────────────────────── */

.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(34,211,165,0.2);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.btn-primary:active::after {
  width: 200px; height: 200px;
}

.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(34,211,165,0.35);
}

.btn-secondary {
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ── Enhanced Sidebar ──────────────────────────────────── */

.sidebar {
  box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}

.nav-item {
  transition: background var(--transition), color var(--transition), padding-left var(--transition), box-shadow var(--transition);
}

.nav-item:hover {
  padding-left: 24px;
  box-shadow: inset 2px 0 0 var(--green);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--green), 0 2px 8px rgba(34,211,165,0.08);
}

.nav-badge {
  transition: transform var(--transition);
  animation: scaleIn 0.3s ease backwards;
}

.nav-badge:not(:empty) {
  animation: scaleIn 0.3s ease, dotPulse 2s ease-in-out infinite 1s;
}

/* ── Enhanced Nav Badge Colors ─────────────────────────── */

.nav-badge.green  { background:rgba(34,211,165,0.15); color:var(--green); }
.nav-badge.orange { background:rgba(251,146,60,0.15); color:var(--orange); }

/* ── Page Header Animation ─────────────────────────────── */

.page-header {
  animation: fadeInDown 0.35s ease;
}

.page-header h1 {
  background: linear-gradient(135deg, var(--text), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Enhanced Modal ────────────────────────────────────── */

.modal-backdrop {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.modal-content {
  animation: scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--border2);
}

/* ── Enhanced Progress Bar ─────────────────────────────── */

.progress-fill {
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* ── Status Badge Glow ─────────────────────────────────── */

.status-badge.aquecendo {
  box-shadow: 0 0 8px rgba(34,211,165,0.15);
  animation: breathe 3s ease-in-out infinite;
}

.status-badge.aguardando_qr,
.status-badge.aguardando_codigo {
  animation: breathe 2s ease-in-out infinite;
}

/* ── Enhanced Dash Row Cards ───────────────────────────── */

.dash-row .form-glass:nth-child(1) { animation-delay:0.05s; }
.dash-row .form-glass:nth-child(2) { animation-delay:0.15s; }

.dash-num-item {
  transition: background var(--transition), transform var(--transition);
}

.dash-num-item:hover {
  background: var(--glass2);
  transform: translateX(4px);
}

/* ── Enhanced Logs ─────────────────────────────────────── */

.log-entry {
  animation: fadeInLeft 0.25s ease backwards;
  transition: background var(--transition);
}

.log-entry:hover {
  background: var(--glass2);
}

/* ── Enhanced Input Focus States ───────────────────────── */

.form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(34,211,165,0.08), 0 4px 12px rgba(0,0,0,0.1);
  background: var(--bg3);
}

.form-input:hover:not(:focus) {
  border-color: var(--border2);
  background: rgba(30,37,56,0.5);
}

/* ── Feedback Messages ─────────────────────────────────── */

.feedback-msg {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  animation: fadeInUp 0.3s ease;
}

.feedback-msg.success {
  background: rgba(34,211,165,0.1);
  border: 1px solid rgba(34,211,165,0.2);
  color: var(--green);
}

.feedback-msg.error {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.2);
  color: var(--red);
}

/* ── Toggle Switch Enhancement ─────────────────────────── */

.toggle-switch {
  transition: background var(--transition), box-shadow var(--transition);
}

.toggle-item input:checked + .toggle-switch {
  box-shadow: 0 0 12px rgba(34,211,165,0.25);
}

/* ── Scrollbar Styling ─────────────────────────────────── */

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ── Enhanced Selection ────────────────────────────────── */

::selection {
  background: rgba(34,211,165,0.25);
  color: var(--text);
}

/* ── Smooth Section Transitions ────────────────────────── */

.aba {
  animation: fadeInUp 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── Glassmorphism Enhancement ─────────────────────────── */

.form-glass,
.dash-card,
.stat-card,
.numero-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Prot Table Enhancement ────────────────────────────── */

.prot-table {
  border-collapse: separate;
  border-spacing: 0;
}

.prot-table th {
  background: var(--bg4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.prot-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.prot-table tr:hover td {
  background: var(--glass2);
}

.prot-table th:first-child { border-radius: 8px 0 0 0; }
.prot-table th:last-child  { border-radius: 0 8px 0 0; }

/* ── Notification Toast ────────────────────────────────── */

.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 1000;
  font-size: 13px;
  max-width: 340px;
}

/* ── Card Accent Border ────────────────────────────────── */

.form-glass.accent-green { border-left: 3px solid var(--green); }
.form-glass.accent-blue  { border-left: 3px solid var(--blue); }
.form-glass.accent-orange { border-left: 3px solid var(--orange); }
.form-glass.accent-red   { border-left: 3px solid var(--red); }

/* ── Loading Skeleton ──────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg4) 25%,
    var(--glass2) 50%,
    var(--bg4) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ── Empty State Enhancement ───────────────────────────── */

.empty-state {
  animation: fadeInUp 0.5s ease;
}

.empty-icon {
  animation: pulse 3s ease-in-out infinite;
}

/* ── Form Label Enhancement ────────────────────────────── */

.form-label {
  display: block;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 7px;
  font-weight: 500;
  transition: color var(--transition);
}

.form-group:focus-within .form-label,
.form-label:has(+ .form-input:focus) {
  color: var(--green);
}

/* ── Hover Glow for Bot Pairing Code ───────────────────── */

#bot-pairing-wrap {
  transition: border-color var(--transition), box-shadow var(--transition);
}

#bot-pairing-wrap:hover {
  border-color: var(--accent3, var(--green));
  box-shadow: 0 0 20px rgba(34,211,165,0.08);
}

#bot-pairing-code {
  transition: text-shadow var(--transition);
}

#bot-pairing-code:hover {
  text-shadow: 0 0 16px rgba(34,211,165,0.4);
}

/* ── Responsive Improvements ───────────────────────────── */

@media (max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .dash-row { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
}