:root{
  --brand1:#6d5efc;
  --brand2:#22c1c3;
  --bg:#f5f7fa;
  --text:#0f172a;
  --muted:#64748b;
  --ok:#16a34a;
  --warn:#d97706;
  --err:#dc2626;
  --radius:16px;
  --line:rgba(15,23,42,.10);
  --shadow:0 18px 50px rgba(15,23,42,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Modern helpers --- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.72rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}
.pill.pppoe{ background: rgba(109,94,252,.12); border-color: rgba(109,94,252,.24); color:#3730a3; }
.pill.hotspot{ background: rgba(34,193,195,.12); border-color: rgba(34,193,195,.24); color:#0b5f63; }
.row-pinned{ background: linear-gradient(90deg, rgba(109,94,252,.10), rgba(34,193,195,.08)) !important; }
.u-meta{ font-size:.78rem; color:var(--muted); margin-top:2px; }

.table-wrap{width:100%; overflow:auto}

/* Mobile stacking helper (opt-in with .table-stack) */
@media (max-width: 768px){
  table.table-stack{width:100%; border-collapse:separate; border-spacing:0 12px}
  .table-stack thead{display:none}
  .table-stack tr{display:block; background:rgba(255,255,255,.85); border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:12px; box-shadow:0 10px 25px rgba(15,23,42,.07)}
  .table-stack td{display:flex; justify-content:space-between; padding:8px 6px; border:0}
  .table-stack td::before{content:attr(data-label); font-weight:650; margin-right:12px; color:#475569}
}

/* Sticky toolbars */
.toolbar{position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.7); border-bottom:1px solid rgba(15,23,42,.08)}

input, select, button{min-height:44px}
button.icon{width:44px; height:44px; display:inline-grid; place-items:center; border-radius:12px}

/* Skeleton */
.skel{position:relative; overflow:hidden; background:#e6e9f0; border-radius:12px}
.skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:sh 1.2s infinite}
@keyframes sh{100%{transform:translateX(100%)}}

/* Toast */
.toast{position:fixed; right:16px; bottom:16px; z-index:9999; background:#111; color:#fff; padding:12px 14px; border-radius:12px; box-shadow:0 14px 35px rgba(0,0,0,.25); opacity:.95}

/* Secrets */
.secret{letter-spacing:0.12em; filter:blur(4px)}
.secret.revealed{filter:none; letter-spacing:inherit}

.hidden{display:none!important}
.loading .hide-while-loading{opacity:.35; pointer-events:none}

@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --line:rgba(148,163,184,.18); --shadow:0 22px 70px rgba(0,0,0,.45); }
  body{
    background:
      radial-gradient(1200px 700px at 10% -10%, rgba(109,94,252,.22), transparent 55%),
      radial-gradient(900px 500px at 95% 5%, rgba(34,193,195,.16), transparent 60%),
      linear-gradient(180deg,#0b1220 0%, #0e1630 55%, #0b1220 100%);
  }
  .toolbar{ background:rgba(2,6,23,.55); border-bottom:1px solid rgba(255,255,255,.10); }
  .pill{ background: rgba(2,6,23,.35); border-color: rgba(255,255,255,.14); }
  .table-stack tr{ background: rgba(2,6,23,.55); border-color: rgba(255,255,255,.10); }
}