@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---------- Paleta "Nova": la misma que ya usan las herramientas ---------- */
  --bg:#0A0B0D;
  --bg-soft:#101216;
  --panel:#16181B;
  --panel-soft:#1B1E23;
  --border:#262A31;
  --border-soft:#1E2126;
  --text:#E7EAEE;
  --text-dim:#94A3B8;
  --text-faint:#5B6472;

  --nova:#3D7DFF;
  --nova-dark:#2C5FD9;
  --nova-violet:#7C6CFF;
  --nova-deep:#060914;

  --success:#22C55E;
  --success-bg:rgba(34,197,94,0.12);
  --pending:#F5A623;
  --pending-bg:rgba(245,166,35,0.12);
  --danger:#EF4444;
  --danger-bg:rgba(239,68,68,0.12);

  --radius:14px;
  --radius-sm:10px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--nova);
  outline-offset:2px;
}
h1,h2,h3{ font-weight:700; margin:0; letter-spacing:-0.01em; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.hidden{ display:none !important; }

/* ---------- BRAND (usado en las cabeceras .appbar de cada página) ---------- */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-width:0; }
.brand-mark{
  width:34px; height:34px; position:relative; flex:none; border-radius:9px;
  background:linear-gradient(135deg, var(--nova-deep), var(--nova-dark) 55%, var(--nova));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff; letter-spacing:-0.02em;
  box-shadow:0 2px 10px -2px rgba(61,125,255,0.5);
}
.brand-mark::after{ content:"H"; }
.brand-mark span{ display:none; }
.brand-text{ line-height:1.15; min-width:0; }
.brand-name{ font-weight:700; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-tagline{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  min-height:42px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-size:13.5px; font-weight:600; letter-spacing:0.01em;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary{ background:var(--nova); color:#fff; box-shadow:0 4px 14px -4px rgba(61,125,255,0.55); }
.btn-primary:hover{ background:var(--nova-dark); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(61,125,255,0.65); }
.btn-primary:active{ transform:translateY(0) scale(0.97); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-dim); background:var(--panel-soft); }
.btn-ghost:active{ transform:scale(0.97); }
.btn-dark{ background:var(--panel); color:var(--text); border-color:var(--border); }
.btn-dark:hover{ background:var(--panel-soft); border-color:var(--text-dim); }
.btn-dark:active{ transform:scale(0.97); }
.btn-danger-outline{ background:transparent; border-color:rgba(239,68,68,0.35); color:var(--danger); }
.btn-danger-outline:hover{ border-color:var(--danger); background:var(--danger-bg); }
.btn-danger-outline:active{ transform:scale(0.97); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.5; cursor:default; transform:none !important; box-shadow:none !important; }
.btn-sm{ padding:8px 13px; font-size:12.5px; min-height:36px; }

/* ---------- EYEBROW (usado en tarjetas de auth y de bienvenida) ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--nova);
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px;
}
.eyebrow::before, .eyebrow::after{ content:""; width:16px; height:1px; background:var(--nova); opacity:0.5; }

/* ---------- AUTH / STATUS PAGES ---------- */
.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(61,125,255,0.08), transparent 60%), var(--bg); }
.auth-card{ width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; position:relative; overflow:hidden; }
.auth-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--nova), var(--nova-violet)); }
.auth-back{ font-size:12.5px; color:var(--text-dim); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; }
.auth-back:hover{ color:var(--text); }
.auth-card .eyebrow{ margin-bottom:6px; }
.auth-card h1{ font-size:21px; margin-bottom:5px; }
.auth-card .sub{ font-size:13px; color:var(--text-dim); margin-bottom:22px; line-height:1.5; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.field input{ width:100%; padding:11px 12px; font-family:'Inter', sans-serif; font-size:14.5px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-soft); color:var(--text); }
.field input::placeholder{ color:var(--text-faint); }
.field input:focus{ outline:none; border-color:var(--nova); background:var(--panel-soft); }

.switch-line{ text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:18px; }
.switch-line a{ color:var(--nova); font-weight:600; text-decoration:none; cursor:pointer; }
.switch-line a:hover{ text-decoration:underline; }

.alert{ font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:var(--radius-sm); margin-top:14px; display:none; }
.alert.show{ display:block; }
.alert.err{ background:var(--danger-bg); color:#FCA5A5; }

.status-card{ max-width:400px; text-align:center; }
.status-icon{ width:48px; height:48px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:17px; }
.status-icon.wait{ background:var(--pending-bg); color:var(--pending); }
.status-icon.stop{ background:var(--danger-bg); color:var(--danger); }
.status-card h1{ font-size:20px; margin-bottom:12px; }
.status-card p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin-bottom:22px; }

/* ---------- APP SHELL ---------- */
.appbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--border-soft); background:rgba(10,11,13,0.9); backdrop-filter:blur(10px); position:sticky; top:0; z-index:30; }
.appbar .who{ font-size:12.5px; color:var(--text-dim); }
.appbar .who strong{ color:var(--text); }
.appbar-actions{ display:flex; align-items:center; gap:10px; }
.admin-pill{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.06em; color:var(--nova); background:rgba(61,125,255,0.12); padding:3px 8px; border-radius:20px; }

/* ---------- ADMIN ---------- */
.admin-wrap{ max-width:900px; margin:0 auto; padding:24px 18px 60px; }
.admin-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; flex-wrap:wrap; gap:8px; }
.admin-head h1{ font-size:21px; }
.admin-sub{ color:var(--text-dim); font-size:12.5px; margin-bottom:22px; }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
.stat{ background:var(--panel); padding:14px 16px; }
.stat .n{ font-family:'IBM Plex Mono', monospace; font-size:22px; font-weight:600; }
.stat .l{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }

.admin-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.search-field{ position:relative; flex:1; min-width:200px; max-width:320px; }
.search-field input{ width:100%; padding:9px 12px; font-family:'Inter',sans-serif; font-size:13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); }
.search-field input::placeholder{ color:var(--text-faint); }
.search-field input:focus{ outline:none; border-color:var(--nova); }
.filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-tab{ padding:7px 12px; font-size:12px; border-radius:20px; border:1px solid var(--border); background:var(--panel); color:var(--text-dim); }
.filter-tab.active{ background:var(--nova); color:#fff; border-color:var(--nova); }

table.users-table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table.users-table th{ text-align:left; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-dim); padding:10px 14px; border-bottom:1px solid var(--border); background:var(--panel-soft); }
table.users-table td{ padding:12px 14px; font-size:13px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
table.users-table tr:last-child td{ border-bottom:none; }
table.users-table a.wa-link{ color:var(--nova); text-decoration:none; }
table.users-table a.wa-link:hover{ text-decoration:underline; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge.pending{ background:var(--pending-bg); color:var(--pending); }
.badge.pending::before{ background:var(--pending); }
.badge.active{ background:var(--success-bg); color:var(--success); }
.badge.active::before{ background:var(--success); }
.badge.disabled{ background:var(--danger-bg); color:var(--danger); }
.badge.disabled::before{ background:var(--danger); }
.row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.empty-note{ padding:32px; text-align:center; color:var(--text-dim); font-size:13px; }

/* ---------- ANIMACIONES ---------- */
table.users-table tbody tr{ transition:background .15s ease; }
table.users-table tbody tr:hover{ background:var(--panel-soft); }
.filter-tab{ transition:background .15s ease, color .15s ease, border-color .15s ease; }
.badge.pending::before{ animation:pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.06s; }
[data-reveal-delay="2"]{ transition-delay:.12s; }
[data-reveal-delay="3"]{ transition-delay:.18s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

@media (min-width: 640px){
  .hero-cta{ flex-direction:row; justify-content:center; }
  .hero-cta .btn{ width:auto; }
  .pillar-row{ flex-direction:row; }
  .pillar{ flex:1; flex-direction:column; align-items:flex-start; text-align:left; }
  .closing-box{ display:flex; align-items:center; justify-content:space-between; text-align:left; gap:24px; }
  .closing-box .btn{ width:auto; flex:none; }
  .footer-row{ flex-direction:row; justify-content:space-between; text-align:left; }
}

@media (max-width: 480px){
  .navlinks a.navlink{ display:none; }
  .brand-tagline{ display:none; }
  .appbar .who{ display:none; }
  .field input, .search-field input{ font-size:16px; } /* evita zoom automático en Android/iOS */
  table.users-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .admin-toolbar{ flex-direction:column; align-items:stretch; }
  .search-field{ max-width:none; }
}

/* ================================================================
   NOVA LOADER — animación de entrada tras activación de cuenta
   ================================================================ */
#nova-loader{
  position:fixed; inset:0; z-index:200;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(61,125,255,0.16), transparent 70%),
    var(--nova-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .7s ease, visibility .7s ease;
}
#nova-loader.nova-hide{ opacity:0; visibility:hidden; pointer-events:none; }

.nova-stage{ position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; }

.nova-ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(61,125,255,0.35);
  animation:novaRingExpand 3.2s ease-out infinite;
}
.nova-ring.r1{ width:60px; height:60px; animation-delay:0s; }
.nova-ring.r2{ width:60px; height:60px; animation-delay:0.8s; }
.nova-ring.r3{ width:60px; height:60px; animation-delay:1.6s; }
.nova-ring.r4{ width:60px; height:60px; animation-delay:2.4s; }
@keyframes novaRingExpand{
  0%{ transform:scale(1); opacity:0.9; border-color:rgba(124,108,255,0.7); }
  100%{ transform:scale(3.6); opacity:0; border-color:rgba(61,125,255,0); }
}

.nova-core{
  position:relative; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--nova) 45%, var(--nova-violet) 100%);
  box-shadow:0 0 30px 6px rgba(61,125,255,0.7), 0 0 70px 20px rgba(61,125,255,0.35);
  animation:novaCorePulse 2.1s ease-in-out infinite;
}
@keyframes novaCorePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.14); }
}

.nova-particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#bcd3ff; box-shadow:0 0 6px 1px rgba(188,211,255,0.8);
  animation:novaParticleDrift 4.5s ease-in-out infinite;
}
@keyframes novaParticleDrift{
  0%,100%{ transform:translate(0,0); opacity:0; }
  15%{ opacity:1; }
  50%{ transform:translate(var(--px,60px), var(--py,-40px)); opacity:0.9; }
  85%{ opacity:0; }
}

.nova-copy{ position:absolute; bottom:-104px; left:50%; transform:translateX(-50%); width:280px; text-align:center; }
.nova-title{
  font-weight:800; color:#fff; font-size:22px;
  letter-spacing:-0.01em; margin-bottom:4px;
}
.nova-sub{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--nova); margin-bottom:20px;
}

.nova-bar-track{ width:220px; height:2px; background:rgba(255,255,255,0.12); border-radius:2px; overflow:hidden; margin:0 auto 10px; }
.nova-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--nova), var(--nova-violet)); box-shadow:0 0 10px rgba(61,125,255,0.8); }
.nova-percent{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(255,255,255,0.55); letter-spacing:0.08em; }

@media (prefers-reduced-motion: reduce){
  #nova-loader{ transition:none; }
  .nova-ring, .nova-core, .nova-particle{ animation:none; }
}

/* ================================================================
   DASHBOARD — "¿Qué vamos a hacer hoy?"
   ================================================================ */
.dash-hidden{ opacity:0; visibility:hidden; }

.dash-main{ padding:32px 18px 56px; max-width:560px; margin:0 auto; }
.dash-head{ margin-bottom:20px; }
.dash-head h1{ font-size:22px; }

.tool-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}

.tool-card{
  position:relative; display:flex; align-items:center; gap:15px;
  padding:20px 18px 20px 22px;
  text-decoration:none; color:var(--text);
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.tool-card:not(.disabled):hover{ transform:translateY(-2px); border-color:var(--border-soft); }
.tool-card::before{
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:var(--accent, var(--nova));
}

.tool-card-icon{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-bg, rgba(61,125,255,0.14)); color:var(--accent, var(--nova));
}
.tool-card-icon svg{ width:21px; height:21px; }
.tool-card-title{ flex:1; min-width:0; font-weight:700; font-size:15.5px; line-height:1.3; }
.tool-card-arrow{ flex:none; color:var(--text-faint); transition:transform .15s ease, color .15s ease; }
.tool-card:not(.disabled):hover .tool-card-arrow{ transform:translateX(3px); color:var(--accent, var(--nova)); }

.tool-card.disabled{ cursor:not-allowed; opacity:0.55; }
.tool-card.disabled::before{ background:var(--text-faint); }
.tool-card.disabled .tool-card-icon{ background:var(--panel-soft); color:var(--text-faint); }
.tool-card-badge{
  flex:none;
  font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; background:var(--panel-soft); color:var(--text-faint);
  border:1px solid var(--border);
}

.tool-card.accent-green{ --accent:var(--success); --accent-bg:var(--success-bg); }
.tool-card.accent-amber{ --accent:var(--pending); --accent-bg:var(--pending-bg); }
.tool-card.accent-blue{ --accent:var(--nova); --accent-bg:rgba(61,125,255,0.14); }
.tool-card.accent-violet{ --accent:var(--nova-violet); --accent-bg:rgba(124,108,255,0.14); }

@media (max-width: 640px){
  .dash-main{ padding:24px 16px 40px; }
  .dash-head h1{ font-size:19px; }
  .tool-card{ padding:17px 16px 17px 20px; }
}

/* Entrada propia del dashboard (se dispara al ocultar el loader en app.html, no por scroll).
   Restringido a #dash-shell para que NO afecte otras páginas (ej. Modulación Master)
   que reutilizan estas mismas clases pero no tienen el loader/animación. */
#dash-shell .dash-head, #dash-shell .tool-grid{ opacity:0; transform:translateY(14px); }
#dash-shell.dash-animate .dash-head{
  animation:dashFadeIn .6s cubic-bezier(0.16,1,0.3,1) forwards;
}
#dash-shell.dash-animate .tool-grid{
  animation:dashFadeIn .6s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay:.08s;
}
@keyframes dashFadeIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  #dash-shell .dash-head, #dash-shell .tool-grid{ opacity:1; transform:none; animation:none; }
}

/* ================================================================
   MODULACIÓN MASTER — aviso y navegación de vuelta
   ================================================================ */
.mm-notice{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(61,125,255,0.08); border:1px solid rgba(61,125,255,0.22);
  border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:24px;
}
.mm-notice svg{ flex:none; color:var(--nova); margin-top:2px; }
.mm-notice p{ font-size:13px; line-height:1.55; color:var(--text); margin:0; }

.mm-back{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:20px; font-size:13px; color:var(--text-dim); text-decoration:none;
}
.mm-back:hover{ color:var(--text); }

/* ---------- Botón flotante "Instalar app" (PWA) ---------- */
.install-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:20px;
  background:rgba(61,125,255,0.12); border:1px solid rgba(61,125,255,0.3); color:var(--nova);
  font-size:12px; font-weight:600;
}
.install-btn:hover{ background:rgba(61,125,255,0.2); }

/* ---------- Pestañas principales del panel de admin ---------- */
.main-tabs{ display:flex; gap:8px; margin:22px 0 20px; border-bottom:1px solid var(--border); }
.main-tab{
  padding:10px 4px; margin-bottom:-1px; font-size:14px; font-weight:600; color:var(--text-dim);
  border-bottom:2px solid transparent; background:none;
}
.main-tab.active{ color:var(--text); border-bottom-color:var(--nova); }
.main-tab + .main-tab{ margin-left:14px; }

/* ---------- Tarjetas de herramientas exclusivas de admin ---------- */
.admin-tool-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; }
@media (min-width:640px){ .admin-tool-grid{ grid-template-columns:1fr 1fr; } }
.admin-tool-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:20px; text-align:left;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .15s ease, border-color .15s ease;
}
.admin-tool-card:hover{ transform:translateY(-2px); border-color:var(--nova); }
.admin-tool-icon{ font-size:26px; line-height:1; }
.admin-tool-name{ font-weight:700; font-size:15px; color:var(--text); }
.admin-tool-desc{ font-size:12.5px; color:var(--text-dim); line-height:1.4; }

/* ---------- Modal genérico (crear plantilla, y otros a futuro) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.hidden{ display:none; }
.modal-card{
  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border);
  border-radius:18px; padding:22px; box-shadow:0 20px 50px -12px rgba(0,0,0,0.6);
}
.modal-card h2{ font-size:17px; margin:0 0 4px; color:var(--text); }
.modal-sub{ font-size:12.5px; color:var(--text-dim); margin:0 0 16px; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions .btn{ flex:1; justify-content:center; }
.espesor-row{ display:flex; gap:8px; }
.espesor-btn{
  flex:1; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text-dim); font-size:13px; font-weight:600;
}
.espesor-btn.active{ border-color:var(--nova); background:rgba(61,125,255,0.12); color:var(--nova); }