:root {
  --wf-brand: #0ea5e9;
  --wf-accent: #22c55e;
  --wf-bg: #020617;
  --wf-card: rgba(2, 6, 23, 0.65);
  --wf-stroke: rgba(148, 163, 184, 0.22);
  --wf-radius: 18px;
  --wf-shadow: 0 18px 60px rgba(0,0,0,.35);
}

body { background: radial-gradient(1200px 500px at 20% -10%, rgba(14,165,233,.22), transparent 60%),
               radial-gradient(900px 500px at 90% 0%, rgba(34,197,94,.14), transparent 55%),
               var(--wf-bg); }

.wf-shell { min-height: 100dvh; padding-bottom: 72px; }
@media (min-width: 768px) { .wf-shell { padding-bottom: 0; } }

.wf-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wf-stroke);
  padding: .65rem .85rem;
  display: flex; justify-content: space-between; align-items: center;
}

.wf-brand { display:flex; align-items: baseline; gap:.5rem; }
.wf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wf-brand);
  box-shadow: 0 0 0 6px rgba(14,165,233,.18); }
.wf-sub { font-size:.8rem; color: rgba(148,163,184,.8); }

.wf-userchip { display:flex; align-items:center; gap:.6rem; padding:.35rem .6rem;
  border:1px solid var(--wf-stroke); border-radius: 999px; background: rgba(15,23,42,.35); }
.wf-avatar { width:34px; height:34px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(14,165,233,.35), rgba(34,197,94,.25));
  display:flex; align-items:center; justify-content:center; font-weight:700; }

.wf-pill { border-radius:999px; border:1px solid var(--wf-stroke); background: rgba(15,23,42,.35); color:#fff; }
.wf-pill.offline { border-color: rgba(239,68,68,.55); }
.wf-pill.online { border-color: rgba(34,197,94,.55); }

.wf-main { padding-bottom: 1rem; }

.wf-nav { background: rgba(2,6,23,.96); border-right: 1px solid var(--wf-stroke); }
.wf-menu { display:flex; flex-direction:column; gap:.25rem; }
.wf-mi { display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem;
  border-radius: 14px; color: rgba(226,232,240,.92); text-decoration:none;
  border:1px solid transparent; }
.wf-mi:hover { background: rgba(15,23,42,.45); border-color: var(--wf-stroke); }
.wf-mi i { color: rgba(56,189,248,.9); }
.wf-sep { height:1px; background: var(--wf-stroke); margin:.6rem 0; }

.wf-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1029;
  background: rgba(2,6,23,.9); backdrop-filter: blur(12px);
  border-top: 1px solid var(--wf-stroke);
  display:flex; justify-content:space-around; padding: .45rem .4rem;
}
.wf-bn { color: rgba(226,232,240,.9); text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.15rem; font-size:.78rem; }
.wf-bn i { font-size:1.1rem; color: rgba(56,189,248,.9); }

.wf-card, .wf-kpi {
  background: var(--wf-card);
  border: 1px solid var(--wf-stroke);
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow);
}
.wf-kpi { padding: 1rem; }
.wf-kpi-val { font-size: 1.35rem; font-weight: 800; margin-top:.15rem; }
.wf-kpi-foot { margin-top:.2rem; font-size:.8rem; color: rgba(148,163,184,.8); }

.wf-hero {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; padding:1rem; border-radius: var(--wf-radius);
  border:1px solid var(--wf-stroke);
  background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(34,197,94,.12));
}
.wf-hero-title { font-size:1.1rem; font-weight:800; }
.wf-hero-sub { font-size:.9rem; }

.btn-primary {
  background: var(--wf-brand);
  border-color: var(--wf-brand);
}
.btn-primary:hover { filter: brightness(0.95); }

.wf-alert { border-radius: var(--wf-radius); border:1px solid var(--wf-stroke); }

.wf-login .wf-card { border-radius: 22px; }
.wf-logo { width:44px; height:44px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(14,165,233,.9), rgba(34,197,94,.65));
  display:flex; align-items:center; justify-content:center; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.wf-logo span { width:16px; height:16px; border-radius: 5px; background: rgba(2,6,23,.8); }

.wf-list { display:flex; flex-direction:column; gap:.55rem; }
.wf-li { display:flex; gap:.7rem; align-items:flex-start; padding:.65rem .7rem;
  border-radius: 16px; border:1px solid var(--wf-stroke); background: rgba(15,23,42,.35); }
.wf-li i { font-size: 1.25rem; color: rgba(34,197,94,.9); margin-top:.1rem; }