:root {
      --accent: #7c3aed;
      --accent-2: #06b6d4;
      --ring: rgba(124,58,237,.35);
      --bg-soft: #f8fafc;
      --text-muted-strong: #64748b;
      --radius: 1rem;
      --card-pad: clamp(.8rem, 1.5vw, 1.25rem);
    }
    /* Respect user’s OS theme on first visit */
    @media (prefers-color-scheme: dark) {
      :root { color-scheme: dark; }
      html:not([data-theme="light"]) { --bg-soft:#0b1220; --text-muted-strong:#8b9bb4; }
    }

    html, body { height: 100%; background: var(--bg-soft); }
    .brand-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border:none; color:#fff; box-shadow:0 8px 24px rgba(124,58,237,.25); }
    .btn-accent:focus-visible { box-shadow:0 0 0 .25rem var(--ring); }

    .topbar-blur { backdrop-filter:saturate(1.2) blur(10px); background:rgba(255,255,255,.75); border-bottom:1px solid rgba(0,0,0,.06); }
    [data-theme="dark"] .topbar-blur { background:rgba(13,17,23,.7); border-bottom-color:rgba(255,255,255,.08); }

    .sidebar { width: 280px; background:#fff; border-right:1px solid rgba(0,0,0,.06); }
    [data-theme="dark"] .sidebar { background:#0f1629; border-right-color:rgba(255,255,255,.08); }
    .sidebar .nav-link { border-radius:.75rem; padding:.6rem .8rem; }

    .card { border-radius: var(--radius); }
    .card.kpi { border:1px solid rgba(124,58,237,.15); background:rgba(255,255,255,.6); backdrop-filter: blur(10px); }
    [data-theme="dark"] .card.kpi { background:rgba(13,17,23,.55); border-color:rgba(124,58,237,.25); }
    .kpi .kpi-icon { width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(6,182,212,.15));
      box-shadow: inset 0 0 0 1px rgba(124,58,237,.2);
    }

    .hover-rise { transition:transform .15s ease, box-shadow .15s ease; }
    .hover-rise:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(124,58,237,.12); }

    .status-dot { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; margin-right:.4rem; }
    .status-ok { background:#10b981; } .status-warn{ background:#f59e0b; } .status-err{ background:#ef4444; }

    /* Table → Card list on small screens */
    .table-wrap { padding: var(--card-pad); }
    .device-table { width:100%; }
    @media (max-width: 768px) {
      .device-table { display:none; }
      .device-cards { display:grid; gap:.75rem; }
      .device-card { border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:var(--card-pad); background:#fff; }
      [data-theme="dark"] .device-card { background:#111827; border-color:rgba(255,255,255,.08); }
      .device-card .title { font-weight:600; }
      .device-card .muted { color: var(--text-muted-strong); font-size:.9rem; }
      .device-actions { display:flex; gap:.5rem; margin-top:.5rem; }
    }
    @media (min-width: 769px) { .device-cards { display:none; } }

    /* Sticky mobile actions */
    @media (max-width: 768px) {
      .mobile-actions {
        position: sticky; bottom:0; left:0; right:0;
        background: rgba(255,255,255,.9);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,.08);
        padding: .5rem .75rem;
        z-index: 1030;
      }
      [data-theme="dark"] .mobile-actions { background: rgba(15,22,41,.9); border-top-color: rgba(255,255,255,.1); }
      .mobile-actions .btn { padding:.65rem .75rem; }
    }

    /* Accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
    }