*,*::before,*::after{box-sizing:border-box}
body{
  font-family:var(--font-sans);
  color:var(--text-primary);
  min-height:100vh;
  transition:background var(--t-slow) var(--ease), color var(--t-base) var(--ease);
}
html:not(.dark) body{
  background:linear-gradient(135deg,#F0EEFF 0%,#E8F0FE 40%,#F5F3FF 100%);
}
html.dark body{
  background:var(--bg-body);
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(108,92,231,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(124,58,237,.08) 0%, transparent 50%);
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(108,92,231,.2)}

.glass-card{
  background:var(--bg-surface);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-medium);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md), var(--glass-highlight);
  transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.glass-card:hover{
  border-color:var(--border-focus);
  box-shadow:var(--shadow-lg), var(--shadow-glow), var(--glass-highlight);
}

.glass-panel{
  background:var(--bg-surface);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm), var(--glass-highlight);
}

.gradient-text{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.logo-icon{
  width:3rem;height:3rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px var(--brand-glow);
}

.premium-input{
  width:100%;padding:.75rem 1rem;
  border:1px solid var(--border-medium);
  border-radius:var(--r-sm);
  font-size:.875rem;font-family:var(--font-sans);
  color:var(--text-primary);
  outline:none;
  transition:all var(--t-base) var(--ease);
  background:var(--bg-input);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.premium-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(108,92,231,.15);
  background:var(--bg-input-focus);
}
.premium-input::placeholder{color:var(--text-muted)}
textarea.premium-input{resize:vertical;min-height:120px}

.premium-input-icon{
  padding-left:2.75rem;
}

.input-group{position:relative}
.input-group .input-icon{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;transition:color var(--t-fast);
  width:1rem;height:1rem;
}
.input-group input:focus ~ .input-icon,
.input-group input:focus + .input-icon{color:var(--brand)}

.btn-gradient{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;border:none;
  padding:.8125rem 1.5rem;border-radius:var(--r-sm);
  font-size:.9375rem;font-weight:600;font-family:var(--font-sans);
  cursor:pointer;
  transition:all var(--t-base) var(--ease);
  box-shadow:0 4px 16px var(--brand-glow);
  width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  position:relative;overflow:hidden;
}
.btn-gradient::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);
  opacity:0;transition:opacity var(--t-base);
}
.btn-gradient:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px var(--brand-glow);
  filter:brightness(1.08);
}
.btn-gradient:hover::before{opacity:1}
.btn-gradient:active{transform:translateY(0);box-shadow:0 2px 8px var(--brand-glow)}
.btn-gradient:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 2px 8px rgba(108,92,231,.15);filter:none}

.btn-ghost{
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border-medium);
  padding:.5rem 1rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:500;font-family:var(--font-sans);
  cursor:pointer;transition:all var(--t-fast) var(--ease);
  display:inline-flex;align-items:center;gap:.375rem;
}
.btn-ghost:hover{
  background:var(--bg-surface-hover);
  border-color:var(--border-focus);
  color:var(--brand);
}

.btn-danger{
  background:linear-gradient(135deg,#EF4444,#DC2626);
  color:#fff;border:none;
  padding:.5rem 1rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:600;font-family:var(--font-sans);
  cursor:pointer;transition:all var(--t-base) var(--ease);
  box-shadow:0 4px 16px rgba(239,68,68,.25);
}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,68,68,.35)}

.btn-success{
  background:linear-gradient(135deg,#10B981,#059669);
  color:#fff;border:none;
  padding:.5rem 1rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:600;font-family:var(--font-sans);
  cursor:pointer;transition:all var(--t-base) var(--ease);
  box-shadow:0 4px 16px rgba(16,185,129,.25);
}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(16,185,129,.35)}

.label-text{
  display:block;
  color:var(--text-tertiary);
  font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:.5rem;
}

.alert-box{
  padding:.75rem 1rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:500;display:none;
}
.alert-error{
  background:var(--alert-error-bg);
  border:1px solid var(--alert-error-border);
  color:var(--alert-error-text);
}
.alert-success{
  background:var(--alert-success-bg);
  border:1px solid var(--alert-success-border);
  color:var(--alert-success-text);
}

.toggle-pwd{
  position:absolute;right:.875rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);cursor:pointer;
  padding:.25rem;border-radius:var(--r-xs);
  transition:all var(--t-fast);background:none;border:none;
}
.toggle-pwd:hover{color:var(--brand);background:rgba(108,92,231,.08)}

.forgot-link{
  background:none;border:none;color:var(--text-muted);
  font-size:.75rem;font-weight:500;cursor:pointer;
  padding:0;transition:all var(--t-fast);text-decoration:none;
}
.forgot-link:hover{color:var(--brand);text-decoration:underline}

.trust-badges{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;color:var(--text-muted);font-weight:500}

.divider{display:flex;align-items:center;gap:1rem;color:var(--text-muted);font-size:.75rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border-subtle)}

.modal-overlay{
  position:fixed;inset:0;
  background:var(--overlay);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;visibility:hidden;transition:all var(--t-base) var(--ease);
}
.modal-overlay.active{opacity:1;visibility:visible}
.modal-overlay.active .modal-card{transform:scale(1);opacity:1}
.modal-card{
  background:var(--bg-elevated);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-medium);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg), var(--glass-highlight);
  width:100%;max-width:420px;
  transform:scale(.92);opacity:0;transition:all var(--t-base) var(--ease);
}
.modal-close{
  position:absolute;top:1rem;right:1rem;
  background:none;border:none;color:var(--text-muted);
  cursor:pointer;padding:.375rem;border-radius:var(--r-xs);
  transition:all var(--t-fast);
}
.modal-close:hover{color:var(--brand);background:rgba(108,92,231,.08)}

@media(max-width:767px){
  .modal-card{max-width:100%;border-radius:var(--r-md);margin:0 .5rem}
  .modal-overlay{padding:.5rem !important}
}

.theme-toggle{
  position:fixed;top:1.25rem;right:1.25rem;z-index:100;
  width:2.5rem;height:2.5rem;border-radius:var(--r-sm);
  background:var(--bg-surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-medium);
  color:var(--text-secondary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-base) var(--ease);
  box-shadow:var(--shadow-sm);
}
.theme-toggle:hover{
  border-color:var(--border-focus);color:var(--brand);
  box-shadow:var(--shadow-md), var(--shadow-glow);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon{width:1.125rem;height:1.125rem;transition:transform var(--t-base) var(--ease)}
html.dark .theme-toggle .icon-sun{display:block}
html.dark .theme-toggle .icon-moon{display:none}
html:not(.dark) .theme-toggle .icon-sun{display:none}
html:not(.dark) .theme-toggle .icon-moon{display:block}

.theme-system-btn{
  position:fixed;top:1.25rem;right:4.25rem;z-index:100;
  width:2.5rem;height:2.5rem;border-radius:var(--r-sm);
  background:var(--bg-surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-medium);
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-base) var(--ease);
  box-shadow:var(--shadow-sm);
  opacity:.6;
}
.theme-system-btn:hover{
  border-color:var(--border-focus);color:var(--brand);
  box-shadow:var(--shadow-md), var(--shadow-glow);
  opacity:1;
}
.theme-system-btn.active{
  border-color:var(--brand);color:var(--brand);
  opacity:1;
  box-shadow:var(--shadow-sm), var(--shadow-glow);
}

.glass-table{width:100%;border-collapse:separate;border-spacing:0}
.glass-table thead{position:sticky;top:0;z-index:2}
.glass-table th{
  background:var(--bg-elevated);
  color:var(--text-tertiary);
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:.75rem 1rem;text-align:left;
  border-bottom:1px solid var(--border-subtle);
}
.glass-table td{
  padding:.75rem 1rem;font-size:.8125rem;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--t-fast);
}
.glass-table tbody tr:hover td{background:var(--bg-surface-hover)}
.glass-table tbody tr:last-child td{border-bottom:none}

.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.1875rem .625rem;border-radius:var(--r-full);
  font-size:.6875rem;font-weight:600;
}
.badge-success{background:rgba(16,185,129,.12);color:#10B981}
.badge-warning{background:rgba(245,158,11,.12);color:#F59E0B}
.badge-danger{background:rgba(239,68,68,.12);color:#EF4444}
.badge-info{background:rgba(99,102,241,.12);color:#6366F1}
.badge-neutral{background:var(--bg-surface);color:var(--text-tertiary)}

.kpi-card{
  background:var(--bg-surface);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-sm), var(--glass-highlight);
  transition:all var(--t-base) var(--ease);
}
.kpi-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-focus);
  box-shadow:var(--shadow-md), var(--shadow-glow), var(--glass-highlight);
}
.kpi-icon{
  width:2.5rem;height:2.5rem;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.kpi-value{font-size:1.75rem;font-weight:800;line-height:1.1;color:var(--text-primary)}
.kpi-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary)}
.kpi-change{font-size:.6875rem;font-weight:600;display:inline-flex;align-items:center;gap:.125rem}
.kpi-change.up{color:var(--success)}
.kpi-change.down{color:var(--danger)}

.sidebar{
  width:260px;min-height:100vh;
  background:var(--bg-surface);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border-subtle);
  position:fixed;top:0;left:0;z-index:40;
  padding:1.5rem 0;
  display:flex;flex-direction:column;
  transition:transform var(--t-base) var(--ease);
  box-shadow:var(--glass-highlight);
}
.sidebar .nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem 1.25rem;margin:0 .75rem;
  border-radius:var(--r-sm);
  color:var(--text-secondary);
  font-size:.8125rem;font-weight:500;
  cursor:pointer;transition:all var(--t-fast) var(--ease);
  border:1px solid transparent;
}
.sidebar .nav-item:hover{
  background:var(--bg-surface-hover);color:var(--text-primary);
}
.sidebar .nav-item.active{
  background:rgba(108,92,231,.1);color:var(--brand);
  border-color:rgba(108,92,231,.15);font-weight:600;
}
.sidebar .nav-section{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);padding:.5rem 2rem;margin-top:1rem;
}

.glass-header{
  background:var(--bg-surface);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--border-subtle);
  padding:.875rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--glass-highlight);
  position:sticky;top:0;z-index:30;
}

.glass-tab{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.5rem 1rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:500;
  color:var(--text-tertiary);cursor:pointer;
  border:1px solid transparent;
  transition:all var(--t-fast) var(--ease);
}
.glass-tab:hover{color:var(--text-primary);background:var(--bg-surface)}
.glass-tab.active{
  color:var(--brand);background:rgba(108,92,231,.08);
  border-color:rgba(108,92,231,.15);font-weight:600;
}

.status-dot{
  width:.5rem;height:.5rem;border-radius:50%;
  display:inline-block;flex-shrink:0;
}
.status-dot.online{background:var(--success);box-shadow:0 0 6px rgba(16,185,129,.5)}
.status-dot.warning{background:var(--warning);box-shadow:0 0 6px rgba(245,158,11,.5)}
.status-dot.error{background:var(--danger);box-shadow:0 0 6px rgba(239,68,68,.5)}
.status-dot.pulse{animation:pulse-dot 2s ease infinite}

@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.3)}
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
.animate-in{animation:fadeInUp .5s var(--ease) forwards}
.animate-in-d1{animation:fadeInUp .5s var(--ease) .1s forwards;opacity:0}
.animate-in-d2{animation:fadeInUp .5s var(--ease) .2s forwards;opacity:0}
.animate-in-d3{animation:fadeInUp .5s var(--ease) .3s forwards;opacity:0}
.animate-fade{animation:fadeIn .4s var(--ease) forwards}
.animate-scale{animation:scaleIn .3s var(--ease) forwards}

.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
  padding:.875rem 1.25rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:500;
  background:var(--bg-elevated);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-medium);
  box-shadow:var(--shadow-lg);
  color:var(--text-primary);
  display:flex;align-items:center;gap:.5rem;
  animation:slideInRight .3s var(--ease);
  max-width:380px;
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(20px)}
  to{opacity:1;transform:translateX(0)}
}

select.premium-input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239CA3AF' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .875rem center;
  padding-right:2.5rem;
}

.glass-dropdown{
  background:var(--bg-elevated);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-medium);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.glass-dropdown-item{
  padding:.5rem 1rem;font-size:.8125rem;
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--t-fast);
}
.glass-dropdown-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}

.empty-state{
  text-align:center;padding:3rem 2rem;
  color:var(--text-tertiary);
}
.empty-state svg{
  width:3rem;height:3rem;margin:0 auto 1rem;
  opacity:.4;
}

.strength-bar{height:4px;border-radius:2px;background:var(--border-subtle);overflow:hidden;transition:all .3s}
.strength-fill{height:100%;border-radius:2px;transition:all .4s}