/* VKS Inspector Head — P1 mobile-first dark dashboard
 * Design system: dark navy + multi-accent + Space Grotesk / DM Sans / JetBrains Mono / Noto Sans Lao
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg-0:#070b14; --bg-1:#0e1422; --bg-2:#151d2e; --bg-3:#1d2740;
  --fg:#e7ecf6; --muted:#8893ad; --dim:#5b6890;
  --accent:#74ff8a; --info:#7ab8ff; --warn:#ffb347; --danger:#ff6b6b; --purple:#c4a8ff; --pink:#ff8ec7;
  --vks:#f6821f;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.04);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin:0; padding:0;
  background:var(--bg-0);
  color:var(--fg);
  font-family:'DM Sans','Noto Sans Lao',sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overscroll-behavior-y:none;
}

body {
  background:
    radial-gradient(900px 600px at 88% -10%, rgba(116,255,138,.04), transparent 55%),
    radial-gradient(700px 500px at 5% 105%, rgba(122,184,255,.04), transparent 55%),
    var(--bg-0);
}

/* utilities */
.lao { font-family:'Noto Sans Lao','DM Sans',sans-serif; }
.mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.num { font-variant-numeric:tabular-nums; }
.grad { background:linear-gradient(135deg, var(--accent), var(--info)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

/* ============ BOOT ============ */
.boot-screen {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  background:var(--bg-0); z-index:1000;
}
.boot-logo {
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg, var(--vks), #ff5e3a);
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:22px; color:#0a0a0a;
  box-shadow:0 12px 30px rgba(246,130,31,.2);
}
.boot-name {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; letter-spacing:-0.01em;
}
.boot-spinner {
  width:24px; height:24px; border-radius:99px;
  border:2px solid rgba(116,255,138,.18); border-top-color:var(--accent);
  animation:rot 1s linear infinite;
}
@keyframes rot { to { transform:rotate(360deg); } }

/* ============ AUTH (login + change-pin) ============ */
.screen-auth {
  min-height:100vh;
  padding-top:calc(40px + var(--safe-top));
  padding-bottom:calc(20px + var(--safe-bottom));
}
.auth-wrap {
  max-width:380px; margin:0 auto; padding:0 22px;
}
.auth-brand {
  text-align:center; margin-bottom:30px;
}
.auth-logo {
  width:56px; height:56px; border-radius:16px; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--vks), #ff5e3a);
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:18px; color:#0a0a0a;
  box-shadow:0 10px 28px rgba(246,130,31,.22);
}
.auth-logo.small {
  background:linear-gradient(135deg, var(--accent), var(--info));
  font-size:24px;
}
.auth-brand h1 {
  margin:0; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:32px;
  letter-spacing:-0.02em; line-height:1.1;
}
.auth-tag {
  margin:8px 0 0; color:var(--muted); font-size:13px;
}
.auth-card {
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border:1px solid var(--line); border-radius:18px; padding:18px;
  display:flex; flex-direction:column; gap:14px;
}
.field { display:flex; flex-direction:column; gap:6px; }
.field-l {
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.field input, .field select {
  appearance:none; -webkit-appearance:none;
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:11px;
  padding:13px 14px; color:var(--fg); font-size:15px;
  outline:none; transition:border-color .15s, background .15s;
}
.field input:focus, .field select:focus {
  border-color:var(--accent); background:rgba(116,255,138,.04);
}
.field input::placeholder { color:var(--dim); }

.btn {
  appearance:none; border:0; padding:14px;
  border-radius:13px; font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary {
  background:linear-gradient(135deg, var(--accent), rgba(116,255,138,.7));
  color:#0a0a0a; box-shadow:0 8px 20px rgba(116,255,138,.18);
}
.btn-primary:disabled { opacity:.6; }
.btn-ghost {
  background:rgba(255,255,255,.04); color:var(--muted); border:1px solid var(--line);
}
.btn-link {
  appearance:none; background:none; border:0; color:var(--muted);
  font-family:'JetBrains Mono',monospace; font-size:11px; padding:8px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}
.btn-spin {
  width:14px; height:14px; border-radius:99px;
  border:2px solid rgba(0,0,0,.25); border-top-color:#0a0a0a;
  animation:rot 1s linear infinite;
}

.error {
  padding:10px 12px;
  background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.25);
  border-radius:11px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--danger); font-weight:600;
}

.auth-foot {
  text-align:center; color:var(--muted); font-size:11px; margin:18px 0 0;
}

/* ============ APP SHELL ============ */
#app-shell { min-height:100vh; padding-bottom:62px; padding-bottom:calc(62px + var(--safe-bottom)); }

.screen { min-height:100vh; display:flex; flex-direction:column; }
.scroll { flex:1; overflow-y:auto; padding-bottom:14px; }

/* topbar */
.topbar {
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + var(--safe-top)) 16px 12px;
  background:rgba(7,11,20,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
  position:sticky; top:0; z-index:5;
}
.tb-av {
  width:36px; height:36px; border-radius:99px;
  background:linear-gradient(135deg, var(--accent), var(--info));
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; color:#0a0a0a; font-size:13px;
  flex-shrink:0;
}
.tb-greet { flex:1; min-width:0; }
.tb-l1 {
  font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:700; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-l2 {
  font-size:9.5px; color:var(--muted); margin-top:2px;
  text-transform:uppercase; letter-spacing:.07em;
}
.tb-icon {
  width:36px; height:36px; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--fg);
  position:relative; flex-shrink:0;
}
.tb-icon.alert { background:rgba(255,107,107,.08); border-color:rgba(255,107,107,.22); color:var(--danger); }
.tb-icon.accent { background:rgba(116,255,138,.1); border-color:rgba(116,255,138,.25); color:var(--accent); }
.tb-icon.disabled { visibility:hidden; }
.tb-icon .material-symbols-outlined { font-size:20px; }
.tb-bell-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background:var(--danger); color:#0a0a0a;
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:800;
  display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--bg-0);
}

/* hero */
.hero-card {
  margin:14px 16px 18px; padding:18px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(116,255,138,.1), rgba(122,184,255,.06));
  border:1px solid rgba(116,255,138,.2);
  position:relative; overflow:hidden;
}
.hero-card::before {
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:99px; background:radial-gradient(circle, rgba(116,255,138,.18), transparent 70%);
}
.hero-l {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  position:relative;
}
.hero-big {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:60px;
  letter-spacing:-0.04em; line-height:1;
  background:linear-gradient(135deg, var(--accent), var(--info));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-top:8px; position:relative;
}
.hero-sub {
  font-size:11px; color:var(--accent); margin-top:8px; font-weight:600;
  position:relative;
}
.hero-pills {
  display:flex; gap:6px; margin-top:16px; position:relative;
}
.hero-pill {
  flex:1; padding:9px 6px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); text-align:center;
}
.hero-pill .v {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:18px;
  line-height:1; letter-spacing:-0.02em;
}
.hero-pill .l {
  font-family:'JetBrains Mono',monospace; font-size:8.5px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
  margin-top:4px; font-weight:600;
}

/* section heading */
.sec-head {
  display:flex; align-items:center; gap:10px;
  padding:0 16px 10px; margin-top:6px;
}
.sec-head h4 {
  margin:0; font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:-0.01em;
}
.sec-head .tag {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  padding:3px 7px; border-radius:5px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted);
}
.sec-head .more {
  margin-left:auto; appearance:none; background:none; border:0;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--info); font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; padding:4px 6px;
}

/* skeletons */
.skeleton-card {
  height:64px; margin:0 16px 8px; border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.06), rgba(255,255,255,.03));
  background-size:200% 100%;
  animation:skele 1.4s ease-in-out infinite;
  border:1px solid var(--line);
}
@keyframes skele { 0%{background-position:0% 0;} 100%{background-position:-200% 0;} }

/* alert list */
.alerts-list { padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.alert {
  display:grid; grid-template-columns:32px 1fr auto; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  align-items:start;
}
.alert.warn { border-color:rgba(255,179,71,.22); background:linear-gradient(180deg, rgba(255,179,71,.04), rgba(0,0,0,.3)); }
.alert.info { border-color:rgba(196,168,255,.22); background:linear-gradient(180deg, rgba(196,168,255,.04), rgba(0,0,0,.3)); }
.alert.log  { border-color:rgba(122,184,255,.22); background:linear-gradient(180deg, rgba(122,184,255,.04), rgba(0,0,0,.3)); }
.alert .ic {
  width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:14px;
}
.alert.warn .ic { background:rgba(255,179,71,.15); color:var(--warn); }
.alert.info .ic { background:rgba(196,168,255,.15); color:var(--purple); }
.alert.log  .ic { background:rgba(122,184,255,.15); color:var(--info); }
.alert .tt { font-size:12px; font-weight:700; line-height:1.3; }
.alert .ds {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--muted); margin-top:3px; line-height:1.45;
}
.alert .tm {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:var(--dim); white-space:nowrap; font-weight:600;
}

.empty {
  padding:32px 20px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted);
}

/* roster list */
.roster-list { padding:0 16px; display:flex; flex-direction:column; gap:7px; }
.r-row {
  display:grid; grid-template-columns:36px 1fr auto; gap:11px;
  padding:11px 12px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  align-items:center;
  appearance:none; text-align:left; color:inherit; font:inherit;
  width:100%;
}
.r-row.on-duty { border-color:rgba(116,255,138,.2); background:linear-gradient(180deg, rgba(116,255,138,.03), rgba(0,0,0,.3)); }
.r-row.idle    { /* default */ }
.r-row.inactive { opacity:.5; }
.r-row .av {
  width:36px; height:36px; border-radius:11px;
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:13px; color:#0a0a0a;
}
.r-row .nm {
  font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.r-row .sub {
  font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--muted);
  margin-top:2px; display:flex; align-items:center; gap:6px;
}
.r-row .meta {
  text-align:right; min-width:60px;
}
.r-row .meta .v {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:14px; line-height:1;
}
.r-row .meta .v.ok { color:var(--accent); }
.r-row .meta .v.k  { color:var(--info); }
.r-row .meta .v.dim{ color:var(--muted); }
.r-row .meta .l {
  font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-top:3px; font-weight:600;
}

.stp {
  display:inline-flex; align-items:center; gap:4px;
  font-family:'JetBrains Mono',monospace; font-size:9px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.stp .d { width:5px; height:5px; border-radius:99px; background:currentColor; box-shadow:0 0 6px currentColor; }
.stp.on { color:var(--accent); }
.stp.idle { color:var(--info); }
.stp.inactive { color:var(--muted); }

/* search + filters */
.search-wrap {
  margin:8px 16px 10px; padding:10px 12px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; gap:9px;
}
.search-wrap .search-ic { color:var(--muted); font-size:18px; }
.search-wrap input {
  flex:1; appearance:none; border:0; background:transparent;
  color:var(--fg); font-size:13px; outline:none; padding:0;
}
.search-wrap input::placeholder { color:var(--muted); }

.filter-strip {
  display:flex; gap:6px; padding:0 16px 10px;
  overflow-x:auto; scrollbar-width:none;
}
.filter-strip::-webkit-scrollbar { display:none; }
.filt {
  appearance:none; flex-shrink:0;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  padding:7px 12px; border-radius:99px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--muted);
  white-space:nowrap; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.filt.on { background:rgba(116,255,138,.12); color:var(--accent); border-color:rgba(116,255,138,.25); }

/* USERS list */
.users-list { padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.u-row {
  padding:13px 14px; border-radius:13px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
}
.u-row.inactive { opacity:.55; border-style:dashed; }
.u-row .top {
  display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center;
}
.u-row .av {
  width:34px; height:34px; border-radius:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:13px; color:#0a0a0a;
  display:grid; place-items:center;
}
.u-row .nm { font-size:13px; font-weight:700; }
.u-row .em { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); margin-top:2px; }
.u-row .role-tag {
  font-family:'JetBrains Mono',monospace; font-size:8.5px;
  padding:3px 7px; border-radius:5px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.u-row .role-tag.admin { color:var(--vks); background:rgba(246,130,31,.1); border:1px solid rgba(246,130,31,.25); }
.u-row .role-tag.head  { color:var(--info); background:rgba(122,184,255,.1); border:1px solid rgba(122,184,255,.25); }
.u-row .meta {
  font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--muted);
  margin-top:8px; line-height:1.5;
}
.u-row .actions {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-top:10px;
}
.u-row .actions button {
  appearance:none; padding:8px 6px; border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.u-row .actions .b-act { background:rgba(116,255,138,.1); color:var(--accent); border:1px solid rgba(116,255,138,.22); }
.u-row .actions .b-deact { background:rgba(255,179,71,.1); color:var(--warn); border:1px solid rgba(255,179,71,.22); }
.u-row .actions .b-reset { background:rgba(122,184,255,.1); color:var(--info); border:1px solid rgba(122,184,255,.22); }

/* ME */
.me-card {
  margin:18px 16px 22px; padding:24px 18px; border-radius:20px;
  background:linear-gradient(135deg, rgba(196,168,255,.1), rgba(122,184,255,.06));
  border:1px solid rgba(196,168,255,.22);
  text-align:center;
}
.me-av {
  width:64px; height:64px; border-radius:18px; margin:0 auto 12px;
  background:linear-gradient(135deg, var(--purple), var(--info));
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; color:#0a0a0a; font-size:24px;
}
.me-name { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; letter-spacing:-0.01em; }
.me-email { font-size:11px; color:var(--muted); margin-top:3px; }
.me-role {
  display:inline-block; margin-top:10px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  padding:4px 10px; border-radius:99px;
  background:rgba(116,255,138,.12); border:1px solid rgba(116,255,138,.25); color:var(--accent);
  font-weight:700; text-transform:uppercase; letter-spacing:.07em;
}
.me-role.admin { background:rgba(246,130,31,.12); border-color:rgba(246,130,31,.28); color:var(--vks); }
.me-row {
  appearance:none; width:calc(100% - 32px); margin:0 16px 6px;
  padding:13px 14px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  color:var(--fg); display:flex; align-items:center; gap:11px;
  text-align:left; font-size:13px; font-weight:600;
}
.me-row .material-symbols-outlined { font-size:20px; color:var(--muted); }
.me-row .me-row-l { flex:1; }
.me-row .chev { color:var(--dim); }
.me-row.danger { color:var(--danger); }
.me-row.danger .material-symbols-outlined { color:var(--danger); }
.me-version {
  text-align:center; color:var(--dim); font-size:10px; margin:24px 0 0;
}

/* ============ INSPECTOR PROFILE (P2) ============ */
.ip-hero {
  margin:14px 16px 12px; padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(196,168,255,.12), rgba(122,184,255,.06));
  border:1px solid rgba(196,168,255,.22);
  position:relative; overflow:hidden;
}
.ip-hero::before {
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:99px; background:radial-gradient(circle, rgba(196,168,255,.18), transparent 70%);
}
.ip-hero-top { display:flex; gap:11px; align-items:center; position:relative; }
.ip-av {
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(135deg, var(--purple), var(--info));
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; color:#0a0a0a; font-size:20px;
  flex-shrink:0;
}
.ip-info { flex:1; min-width:0; }
.ip-name-big { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.ip-meta { font-size:9.5px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }
.ip-status {
  margin-top:7px; display:inline-flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono',monospace; font-size:9px;
  padding:4px 9px; border-radius:99px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
}
.ip-status.on { background:rgba(116,255,138,.12); border:1px solid rgba(116,255,138,.25); color:var(--accent); }
.ip-status.idle { background:rgba(122,184,255,.1); border:1px solid rgba(122,184,255,.22); color:var(--info); }
.ip-status.inactive { background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); }
.ip-status .d { width:5px; height:5px; border-radius:99px; background:currentColor; box-shadow:0 0 6px currentColor; }

.ip-stats {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:5px;
  margin-top:13px; position:relative;
}
.ip-stat {
  padding:9px 4px; background:rgba(0,0,0,.3); border:1px solid var(--line);
  border-radius:9px; text-align:center;
}
.ip-stat .v {
  font-family:'Space Grotesk',sans-serif; font-weight:800;
  font-size:16px; line-height:1; letter-spacing:-0.02em;
}
.ip-stat:nth-child(1) .v { color:var(--accent); }
.ip-stat:nth-child(2) .v { color:var(--info); }
.ip-stat:nth-child(3) .v { color:var(--purple); }
.ip-stat:nth-child(4) .v { color:var(--warn); }
.ip-stat .l {
  font-family:'JetBrains Mono',monospace; font-size:8px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
  margin-top:4px; font-weight:600;
}

.ip-quick {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
  padding:0 16px 12px;
}
.ip-qa {
  appearance:none;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 6px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--fg);
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.ip-qa .material-symbols-outlined { font-size:18px; }
.ip-qa.g .material-symbols-outlined { color:var(--accent); }
.ip-qa.b .material-symbols-outlined { color:var(--info); }
.ip-qa.p .material-symbols-outlined { color:var(--purple); }
.ip-qa:disabled { opacity:.5; }
.ip-qa .ipq-l { color:var(--muted); }

.ip-tabs {
  display:flex; padding:0 16px;
  border-bottom:1px solid var(--line);
  position:sticky; top:54px; background:var(--bg-0); z-index:4;
  overflow-x:auto; scrollbar-width:none;
}
.ip-tabs::-webkit-scrollbar { display:none; }
.ip-tab {
  appearance:none; background:none; border:0;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  padding:10px 12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  position:relative; flex-shrink:0; white-space:nowrap;
}
.ip-tab .b {
  display:inline-block; min-width:14px; padding:0 4px; height:14px; line-height:14px;
  border-radius:7px; background:rgba(255,255,255,.08); color:var(--fg);
  font-size:8px; margin-left:4px;
}
.ip-tab.on { color:var(--accent); }
.ip-tab.on::after {
  content:""; position:absolute; bottom:-1px; left:12px; right:12px;
  height:2px; background:var(--accent); border-radius:99px; box-shadow:0 0 8px var(--accent);
}
.ip-tab.on .b { background:var(--accent); color:#0a0a0a; }
.ip-pane { padding-top:6px; }

.timeline-list { padding:0 16px; display:flex; flex-direction:column; gap:6px; }
.tl-row {
  display:grid; grid-template-columns:48px 1fr auto; gap:10px;
  padding:10px 12px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  align-items:center;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
}
.tl-row .t {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:var(--muted); font-weight:600;
}
.tl-row .e { font-size:11.5px; font-weight:700; line-height:1.3; }
.tl-row .e small {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:var(--muted); display:block; font-weight:500; margin-top:2px;
}
.tl-row .sc {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:13px;
}
.tl-row .sc.g { color:var(--accent); }
.tl-row .sc.k { color:var(--info); }
.tl-row .sc.w { color:var(--warn); }
.tl-row .sc.r { color:var(--danger); }

.ip-topsites { padding:0 16px; display:flex; flex-direction:column; gap:6px; }
.ts-row {
  display:grid; grid-template-columns:1fr auto; gap:8px;
  padding:9px 12px; border-radius:10px;
  background:rgba(0,0,0,.25); border:1px solid var(--line); align-items:center;
}
.ts-row .nm { font-size:11.5px; font-weight:600; }
.ts-row .ct {
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  color:var(--accent);
}

.logs-list { padding:0 16px; display:flex; flex-direction:column; gap:6px; }
.log-day-head {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; margin:8px 0 4px; padding-left:4px;
}
.log-day-head .pill {
  display:inline-block; padding:2px 7px;
  background:rgba(116,255,138,.1); color:var(--accent);
  border:1px solid rgba(116,255,138,.22); border-radius:5px;
  margin-right:5px;
}
.log-row {
  display:grid; grid-template-columns:36px 1fr auto; gap:10px;
  padding:10px 12px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  align-items:center;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
}
.log-row .ic {
  width:36px; height:36px; border-radius:10px;
  background:rgba(122,184,255,.12); color:var(--info);
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:14px;
}
.log-row .nm { font-size:12.5px; font-weight:700; }
.log-row .sb {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:var(--muted); margin-top:2px;
}
.log-row .sc {
  font-family:'Space Grotesk',sans-serif; font-weight:800;
  font-size:14px; text-align:right; line-height:1;
}
.log-row .sc.g { color:var(--accent); }
.log-row .sc.k { color:var(--info); }
.log-row .sc.w { color:var(--warn); }
.log-row .sc.r { color:var(--danger); }
.log-row .sc small {
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:8px; color:var(--muted); font-weight:600; margin-top:2px;
}

.special-list { padding:0 16px; display:flex; flex-direction:column; gap:7px; }
.sp-row {
  padding:11px 12px; border-radius:12px;
  background:rgba(196,168,255,.05); border:1px solid rgba(196,168,255,.22);
  display:flex; flex-direction:column; gap:6px;
  appearance:none; text-align:left; color:inherit; font:inherit; width:100%;
}
.sp-row .top {
  display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center;
}
.sp-row .ic {
  width:30px; height:30px; border-radius:9px;
  background:rgba(196,168,255,.15); color:var(--purple);
  display:grid; place-items:center; font-size:14px;
}
.sp-row .nm { font-size:12px; font-weight:700; line-height:1.3; }
.sp-row .sb {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:var(--muted); margin-top:1px;
}
.sp-row .meta {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:var(--muted); line-height:1.5;
}
.sp-row .stp {
  font-size:8.5px;
}

/* perf cards */
.perf-rank-card {
  margin:0 16px 10px; padding:12px 14px; border-radius:13px;
  background:linear-gradient(180deg, rgba(116,255,138,.06), rgba(0,0,0,.3));
  border:1px solid rgba(116,255,138,.22);
}
.prc-l {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; margin-bottom:8px;
}
.prc-row { display:flex; align-items:center; gap:11px; }
.prc-pos {
  font-family:'Space Grotesk',sans-serif; font-weight:800;
  font-size:36px; line-height:1; letter-spacing:-0.04em;
  background:linear-gradient(135deg, var(--accent), var(--info));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prc-info { flex:1; }
.prc-of {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:-0.01em;
}
.prc-by {
  font-size:10px; color:var(--accent); margin-top:3px; font-weight:600;
}
.perf-card {
  margin:0 16px 10px; padding:12px 14px; border-radius:13px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
}
.pc-h {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.pc-l {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.pc-v {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:14px;
  color:var(--accent);
}
.pc-svg { width:100%; height:100px; display:block; }

.perf-breakdown { display:flex; flex-direction:column; gap:7px; }
.pb-row { display:flex; align-items:center; gap:8px; }
.pb-row .l {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  width:90px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600;
}
.pb-row .b {
  flex:1; height:8px; background:rgba(0,0,0,.4); border-radius:99px;
  overflow:hidden;
}
.pb-row .b > span {
  display:block; height:100%; border-radius:99px;
}
.pb-row .v {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:11.5px; width:36px; text-align:right;
}

.perf-sites { display:flex; flex-direction:column; gap:6px; }
.ps-row { display:flex; align-items:center; gap:8px; }
.ps-row .nm {
  font-size:11px; font-weight:600; flex-shrink:0;
  width:auto; max-width:60%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ps-row .b {
  flex:1; height:7px; background:rgba(0,0,0,.4); border-radius:99px;
  overflow:hidden;
}
.ps-row .b > span {
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--info));
}
.ps-row .v {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--fg); font-weight:700; width:24px; text-align:right;
}

/* LOG DETAIL */
.ld-banner {
  margin:14px 16px 12px; padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(122,184,255,.12), rgba(116,255,138,.06));
  border:1px solid rgba(122,184,255,.22);
  display:flex; align-items:center; gap:11px;
  position:relative; overflow:hidden;
}
.ld-banner .lic {
  width:38px; height:38px; border-radius:11px;
  background:rgba(122,184,255,.2); color:var(--info);
  display:grid; place-items:center; font-size:18px;
  font-family:'Space Grotesk',sans-serif; font-weight:800; flex-shrink:0;
}
.ld-banner .info { flex:1; min-width:0; }
.ld-banner .info .nm {
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ld-banner .info .ad {
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:var(--muted); margin-top:2px;
}
.ld-score-pill {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:18px;
  padding:6px 11px; border-radius:9px;
  background:rgba(0,0,0,.35); border:1px solid var(--line);
  color:var(--accent);
}

.ld-meta {
  margin:0 16px 12px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.ld-meta-cell {
  padding:10px 12px; background:rgba(0,0,0,.3);
  border:1px solid var(--line); border-radius:10px;
}
.ld-meta-cell .k {
  font-family:'JetBrains Mono',monospace; font-size:8.5px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600;
}
.ld-meta-cell .v {
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700;
  margin-top:3px;
}

.ld-scores {
  margin:0 16px 12px; padding:14px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,179,71,.06), rgba(0,0,0,.3));
  border:1px solid rgba(255,179,71,.22);
}
.ld-scores .h {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.ld-scores .h .l {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600;
}
.ld-scores .h .v {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px;
  color:var(--accent);
}

.ld-notes, .ld-gps {
  margin:0 16px 12px; padding:12px 14px;
  border-radius:11px; background:rgba(0,0,0,.3);
  border:1px solid var(--line);
}
.ld-notes .l, .ld-gps .l {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; margin-bottom:6px;
}
.ld-notes p { margin:0; font-size:12px; line-height:1.5; }
.ld-gps {
  background:linear-gradient(180deg, rgba(116,255,138,.04), rgba(0,0,0,.3));
  border-color:rgba(116,255,138,.2);
  display:flex; align-items:center; gap:10px;
}
.ld-gps .ic {
  width:28px; height:28px; border-radius:8px;
  background:rgba(116,255,138,.1); color:var(--accent);
  display:grid; place-items:center; flex-shrink:0;
}
.ld-gps .body { flex:1; }
.ld-gps a {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--accent); text-decoration:none; font-weight:600;
}
.ld-gps a:hover { text-decoration:underline; }

/* tab bar */
.tabbar {
  position:fixed; left:0; right:0; bottom:0;
  height:62px; padding-bottom:var(--safe-bottom);
  background:rgba(7,11,20,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5, 1fr);
  z-index:50;
}
.tabbar .tb {
  appearance:none; background:none; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); position:relative; padding:8px 4px 12px;
}
.tabbar .tb .material-symbols-outlined { font-size:22px; }
.tabbar .tb .lb {
  font-family:'JetBrains Mono',monospace; font-size:8.5px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.tabbar .tb.on { color:var(--accent); }
.tabbar .tb.on::before {
  content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:24px; height:3px; border-radius:99px; background:var(--accent); box-shadow:0 0 10px var(--accent);
}
.tabbar .tb .nb {
  position:absolute; top:6px; right:50%; margin-right:-22px;
  min-width:14px; height:14px; padding:0 4px; border-radius:99px;
  background:var(--danger); color:#0a0a0a;
  font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg-0);
}

/* hide admin-only when not admin */
body:not(.is-admin) .admin-only { display:none !important; }
body.is-admin .tabbar { grid-template-columns:repeat(5, 1fr); }
body:not(.is-admin) .tabbar { grid-template-columns:repeat(4, 1fr); }

/* modal / sheet */
.modal {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn .18s ease-out;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.sheet {
  width:100%; max-width:480px;
  background:linear-gradient(180deg, #0e1422, #070b14);
  border:1px solid var(--line); border-bottom:0;
  border-radius:18px 18px 0 0;
  padding:14px 18px calc(20px + var(--safe-bottom));
  animation:slideUp .25s ease-out;
  max-height:85vh; overflow-y:auto;
}
@keyframes slideUp { from{transform:translateY(20px); opacity:0;} to{transform:translateY(0); opacity:1;} }
.sheet-grab { width:36px; height:4px; background:rgba(255,255,255,.18); border-radius:99px; margin:0 auto 12px; }
.sheet h3 { margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.sheet-desc { color:var(--muted); font-size:12px; margin:0 0 14px; }
.sheet form { display:flex; flex-direction:column; gap:12px; }
.sheet-actions {
  display:flex; gap:8px; margin-top:6px;
}
.sheet-actions .btn { flex:1; }

.pin-reveal {
  font-family:'JetBrains Mono',monospace;
  font-size:36px; font-weight:800; letter-spacing:0.18em;
  text-align:center; padding:18px;
  background:rgba(116,255,138,.08); border:1.5px dashed rgba(116,255,138,.3);
  border-radius:13px; color:var(--accent);
  margin:14px 0;
}

/* toast */
.toast {
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  padding:11px 18px; border-radius:99px;
  background:rgba(20,28,46,.95); color:var(--fg);
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.5);
  z-index:200; animation:toastIn .25s ease-out;
}
.toast.ok { color:var(--accent); border-color:rgba(116,255,138,.3); }
.toast.err { color:var(--danger); border-color:rgba(255,107,107,.3); }
@keyframes toastIn { from{opacity:0; transform:translate(-50%, 10px);} to{opacity:1; transform:translate(-50%, 0);} }

.bottom-pad { height:14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}