:root {
  --wan-dark: #040136;
  --wan-light: #f8f6ff;
  --wan-accent: #2201b2;
  --wan-border: #e7e2f6;
  --wan-muted: #6f6b87;
}

body { background: var(--wan-light); color: var(--wan-dark); }
a { color: var(--wan-accent); }
.app-nav { background: var(--wan-dark); }
.brand-logo { height: 34px; width: auto; max-width: 180px; object-fit: contain; }
.login-logo { max-width: 240px; max-height: 90px; object-fit: contain; }
.login-shell { width: min(100%, 440px); }
.min-vh-75 { min-height: 75vh; }
.panel-card, .app-card { border: 1px solid var(--wan-border); border-radius: 18px; }
.app-card { box-shadow: 0 10px 30px rgba(4,1,54,.05); }
.metric-box { background: white; border: 1px solid var(--wan-border); border-radius: 14px; padding: 16px; }
.metric-label { color: var(--wan-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.metric-value { font-size: clamp(1.1rem, 1.55vw, 1.65rem); font-weight: 700; line-height: 1.15; margin-top: 4px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.eyebrow { color: var(--wan-accent); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 6px; }
.btn-accent { background: var(--wan-accent); border-color: var(--wan-accent); color: white; }
.btn-accent:hover, .btn-accent:focus { background: #19008e; border-color: #19008e; color: white; }
.btn-soft { background: white; border-color: var(--wan-border); color: var(--wan-dark); }
.btn-soft:hover { background: #efebff; border-color: #d8d0f5; }
.btn-nav-link { color: #fff; border-color: transparent; }
.btn-nav-link:hover, .btn-nav-link:focus { color: #fff; border-color: rgba(255,255,255,.35); }
.empty-metrics { padding: 30px; border: 1px dashed var(--wan-border); border-radius: 14px; color: var(--wan-muted); text-align: center; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #a4a0b6; }
.status-online { background: #20a75a; }
.status-error { background: #d23b3b; }
.status-offline { background: #d23b3b; }
.platform-disabled { opacity: .78; }
.platform-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--wan-muted); font-size: .78rem; }
.executive-alert { border-radius: 10px; border-left: 4px solid; padding: .65rem .8rem; font-size: .88rem; background: #f5f3fb; }
.executive-alert.alert-info { border-color: #5384cc; }
.executive-alert.alert-warning { border-color: #d59a18; background: #fff8e7; }
.executive-alert.alert-danger { border-color: #c82f3e; background: #fff0f1; }
.table { --bs-table-bg: transparent; }
.form-control:focus, .form-check-input:focus { border-color: var(--wan-accent); box-shadow: 0 0 0 .2rem rgba(34,1,178,.12); }
code { color: var(--wan-accent); }

@media (max-width: 767.98px) {
  .app-nav .navbar-collapse { padding: .85rem 0 .25rem; }
  .nav-actions { border-top: 1px solid rgba(255,255,255,.16); padding-top: .85rem; }
  .nav-actions .btn, .nav-actions form, .nav-actions form .btn { width: 100%; }
  .page-actions { width: 100%; }
  .page-actions > a, .page-actions > form, .page-actions > form .btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .brand-logo { max-width: 130px; height: 30px; }
  .card-body { padding: 1.1rem !important; }
  .metric-box { padding: 12px; }
  .metric-value { font-size: 1rem; }
  .app-card-actions { width: 100%; }
  .app-card-actions > a, .app-card-actions > form, .app-card-actions > form .btn { flex: 1 1 0; }
  .mobile-full { width: 100%; }
}