/* ============ TOKENS ============ */
:root{
  color-scheme:dark; /* native widgets (select popups, scrollbars) render dark */
  --bg:#060608; --bg-2:#0a0a0e; --bg-3:#0f0f14; --bg-4:#14141b;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --txt:#f3f3f5; --mut:#9b9ba4; --dim:#61616c;
  --red:#ff2b3d; --red-2:#ff5c69; --red-deep:#7d0d1c;
  --red-glow:rgba(255,43,61,.35); --red-soft:rgba(255,43,61,.08);
  --green:#2bd97c; --amber:#ffb224; --blue:#4d9fff;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26262e;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a3a45}
a{color:inherit;text-decoration:none}
button{font-family:var(--body);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--body);color:var(--txt)}
/* Selects were falling back to the native white control (no .sel rule
   existed) — style every <select> dark and on-theme, with a drawn chevron. */
select{appearance:none;-webkit-appearance:none;background-color:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;color:var(--txt);padding:8px 34px 8px 12px;font-size:13px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ba4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .25s,box-shadow .25s,background-color .25s}
select:hover{border-color:rgba(255,43,61,.35);background-color:var(--bg-4)}
select:focus,select:focus-visible{outline:none;border-color:rgba(255,43,61,.5);box-shadow:0 0 0 3px rgba(255,43,61,.12)}
select option,select optgroup{background:var(--bg-2);color:var(--txt)}
select:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
img{max-width:100%}
.mono{font-family:var(--mono)}
.hidden{display:none!important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}

/* ============ SHARED UI ============ */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500;padding:3px 10px;border-radius:99px;border:1px solid var(--line-2);white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;flex:none}
.badge.ok{color:var(--green);border-color:rgba(43,217,124,.25);background:rgba(43,217,124,.07)}
.badge.ok .dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.badge.bad{color:var(--red-2);border-color:rgba(255,43,61,.3);background:var(--red-soft)}
.badge.bad .dot{background:var(--red)}
.badge.warn{color:var(--amber);border-color:rgba(255,178,36,.3);background:rgba(255,178,36,.07)}
.badge.warn .dot{background:var(--amber)}
.badge.info{color:var(--blue);border-color:rgba(77,159,255,.3);background:rgba(77,159,255,.07)}
.badge.info .dot{background:var(--blue)}
.badge.mute{color:var(--mut);background:var(--glass)}
.badge.mute .dot{background:var(--dim)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;padding:12px 24px;border-radius:12px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;position:relative}
.btn svg{width:16px;height:16px}
.btn-red{background:linear-gradient(135deg,var(--red) 0%,#d11226 100%);color:#fff;box-shadow:0 8px 30px -8px var(--red-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-red:hover{box-shadow:0 12px 40px -6px var(--red-glow)}
.btn-ghost{background:var(--glass);border:1px solid var(--line-2);color:var(--txt);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(255,255,255,.22)}
.btn-danger{background:linear-gradient(135deg,#c01124,#7d0d1c);color:#fff}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:9px}
.btn-xs{padding:5px 10px;font-size:12px;border-radius:8px}

/* ============ TOASTS ============ */
#toasts{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:rgba(16,16,22,.92);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:14px;padding:13px 18px;min-width:280px;max-width:380px;font-size:14px;box-shadow:0 20px 50px -12px rgba(0,0,0,.7);animation:toastIn .4s var(--ease)}
.toast .t-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.toast .t-icon svg{width:16px;height:16px}
.toast.ok .t-icon{background:rgba(43,217,124,.12);color:var(--green)}
.toast.err .t-icon,.toast.warn .t-icon{background:var(--red-soft);color:var(--red-2)}
.toast.info .t-icon{background:rgba(77,159,255,.12);color:var(--blue)}
.toast b{display:block;font-size:13.5px}
.toast span{display:block;font-size:12.5px;color:var(--mut)}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ============ MODAL ============ */
#modal-root{position:fixed;inset:0;z-index:9000;display:none}
#modal-root.open{display:block}
.modal-back{position:absolute;inset:0;background:rgba(3,3,5,.7);backdrop-filter:blur(8px);animation:fadeIn .25s}
.modal-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:85vh;overflow:auto;background:linear-gradient(180deg,#121218,#0c0c11);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 40px 100px -20px rgba(0,0,0,.8);animation:modalIn .35s var(--ease)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px;font-weight:600}
.modal-body{padding:24px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line)}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============ LOGIN ============ */
#login{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,43,61,.10),transparent 60%),var(--bg);padding:24px}
#login.hidden{display:none!important}
.login-flare{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse,rgba(255,43,61,.12),transparent 70%);filter:blur(30px);pointer-events:none;animation:flarePulse 7s ease-in-out infinite}
@keyframes flarePulse{0%,100%{opacity:.8}50%{opacity:1.1}}
.login-card{position:relative;width:min(400px,100%);border:1px solid var(--line-2);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%);backdrop-filter:blur(18px);padding:38px 34px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.09)}
.login-logo{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:20px;margin-bottom:6px}
.login-card .sub{color:var(--mut);font-size:13.5px;margin-bottom:26px}
.login-card label{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin:0 0 7px}
.login-card input{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.login-card input:focus{outline:none;border-color:rgba(255,43,61,.45)}
.login-card .btn{width:100%;justify-content:center;padding:13px}
.login-err{color:var(--red-2);font-size:13px;margin-top:14px;min-height:18px;text-align:center}
.login-foot{margin-top:24px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
/* Brand lockup. The mark is a full-colour red/black logo, so it must not sit
   on a red tile: that turned red-on-red to mud and lost the black spikes
   against the plate. It gets the dark page as its background, its natural
   width, and a soft bloom rather than a filled square. */
.logo-mark{position:relative;width:46px;height:32px;flex:none;display:grid;place-items:center;
  background:none;border-radius:0;box-shadow:none}
.logo-mark::before{content:"";position:absolute;inset:-30% -12%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 52%,rgba(255,43,61,.30),rgba(255,43,61,.06) 54%,transparent 72%);
  filter:blur(6px)}
/* 150% height lets the square source scale to the full width of the box; the
   overflow it creates is the transparent band above and below the artwork. */
.logo-mark img{position:relative;z-index:1;width:100%;height:150%;object-fit:contain;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.85))}
.logo-word{font-weight:800;letter-spacing:.05em;line-height:1;white-space:nowrap}
.logo-word i{font-style:normal;color:var(--red);margin-left:.42em;
  text-shadow:0 0 16px rgba(255,43,61,.5)}
.logo-mark svg{width:18px;height:18px;color:#fff}

/* ============ DASHBOARD ============ */
#dash{display:none;min-height:100vh}
#dash.on{display:grid;grid-template-columns:auto 1fr;grid-template-rows:100vh}

.sb{width:248px;background:linear-gradient(180deg,#0a0a0f,#08080c);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .35s var(--ease);overflow:hidden;position:relative;z-index:50}
.sb.collapsed{width:72px}
.sb-head{display:flex;align-items:center;gap:11px;padding:18px 18px 14px;flex:none}
.sb-head .sb-name{font-family:var(--disp);font-weight:700;font-size:15px;white-space:nowrap;transition:opacity .25s}
.sb-head .sb-name small{display:block;font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.2em;font-weight:400}
.sb.collapsed .sb-name,.sb.collapsed .sb-label,.sb.collapsed .sb-item span,.sb.collapsed .sb-item .pill,.sb.collapsed .sb-foot-info{opacity:0;width:0;pointer-events:none}
/* A collapsed rail is 72px with 18px of padding either side, which leaves 36px
   for a mark that is 46px wide at full size. .sb has overflow:hidden, so
   without this the logo is silently clipped down its right edge. */
.sb.collapsed .logo-mark{width:36px;height:26px}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 20px}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;padding:18px 10px 7px;white-space:nowrap;transition:opacity .2s}
.sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:8.5px 11px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--mut);transition:all .2s;white-space:nowrap;position:relative;text-align:left}
.sb-item svg{width:16.5px;height:16.5px;flex:none}
.sb-item:hover{color:var(--txt);background:var(--glass-2)}
.sb-item.active{color:#fff;background:linear-gradient(90deg,rgba(255,43,61,.16),rgba(255,43,61,.05));box-shadow:inset 0 0 0 1px rgba(255,43,61,.25)}
.sb-item.active::before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:3px;border-radius:3px;background:var(--red);box-shadow:0 0 12px var(--red)}
.sb-item .pill{margin-left:auto;font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:99px;background:var(--red-soft);color:var(--red-2);border:1px solid rgba(255,43,61,.25);transition:opacity .2s}

/* ── Foldable nav sections ────────────────────────────────────────────────
   Thirty destinations under seven headings is more than anyone scrolls past
   comfortably, so each heading is a switch: click it and the section folds
   away. A plain .sb-label (the other dashboards, which have four items each)
   is untouched by all of this — only headings rendered as .sb-group-head
   become interactive.

   The open/close animation is the grid 1fr→0fr trick rather than max-height,
   because a section's height depends on how many items the operator's ROLE
   lets them see; a hard-coded max-height would either clip a long section or
   make a short one ease out of empty space. */
/* Everything below is about one question: does this heading LOOK like it does
   something? A heading that folds but reads as a decorative label is worse
   than no folding at all, so the head carries three separate signals — a
   plus/minus that says which way it goes, a count of what is hidden, and a
   colour a full step brighter than the inert labels on the other
   dashboards. */
.sb-group+.sb-group{margin-top:9px}
.sb-group-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;color:var(--mut);background:none;border:0;border-radius:9px;cursor:pointer;transition:color .2s,background .2s,opacity .2s}
.sb-group-head>span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.sb-group-head:hover{color:var(--txt);background:var(--glass-2)}
/* Plus when the section is shut, minus when it is open — drawn as two bars
   rather than swapped between two lucide glyphs, so the change is a morph
   (the upright bar rotates flat and fades into the other one) instead of one
   icon vanishing and another appearing. Two pseudo-elements also means no
   second <svg> to render on every nav rebuild.

   The bars are currentColor, so the mark brightens with its heading on hover
   and turns red on the section you are in, with no rules of its own. What
   made the very first attempt invisible was never the shape — it was --dim
   at .65 opacity against a #0a0a0f sidebar. */
.sb-group-head .sb-tog{position:relative;width:15px;height:15px;flex:none}
.sb-group-head .sb-tog::before,.sb-group-head .sb-tog::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .22s}
.sb-group-head .sb-tog::after{transform:rotate(0deg);opacity:0}
.sb-group.folded .sb-group-head .sb-tog::after{transform:rotate(90deg);opacity:1}
/* How many pages the fold is hiding. Only shown while shut — open, the pages
   speak for themselves. */
.sb-count{font-family:var(--mono);font-size:10px;color:var(--dim);opacity:0;width:0;overflow:hidden;transition:opacity .2s}
.sb-group.folded .sb-count{opacity:1;width:auto}
/* The section holding the page you are on keeps its heading lit, so a folded
   sidebar still says where you are without opening anything. */
.sb-group.current .sb-group-head{color:var(--red-2)}
.sb-group.current.folded .sb-count{color:var(--red-2)}
.sb-sub{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease),opacity .22s,visibility .3s}
/* overflow:hidden is what makes the fold clip, but .sb-item.active draws its
   marker bar 12px to its own left — inside the nav's padding. The negative
   margin pushes this clip box out by exactly that much so the bar survives. */
.sb-sub>div{overflow:hidden;min-height:0;margin-left:-12px;padding-left:12px}
/* visibility, not just height: a folded link is still a tab stop otherwise,
   and a keyboard operator would land on destinations they cannot see. */
.sb-group.folded .sb-sub{grid-template-rows:0fr;opacity:0;visibility:hidden}
/* A 72px rail has no room for headings, and a fold you cannot see is a fold
   you cannot undo — so the rail always shows every icon. */
.sb.collapsed .sb-group-head{height:0;padding:0;margin:0;overflow:hidden}
.sb.collapsed .sb-group.folded .sb-sub{grid-template-rows:1fr;opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.sb-sub,.sb-group-head .sb-tog::before,.sb-group-head .sb-tog::after{transition:none}}

.sb-foot{flex:none;border-top:1px solid var(--line);padding:12px;display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;background:linear-gradient(135deg,#2a2a34,#17171e);border:1px solid var(--line-2)}
.sb-foot .avatar{width:34px;height:34px;border-radius:10px;font-size:12px;background:linear-gradient(135deg,var(--red),#8f0f1f);border:none;color:#fff}
.sb-foot-info{white-space:nowrap;transition:opacity .2s;overflow:hidden;flex:1}
.sb-foot-info b{display:block;font-size:12.5px}
.sb-foot-info span{font-size:11px;color:var(--dim);font-family:var(--mono)}

.dash-main{display:flex;flex-direction:column;overflow:hidden}
.topbar{flex:none;display:flex;align-items:center;gap:16px;padding:14px 26px;border-bottom:1px solid var(--line);background:rgba(10,10,15,.7);backdrop-filter:blur(16px);z-index:40}
.tb-toggle{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line);transition:all .2s}
.tb-toggle:hover{color:var(--txt);border-color:var(--line-2)}
.tb-toggle svg{width:16px;height:16px}
.tb-crumb{font-size:13px;color:var(--dim);display:flex;gap:8px;align-items:center}
.tb-crumb b{color:var(--txt);font-weight:600}
.tb-search{margin-left:auto;position:relative;width:min(300px,30vw)}
.tb-search input{width:100%;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:8.5px 14px 8.5px 36px;font-size:13px;color:var(--txt);transition:border-color .2s}
.tb-search input:focus{outline:none;border-color:rgba(255,43,61,.4)}
.tb-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--dim)}
.tb-ico{position:relative;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line);transition:all .2s}
.tb-ico:hover{color:var(--txt);border-color:var(--line-2)}
.tb-ico svg{width:16px;height:16px}
.tb-ico .ndot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);border:1.5px solid var(--bg)}
.tb-server{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:600}
.tb-server .dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.tb-server .dot.on{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
.tb-server .dot.off{background:var(--red);box-shadow:0 0 8px var(--red)}
@keyframes pulse{50%{opacity:.5}}

.content{flex:1;overflow-y:auto;padding:28px;scroll-behavior:smooth}
.page{max-width:1240px;margin:0 auto;animation:pageIn .45s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.page-head h1{font-family:var(--disp);font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.page-head p{font-size:13.5px;color:var(--mut)}
.page-actions{display:flex;gap:9px;flex-wrap:wrap}

.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-23{grid-template-columns:2fr 1fr}
.g-32{grid-template-columns:1fr 2fr}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));padding:22px;position:relative}
.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.card-title h3{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.card-title h3 svg{width:15px;height:15px;color:var(--red-2)}
.card-title .ct-sub{font-size:12px;color:var(--dim)}

.stat-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));position:relative;overflow:hidden;transition:border-color .3s}
.stat-card:hover{border-color:var(--line-2)}
.stat-card .sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.stat-card .sc-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--red-soft);border:1px solid rgba(255,43,61,.2);color:var(--red-2)}
.stat-card .sc-ico svg{width:17px;height:17px}
.stat-card .sc-delta{font-family:var(--mono);font-size:11.5px;font-weight:600}
.sc-delta.up{color:var(--green)}.sc-delta.down{color:var(--red-2)}
.stat-card b{display:block;font-family:var(--mono);font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.stat-card span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.stat-card .spark{position:absolute;bottom:0;right:0;left:0;height:38px;opacity:.5;pointer-events:none}

.tbl-tools{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.tbl-search{position:relative;flex:1;min-width:200px}
.tbl-search input{width:100%;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:9px 13px 9px 34px;font-size:13px}
.tbl-search input:focus{outline:none;border-color:rgba(255,43,61,.4)}
.tbl-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--dim)}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.tbl thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);white-space:nowrap}
.tbl tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:#cfcfd6;vertical-align:middle}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(255,43,61,.03)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .cell-main{font-weight:600;color:var(--txt)}
.tbl .cell-sub{font-family:var(--mono);font-size:11px;color:var(--dim);display:block;margin-top:2px}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:12.5px;color:var(--dim)}
.pager{display:flex;gap:5px}
.pager button{min-width:30px;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;color:var(--mut);transition:all .2s}
.pager button:hover:not(:disabled){color:var(--txt);border-color:var(--line-2)}
.pager button.cur{background:var(--red-soft);border-color:rgba(255,43,61,.35);color:var(--red-2);font-weight:700}
.pager button:disabled{opacity:.3;cursor:default}
.empty-state{padding:56px 24px;text-align:center;color:var(--dim)}
.empty-state svg{width:36px;height:36px;margin-bottom:12px;opacity:.5}
.empty-state b{display:block;color:var(--mut);font-size:14px;margin-bottom:4px}
.empty-state span{font-size:12.5px}

.tgl{position:relative;width:42px;height:24px;flex:none;cursor:pointer;display:inline-block}
.tgl input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2}
.tgl .tr{position:absolute;inset:0;background:#26262f;border-radius:99px;transition:background .25s;border:1px solid var(--line-2)}
.tgl .th{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#8b8b95;border-radius:50%;transition:all .25s var(--ease)}
.tgl input:checked ~ .tr{background:linear-gradient(135deg,var(--red),#c01124);border-color:transparent;box-shadow:0 0 14px -2px var(--red-glow)}
.tgl input:checked ~ .th{left:21px;background:#fff}
.tgl.sm{width:34px;height:20px}
.tgl.sm .th{width:14px;height:14px}
.tgl.sm input:checked ~ .th{left:17px}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.cfg-row:last-child{border-bottom:none}
.cfg-row .cr-info b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.cfg-row .cr-info span{font-size:12px;color:var(--mut)}
.cfg-row input[type=text],.cfg-row input[type=number],.cfg-row input[type=password],.cfg-row textarea{background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;width:220px}
.cfg-row input:focus,.cfg-row textarea:focus{outline:none;border-color:rgba(255,43,61,.4)}
.slider-wrap{display:flex;align-items:center;gap:14px;min-width:260px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--red) var(--val,50%),#26262f var(--val,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--red);box-shadow:0 0 10px var(--red-glow);cursor:grab}
.slider-val{font-family:var(--mono);font-size:12px;color:var(--red-2);min-width:44px;text-align:right;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;padding:5px 10px;border-radius:8px;background:var(--glass);border:1px solid var(--line-2)}
.chip button{color:var(--dim);display:grid;place-items:center;transition:color .2s}
.chip button:hover{color:var(--red-2)}
.chip button svg{width:11px;height:11px}
.chip-add{display:flex;gap:8px;margin-top:12px}
.chip-add input{flex:1;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12.5px;font-family:var(--mono)}
.chip-add input:focus{outline:none;border-color:rgba(255,43,61,.4)}

.cfg-layout{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start}
.cfg-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:var(--r-md);padding:9px;background:rgba(255,255,255,.015)}
.cfg-nav button{display:flex;align-items:center;gap:10px;padding:8.5px 11px;font-size:12.5px;font-weight:500;color:var(--mut);border-radius:9px;text-align:left;transition:all .2s;white-space:nowrap}
.cfg-nav button svg{width:14px;height:14px;flex:none}
.cfg-nav button:hover{color:var(--txt);background:var(--glass-2)}
.cfg-nav button.active{color:var(--red-2);background:var(--red-soft);box-shadow:inset 0 0 0 1px rgba(255,43,61,.22)}
.save-bar{position:sticky;bottom:-28px;margin-top:22px;display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;padding:15px 18px;border:1px solid var(--line-2);border-radius:var(--r-md);background:rgba(13,13,19,.9);backdrop-filter:blur(16px);box-shadow:0 -14px 40px -20px rgba(0,0,0,.7);z-index:10}

/* ── ONE-PAGE CONFIG GRID ──────────────────────────────────────────────
   Every category is a card; the grid decides how many fit. auto-fill with a
   340px floor keeps a row of rows readable on a laptop and uses the width of
   a wide monitor without stretching any single card. */
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start;margin-bottom:22px}
.cfg-cat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);overflow:hidden}
.cfg-cat-head{display:flex;align-items:flex-start;gap:11px;padding:15px 16px 13px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.cfg-cat-head svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--red-2)}
.cfg-cat-t{flex:1;min-width:0}
.cfg-cat-t h3{font-size:14px;font-weight:650;letter-spacing:-.01em}
.cfg-cat-t p{font-size:11.5px;color:var(--dim);line-height:1.45;margin-top:1px}
.cfg-cat-n{font-family:var(--mono);font-size:11px;color:var(--mut);flex:none;padding:2px 7px;border:1px solid var(--line);border-radius:6px;background:var(--bg-3)}
.cfg-cat-body{padding:2px 16px 8px}
.cfg-note{display:flex;gap:9px;align-items:flex-start;margin:12px 16px 4px;padding:9px 11px;border-radius:9px;font-size:11.5px;line-height:1.5;
  border:1px solid var(--line);background:var(--bg-3);color:var(--mut)}
.cfg-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.cfg-note.ok{border-color:rgba(43,217,124,.25);background:rgba(43,217,124,.06)}
.cfg-note.ok svg{color:var(--green)}
.cfg-note.warn{border-color:rgba(245,165,36,.3);background:rgba(245,165,36,.07);color:#e6c68a}
.cfg-note.warn svg{color:var(--amber)}
.cfg-note b{color:var(--txt)}
.cfg-hits{font-size:11.5px;color:var(--dim);font-family:var(--mono);white-space:nowrap}
.cfg-sec{margin-bottom:16px}
.mod-exp{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:6px;color:var(--dim);transition:all .2s}
.mod-exp svg{width:13px;height:13px;transition:transform .2s var(--ease)}
.mod-exp:hover{color:var(--red-2);background:var(--glass-2)}
.mod-exp.open svg{transform:rotate(90deg)}
.mod-exp.open{color:var(--red-2)}
.mod-row.is-off .mod-name{color:var(--dim)}
.mod-row .mod-name{cursor:pointer}
.mod-row .mod-name:hover{color:var(--red-2)}
.mod-methods{padding-left:6px}
.sel-sm{padding:5px 26px 5px 9px;font-size:11.5px;border-radius:8px;background-position:right 7px center}
.mweight{font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-left:auto}
.method-facts{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-bottom:9px}
.method-facts .fp{color:var(--red-2)}
.method-adv summary{font-size:11px;color:var(--dim);cursor:pointer;list-style:none;padding:4px 0;user-select:none}
.method-adv summary::-webkit-details-marker{display:none}
.method-adv summary::before{content:'▸ ';color:var(--dim)}
.method-adv[open] summary::before{content:'▾ '}
.method-adv summary:hover{color:var(--red-2)}
.method-adv .method-grid{margin-top:8px}
.wh-field{display:flex;gap:8px;align-items:center}
.wh-field input{background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12px;width:340px;max-width:46vw;font-family:var(--mono)}
.wh-field input:focus{outline:none;border-color:rgba(255,43,61,.4)}

/* MODULE / METHOD CARDS (config) */
.mod-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.mod-row:last-child{border-bottom:none}
/* Every row is followed by its (usually hidden) methods holder, so the last
   ROW is never the last child — drop its rule the same way. */
.cfg-cat-body .mod-row:has(+ .mod-methods:last-child){border-bottom:none}
.mod-name{font-size:13.5px;font-weight:600;flex:1}
.multi-badge,.rec-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:5px;background:rgba(77,159,255,.12);color:var(--blue);border:1px solid rgba(77,159,255,.25);margin-left:8px}
.rec-badge{background:rgba(43,217,124,.1);color:var(--green);border-color:rgba(43,217,124,.25)}
.mod-edit{color:var(--dim);font-size:13px;padding:2px 6px;border-radius:6px}
.mod-edit:hover{color:var(--red-2)}
.ml-count-badge{font-family:var(--mono);font-size:10px;margin-left:3px;color:var(--red-2)}
.methods-wrap{margin:6px 0 16px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:rgba(255,255,255,.012)}
.methods-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.methods-head b{font-size:12.5px}.methods-hint{font-size:11px;color:var(--dim)}
.method-card{border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:9px;background:var(--glass)}
.method-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.method-name{font-size:13px;font-weight:600}
.method-desc{font-size:12px;color:var(--mut);margin-bottom:10px}
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:center}
.method-grid .mf{font-size:11px;color:var(--dim);display:flex;flex-direction:column;gap:4px}
.method-grid .mf input{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px;font-family:var(--mono)}
.method-counter{display:flex;flex-direction:column;gap:2px}
.cnt-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.cnt-val{font-family:var(--mono);font-weight:700;font-size:14px}.cnt-val.fp{color:var(--red-2)}
.method-actions{margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ── METHOD ENGINE 6.2/6.3 ────────────────────────────────────────────── */
/* The ladder readout: what a protection's armed methods can reach, and what
   its own punishment will actually permit. */
.mo-line{font-size:11.5px;color:var(--mut);margin:-4px 0 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mo-line b{color:var(--txt);font-weight:650}
.mo-ceil{font-family:var(--mono);cursor:help}
.mo-sep{color:var(--dim)}
.mo-dim{color:var(--dim)}
.mo-cap{color:var(--amber);cursor:help}.mo-cap b{color:var(--amber)}
.mo-note{font-size:11.5px;color:var(--dim)}
.mo-warn{font-size:11.5px;color:var(--amber);background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.22);
  border-radius:8px;padding:8px 11px;margin:0 0 12px;line-height:1.5}

/* Per-method health. Advisory only — it ranks what to tune, nothing else. */
.hdot{width:7px;height:7px;border-radius:50%;flex:none}
.h-ok{background:var(--green);box-shadow:0 0 7px var(--green)}
.h-idle{background:var(--dim)}
.h-watch{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.h-noisy{background:var(--red);box-shadow:0 0 7px var(--red)}
.h-off{background:transparent;border:1px solid var(--dim)}
.method-card.off{opacity:.55}
.method-card .mid{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.mprio{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);cursor:help}
.off-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:5px;
  background:rgba(245,165,36,.1);color:var(--amber);border:1px solid rgba(245,165,36,.25)}
.cap-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:5px;
  background:rgba(245,165,36,.1);color:var(--amber);border:1px solid rgba(245,165,36,.25);margin-left:6px}
.cat-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:5px;
  background:var(--bg-3);color:var(--dim);border:1px solid var(--line);margin-left:6px;text-transform:uppercase}
.cnt-val.sm{font-size:11.5px;font-weight:600;color:var(--mut)}
.mlog{font-size:11.5px;color:var(--mut);display:flex;align-items:center;gap:6px;cursor:pointer}
.mlog input{accent-color:var(--red)}

/* Engine-wide totals + the cross-category method search. */
.cfg-stats{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:15px 18px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.cfg-stat{display:flex;flex-direction:column;gap:2px}
.cfg-stat span{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.cfg-stat b{font-family:var(--mono);font-size:17px;font-weight:700}
.cfg-stat b.fp{color:var(--red-2)}
.cfg-flags{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.cfg-chip{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim);background:var(--bg-3)}
.cfg-chip.warn{color:var(--amber);border-color:rgba(245,165,36,.3);background:rgba(245,165,36,.08)}
.cfg-search{display:flex;align-items:center;gap:10px;padding:11px 15px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.cfg-search i{width:15px;height:15px;color:var(--dim);flex:none}
.cfg-search input{flex:1;background:none;border:none;font-size:13px;color:var(--txt);outline:none}
.cfg-search input::placeholder{color:var(--dim)}
.tab-n{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:auto;padding-left:8px}

/* ── FRAMEWORK (character data) ────────────────────────────────────────── */
.fw-ident{display:flex;align-items:center;gap:12px;padding:13px 15px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.fw-ident b{display:block;font-size:14.5px}
.fw-ident span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.fw-ident button{margin-left:auto}
.fw-sec-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:20px 0 12px}
.fw-inv-tools{display:flex;align-items:center;gap:8px;margin-left:auto;text-transform:none;letter-spacing:0}
.fw-search{display:flex;align-items:center;gap:7px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:9px;padding:5px 11px}
.fw-search i{width:13px;height:13px;color:var(--dim)}
.fw-search input{background:none;border:none;outline:none;font-size:12.5px;color:var(--txt);width:150px}

.fw-accounts{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.fw-donut{position:relative;width:120px;height:120px;flex:none}
.fw-donut-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fw-donut-mid b{display:block;font-family:var(--mono);font-size:16px;font-weight:700}
.fw-donut-mid span{display:block;font-size:9.5px;color:var(--dim);margin-top:1px}
.fw-acc-list{flex:1;min-width:260px;display:flex;flex-direction:column;gap:2px}
.fw-acc{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;
  padding:9px 4px;border-bottom:1px solid var(--line);position:relative}
.fw-acc:last-child{border-bottom:none}
.fw-acc-ico{display:grid;place-items:center}.fw-acc-ico i{width:15px;height:15px}
.fw-acc-name{font-size:13px}
.fw-acc-amt{font-family:var(--mono);font-size:13.5px;font-weight:700;white-space:nowrap}
.fw-acc-btns{display:flex;gap:3px;opacity:0;transition:opacity .15s}
.fw-acc:hover .fw-acc-btns,.fw-acc:focus-within .fw-acc-btns{opacity:1}
.fw-acc-btns .btn{min-width:24px;padding:2px 7px;font-family:var(--mono)}
.fw-acc-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.05)}
.fw-acc-bar i{display:block;height:100%;border-radius:2px}

.fw-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.fw-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--glass);transition:border-color .15s}
.fw-item:hover{border-color:var(--line-2)}
.fw-item-ico{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--mut)}
.fw-item-main{min-width:0;flex:1}
.fw-item-main b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-item-main span{display:block;font-family:var(--mono);font-size:11px;color:var(--dim)}
.fw-item-rm{opacity:0;transition:opacity .15s}
.fw-item:hover .fw-item-rm,.fw-item:focus-within .fw-item-rm{opacity:1}

/* ── PERMISSIONS EDITOR ────────────────────────────────────────────────── */
#modal-card.wide{max-width:660px}
.perm-list{max-height:52vh;overflow:auto;margin-top:6px;padding-right:6px}
.perm-group{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.perm-group:first-child{margin-top:4px}
.perm{border-bottom:1px solid var(--line)}
.perm:last-child{border-bottom:none}
.perm-head{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;cursor:pointer}
.perm-head input{margin-top:2px;accent-color:var(--red);width:15px;height:15px;flex:none}
.perm-txt b{display:block;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.perm-txt span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.45}
.perm-warn{width:13px;height:13px;color:var(--amber)}
.perm-kids{padding:0 0 10px 27px;display:flex;flex-direction:column;gap:8px}
.perm-kid{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.perm-kid input{margin-top:2px;accent-color:var(--red);width:14px;height:14px;flex:none}
.perm-kid b{display:block;font-size:12.5px;font-weight:600}
.perm-kid span span{display:block;font-size:11px;color:var(--dim);margin-top:1px}

/* Detection history table */
.dim{color:var(--dim)}
.sm{font-size:11.5px}
.detail-cell{max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut);font-size:12px}
.cfg-search .sel{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;color:var(--txt)}
.ml-sec{margin-bottom:18px}
.ml-sec-head{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ml-dot{width:9px;height:9px;border-radius:50%}.ml-dot.whitelist{background:var(--green)}.ml-dot.blacklist{background:var(--red)}
.ml-sub{font-weight:400;font-size:11.5px;color:var(--dim)}
.ml-add{display:flex;gap:8px;margin-bottom:10px}
.ml-add input{flex:1;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px}
.ml-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ml-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;padding:4px 9px;border-radius:7px;background:var(--glass);border:1px solid var(--line-2)}
.ml-chip button{color:var(--dim)}.ml-chip button:hover{color:var(--red-2)}
.ml-bulk{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12px;font-family:var(--mono);margin-bottom:8px}
.tier-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tier-row .tier-at{width:70px;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-family:var(--mono)}
.tier-row .arrow{color:var(--dim)}
.tier-row .tier-action{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:6px 9px;color:var(--txt)}
.list-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.mode-btn{border:1px solid var(--line);border-radius:11px;padding:14px;text-align:left;transition:all .2s}
.mode-btn b{display:block;font-size:13px}.mode-btn span{font-size:11.5px;color:var(--dim)}
.mode-btn.active{border-color:rgba(255,43,61,.4);background:var(--red-soft)}
.list-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.list-cat{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--mut)}
.list-cat.active{border-color:rgba(255,43,61,.4);color:var(--red-2);background:var(--red-soft)}
.list-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.list-toolbar .search{background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px}
.list-entries{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;max-height:300px;overflow:auto}
.list-entry{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;padding:5px 10px;border-radius:8px;background:var(--glass);border:1px solid var(--line-2)}
.list-entry.all{border-color:rgba(255,43,61,.4);color:var(--red-2)}
.list-entry button{color:var(--dim)}.list-entry button:hover{color:var(--red-2)}
.list-bulk textarea{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:12px;font-family:var(--mono);margin-bottom:8px}
.bulk-btns,.ml-bulk-btns{display:flex;gap:8px}
.cfg-intro{font-size:13px;color:var(--mut);margin-bottom:16px;padding:12px 14px;border-left:3px solid var(--red);background:var(--red-soft);border-radius:0 8px 8px 0}

.live-feed{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;padding-right:4px}
.lf-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.015);animation:feedIn .45s var(--ease)}
@keyframes feedIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.lf-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.lf-ico svg{width:14px;height:14px}
.lf-ico.bad{background:var(--red-soft);color:var(--red-2)}
.lf-ico.warn{background:rgba(255,178,36,.1);color:var(--amber)}
.lf-ico.ok{background:rgba(43,217,124,.1);color:var(--green)}
.lf-ico.info{background:rgba(77,159,255,.1);color:var(--blue)}
.lf-body{flex:1;min-width:0}
.lf-body b{font-size:13px}
.lf-body p{font-size:12.5px;color:var(--mut);margin-top:1px;word-break:break-word}
.lf-time{font-family:var(--mono);font-size:10.5px;color:var(--dim);flex:none}
.log-line{display:flex;gap:14px;font-family:var(--mono);font-size:12px;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.log-line:hover{background:rgba(255,255,255,.02)}
.log-line .lt{color:var(--dim);flex:none}
.log-line .lv{flex:none;width:52px;font-weight:700}
.lv.ERROR{color:var(--red-2)}.lv.WARN{color:var(--amber)}.lv.INFO{color:var(--blue)}.lv.DEBUG{color:var(--dim)}
.log-line .lm{color:#c2c2cb;word-break:break-all}
.dtag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:6px;white-space:nowrap;text-transform:uppercase}
.dtag.ban{background:var(--red-soft);color:var(--red-2);border:1px solid rgba(255,43,61,.3)}
.dtag.kick,.dtag.warn{background:rgba(255,178,36,.09);color:var(--amber);border:1px solid rgba(255,178,36,.3)}
.dtag.flag,.dtag.none,.dtag.log{background:rgba(77,159,255,.09);color:var(--blue);border:1px solid rgba(77,159,255,.3)}
.trust-hi{color:var(--green)}.trust-mid{color:var(--amber)}.trust-lo{color:var(--red-2)}

.prog{height:7px;border-radius:99px;background:#1d1d25;overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--red-2));box-shadow:0 0 10px var(--red-glow);position:relative;overflow:hidden}
.prog.g i{background:linear-gradient(90deg,#1fa963,var(--green));box-shadow:none}
.prog.a i{background:linear-gradient(90deg,#d98f10,var(--amber));box-shadow:none}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:13px}
.kv:last-child{border:none}
.kv span{color:var(--dim)}
.kv b{font-family:var(--mono);font-weight:600;font-size:12.5px;text-align:right}
.copy-field{display:flex;align-items:center;gap:9px;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-family:var(--mono);font-size:12.5px}
.copy-field code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfcfd6}
.copy-field button{color:var(--dim);transition:color .2s}
.copy-field button:hover{color:var(--red-2)}
.copy-field button svg{width:14px;height:14px}
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl-item{position:relative;padding-bottom:26px}
.tl-item::before{content:"";position:absolute;left:-23px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--red);box-shadow:0 0 10px var(--red-glow)}
.tl-item .tl-date{font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:4px}
.tl-item h4{font-size:14px;margin-bottom:5px}
.tl-item p{font-size:13px;color:var(--mut)}
.dd{position:absolute;top:calc(100% + 10px);right:0;width:330px;background:#101017;border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:0 30px 70px -20px rgba(0,0,0,.8);z-index:200;display:none;animation:modalInSm .25s var(--ease)}
.dd.open{display:block}
@keyframes modalInSm{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-head{padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.dd-list{max-height:340px;overflow-y:auto}
.form-field{margin-bottom:16px}
.form-field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--mut)}
.form-field input,.form-field select,.form-field textarea{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:13.5px}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:rgba(255,43,61,.4)}
.form-field select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ba4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}

.monitor-stage{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(circle at 50% 40%,#0d0d13,#07070a);min-height:440px;display:grid;place-items:center;overflow:hidden}
.monitor-img{max-width:100%;max-height:70vh;display:none;border-radius:var(--r-md)}
.monitor-hint{position:absolute;color:var(--dim);font-size:13px;text-align:center;max-width:520px;padding:20px}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.grid-tile{position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#0a0a0f;aspect-ratio:16/10;cursor:pointer}
.grid-tile img{width:100%;height:100%;object-fit:cover;display:block}
.grid-tile .gt-live{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:5px;background:var(--red-soft);color:var(--red-2);border:1px solid rgba(255,43,61,.3)}
.grid-tile .gt-label{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;font-size:11.5px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.clip-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.018);cursor:pointer;transition:border-color .3s}
.clip-card:hover,.clip-card.clip-focus{border-color:rgba(255,43,61,.4)}
.clip-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a0a0f;display:block}
.clip-meta{padding:12px 14px}
.cm-name{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center}
.cm-reason{font-size:11.5px;color:var(--mut);margin-top:4px}

/* ── Clip player (click a clip) ────────────────────────────────────────
   The clip reaches us as a burst of JPEG stills, but it is REVIEWED as
   video: it plays on open, loops, scrubs and exports to a real .webm. The
   frames underneath are an implementation detail, not the interface. */
#modal-card.clipv{width:min(1060px,calc(100vw - 32px));max-width:none}
.cf-body{padding:18px 20px 20px}
.cf-stage{position:relative;background:#06060a;border:1px solid var(--line-2);border-radius:var(--r-md);
  overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:220px;cursor:pointer;
  box-shadow:0 20px 60px -15px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05)}
.cf-stage canvas{max-width:100%;max-height:56vh;display:block}
.cf-badge{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 10px;
  border-radius:999px;background:rgba(8,8,12,.82);backdrop-filter:blur(8px);border:1px solid var(--line-2);color:var(--txt)}
.cf-rec-dot{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;padding:4px 10px;border-radius:999px;background:rgba(255,43,61,.16);border:1px solid rgba(255,43,61,.38);
  color:var(--red-2);display:flex;align-items:center;gap:6px}
.cf-rec-dot .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.cf-paused{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(3,3,5,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.cf-stage.paused .cf-paused{opacity:1}
.cf-paused svg{width:56px;height:56px;padding:15px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--red),#a3101f);box-shadow:0 12px 35px var(--red-glow)}
.cf-bar{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
.cf-step-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--glass);display:grid;place-items:center;color:var(--txt);transition:all .2s;cursor:pointer}
.cf-step-btn:hover{background:var(--glass-2);border-color:rgba(255,43,61,.4);color:#fff}
.cf-step-btn svg{width:16px;height:16px}
.cf-clock{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--txt);background:var(--bg-3);padding:6px 11px;border-radius:8px;border:1px solid var(--line);white-space:nowrap}
.cf-speed{padding:6px 10px;font-size:12px;min-width:0;width:auto;border-radius:8px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt);cursor:pointer}
.cf-scrub{flex:1;min-width:180px;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;
  background:var(--line);outline:none;cursor:pointer}
.cf-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--red);border:2px solid #0b0b10;box-shadow:0 0 12px var(--red-glow);cursor:pointer;transition:transform .15s}
.cf-scrub::-webkit-slider-thumb:hover{transform:scale(1.25)}
.cf-scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--red);
  border:2px solid #0b0b10;cursor:pointer}
.cf-hint{font-size:12px;color:var(--mut);margin-top:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
kbd{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt);box-shadow:0 1px 2px rgba(0,0,0,.4)}
/* Play affordance on the gallery tiles — the tile animates, clicking opens the player. */
.clip-thumb{position:relative;display:block}
.clip-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(transparent,rgba(0,0,0,.4));opacity:0;transition:opacity .25s}
.clip-card:hover .clip-play{opacity:1}
.clip-play svg{width:42px;height:42px;padding:11px;border-radius:50%;color:#fff;
  background:rgba(255,43,61,.92);box-shadow:0 8px 24px rgba(0,0,0,.5)}

.ban-mod{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);background:linear-gradient(180deg,rgba(255,43,61,.06),rgba(255,43,61,.015));border:1px solid rgba(255,43,61,.22)}
.ban-mod-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--red-soft);border:1px solid rgba(255,43,61,.3);color:var(--red-2);flex:none}
.ban-mod-icon svg{width:22px;height:22px}
.ban-telemetry-box{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.ban-log-text{font-size:13px;color:var(--txt);line-height:1.5;word-break:break-word}
.ban-kv-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ban-kv-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;background:var(--bg-3);border:1px solid var(--line-2);font-size:11.5px}
.ban-kv-pill b{color:var(--mut);font-weight:500}
.ban-kv-pill code{font-family:var(--mono);color:var(--red-2);font-weight:700}
.ban-ev-meta{font-family:var(--mono);font-size:11px;color:var(--green);display:flex;align-items:center;gap:6px;margin-top:2px}
.ban-ev-meta svg{width:13px;height:13px}

.prov-section{display:flex;flex-direction:column;gap:8px}
.prov-head-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);font-weight:700}
.prov-row{display:flex;flex-wrap:wrap;gap:8px}
.prov-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt);font-size:12.5px;cursor:pointer;transition:all .3s var(--ease);position:relative;overflow:hidden}
.prov-chip:hover{border-color:rgba(255,43,61,.5);background:rgba(255,43,61,.06);transform:translateY(-2px);box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.prov-icon-wrap{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--line-2);flex:none;transition:all .3s var(--ease);animation:provIconFloat 4.2s ease-in-out infinite}
.prov-icon-wrap svg{width:14px;height:14px;transition:all .3s var(--ease)}

/* Provider specific animated logos & glows */
.prov-discord .prov-icon-wrap{color:#5865F2;border-color:rgba(88,101,242,.4);background:rgba(88,101,242,.12);animation:provIconFloat 4.2s ease-in-out infinite, discordChipGlow 3.5s ease-in-out infinite}
.prov-steam .prov-icon-wrap{color:#66c0f4;border-color:rgba(102,192,244,.4);background:rgba(102,192,244,.12);animation:provIconFloat 4.6s ease-in-out 0.2s infinite, steamChipGlow 3.8s ease-in-out infinite}
.prov-fivem .prov-icon-wrap{color:var(--red-2);border-color:rgba(255,43,61,.4);background:var(--red-soft);animation:provIconFloat 4s ease-in-out 0.4s infinite, fivemChipGlow 3.2s ease-in-out infinite}
.prov-license .prov-icon-wrap,.prov-license2 .prov-icon-wrap{color:var(--amber);border-color:rgba(255,178,36,.4);background:rgba(255,178,36,.12);animation:provIconFloat 4.8s ease-in-out 0.6s infinite, licenseChipGlow 4s ease-in-out infinite}
.prov-ip .prov-icon-wrap{color:var(--green);border-color:rgba(43,217,124,.4);background:rgba(43,217,124,.12);animation:provIconFloat 4.4s ease-in-out 0.8s infinite, ipChipGlow 3.6s ease-in-out infinite}
.prov-xbl .prov-icon-wrap,.prov-live .prov-icon-wrap{color:#107c10;border-color:rgba(16,124,16,.4);background:rgba(16,124,16,.12);animation:provIconFloat 5s ease-in-out 0.3s infinite, xboxChipGlow 4.2s ease-in-out infinite}

.prov-chip:hover .prov-icon-wrap{transform:scale(1.15) rotate(4deg)}

.prov-lbl{font-weight:600;color:var(--mut)}
.prov-val{font-family:var(--mono);font-size:11px;color:var(--txt)}

@keyframes provIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes discordChipGlow{50%{box-shadow:0 0 12px rgba(88,101,242,.6);border-color:rgba(88,101,242,.7)}}
@keyframes steamChipGlow{50%{box-shadow:0 0 12px rgba(102,192,244,.6);border-color:rgba(102,192,244,.7)}}
@keyframes fivemChipGlow{50%{box-shadow:0 0 12px rgba(255,43,61,.6);border-color:rgba(255,43,61,.7)}}
@keyframes licenseChipGlow{50%{box-shadow:0 0 12px rgba(255,178,36,.6);border-color:rgba(255,178,36,.7)}}
@keyframes ipChipGlow{50%{box-shadow:0 0 12px rgba(43,217,124,.6);border-color:rgba(43,217,124,.7)}}
@keyframes xboxChipGlow{50%{box-shadow:0 0 12px rgba(16,124,16,.6);border-color:rgba(16,124,16,.7)}}

.ban-clip{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:#06060a;min-height:220px;display:flex;align-items:center;justify-content:center;position:relative}
.ban-clip-wrap{position:relative;width:100%;aspect-ratio:16/9;cursor:pointer;overflow:hidden}
.ban-clip-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.ban-clip-wrap:hover img{transform:scale(1.03)}
.ban-clip-badge{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:4px 10px;border-radius:999px;background:rgba(8,8,12,.82);backdrop-filter:blur(8px);border:1px solid var(--line-2);color:var(--red-2);display:flex;align-items:center;gap:6px}
.ban-clip-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.ban-clip-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(6,6,10,.4);backdrop-filter:blur(2px);color:#fff;font-weight:700;font-size:14px;opacity:0;transition:opacity .25s var(--ease)}
.ban-clip-wrap:hover .ban-clip-play-overlay{opacity:1}
.ban-clip-play-overlay svg{width:20px;height:22px;padding:10px;border-radius:50%;background:var(--red);box-shadow:0 0 20px var(--red-glow)}

.clip-load{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:13px}
.clip-load i{animation:spin 1s linear infinite}
.ban-clip-empty{flex-direction:column;gap:6px;text-align:center;padding:34px 20px;color:var(--dim)}
.ban-clip-empty i{width:30px;height:30px;color:var(--line-2)}
.ban-clip-empty b{color:var(--mut);font-size:14px}
.ban-clip-empty span{font-size:12px;max-width:320px}

.fp-toggle{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.015);border:1px solid var(--line);font-size:13px;color:var(--mut);cursor:pointer;transition:border-color .2s}
.fp-toggle:hover{border-color:var(--line-2);color:var(--txt)}
.fp-toggle input{display:none}
.fp-switch{position:relative;width:34px;height:18px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line-2);flex:none;transition:all .25s}
.fp-switch::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--dim);transition:all .25s}
.fp-toggle input:checked + .fp-switch{background:var(--red);border-color:var(--red);box-shadow:0 0 10px var(--red-glow)}
.fp-toggle input:checked + .fp-switch::after{left:18px;background:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1080px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:1fr 1fr}.g-23,.g-32{grid-template-columns:1fr}.cfg-layout{grid-template-columns:1fr}.cfg-nav{position:static;flex-direction:row;flex-wrap:wrap}.method-grid{grid-template-columns:1fr 1fr}.cfg-grid{grid-template-columns:1fr}}
@media (max-width:860px){.sb{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);width:248px!important}.sb.mobile-open{transform:none;box-shadow:40px 0 80px rgba(0,0,0,.6)}#dash.on{grid-template-columns:1fr}}
@media (max-width:640px){.g-4,.g-3,.g-2{grid-template-columns:1fr}.content{padding:18px}.tb-search{display:none}.list-mode{grid-template-columns:1fr}}

/* ── Player Monitor (telemetry radar — capture-free live view) ────────── */
.radar-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.radar-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
#radCanvas{width:100%;max-width:640px;height:auto;border-radius:14px;background:#07090c;border:1px solid var(--line)}
.radar-hint{position:absolute;left:0;right:0;text-align:center;color:var(--mut);font-size:13.5px;pointer-events:auto;padding:0 24px}
.radar-side{display:flex;flex-direction:column;gap:16px}
.mon-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:4px 0 10px}
.mon-bar i{display:block;height:100%;border-radius:4px;transition:width .3s;position:relative;overflow:hidden}
.near-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.near-row:last-child{border-bottom:none}
.near-row:hover b{color:var(--red-2)!important}
@media (max-width:1100px){.radar-layout{grid-template-columns:1fr}}

/* ── Session Replay (server-recorded flight data playback) ────────────── */
.rp-layout{display:grid;grid-template-columns:308px minmax(0,1fr);gap:16px;align-items:start}
.rp-stage{display:flex;flex-direction:column;gap:16px;min-width:0}
.rp-list{max-height:calc(100vh - 190px);display:flex;flex-direction:column}
.rp-list>div:last-child{overflow-y:auto;margin:0 -6px;padding:0 6px}
.rp-row{border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:8px;cursor:pointer;background:rgba(255,255,255,.015);transition:border-color .22s,background .22s}
.rp-row:hover{border-color:rgba(255,43,61,.3);background:rgba(255,43,61,.035)}
.rp-row.on{border-color:rgba(255,43,61,.55);background:rgba(255,43,61,.07)}
.rp-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.rp-row-top b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-row-sub{font-size:11.5px;color:var(--mut);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-map-card{position:relative;padding:0;overflow:hidden}
/* The stage keeps ONE aspect ratio whatever is showing in it, so switching
   between the player's screen and the world plot doesn't resize the page under
   the admin's cursor mid-playback. */
.rp-view{position:relative;width:100%;aspect-ratio:1000/560;background:#07090c;border-radius:inherit;overflow:hidden}
#rpCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#07090c;transition:inset .22s,width .22s}
.rp-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;background:#04060a}
/* Screen mode: the offender's game fills the stage and the server-recorded
   track drops to a corner inset — still visible, because it is the half that
   cannot be faked. */
.rp-view.m-screen .rp-shot{display:block}
.rp-view.m-screen #rpCanvas{inset:auto 12px 12px auto;width:31%;height:auto;aspect-ratio:1000/560;
  border:1px solid rgba(255,255,255,.12);border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.6)}
.rp-noshot{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:min(440px,80%);
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:var(--mut);pointer-events:none}
.rp-noshot svg{width:26px;height:26px;color:var(--dim)}
.rp-noshot b{font-size:14px;color:var(--txt)}
.rp-noshot span{font-size:12px;line-height:1.5}
.rp-modes{position:absolute;top:12px;right:12px;display:flex;gap:4px;padding:3px;border-radius:9px;
  background:rgba(9,11,16,.72);border:1px solid var(--line);backdrop-filter:blur(6px);z-index:2}
.rp-mode{display:flex;align-items:center;gap:5px;padding:5px 10px;border:none;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--mut);font:inherit;font-size:11.5px;transition:background .18s,color .18s}
.rp-mode svg{width:13px;height:13px}
.rp-mode:hover:not(:disabled){color:var(--txt)}
.rp-mode.on{background:rgba(255,43,61,.16);color:var(--red-2)}
.rp-mode:disabled{opacity:.34;cursor:not-allowed}
/* Scrimmed, because in screen mode this sits on top of an arbitrary game frame
   — a bright sky behind plain text made the header unreadable. */
.rp-hud{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:5px;pointer-events:none;
  padding:9px 13px;border-radius:10px;background:rgba(7,9,12,.66);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px);z-index:2}
.rp-hud-line{font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rp-hud-line b{color:var(--txt);font-size:14px}
.rp-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--mut);background:rgba(7,9,12,.86)}
.rp-empty svg{width:30px;height:30px;color:var(--dim)}
.rp-empty b{font-size:15px;color:var(--txt)}
.rp-empty span{font-size:13px}
.rp-transport{display:flex;flex-direction:column;gap:14px}
.rp-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rp-clock{font-size:12.5px;color:var(--mut);letter-spacing:.04em}
.rp-speed{padding:6px 9px;font-size:12px;min-width:0;width:auto}
/* The scrub bar and the detection markers share one track, so a marker sits
   exactly above the moment it fired rather than merely near it. */
.rp-track{position:relative;padding-bottom:16px}
.rp-track input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--line);outline:none;cursor:pointer}
.rp-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--red);border:2px solid #0b0b10;box-shadow:0 0 10px rgba(255,43,61,.55);cursor:pointer}
.rp-track input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--red);border:2px solid #0b0b10;cursor:pointer}
.rp-marks{position:absolute;left:0;right:0;top:14px;height:12px;pointer-events:none}
.rp-mark{position:absolute;top:0;width:3px;height:12px;border:none;border-radius:2px;transform:translateX(-1.5px);pointer-events:auto;cursor:pointer;padding:0}
.rp-mark.ban{background:var(--red);box-shadow:0 0 8px rgba(255,43,61,.7)}
.rp-mark.kick{background:var(--amber)}
.rp-mark.flag{background:var(--blue)}
.rp-mark:hover{height:16px}
.rp-markrow{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.rp-markrow:last-child{border-bottom:none}
.rp-markrow:hover b{color:var(--red-2)}
.rp-markrow>div{flex:1;min-width:0}
.rp-markrow b{display:block;font-size:13px}
.rp-markrow p{font-size:11.5px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.rp-markt{font-size:11px;color:var(--dim);white-space:nowrap}
@media (max-width:1100px){.rp-layout{grid-template-columns:1fr}.rp-list{max-height:340px}}


/* Player Lookup */
.lookup-hero{margin-bottom:18px;background:radial-gradient(circle at 5% 20%,rgba(255,43,61,.11),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}.lookup-search{display:flex;align-items:center;gap:12px}.lookup-search>svg{color:var(--red-2);width:22px;height:22px}.lookup-search input{flex:1;min-width:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:11px;padding:13px 15px;font-size:14px}.lookup-hero>p{font-size:12px;color:var(--dim);margin:10px 0 0 34px}.lookup-profile{display:grid;gap:16px;margin-bottom:20px}.lookup-summary{display:flex;align-items:center;justify-content:space-between;gap:20px}.lookup-summary h2{font-family:var(--disp);font-size:22px;margin:12px 0 4px}.lookup-summary p{font-size:11px;color:var(--mut);word-break:break-all}.lookup-score{text-align:right}.lookup-score b{display:block;font-family:var(--mono);font-size:34px;color:var(--red-2);line-height:1}.lookup-score span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--dim)}.lookup-grid{align-items:start}.lookup-grid .copy-field{margin-bottom:7px}.lookup-grid .copy-field span{overflow:hidden;text-overflow:ellipsis}.lookup-metrics{display:flex;gap:8px;margin-top:12px}.lookup-metrics span{padding:7px 10px;border:1px solid var(--line);border-radius:9px;color:var(--mut);font-size:12px}.lookup-metrics b{color:var(--txt)}.lookup-state{padding:13px 14px;border:1px solid var(--line);border-radius:10px;color:var(--mut);font-size:13px}.lookup-state.ok{border-color:rgba(43,217,124,.22);background:rgba(43,217,124,.05)}.lookup-state.warn{border-color:rgba(255,178,36,.25);background:rgba(255,178,36,.05)}.guild-hit,.ban-source{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}.guild-hit:last-child,.ban-source:last-child{border-bottom:0}.guild-hit b,.ban-source b{display:block;font-size:13px}.guild-hit span,.ban-source span{display:block;color:var(--mut);font-size:12px;margin-top:3px}.role-list{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.role-list .badge{margin:0}.ban-source>div:last-child{text-align:right}.ban-source small{display:block;color:var(--dim);font-size:10px;margin-top:6px}@media(max-width:700px){.lookup-search{flex-wrap:wrap}.lookup-search>svg{display:none}.lookup-search input,.lookup-search .btn{width:100%;flex:auto}.lookup-hero>p{margin-left:0}.lookup-summary{align-items:flex-start}.lookup-grid{grid-template-columns:1fr}.guild-hit,.ban-source{flex-direction:column}.role-list{justify-content:flex-start}}