:root{
  /* brand palette */
  --c1:#4666ff;   /* cyan-violet */
  --c2:#c88af3;   /* magenta */
  --c3:#3c1c57;   /* deep indigo */

  /* text tokens (dark) */
  --text-primary:#e9e9f5;
  --text-secondary:#dbdcff;
  --text-muted:rgba(255,255,255,.58);

  /* glass */
  --glass-bg:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.28);

  --sidebar-w:261px;
  --bg-grad:
    radial-gradient(1400px circle at 15% 20%,rgba(70,102,255,.50)0%,rgba(70,102,255,0)60%),
    radial-gradient(1100px circle at 85% 85%,rgba(200,138,243,.45)0%,rgba(200,138,243,0)55%),
    radial-gradient(1600px circle at 70% 45%,rgba(60,28,87,.60)0%,rgba(60,28,87,0)70%),
    linear-gradient(135deg,hsl(235 35% 15%)0%,hsl(245 34% 13%)35%,hsl(268 30% 11%)65%,hsl(275 28% 10%)100%) fixed;
}

html,body{height:100%;font-family:'Poppins',sans-serif}
body{background:var(--bg-grad);background-attachment:fixed;background-size:cover;min-height:100vh;color:var(--text-primary);color-scheme:dark;animation:hueShift 20s linear infinite alternate}
@keyframes hueShift{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(30deg)}}

.wc-navbar{backdrop-filter:blur(14px);background:rgba(25,25,25,.25)!important;border-bottom:1px solid var(--glass-border);z-index:1045}
.notif-badge{top:.3rem;right:.45rem;font-size:.55rem;padding:.18em .45em}

#sidebar{width:var(--sidebar-w);position:fixed;top:56px;left:0;bottom:0;z-index:1040;backdrop-filter:blur(14px) brightness(1.25);background:rgba(15,15,15,.25);border-right:1px solid var(--glass-border);overflow-y:auto;scrollbar-width:thin}
.sidebar-brand{border-bottom:1px solid var(--glass-border)}
.sidebar-brand img{display:block;margin-inline:auto}
#sidebar .nav-link{color:var(--text-secondary);font-size:.86rem;padding:.7rem 1rem}
#sidebar .nav-link.active{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
#sidebar .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}

.app-main{margin-left:var(--sidebar-w);padding-top:72px;padding-bottom:48px}
.page-wrap{padding-inline:1rem}

.wc-card{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(16px) saturate(180%);border-radius:1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.35,.85,.4,1),box-shadow .25s}
.wc-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.32)}
.wc-card, .wc-card p, .wc-card li, .wc-card td, .wc-card th, .wc-card h5, .wc-card h6 { color: var(--text-primary); }
.wc-card h6{font-size:.9rem;letter-spacing:.35px;text-transform:uppercase;color:var(--text-muted)}
.wc-card .fs-4{color:var(--text-primary)}
.wc-card table td{padding:.35rem .5rem;font-size:.83rem;color:var(--text-secondary)}
.text-white-50{color:var(--text-muted)!important}

.log-stream{min-height:220px;height:260px;overflow:auto;border:1px dashed rgba(255,255,255,.25);padding:.5rem;border-radius:.5rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.log-line{white-space:nowrap}
.log-line .lvl-ERROR{color:#ff8585}
.log-line .lvl-WARN{color:#ffd27a}
.log-line .lvl-INFO{color:#a8e5a8}

/* LIGHT (day) MODE */
html[data-theme="light"]{
  --text-primary:#111;
  --text-secondary:#1f2630;
  --text-muted:rgba(0,0,0,.58);
}
html[data-theme="light"] body{color-scheme:light;animation:none}
html[data-theme="light"] #sidebar{background:rgba(255,255,255,.70);border-color:rgba(0,0,0,.12)}
html[data-theme="light"] .wc-navbar{background:rgba(255,255,255,.70)!important;border-color:rgba(0,0,0,.12)}
html[data-theme="light"] .wc-card{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.12)}
html[data-theme="light"] #sidebar .nav-link{color:var(--text-secondary)}
html[data-theme="light"] #sidebar .nav-link.active{background:rgba(0,0,0,.06);color:#111}

/* High contrast (toggle in Settings) */
html[data-contrast="high"] .wc-card{box-shadow:0 0 0 1px rgba(255,255,255,.65), 0 12px 28px rgba(0,0,0,.4)}
html[data-contrast="high"] .table-dark td, html[data-contrast="high"] .table-dark th{color:#fff!important}

/* Small helpers */
.badge-dot{display:inline-flex;align-items:center;gap:.35rem}
.badge-dot::before{content:"";width:.5rem;height:.5rem;border-radius:50%}
.badge-dot.sev-critical::before{background:#ff4d4d}
.badge-dot.sev-high::before{background:#ff9f43}
.badge-dot.sev-medium::before{background:#ffd93d}
.badge-dot.sev-low::before{background:#58d68d}