/* ===========================================================
   MotoRed Fibra · Sistema de 5 temas + auto
   1. ❄️ Frost Glass (DEFAULT - cristal claro)
   2. ☀️ Quantum (claro premium con conexiones)
   3. 🌊 Fiber (oscuro tech con cables)
   4. 🌌 Aurora (oscuro con auroras)
   5. ⚡ Neon Cyber (negro con neón)
   AUTO: Frost de día (7am-7pm), Aurora de noche
   =========================================================== */

/* ============ TEMA FROST GLASS (default - cristal claro premium) ============ */
[data-theme="frost"] .login-wrap{
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,212,255,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(0,102,255,0.12) 0%, transparent 50%),
    linear-gradient(135deg, #f0f8ff 0%, #ffffff 30%, #e6f3ff 60%, #d1e7ff 100%);
}
[data-theme="frost"] .login-wrap::before{
  background-image:
    /* Hexágonos azul cristal */
    radial-gradient(circle at 15% 18%, rgba(0,102,255,0.15) 0%, transparent 3%),
    radial-gradient(circle at 85% 25%, rgba(0,212,255,0.15) 0%, transparent 3%),
    radial-gradient(circle at 12% 75%, rgba(0,102,255,0.12) 0%, transparent 3%),
    radial-gradient(circle at 88% 80%, rgba(0,212,255,0.12) 0%, transparent 3%),
    /* Pequeñas estrellas de cristal */
    radial-gradient(circle at 35% 45%, rgba(0,212,255,0.4) 0%, transparent 0.4px),
    radial-gradient(circle at 70% 35%, rgba(0,102,255,0.3) 0%, transparent 0.4px),
    radial-gradient(circle at 25% 60%, rgba(0,212,255,0.4) 0%, transparent 0.4px),
    radial-gradient(circle at 65% 70%, rgba(0,102,255,0.3) 0%, transparent 0.4px);
  background-size:100% 100%;
  opacity:0.7;
  animation:none;
  mask-image:none;
  -webkit-mask-image:none
}
[data-theme="frost"] .login-card{
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:24px;
  box-shadow:0 20px 60px rgba(0,102,255,0.1), 0 8px 24px rgba(0,212,255,0.08), inset 0 1px 0 rgba(255,255,255,1);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%)
}
[data-theme="frost"] .login-card::before{
  background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  box-shadow:0 0 20px rgba(0,102,255,0.4)
}
[data-theme="frost"] .login-header .mark{
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 8px 24px rgba(0,102,255,0.15), inset 0 0 0 1px rgba(255,255,255,0.5);
  backdrop-filter:blur(20px)
}
[data-theme="frost"] .login-header h1{
  color:#001233
}
[data-theme="frost"] .login-header h1 .accent,
[data-theme="frost"] .login-header h1 span:last-child{
  background:linear-gradient(135deg, #0066ff, #00d4ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
[data-theme="frost"] .login-header .tagline{color:#00d4ff;letter-spacing:.18em;opacity:.9}
[data-theme="frost"] .login-header p{color:#5b6779}
[data-theme="frost"] .login-form .input{
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(0,102,255,0.15);
  color:#001233;
  border-radius:12px;
  backdrop-filter:blur(10px)
}
[data-theme="frost"] .login-form label{color:#5b6779}
[data-theme="frost"] .login-btn{
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,102,255,0.25), inset 0 1px 0 rgba(255,255,255,0.3)
}
[data-theme="frost"] .login-footer{border-top:1px solid rgba(0,102,255,0.08);color:#8b95a7}
[data-theme="frost"] .login-footer .brand-line{color:var(--primary)}

/* ============ TEMA QUANTUM (claro con conexiones) ============ */
[data-theme="quantum"] .login-wrap{
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,212,255,0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(0,102,255,0.12) 0%, transparent 45%),
    linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #e8f5ff 100%);
}
[data-theme="quantum"] .login-wrap::before{
  background-image:
    radial-gradient(circle at 12% 18%, #0066ff 0%, transparent 1.5px),
    radial-gradient(circle at 35% 25%, #00d4ff 0%, transparent 1.5px),
    radial-gradient(circle at 55% 15%, #0066ff 0%, transparent 1.5px),
    radial-gradient(circle at 88% 30%, #00d4ff 0%, transparent 1.5px),
    radial-gradient(circle at 25% 60%, #0066ff 0%, transparent 1.5px),
    radial-gradient(circle at 75% 70%, #00d4ff 0%, transparent 1.5px),
    radial-gradient(circle at 50% 80%, #0066ff 0%, transparent 1.5px),
    radial-gradient(circle at 90% 90%, #00d4ff 0%, transparent 1.5px),
    radial-gradient(circle at 15% 90%, #0066ff 0%, transparent 1.5px);
  background-size:100% 100%;
  opacity:0.5;
  animation:none;
  mask-image:none;
  -webkit-mask-image:none
}
[data-theme="quantum"] .login-wrap::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(135deg, transparent 49.5%, rgba(0,102,255,0.08) 50%, transparent 50.5%),
    linear-gradient(45deg, transparent 49.5%, rgba(0,212,255,0.06) 50%, transparent 50.5%);
  background-size:60px 60px;
  pointer-events:none;
  opacity:0.4
}
[data-theme="quantum"] .login-card{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,102,255,0.15);
  box-shadow:0 20px 60px rgba(0,102,255,0.12), 0 4px 16px rgba(0,0,0,0.04)
}
[data-theme="quantum"] .login-card::before{
  background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  box-shadow:0 0 16px rgba(0,102,255,0.3)
}
[data-theme="quantum"] .login-header h1{
  background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
[data-theme="quantum"] .login-header .tagline{color:var(--accent-2)}
[data-theme="quantum"] .login-form .input{
  background:#fff;color:var(--text);
  border:1.5px solid rgba(0,102,255,0.15)
}
[data-theme="quantum"] .login-form label{color:var(--text-mute)}
[data-theme="quantum"] .login-footer{border-top:1px solid rgba(0,102,255,0.1)}
[data-theme="quantum"] .login-footer .brand-line{color:var(--primary)}

/* ============ TEMA FIBER (oscuro con cables glow) ============ */
[data-theme="fiber"] .login-wrap{
  background:linear-gradient(180deg, #001028 0%, #002050 50%, #001a3d 100%);
}
[data-theme="fiber"] .login-wrap::before{
  background-image:
    radial-gradient(ellipse 800px 100px at 200px 80px, rgba(0,212,255,0.6) 0%, transparent 50%),
    radial-gradient(ellipse 1000px 120px at 600px 200px, rgba(0,102,255,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 900px 100px at 350px 450px, rgba(0,212,255,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 800px 80px at 700px 380px, rgba(0,212,255,0.4) 0%, transparent 50%);
  background-size:100% 100%;
  opacity:0.7;
  filter:blur(40px);
  animation:fiberFlow 8s ease-in-out infinite;
  mask-image:none;
  -webkit-mask-image:none
}
@keyframes fiberFlow{
  0%,100%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(-30px) translateY(20px)}
}
[data-theme="fiber"] .login-card{
  background:rgba(0,15,40,0.65);
  border:1px solid rgba(0,212,255,0.3);
  box-shadow:0 0 80px rgba(0,212,255,0.2), 0 30px 80px rgba(0,0,0,0.6);
  backdrop-filter:blur(24px)
}
[data-theme="fiber"] .login-card::before{
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 12px var(--accent)
}
[data-theme="fiber"] .login-header .mark{
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,212,255,0.5);
  box-shadow:0 0 32px rgba(0,212,255,0.4)
}
[data-theme="fiber"] .login-header h1{color:#fff;background:none;-webkit-text-fill-color:#fff}
[data-theme="fiber"] .login-header h1 .accent{
  background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
[data-theme="fiber"] .login-header .tagline{color:var(--accent)}
[data-theme="fiber"] .login-header p{color:rgba(255,255,255,0.6)}
[data-theme="fiber"] .login-form .input{
  background:rgba(255,255,255,0.06);color:#fff;
  border:1px solid rgba(0,212,255,0.25)
}
[data-theme="fiber"] .login-form .input::placeholder{color:rgba(255,255,255,0.3)}
[data-theme="fiber"] .login-form label{color:rgba(255,255,255,0.5)}
[data-theme="fiber"] .login-btn{box-shadow:0 4px 24px rgba(0,212,255,0.4)}
[data-theme="fiber"] .login-footer{border-top:1px solid rgba(0,212,255,0.15);color:rgba(255,255,255,0.4)}
[data-theme="fiber"] .login-footer .brand-line{color:var(--accent)}

/* ============ TEMA AURORA (oscuro con auroras) ============ */
[data-theme="aurora"] .login-wrap{
  background:linear-gradient(180deg, #001a3d 0%, #003366 30%, #002050 60%, #001028 100%);
}
[data-theme="aurora"] .login-wrap::before{
  background-image:
    radial-gradient(ellipse 60% 25% at 30% 25%, rgba(0,212,255,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 30% at 70% 35%, rgba(0,102,255,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 80% 25% at 50% 45%, rgba(122,61,255,0.25) 0%, transparent 60%);
  background-size:100% 100%;
  filter:blur(30px);
  opacity:0.85;
  animation:auroraDance 12s ease-in-out infinite;
  mask-image:linear-gradient(180deg, black 0%, black 60%, transparent 90%);
  -webkit-mask-image:linear-gradient(180deg, black 0%, black 60%, transparent 90%)
}
@keyframes auroraDance{
  0%,100%{transform:translateX(0) translateY(0) scale(1)}
  33%{transform:translateX(20px) translateY(-15px) scale(1.05)}
  66%{transform:translateX(-15px) translateY(10px) scale(0.97)}
}
[data-theme="aurora"] .login-card{
  background:rgba(0,16,40,0.55);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:22px;
  box-shadow:0 0 100px rgba(0,212,255,0.15), 0 30px 80px rgba(0,0,0,0.5);
  backdrop-filter:blur(40px)
}
[data-theme="aurora"] .login-card::before{
  background:linear-gradient(90deg, transparent 10%, rgba(0,212,255,0.6) 50%, transparent 90%);
  box-shadow:0 0 20px rgba(0,212,255,0.4)
}
[data-theme="aurora"] .login-header .mark{
  background:#fff;
  box-shadow:0 0 40px rgba(0,212,255,0.3), inset 0 0 0 2px rgba(0,212,255,0.2)
}
[data-theme="aurora"] .login-header h1{color:#fff;background:none;-webkit-text-fill-color:#fff}
[data-theme="aurora"] .login-header h1 .accent{
  background:linear-gradient(135deg, var(--accent), #0099ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
[data-theme="aurora"] .login-header .tagline{color:var(--accent);letter-spacing:.18em}
[data-theme="aurora"] .login-header p{color:rgba(255,255,255,0.55)}
[data-theme="aurora"] .login-form .input{
  background:rgba(255,255,255,0.05);color:#fff;
  border:1px solid rgba(255,255,255,0.15);border-radius:11px
}
[data-theme="aurora"] .login-form .input::placeholder{color:rgba(255,255,255,0.3)}
[data-theme="aurora"] .login-form label{color:rgba(255,255,255,0.5)}
[data-theme="aurora"] .login-btn{box-shadow:0 8px 28px rgba(0,212,255,0.35)}
[data-theme="aurora"] .login-footer{border-top:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.35)}
[data-theme="aurora"] .login-footer .brand-line{color:var(--accent)}

/* ============ TEMA NEON CYBER (negro absoluto con neón) ============ */
[data-theme="neon"] .login-wrap{
  background:#000000;
}
[data-theme="neon"] .login-wrap::before{
  content:'';position:absolute;inset:0;
  background-image:
    /* Líneas grid horizontales */
    linear-gradient(0deg, transparent 0%, rgba(0,255,255,0.5) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(0,255,255,0.3) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(0,255,255,0.4) 50%, transparent 100%);
  background-size:100% 1px, 100% 1px, 100% 1px;
  background-position:0 80px, 0 240px, 0 460px;
  background-repeat:no-repeat;
  pointer-events:none
}
[data-theme="neon"] .login-wrap::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, white 0%, transparent 0.3px),
    radial-gradient(circle at 85% 15%, white 0%, transparent 0.4px),
    radial-gradient(circle at 25% 85%, white 0%, transparent 0.3px),
    radial-gradient(circle at 70% 90%, white 0%, transparent 0.4px),
    radial-gradient(circle at 50% 50%, white 0%, transparent 0.3px),
    radial-gradient(circle at 90% 60%, white 0%, transparent 0.3px);
  background-size:100% 100%;
  opacity:0.5;
  pointer-events:none
}
[data-theme="neon"] .login-card{
  background:rgba(0,0,0,0.85);
  border:1px solid #00ffff;
  border-radius:0;
  box-shadow:0 0 0 1px rgba(0,255,255,0.3), 0 0 60px rgba(0,255,255,0.4), inset 0 0 80px rgba(0,255,255,0.05);
  backdrop-filter:blur(20px)
}
[data-theme="neon"] .login-card::before{
  background:#00ffff;
  box-shadow:0 0 16px #00ffff
}
[data-theme="neon"] .login-header .mark{
  background:transparent;
  border:1px solid #00ffff;
  border-radius:0;
  box-shadow:0 0 24px rgba(0,255,255,0.5), inset 0 0 16px rgba(0,255,255,0.1)
}
[data-theme="neon"] .login-header h1{
  color:#00ffff;
  background:none;-webkit-text-fill-color:#00ffff;
  text-shadow:0 0 12px rgba(0,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.05em
}
[data-theme="neon"] .login-header .tagline{
  color:#00ffff;font-family:var(--mono);
  letter-spacing:0.3em;opacity:0.8
}
[data-theme="neon"] .login-header p{
  color:rgba(0,255,255,0.5);
  font-family:var(--mono)
}
[data-theme="neon"] .login-form .input{
  background:rgba(0,255,255,0.03);
  border:1px solid rgba(0,255,255,0.3);
  border-radius:0;
  color:#00ffff;
  font-family:var(--mono)
}
[data-theme="neon"] .login-form .input::placeholder{color:rgba(0,255,255,0.3)}
[data-theme="neon"] .login-form label{
  color:#00ffff;
  font-family:var(--mono);
  opacity:0.7
}
[data-theme="neon"] .login-btn{
  background:transparent !important;
  color:#00ffff !important;
  border:1px solid #00ffff !important;
  border-radius:0 !important;
  box-shadow:0 0 16px rgba(0,255,255,0.4), inset 0 0 16px rgba(0,255,255,0.05) !important;
  font-family:var(--mono);
  letter-spacing:0.2em;
  text-transform:uppercase
}
[data-theme="neon"] .login-footer{
  border-top:1px solid rgba(0,255,255,0.2);
  color:rgba(0,255,255,0.4);
  font-family:var(--mono)
}
[data-theme="neon"] .login-footer .brand-line{color:#00ffff}

/* ============ Botón flotante de cambio de tema ============ */
.theme-switcher{
  position:fixed;bottom:20px;right:20px;z-index:50;
  display:flex;gap:8px;padding:8px;
  background:rgba(255,255,255,0.95);
  border:1px solid var(--line);
  border-radius:50px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  backdrop-filter:blur(20px)
}
[data-theme="fiber"] .theme-switcher,
[data-theme="aurora"] .theme-switcher,
[data-theme="neon"] .theme-switcher{
  background:rgba(0,15,40,0.85);
  border:1px solid rgba(0,212,255,0.3)
}
[data-theme="neon"] .theme-switcher{
  background:rgba(0,0,0,0.9);
  border:1px solid #00ffff
}
.theme-btn{
  width:36px;height:36px;border-radius:50%;
  border:2px solid transparent;cursor:pointer;
  display:grid;place-items:center;position:relative;
  transition:all .25s;font-size:16px;
  background:transparent
}
.theme-btn:hover{transform:scale(1.1)}
.theme-btn.active{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,102,255,0.15)
}
[data-theme="neon"] .theme-btn.active{
  border-color:#00ffff;
  box-shadow:0 0 0 3px rgba(0,255,255,0.3)
}
.theme-btn[data-tema="frost"]{background:linear-gradient(135deg,#e6f3ff,#d1e7ff)}
.theme-btn[data-tema="quantum"]{background:linear-gradient(135deg,#fff,#e3eefc)}
.theme-btn[data-tema="fiber"]{background:linear-gradient(135deg,#001028,#003366)}
.theme-btn[data-tema="aurora"]{background:linear-gradient(135deg,#001a3d,#7a3dff)}
.theme-btn[data-tema="neon"]{background:linear-gradient(135deg,#000,#00ffff)}
.theme-btn[data-tema="auto"]{background:linear-gradient(135deg,#fff 0%,#fff 49%,#001028 51%,#001028 100%)}
.theme-btn-label{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--text);color:#fff;padding:4px 10px;border-radius:6px;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s
}
.theme-btn:hover .theme-btn-label{opacity:1}

/* ============ Tema oscuro aplicado al PORTAL completo ============ */
body[data-theme="fiber"], body[data-theme="aurora"], body[data-theme="neon"]{
  background:#001028
}
body[data-theme="neon"]{background:#000}
body[data-theme="fiber"] aside.sidebar,
body[data-theme="aurora"] aside.sidebar,
body[data-theme="neon"] aside.sidebar{
  background:linear-gradient(180deg, #001a3d, #001028);
  border-right-color:rgba(0,212,255,0.15)
}
body[data-theme="neon"] aside.sidebar{
  background:#000;
  border-right:1px solid #00ffff
}
body[data-theme="fiber"] .brand,
body[data-theme="aurora"] .brand,
body[data-theme="neon"] .brand{
  background:linear-gradient(180deg, #002050, #001a3d);
  border-bottom-color:rgba(0,212,255,0.15)
}
body[data-theme="neon"] .brand{
  background:#000;border-bottom:1px solid #00ffff
}
body[data-theme="fiber"] .brand-name,
body[data-theme="aurora"] .brand-name{
  background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
body[data-theme="neon"] .brand-name{
  color:#00ffff;text-shadow:0 0 8px rgba(0,255,255,0.5)
}
body[data-theme="fiber"] .brand-tag,
body[data-theme="aurora"] .brand-tag,
body[data-theme="neon"] .brand-tag{color:rgba(255,255,255,0.5)}
body[data-theme="fiber"] .menu a,
body[data-theme="aurora"] .menu a{color:rgba(255,255,255,0.6)}
body[data-theme="neon"] .menu a{color:rgba(0,255,255,0.6);font-family:var(--mono)}
body[data-theme="fiber"] .menu a:hover,
body[data-theme="aurora"] .menu a:hover{
  background:rgba(0,212,255,0.08);color:#fff
}
body[data-theme="neon"] .menu a:hover{
  background:rgba(0,255,255,0.05);color:#00ffff
}
body[data-theme="fiber"] .menu-label,
body[data-theme="aurora"] .menu-label,
body[data-theme="neon"] .menu-label{color:rgba(255,255,255,0.35)}
body[data-theme="fiber"] .menu a.active,
body[data-theme="aurora"] .menu a.active{
  background:linear-gradient(90deg, rgba(0,102,255,0.2), rgba(0,212,255,0.15));
  color:var(--accent)
}
body[data-theme="neon"] .menu a.active{
  background:rgba(0,255,255,0.1);
  color:#00ffff;
  border-left:2px solid #00ffff
}
body[data-theme="fiber"] .sidebar-footer,
body[data-theme="aurora"] .sidebar-footer,
body[data-theme="neon"] .sidebar-footer{
  background:rgba(0,15,40,0.5);
  border-top-color:rgba(0,212,255,0.15)
}
body[data-theme="fiber"] .user-info .name,
body[data-theme="aurora"] .user-info .name,
body[data-theme="neon"] .user-info .name{color:#fff}
body[data-theme="neon"] .user-info .name{color:#00ffff}
body[data-theme="fiber"] .user-info .role,
body[data-theme="aurora"] .user-info .role,
body[data-theme="neon"] .user-info .role{color:rgba(255,255,255,0.5)}
body[data-theme="fiber"] .topbar,
body[data-theme="aurora"] .topbar,
body[data-theme="neon"] .topbar{
  background:rgba(0,16,40,0.7);
  border-bottom-color:rgba(0,212,255,0.15);
  backdrop-filter:blur(20px)
}
body[data-theme="neon"] .topbar{
  background:rgba(0,0,0,0.9);
  border-bottom-color:#00ffff
}
body[data-theme="fiber"] .crumbs,
body[data-theme="aurora"] .crumbs,
body[data-theme="neon"] .crumbs{color:rgba(255,255,255,0.5)}
body[data-theme="fiber"] .crumbs span.current,
body[data-theme="aurora"] .crumbs span.current,
body[data-theme="neon"] .crumbs span.current{color:#fff}
body[data-theme="neon"] .crumbs span.current{color:#00ffff}
body[data-theme="fiber"] .live-dot,
body[data-theme="aurora"] .live-dot,
body[data-theme="neon"] .live-dot{
  background:rgba(0,212,255,0.1);
  border:1px solid rgba(0,212,255,0.3);
  color:rgba(255,255,255,0.7)
}
body[data-theme="neon"] .live-dot{
  background:rgba(0,255,255,0.05);
  border:1px solid #00ffff;
  color:#00ffff;font-family:var(--mono)
}
body[data-theme="fiber"] main,
body[data-theme="aurora"] main,
body[data-theme="neon"] main{background:#001028}
body[data-theme="neon"] main{background:#000}
body[data-theme="fiber"] .page-title,
body[data-theme="aurora"] .page-title,
body[data-theme="neon"] .page-title{color:#fff}
body[data-theme="neon"] .page-title{color:#00ffff;text-shadow:0 0 8px rgba(0,255,255,0.4)}
body[data-theme="fiber"] .panel,
body[data-theme="aurora"] .panel,
body[data-theme="neon"] .panel{
  background:rgba(0,30,60,0.6);
  border-color:rgba(0,212,255,0.15);
  color:rgba(255,255,255,0.85)
}
body[data-theme="neon"] .panel{
  background:rgba(0,0,0,0.7);
  border-color:rgba(0,255,255,0.3);
  color:rgba(0,255,255,0.85);
  border-radius:0
}
body[data-theme="fiber"] .panel-title,
body[data-theme="aurora"] .panel-title,
body[data-theme="neon"] .panel-title{color:#fff}
body[data-theme="neon"] .panel-title{color:#00ffff}
body[data-theme="fiber"] .kpi,
body[data-theme="aurora"] .kpi,
body[data-theme="neon"] .kpi{
  background:rgba(0,30,60,0.6);
  border-color:rgba(0,212,255,0.15)
}
body[data-theme="neon"] .kpi{
  background:rgba(0,0,0,0.8);
  border-color:rgba(0,255,255,0.3);
  border-radius:0
}
body[data-theme="fiber"] .kpi-value,
body[data-theme="aurora"] .kpi-value,
body[data-theme="neon"] .kpi-value{color:#fff}
body[data-theme="neon"] .kpi-value{color:#00ffff;text-shadow:0 0 8px rgba(0,255,255,0.4)}
body[data-theme="fiber"] .kpi-label,
body[data-theme="aurora"] .kpi-label,
body[data-theme="neon"] .kpi-label{color:rgba(255,255,255,0.5)}
body[data-theme="aurora"]{
  background:linear-gradient(180deg, #001a3d 0%, #001028 100%) fixed
}