

/* Tema: panel ile ayni tasarim dili. Varsayilan Classic Dark; secim
   localStorage'da (fac_scan_theme) ve <html data-theme> uzerinde tasinir.
   Vurgu Classic Dark'ta BEYAZ oldugu icin dolgu uzerindeki yazi --acc-ink. */
:root{
  --bg:#000000; --bg-2:#050505; --surface:#0a0a0a; --surface-2:#111111; --surface-3:#1a1a1a;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.22);
  --text:#ffffff; --text-2:#c9c9c9; --text-3:#949494; --text-4:#949494;
  --accent:#ffffff; --accent-2:#e6e6e6; --accent-rgb:255,255,255;
  --accent-bg:rgba(255,255,255,.13); --accent-glow:rgba(255,255,255,.26); --acc-ink:#000000; --btn-bg:#ffffff;
  --gold:#f0a020; --gold-bg:rgba(240,160,32,.12);
  --gold-line:rgba(240,160,32,.32);
  --ok:#2ecc71; --ok-bg:rgba(46,204,113,.13);
  --warn:#f0a020; --warn-bg:rgba(240,160,32,.13);
  --bad:#ff4d4d; --bad-bg:rgba(255,77,77,.13);
  --info:#c9c9c9; --info-bg:rgba(201,201,201,.13);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --success:var(--ok); --danger:var(--bad); --warning:var(--warn);
  --sidebar-width:248px;
}
html[data-theme="classicblue"]{
  --bg:#0b0f17; --bg-2:#10151f; --surface:#141a26; --surface-2:#1b2230; --surface-3:#232b3b;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055); --line-2:rgba(255,255,255,.17);
  --text:#e8ecf4; --text-2:#b9c2d4; --text-3:#8b95a8; --text-4:#8b95a8;
  --accent:#3b82f6; --accent-2:#60a5fa; --accent-rgb:59,130,246;
  --accent-bg:rgba(59,130,246,.13); --accent-glow:rgba(59,130,246,.26); --acc-ink:#ffffff; --btn-bg:#2563eb;
  --gold:#fbbf24; --gold-bg:rgba(245,158,11,.12);
  --gold-line:rgba(245,158,11,.32);
  --ok:#22c55e; --ok-bg:rgba(34,197,94,.13);
  --warn:#f59e0b; --warn-bg:rgba(245,158,11,.13);
  --bad:#f87171; --bad-bg:rgba(248,113,113,.13);
  --info:#60a5fa; --info-bg:rgba(96,165,250,.13);
}
html[data-theme="navy"]{
  --bg:#05091b; --bg-2:#070d24; --surface:#0b1024; --surface-2:#121936; --surface-3:#1a2246;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.2);
  --text:#ffffff; --text-2:#c9d2ea; --text-3:#9aa6c4; --text-4:#9aa6c4;
  --accent:#2b7bff; --accent-2:#4a9bff; --accent-rgb:43,123,255;
  --accent-bg:rgba(43,123,255,.13); --accent-glow:rgba(43,123,255,.26); --acc-ink:#ffffff; --btn-bg:#1f6ae6;
  --gold:#ffc061; --gold-bg:rgba(255,192,97,.12);
  --gold-line:rgba(255,192,97,.32);
  --ok:#12c98b; --ok-bg:rgba(18,201,139,.13);
  --warn:#ffc061; --warn-bg:rgba(255,192,97,.13);
  --bad:#ff6b6b; --bad-bg:rgba(255,107,107,.13);
  --info:#4a9bff; --info-bg:rgba(74,155,255,.13);
}
.app *{box-sizing:border-box}
.app,.app{margin:0;padding:0;background:var(--bg);color:var(--text);font:13px/1.55 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.app .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.app a{color:inherit;text-decoration:none}
.app button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.app ::selection{background:var(--accent-bg);color:var(--text)}
.app ::-webkit-scrollbar{width:10px;height:10px}
.app ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;border:2px solid var(--bg)}

.app.ready{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh}

/* ── SIDEBAR ── */
.app .side{background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.app .brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px}
.app .brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.04));display:grid;place-items:center;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 0 22px var(--accent-bg)}
.app .brand-mark img{width:26px;height:26px;object-fit:contain}
.app .brand-name{font-weight:800;letter-spacing:-.02em;font-size:16.5px}
.app .brand-name span{color:var(--accent-2)}
.app .brand-sub{font-size:9.5px;color:var(--text-4);letter-spacing:.16em;text-transform:uppercase;margin-top:1px;font-weight:600}

.app .nav-section{padding:2px 10px 8px;flex:1}
.app .nav-label{padding:16px 12px 7px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);font-weight:800}
.app .nav-item{display:flex;align-items:center;gap:11px;padding:8.5px 12px;margin:1px 0;color:var(--text-3);font-size:13px;font-weight:500;border-radius:10px;cursor:pointer;width:100%;text-align:left;transition:background .13s,color .13s;position:relative}
.app .nav-item:hover{color:var(--text);background:rgba(255,255,255,.035)}
.app .nav-item.active{color:var(--text);background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.05));font-weight:600}
.app .nav-item.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.app .nav-item svg{width:16.5px;height:16.5px;flex:0 0 16.5px;opacity:.85}
.app .nav-item.active svg{color:var(--accent-2);opacity:1}
.app .nav-item .tag{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}
.app .side-foot{margin-top:auto;border-top:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:10px}
.app .avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px;border:1px solid var(--line)}
.app .side-foot .who{flex:1;min-width:0}
.app .side-foot .who .n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .side-foot .who .p{font-size:10.5px;color:var(--accent-2);font-weight:600;letter-spacing:.02em}
.app .side-foot .lo{color:var(--text-4);padding:6px;border-radius:8px}
.app .side-foot .lo:hover{color:var(--bad);background:var(--bad-bg)}

/* ── MAIN ── */
.app .main{min-width:0;display:flex;flex-direction:column}
.app .topbar{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(14px);z-index:20}
.app .crumb{font-size:11.5px;color:var(--text-4);font-family:'JetBrains Mono',monospace;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.app .crumb b{color:var(--text-2);font-weight:600}
.app .crumb .sep{opacity:.4}
.app .topbar .spacer{flex:1}
.app .status-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--text-2);padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.app .status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--ok-bg)}50%{box-shadow:0 0 0 5px rgba(var(--accent-rgb),.06)}}

.app .wrap{padding:26px 28px;max-width:1280px;width:100%;margin:0 auto}
.app .page{display:none;animation:fade .25s ease}
.app .page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.app .page-head{margin-bottom:20px}
.app .page-eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);font-weight:800;margin-bottom:7px}
.app .page-title{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0}
.app .page-sub{color:var(--text-3);font-size:13.5px;margin-top:6px;max-width:640px}

/* Greeting row (overview) */
.app .greet-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.app .greet-row h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0}
.app .greet-row h1 b{color:var(--accent-2)}
.app .greet-row .sub{color:var(--text-3);font-size:13px;margin-top:4px}
.app .greet-row .spacer{flex:1}

/* Cards / grid */
.app .grid{display:grid;gap:14px}
.app .grid.cols-3{grid-template-columns:repeat(3,1fr)}
.app .grid.cols-2{grid-template-columns:repeat(2,1fr)}
.app .card{background:linear-gradient(180deg,var(--surface),rgba(10,13,12,.7));border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.app .card.pad-lg{padding:24px}
.app .card-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);font-weight:800;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.app .card-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px}
.app .card-title.mb0{margin-bottom:0}

/* Stat strip (overview) */
.app .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin-bottom:14px;overflow:hidden}
.app .ss-cell{padding:16px 20px;border-right:1px solid var(--line-soft);position:relative}
.app .ss-cell:last-child{border-right:0}
.app .ss-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.app .ss-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line)}
.app .ss-ic svg{width:14.5px;height:14.5px}
.app .ss-ic.g{background:var(--accent-bg);color:var(--accent-2);border-color:rgba(var(--accent-rgb),.25)}
.app .ss-ic.r{background:var(--bad-bg);color:var(--bad);border-color:rgba(251,77,92,.25)}
.app .ss-ic.b{background:var(--info-bg);color:var(--info);border-color:rgba(56,189,248,.25)}
.app .ss-ic.y{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-line)}
.app .ss-label{font-size:11.5px;color:var(--text-3);font-weight:600}
.app .ss-value{font-size:26px;font-weight:800;letter-spacing:-.02em;font-family:'JetBrains Mono',monospace;line-height:1.1}
.app .ss-delta{position:absolute;right:16px;bottom:16px;font-size:10px;font-weight:800;padding:2.5px 8px;border-radius:999px}
.app .ss-delta.up{background:var(--ok-bg);color:var(--ok)}
.app .ss-delta.down{background:var(--bad-bg);color:var(--bad)}
.app .ss-delta.flat{background:rgba(255,255,255,.05);color:var(--text-4)}

/* Overview layout */
.app .ov-grid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.app .ov-main{display:grid;gap:14px;min-width:0}
.app .ov-side{display:grid;gap:14px;min-width:0}

/* Activity chart */
.app .chart-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.app .chart-head .t{font-size:13.5px;font-weight:700}
.app .chart-big{font-size:26px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.app .chart-big .up{font-size:10px;font-weight:800;padding:2.5px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.app .chart-wrap{margin:4px -6px -6px}
.app .chart-wrap svg{width:100%;height:190px;display:block}
.app .chart-axis{font-size:9.5px;fill:var(--text-4);font-family:'JetBrains Mono',monospace}

/* Donut */
.app .donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.app .donut-box{position:relative;width:170px;height:170px}
.app .donut-box svg{width:170px;height:170px;transform:rotate(-90deg)}
.app .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.app .donut-center .n{font-size:26px;font-weight:800;font-family:'JetBrains Mono',monospace;line-height:1}
.app .donut-center .l{font-size:10px;color:var(--text-4);margin-top:4px}
.app .donut-legend{width:100%;display:grid;gap:7px}
.app .dl-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.app .dl-row .sw{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.app .dl-row .lbl{color:var(--text-2);font-weight:600}
.app .dl-row .n{margin-left:auto;font-weight:700;font-family:'JetBrains Mono',monospace}
.app .dl-row .pct{width:38px;text-align:right;color:var(--text-4);font-size:11px;font-family:'JetBrains Mono',monospace}

/* License card */
.app .lic-days{font-size:30px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-.02em}
.app .lic-days span{font-size:12.5px;color:var(--text-3);font-weight:600;font-family:'Inter',sans-serif;margin-left:6px}
.app .lic-bar{height:6px;border-radius:999px;background:var(--surface-3);margin:12px 0 8px;overflow:hidden}
.app .lic-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent-glow)}
.app .lic-note{font-size:11.5px;color:var(--text-4)}

.app .stat{display:flex;flex-direction:column;gap:2px}
.app .stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-family:'JetBrains Mono',monospace}
.app .stat .l{font-size:11px;color:var(--text-4)}
.app .stat-row{display:flex;gap:22px}

.app .who-line{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.app .who-line img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.app .who-line .n{font-weight:700;font-size:14px}
.app .who-line .s{font-size:11px;color:var(--text-3);font-family:'JetBrains Mono',monospace}

.app .kv{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;gap:12px}
.app .kv:last-child{border-bottom:0}
.app .kv .k{color:var(--text-4);display:flex;align-items:center;gap:8px;flex:0 0 auto}
.app .kv .k svg{width:13px;height:13px;opacity:.8}
.app .kv .v{font-weight:600;font-family:'JetBrains Mono',monospace;text-align:right;word-break:break-word;min-width:0}

/* Forms */
.app .field{margin-bottom:14px}
.app .field label{display:block;font-size:10.5px;font-weight:800;color:var(--text-4);margin-bottom:6px;text-transform:uppercase;letter-spacing:.07em}
.app .input,.app textarea.input,.app select.input{width:100%;padding:10.5px 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--text);font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.app .input:focus,.app textarea.input:focus,.app select.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.app textarea.input{resize:vertical;min-height:96px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6}
.app .input::placeholder{color:var(--text-4)}
.app .hint{font-size:11.5px;color:var(--text-4);margin-top:7px;line-height:1.55}
.app .hint code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:'JetBrains Mono',monospace;color:var(--accent-2)}

.app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10.5px 16px;border-radius:var(--r-md);font-weight:700;font-size:13px;cursor:pointer;transition:transform .1s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap}
.app .btn svg{width:15px;height:15px}
.app .btn-primary{background:var(--btn-bg);color:var(--acc-ink);box-shadow:0 0 24px var(--accent-bg),inset 0 1px 0 rgba(255,255,255,.25)}
.app .btn-primary:hover{box-shadow:0 0 34px var(--accent-glow);transform:translateY(-1px)}
.app .btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.app .btn-secondary:hover{border-color:var(--line-2)}
.app .btn-ghost{background:transparent;color:var(--text-3);border:1px solid var(--line)}
.app .btn-ghost:hover{color:var(--text);border-color:var(--line-2)}
.app .btn-sm{padding:7px 11px;font-size:12px;border-radius:9px}
.app .btn-danger{background:var(--bad-bg);color:var(--bad);border:1px solid rgba(251,77,92,.3)}
.app .btn-danger:hover{background:rgba(251,77,92,.22)}
.app .btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.app .btn-block{width:100%}

.app .badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.03em}
.app .badge-success{background:var(--ok-bg);color:var(--ok)}
.app .badge-accent{background:var(--info-bg);color:var(--info)}
.app .badge-muted{background:rgba(255,255,255,.05);color:var(--text-4)}
.app .badge-danger{background:var(--bad-bg);color:var(--bad)}
.app .badge-warn{background:var(--warn-bg);color:var(--warn)}
/* Medium risk: threats found, but under the count that makes it a call. Yellow, a shade up
   from the amber SUSPICIOUS uses, so both read as a warning while staying separable in the
   badge row and in the donut. */
.app .badge-mid{background:rgba(250,204,21,.15);color:#facc15}

/* PIN reveal */
.app .pin-reveal{margin-top:16px;border:1px dashed var(--line-2);border-radius:var(--r-md);padding:22px;text-align:center;background:radial-gradient(400px 100px at 50% 0%,var(--accent-bg),transparent)}
.app .pin-reveal .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);font-weight:800}
.app .pin-reveal .code{font-size:38px;font-weight:800;letter-spacing:10px;color:var(--accent-2);font-family:'JetBrains Mono',monospace;margin:8px 0;text-shadow:0 0 30px var(--accent-glow)}
.app .pin-reveal .sub{font-size:11.5px;color:var(--text-4)}

/* Tables */
.app .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.app table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.app table.tbl th{text-align:left;padding:10px 14px;background:var(--surface-2);color:var(--text-4);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;border-bottom:1px solid var(--line);white-space:nowrap}
.app table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.app table.tbl tr:last-child td{border-bottom:0}
.app table.tbl tr:hover td{background:rgba(255,255,255,.015)}
.app .empty{color:var(--text-4);font-size:13px;padding:26px 10px;text-align:center}
/* Semantic cells, so the large variant below can scale them. They used to carry inline
   styles, which meant the size was baked into the JS and could not be varied per table. */
.app table.tbl .subj{font-weight:600}
.app table.tbl .when{color:var(--text-4);font-size:11.5px;white-space:nowrap}
.app table.tbl .act{text-align:right}
.app table.tbl .muted{color:var(--text-4)}

/* The scans page is the one place a customer reads a list of verdicts, so there it gets room
   to breathe: taller rows, a bigger PIN, and badges that carry across a glance. The compact
   original is kept for the Overview shortcut, which is a preview and not the main event. */
.app table.tbl.tbl-lg th{padding:13px 18px;font-size:11px}
.app table.tbl.tbl-lg td{padding:16px 18px;font-size:14px}
.app table.tbl.tbl-lg .subj{font-size:14.5px;font-weight:700}
.app table.tbl.tbl-lg .when{font-size:12.5px}
.app table.tbl.tbl-lg .pin-chip{font-size:13.5px;padding:6px 13px;letter-spacing:2px;border-left-width:4px}
.app table.tbl.tbl-lg .badge{font-size:11.5px;padding:5px 12px}
.app table.tbl.tbl-lg .btn{font-size:12.5px;padding:8px 15px}

/* Pager. Sits under the table and stays on one line until the viewport is genuinely narrow. */
.app .tbl-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.app .tbl-foot .tf-size{width:auto;padding:7px 10px;font-size:12.5px;font-weight:700}
.app .tbl-foot .tf-lbl{font-size:12px;color:var(--text-4);font-weight:600}
.app .tbl-foot .tf-info{margin-left:auto;font-size:12.5px;color:var(--text-3);font-weight:600}
.app .tbl-foot .tf-nav{display:flex;gap:6px}
.app .tbl-foot .tf-nav button{min-width:36px;font-size:14px;font-weight:800;padding:8px 10px}
.app .tbl-foot .tf-nav button[disabled]{opacity:.35;cursor:default}
.app .tbl-foot .tf-nav button[disabled]:hover{transform:none;border-color:var(--line)}

.app .pin-chip{display:inline-block;
font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;letter-spacing:1.5px;padding:3px 9px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent)}

.app .copy-row{display:flex;gap:8px;align-items:stretch}
.app .copy-row .input{font-family:'JetBrains Mono',monospace;font-size:12.5px}

.app .notice{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);font-size:12.5px;color:var(--text-2);line-height:1.55}
.app .notice svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.app .notice.warn{border-color:var(--warn-bg);background:rgba(245,158,11,.06)}
.app .notice.warn svg{color:var(--warn)}
.app .notice.ok{border-color:var(--ok-bg);background:rgba(var(--accent-rgb),.06)}
.app .notice.ok svg{color:var(--accent)}

.app .tool-list{display:grid;gap:10px}
.app .tool{display:flex;gap:13px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.app .tool .ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent-2)}
.app .tool .ic svg{width:19px;height:19px}
.app .tool .b{flex:1;min-width:0}
.app .tool .b .t{font-weight:700;font-size:13.5px}
.app .tool .b .d{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.5}
.app .tool .b .lnk{font-size:11.5px;color:var(--accent-2);font-family:'JetBrains Mono',monospace;margin-top:6px;display:inline-flex;align-items:center;gap:5px}

/* Segmented control */
.app .seg{display:inline-flex;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;gap:2px}
.app .seg button{padding:5.5px 13px;border-radius:999px;font-size:12px;font-weight:600;color:var(--text-3)}
.app .seg button.on{background:var(--btn-bg);color:var(--acc-ink);font-weight:700}

.app .lock{position:relative}
.app .lock-overlay{position:absolute;inset:0;background:rgba(5,6,6,.74);backdrop-filter:blur(3px);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;z-index:5}
.app .lock-overlay svg{width:30px;height:30px;color:var(--gold)}
.app .lock-overlay .t{font-weight:700}
.app .lock-overlay .d{font-size:12px;color:var(--text-3);max-width:320px}

/* Toasts */
.app .toasts{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:200}
.app .toast{padding:12px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--surface);box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;align-items:center;gap:9px;animation:slideIn .2s ease}
.app .toast.success{border-color:var(--ok-bg);color:var(--ok)}
.app .toast.error{border-color:var(--bad-bg);color:var(--bad)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

.app .spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════ SCAN REPORT ════ */
.app .report{position:relative}
.app .report-wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:var(--r-lg)}
.app .report-wm span{position:absolute;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:26px;letter-spacing:6px;color:rgba(255,255,255,.016);white-space:nowrap;transform:rotate(0deg)}
.app .report > *{position:relative;z-index:1}

.app .rp-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.app .rp-head .title h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0;display:flex;align-items:baseline;gap:10px}
.app .rp-head .title h1 .who{font-size:14px;color:var(--text-3);font-weight:600}
.app .rp-head .title .sub{font-size:12.5px;color:var(--text-3);margin-top:3px}
.app .rp-head .spacer{flex:1}

.app .rp-top{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-bottom:14px;align-items:stretch}
.app .rp-hero{display:flex;align-items:center;gap:26px;padding:26px 28px;position:relative;overflow:hidden}
.app .rp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 220px at 85% 0%,var(--hero-tint,transparent),transparent 70%);pointer-events:none}
.app .rp-hero.v-bad{--hero-tint:rgba(251,77,92,.10)}
.app .rp-hero.v-warn{--hero-tint:rgba(245,158,11,.10)}
.app .rp-hero.v-mid{--hero-tint:rgba(250,204,21,.10)}
.app .rp-hero.v-ok{--hero-tint:rgba(var(--accent-rgb),.10)}

.app .ring-box{position:relative;width:150px;height:150px;flex:0 0 150px}
.app .ring-box svg{width:150px;height:150px;transform:rotate(-90deg)}
.app .ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.app .ring-center .n{font-size:30px;font-weight:800;font-family:'JetBrains Mono',monospace;line-height:1}
.app .ring-center .l{font-size:9px;letter-spacing:.18em;color:var(--text-4);font-weight:800;margin-top:5px;text-transform:uppercase}

.app .rp-verdict .vt{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;text-transform:uppercase}
.app .rp-verdict .vt.bad{color:var(--bad);text-shadow:0 0 30px rgba(251,77,92,.4)}
.app .rp-verdict .vt.warn{color:var(--warn);text-shadow:0 0 30px rgba(245,158,11,.35)}
.app .rp-verdict .vt.mid{color:#facc15;text-shadow:0 0 30px rgba(250,204,21,.35)}
.app .rp-verdict .vt.ok{color:var(--ok);text-shadow:0 0 30px var(--ok-bg)}
.app .rp-verdict .vs{color:var(--text-3);font-size:13px;margin:0 0 16px}
.app .vcounts{display:flex;gap:26px}
.app .vc{display:flex;flex-direction:column;gap:3px}
.app .vc .h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.app .vc .h i{width:7px;height:7px;border-radius:50%;display:inline-block}
.app .vc .n{font-size:22px;font-weight:800;font-family:'JetBrains Mono',monospace}

.app .rp-info .card-title{margin-bottom:4px}
.app .rp-info .kv{padding:8px 0}

.app .rp-body{display:grid;grid-template-columns:224px 1fr;gap:14px;align-items:start}
.app .rp-tabs{padding:8px;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow-y:auto}
.app .rtab{display:flex;align-items:center;gap:10px;padding:8.5px 12px;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-3);transition:background .12s,color .12s;width:100%;text-align:left}
.app .rtab:hover{background:rgba(255,255,255,.03);color:var(--text)}
.app .rtab.active{background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04));color:var(--text)}
.app .rtab svg{width:15px;height:15px;flex:0 0 15px;opacity:.8}
.app .rtab.active svg{color:var(--accent-2)}
.app .rtab .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .rtab .cnt{font-size:10px;font-weight:800;color:var(--text-4);font-family:'JetBrains Mono',monospace;background:rgba(255,255,255,.05);border-radius:999px;padding:1px 7px}
.app .rtab.active .cnt{background:rgba(var(--accent-rgb),.2);color:var(--accent-2)}
.app .rtab .cnt.hot{background:var(--bad-bg);color:var(--bad)}
.app .rtab-sep{height:1px;background:var(--line);margin:7px 6px}

.app .rp-list{padding:0;overflow:hidden}
.app .rp-list-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.app .rp-list-head .hicon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.25)}
.app .rp-list-head .hicon svg{width:15px;height:15px}
.app .rp-list-head .rlh-title{font-size:14px;font-weight:700}
.app .rp-list-head .rlh-count{font-size:11px;color:var(--text-4);margin-top:1px}
.app .rp-list-head .input{max-width:220px;margin-left:auto;padding:8px 12px;font-size:12.5px}
.app .rp-entries{max-height:64vh;overflow-y:auto}

.app .finding{display:flex;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.app .finding:last-child{border-bottom:0}
.app .finding .fic{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;border:1px solid}
.app .finding .fic.bad{background:rgba(251,77,92,.1);border-color:rgba(251,77,92,.3);color:var(--bad)}
.app .finding .fic.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:var(--warn)}
.app .finding .fic.info{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.25);color:var(--info)}
.app .finding .fbody{flex:1;min-width:0}
.app .finding .fsev{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.app .finding .fsev.bad{color:var(--bad)}
.app .finding .fsev.warn{color:var(--warn)}
.app .finding .fsev.info{color:var(--info)}
.app .finding .fdet{font-size:13px;color:var(--text);font-weight:600;line-height:1.5;word-break:break-word}
.app .finding .fdet .chip{display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:10.5px;background:rgba(251,77,92,.08);border:1px solid rgba(251,77,92,.25);color:#ff8f98;border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.app .finding .fpath{font-size:11px;color:var(--text-4);font-family:'JetBrains Mono',monospace;margin-top:3px;word-break:break-all}
.app .finding .fcat{font-size:9.5px;color:var(--text-4);text-transform:uppercase;letter-spacing:.07em;font-weight:800;margin-top:5px}
.app .finding .fok{flex:0 0 auto;color:var(--accent);opacity:.7;margin-top:4px}
.app .finding .fok svg{width:16px;height:16px}

/* Records */
.app .rec-chips{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.app .rec-chip{font-size:10px;font-weight:800;letter-spacing:.05em;padding:5px 11px;border-radius:8px;border:1px solid var(--line);color:var(--text-3);cursor:pointer;background:var(--surface-2)}
.app .rec-chip:hover{color:var(--text);border-color:var(--line-2)}
.app .rec-chip.on{background:var(--accent-bg);color:var(--accent-2);border-color:rgba(var(--accent-rgb),.35)}
.app .rec-row{display:flex;gap:12px;padding:9px 16px;border-bottom:1px solid var(--line-soft);align-items:center;font-size:12px}
.app .rec-row:last-child{border-bottom:0}
.app .rec-act{flex:0 0 128px;font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:3.5px 0;text-align:center;border-radius:7px;border:1px solid}
.app .rec-act.del{background:rgba(251,77,92,.08);border-color:rgba(251,77,92,.28);color:var(--bad)}
.app .rec-act.cre{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.28);color:var(--accent-2)}
.app .rec-act.ren{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.28);color:var(--info)}
.app .rec-act.exe{background:rgba(250,204,21,.07);border-color:rgba(250,204,21,.25);color:var(--gold)}
.app .rec-act.dfn{background:rgba(251,77,92,.12);border-color:rgba(251,77,92,.4);color:#ff7783}
.app .rec-act.oth{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--text-3)}
.app .rec-path{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text-2);word-break:break-all}
.app .rec-note{font-size:10px;color:var(--warn);font-family:'JetBrains Mono',monospace;white-space:nowrap}
.app .rec-ts{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-4);text-align:right}
.app .rec-pager{display:flex;align-items:center;gap:10px;padding:12px 16px;justify-content:flex-end;border-top:1px solid var(--line)}
.app .rec-pager .info{font-size:11px;color:var(--text-4);margin-right:auto;font-family:'JetBrains Mono',monospace}

/* Buy License */
.app .buy-plan{position:relative;transition:border-color .15s,transform .15s}
.app .buy-plan.popular{border-color:var(--line-2);box-shadow:0 0 0 1px var(--line-2)}
.app .buy-plan .amt-row{display:flex;align-items:baseline;gap:4px;margin:12px 0 4px}
.app .buy-plan .amt-row .cur{font-size:14px;color:var(--text-3);font-weight:600}
.app .buy-plan .amt-row .amt{font-size:32px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-.02em}
.app .buy-plan .amt-row .per{font-size:12px;color:var(--text-4);font-weight:600}
.app .buy-plan .pmeta{font-size:11.5px;color:var(--text-4);min-height:16px;margin-bottom:14px}

@media(max-width:1080px){
  .app .ov-grid{grid-template-columns:1fr}
  .app .rp-top{grid-template-columns:1fr}
}
@media(max-width:980px){
  .app.ready{grid-template-columns:1fr}
  .app .side{position:fixed;left:-100%;z-index:100;width:248px;transition:left .2s}
  .app .side.open{left:0}
  .app .grid.cols-3,.app .grid.cols-2{grid-template-columns:1fr}
  .app .stat-strip{grid-template-columns:repeat(2,1fr)}
  .app .ss-cell:nth-child(2n){border-right:0}
  .app .ss-cell:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .app .rp-body{grid-template-columns:1fr}
  .app .rp-tabs{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:4px}
  .app .rtab{width:auto}
  .app .rp-hero{flex-direction:column;text-align:center;gap:16px}
  .app .vcounts{justify-content:center}
  .app .menu-btn{display:grid!important}
  .app .rec-act{flex-basis:104px}
  .app .rec-ts{display:none}
}
.app .menu-btn{display:none;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:9px}

.app .pin-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:radial-gradient(700px 160px at 0% 0%,rgba(var(--accent-rgb),.10),transparent 62%),linear-gradient(180deg,var(--surface),rgba(10,13,12,.7))}
.app .pin-hero .ph-copy{flex:1;min-width:240px}
.app .pin-hero .ph-form{display:flex;gap:9px;align-items:center;flex:0 0 auto;min-width:320px}
.app .pin-hero .ph-form .input{min-width:220px}
@media(max-width:760px){ .app .pin-hero .ph-form{width:100%;min-width:0} .app .pin-hero .ph-form .input{flex:1;min-width:0} }

/* ════ TOOL DESIGNER ════ */
.app .dz-grid{display:grid;grid-template-columns:1fr 380px;gap:14px;align-items:start}
.app .dz-previews{display:grid;gap:12px;min-width:0}

/* True-to-size replica of the 520x394 scanner window (34px title bar + 360px client),
   scaled to fit its container. Mirrors Resources/ui.html so the preview is WYSIWYG. */
.app .sc-stage{position:relative;width:100%;aspect-ratio:520/394;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:#000}
.app .sc-frame{position:absolute;top:0;left:0;width:520px;height:394px;transform-origin:top left;overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;color:var(--d-text);background:var(--d-bg)}
.app .sc-frame *{box-sizing:border-box}
.app .sc-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:var(--d-bgop,.35);filter:blur(var(--d-bgblur,0px));display:none}
.app .sc-stars{position:absolute;inset:0;pointer-events:none;opacity:.5}
.app .sc-title{position:relative;z-index:3;height:34px;background:var(--d-titlebar);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 13px;gap:8px}
.app .sc-title .t{font-size:9.5px;font-weight:700;letter-spacing:.15em;color:var(--d-dim);opacity:.85}
.app .sc-title .btns{margin-left:auto;display:flex;gap:13px;color:var(--d-dim);font-size:11px;opacity:.7}
.app .sc-app{position:relative;z-index:2;height:360px;display:flex;flex-direction:column;padding:22px 26px 14px}
.app .sc-stack{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0}
.app .sc-logo{width:40px;height:40px;border-radius:11px;object-fit:cover;border:1px solid var(--d-primary-35)}
.app .sc-logo-fb{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:14px;font-weight:800;letter-spacing:.04em;background:var(--d-primary-12);border:1px solid var(--d-primary-35);color:var(--d-primary-soft)}
.app .sc-t{font-size:14px;font-weight:600;letter-spacing:-.01em;text-align:center}
.app .sc-hint{font-size:10.5px;color:var(--d-dim);text-align:center}
.app .sc-pins{display:flex;gap:8px}
.app .sc-pin{width:40px;height:46px;border-radius:10px;background:var(--d-surface-40);border:1px solid var(--d-dim-22);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--d-dim)}
.app .sc-pin.on{border-color:var(--d-primary);box-shadow:0 0 0 3px var(--d-primary-18)}
.app .sc-btn{margin-top:2px;padding:9px 22px;border-radius:9px;background:var(--d-primary);color:#04120a;font-size:11px;font-weight:800;letter-spacing:.1em}
.app .sc-spin{width:30px;height:30px;border-radius:50%;border:2px solid var(--d-dim-22);border-top-color:var(--d-primary)}
.app .sc-prog{width:260px;display:flex;flex-direction:column;gap:7px}
.app .sc-track{height:4px;border-radius:99px;background:var(--d-dim-16);overflow:hidden}
.app .sc-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--d-primary),var(--d-primary-soft))}
.app .sc-pmeta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--d-dim)}
.app .sc-pmeta .pct{color:var(--d-primary-soft);font-weight:700}
.app .sc-check{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--d-primary-12);border:1px solid var(--d-primary-35)}
.app .sc-check svg{width:16px;height:16px;stroke:var(--d-primary-soft);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app .sc-warn{font-size:9px;color:var(--d-dim);opacity:.65;text-align:center}

/* Stage thumbnails */
.app .dz-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.app .dz-thumb{position:relative;aspect-ratio:520/394;border-radius:11px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:#000;transition:border-color .15s,transform .15s}
.app .dz-thumb:hover{transform:translateY(-2px)}
.app .dz-thumb.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 20px var(--accent-bg)}
.app .dz-thumb .cap{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));z-index:5}
.app .dz-thumb .sc-stage{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto;height:100%}

/* Editor side */
.app .dz-side{display:grid;gap:12px;min-width:0}
.app .dz-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.app .dz-tab{padding:8px 6px;border-radius:9px;font-size:11.5px;font-weight:700;color:var(--text-3);display:flex;align-items:center;justify-content:center;gap:6px}
.app .dz-tab svg{width:13px;height:13px}
.app .dz-tab.on{background:var(--accent-bg);color:var(--accent-2)}
.app .dz-panel{display:none}
.app .dz-panel.on{display:block}
.app .dz-scroll{max-height:520px;overflow-y:auto;padding-right:4px}

.app .sw-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);margin-bottom:8px}
.app .sw-chip{width:34px;height:34px;flex:0 0 34px;border-radius:9px;border:1px solid var(--line);padding:0;overflow:hidden;cursor:pointer;background:none}
.app .sw-chip input{width:150%;height:150%;margin:-25%;padding:0;border:0;background:none;cursor:pointer}
.app .sw-meta{flex:1;min-width:0}
.app .sw-meta .n{display:block;font-size:12.5px;font-weight:700}
.app .sw-meta .d{display:block;font-size:10.5px;color:var(--text-4);margin-top:1px;line-height:1.35}
.app .sw-hex{width:88px;font-family:'JetBrains Mono',monospace;font-size:11.5px;text-transform:uppercase;padding:7px 9px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--text-2);outline:none}
.app .sw-hex:focus{border-color:var(--accent)}

.app .tx-group{margin-bottom:14px}
.app .tx-group .gh{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.app .tx-group .gh::after{content:"";flex:1;height:1px;background:var(--line)}
.app .tx-field{margin-bottom:8px}
.app .tx-field label{display:block;font-size:10.5px;font-weight:700;color:var(--text-4);margin-bottom:4px}
.app .tx-field input,.app .tx-field textarea{width:100%;padding:8px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;color:var(--text);font:inherit;font-size:12.5px;outline:none}
.app .tx-field input:focus,.app .tx-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.app .tx-field textarea{resize:vertical;min-height:56px;line-height:1.5}

.app .up-box{border:1px dashed var(--line-2);border-radius:12px;padding:14px;background:var(--surface-2);text-align:center;margin-bottom:10px}
.app .up-box .up-prev{width:100%;height:96px;border-radius:9px;object-fit:contain;background:var(--surface);border:1px solid var(--line);margin-bottom:10px;display:none}
.app .up-box .up-t{font-size:12.5px;font-weight:700;margin-bottom:3px}
.app .up-box .up-d{font-size:11px;color:var(--text-4);margin-bottom:10px;line-height:1.5}
.app .up-actions{display:flex;gap:7px;justify-content:center}

.app .rng-row{margin-bottom:14px}
.app .rng-row .rh{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;margin-bottom:7px}
.app .rng-row .rh span:last-child{color:var(--accent-2);font-family:'JetBrains Mono',monospace}
.app .rng-row input[type=range]{width:100%;accent-color:var(--accent)}

.app .dz-actions{display:flex;gap:7px;flex-wrap:wrap}
.app .dz-saved{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);margin-bottom:8px}
.app .dz-saved .n{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .dz-live{font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:999px;background:var(--ok-bg);color:var(--accent-2)}

@media(max-width:1080px){ .app .dz-grid{grid-template-columns:1fr} }

/* ════ PLAYER LOOKUP (Analytics) ════ */
.app .lk-top{display:grid;grid-template-columns:1fr 268px;gap:14px;align-items:start;margin-bottom:14px}
.app .lk-id{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(88,101,242,.28);border-radius:var(--r-lg);background:rgba(88,101,242,.07);margin-bottom:14px}
.app .lk-id img{width:60px;height:60px;border-radius:50%;object-fit:cover;background:#2b2d31;border:2px solid rgba(88,101,242,.38);flex-shrink:0}
.app .lk-id .nm{font-size:18px;font-weight:700;line-height:1.15;word-break:break-word}
.app .lk-id .un{color:#9bbcff;font-size:12.5px;margin-top:2px;font-family:'JetBrains Mono',monospace;word-break:break-all}
.app .lk-id .cr{color:#9bbcff;font-size:11.5px;margin-top:3px;opacity:.8}
.app .lk-facts{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px}
.app .lk-fact .l{font-size:10px;color:var(--text-4);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.app .lk-fact .v{font-weight:700;font-size:14px;margin-top:3px}
.app .lk-ids{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.app .lk-raw{font-size:11.5px;font-family:'JetBrains Mono',monospace;color:var(--text-4);line-height:1.7;word-break:break-all}
.app .lk-sect{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.app .lk-sect .h{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-4);font-weight:800;margin-bottom:10px}
.app .lk-guilds{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:9px}
.app .lk-guild{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid rgba(251,77,92,.34);border-radius:11px;background:rgba(251,77,92,.08);min-width:0}
.app .lk-guild img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.app .lk-guild .gn{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .lk-guild .gi{font-size:10.5px;color:var(--text-4);font-family:'JetBrains Mono',monospace}
.app .lk-rep{text-align:center;padding:6px 0 2px}
.app .lk-srv{display:flex;align-items:center;gap:9px;min-width:0}
.app .lk-srv img{width:26px;height:26px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--surface-2);border:1px solid var(--line)}
.app .lk-srv .gl{width:26px;height:26px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#5865F2,#3b4bcc);text-transform:uppercase}
.app .lk-srv .nm{color:var(--accent-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .lk-ev{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;color:var(--accent-2);border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;background:var(--accent-bg)}
.app .lk-ev-img{width:56px;height:36px;object-fit:cover;border-radius:5px;display:block}
.app .lk-alt{color:var(--accent-2);font-family:'JetBrains Mono',monospace;cursor:pointer}
.app .lk-alt:hover{text-decoration:underline}
/* Alt accounts card. Two kinds of link and the card must not blur them: sharing a Rockstar licence,
   a Steam account or a hardware token means the same machine or the same person, while sharing only
   an IP means they sat behind the same router -- which housemates, a shared flat and an entire
   internet cafe all do. The old card showed one undifferentiated number and buried the two real
   matches under thirty-nine strangers. */
.app .alt-intro{margin:0 0 14px;font-size:12px;line-height:1.55;color:var(--text-3)}
.app .alt-group+.alt-group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.app .alt-group-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app .alt-group-title{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.app .alt-group-title.is-identity{color:var(--accent-2)}
.app .alt-group-title.is-network{color:var(--text-3)}
.app .alt-group-count{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--text-3)}
.app .alt-group-title.is-identity+.alt-group-count{color:var(--accent-2);border-color:var(--accent-bg);background:var(--accent-bg)}
.app .alt-group-note{flex:1 1 100%;margin:5px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-3)}
.app .alt-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) auto;gap:14px;align-items:center;
  margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.014);transition:border-color .12s ease,background .12s ease}
.app .alt-row.is-clickable{cursor:pointer}
.app .alt-row.is-clickable:hover{border-color:var(--accent);background:var(--accent-bg)}
.app .alt-row.is-network{opacity:.7}
.app .alt-row.is-network:hover{opacity:1}
.app .alt-name{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .alt-key{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--accent-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .alt-key.is-fallback{color:var(--text-3)}
.app .alt-key-tag{display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.app .alt-seen{font-size:11px;color:var(--text-3);white-space:nowrap;text-align:right}
.app .alt-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.app .alt-chip{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;
  background:var(--accent-bg);color:var(--accent-2);border:1px solid var(--accent-bg)}
.app .alt-chip.is-net{background:rgba(255,255,255,.045);color:var(--text-3);border-color:var(--line)}
.app .alt-chip-share{background:rgba(255,255,255,.045);color:var(--text-3);border-color:var(--line);text-transform:none;letter-spacing:0}
.app .alt-chip-share.is-strong{background:var(--accent-bg);color:var(--accent-2);border-color:var(--accent-bg)}
.app .alt-hidden-note{margin-top:16px;padding:9px 12px;border:1px dashed var(--line);border-radius:8px;
  font-size:11.5px;line-height:1.5;color:var(--text-3)}
.app .alt-empty{margin:0;font-size:12px;color:var(--text-3)}
@media (max-width:640px){
  .app .alt-row{grid-template-columns:1fr;gap:6px}
  .app .alt-seen{text-align:left}
}
.app .lk-nx{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.app .lk-nx-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;width:92px;height:92px;border-radius:18px;flex-shrink:0}
.app .lk-nx-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.07)}
.app .lk-nx-legend{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
/* ── Ocean Anti-Cheat partner card + its detail popup ────────────────────────
   The card in the lookup is a summary; everything long opens in .oc-dialog, built in JS the way
   viewScannerScreenshot() does it (this page has no modal stylesheet of its own). Numerals use the
   page's mono face, same as .ss-value and .donut-center .n. */
.app .oc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.app .oc-head .card-title{flex:1;min-width:0}
.app .oc-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;flex-shrink:0}
.app .oc-hero-n{font-size:29px;font-weight:800;line-height:1;font-family:'JetBrains Mono',monospace;letter-spacing:-.03em}
.app .oc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.app .oc-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;min-width:0}
.app .oc-stat-n{font-size:19px;font-weight:800;font-family:'JetBrains Mono',monospace;line-height:1.1;letter-spacing:-.02em}
.app .oc-stat-l{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);font-weight:800;margin-top:4px}
.app .oc-overlay{position:fixed;inset:0;background:rgba(2,4,4,.74);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.app .oc-dialog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);width:100%;max-width:680px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.app .oc-dialog-head{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.app .oc-dialog-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.app .oc-dialog-sub{font-size:11.5px;color:var(--text-4);font-family:'JetBrains Mono',monospace;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .oc-dialog-body{padding:14px 18px 18px;overflow-y:auto}
.app .oc-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.app .oc-sec .card-eyebrow{margin-bottom:9px}
.app .oc-chips{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:560px){ .app .oc-stats{grid-template-columns:repeat(2,1fr)} .app .oc-overlay{padding:12px} }
@media(max-width:1080px){ .app .lk-top{grid-template-columns:1fr} }
/* ── Motion ──────────────────────────────────────────────────────────────────
   The panel read as a screenshot: nothing moved except one spinner. What
   follows animates the four moments that have real state behind them — a page
   opening, a PIN being generated, numbers landing, and a scan that has not
   reported back yet. Everything is transform/opacity only, so it stays on the
   compositor and never triggers layout, and the whole block is switched off
   under prefers-reduced-motion further down. */

/* Blocks rise in sequence when a page opens, so the eye lands top-first
   instead of on a wall that appears all at once. Overlays are excluded: they
   are positioned and must not be nudged. */
.app .page.active > *:not(.modal-overlay):not(.drawer){animation:riseIn .44s cubic-bezier(.22,.72,.28,1) backwards}
.app .page.active > *:nth-child(1){animation-delay:.02s}
.app .page.active > *:nth-child(2){animation-delay:.07s}
.app .page.active > *:nth-child(3){animation-delay:.12s}
.app .page.active > *:nth-child(4){animation-delay:.17s}
.app .page.active > *:nth-child(5){animation-delay:.22s}
.app .page.active > *:nth-child(n+6){animation-delay:.26s}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* The PIN card is where the user waits, so it is the one surface that stays
   alive: a slow radar sweep behind the code, reading as "listening for the
   scan". Low opacity on purpose — it must not compete with the digits. */
.app .pin-reveal{position:relative;overflow:hidden}
.app .pin-reveal::before{content:"";position:absolute;inset:-60% -20%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent-bg) 26deg,transparent 60deg);
  animation:radar 7s linear infinite;opacity:.32}
.app .pin-reveal > *{position:relative;z-index:1}
@keyframes radar{to{transform:rotate(360deg)}}

/* A freshly generated code flashes its border and glow once. */
.app .pin-reveal.is-fresh{animation:pinFlash 1s ease-out}
@keyframes pinFlash{
  0%{border-color:var(--accent);box-shadow:0 0 0 0 var(--accent-glow)}
  60%{border-color:var(--accent);box-shadow:0 0 34px 2px var(--accent-glow)}
  100%{border-color:var(--line-2);box-shadow:none}}

/* Each digit spins through random numbers and locks in, left to right. The
   fixed width stops the row from jittering while the values change. */
.app .pin-reveal .code .pin-d{display:inline-block;min-width:.62em;text-align:center}
.app .pin-reveal .code .pin-d.lock{animation:digitLock .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes digitLock{0%{transform:translateY(-6px) scale(1.18);opacity:.45}100%{transform:none;opacity:1}}

/* A scan with no result yet is genuinely in progress, so its badge shows it:
   a breathing dot plus a sweep that fills left to right and repeats. */
.app .badge-scan{position:relative;overflow:hidden}
.app .badge-scan .sdot{width:6px;height:6px;border-radius:50%;background:currentColor;
  display:inline-block;margin-right:6px;animation:sdot 1.3s ease-in-out infinite}
@keyframes sdot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.app .badge-scan::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transform:translateX(-100%);animation:sweep 1.9s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Indeterminate fill bar, used under a pending scan: it is honest about not
   knowing the percentage — the bar travels rather than claiming progress. */
.app .fillbar{height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden;position:relative}
.app .fillbar > i{position:absolute;inset:0;display:block;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:translateX(-100%);animation:fill 1.6s ease-in-out infinite}
@keyframes fill{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Buttons and rows lift slightly on hover so the page answers the cursor. */
.app .btn:hover{transform:translateY(-1px)}
.app .btn:active{transform:translateY(0)}
.app .ss-cell{transition:transform .18s cubic-bezier(.22,.72,.28,1)}
.app .ss-cell:hover{transform:translateY(-2px)}

/* Copy buttons confirm in place instead of only firing a toast. */
.app .btn.copied{background:var(--accent-bg)!important;border-color:var(--line-2)!important;color:var(--accent-2)!important}

@media (prefers-reduced-motion:reduce){
  .app .page.active > *,.app .pin-reveal.is-fresh,.app .pin-reveal .code .pin-d.lock,.app .badge-scan .sdot,.app .badge-scan::after,.app .fillbar > i,.app .pin-reveal::before{animation:none!important}
  .app .pin-reveal::before{opacity:0}
  .app .btn:hover,.app .ss-cell:hover{transform:none}
}
/* ── TEMA SECICI ── */
.app .th-wrap{position:relative}
.app .th-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);color:var(--text-3);background:var(--surface)}
.app .th-btn:hover{color:var(--text);border-color:var(--line-2)}
.app .th-btn svg{width:15px;height:15px}
.app .th-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:196px;padding:6px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:2px;
}
.app .th-menu[hidden]{display:none}
.app .th-head{padding:6px 9px 4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);font-weight:800}
.app .th-row{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:9px;color:var(--text-2);font-size:12.5px;font-weight:600;text-align:left}
.app .th-row:hover{background:rgba(255,255,255,.06);color:var(--text)}
.app .th-row .sw{width:16px;height:16px;border-radius:5px;border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 16px}
.app .th-row .sw i{width:7px;height:7px;border-radius:50%;display:block}
.app .th-row .tick{margin-left:auto;opacity:0;font-size:12px;color:var(--accent)}
.app .th-row.on .tick{opacity:1}
.app .th-row.on{color:var(--text)}


.app.ready{background:#000;color:#fff;min-height:100vh}
.app .side button.nav{display:flex;align-items:center;gap:11px;padding:8.5px 12px;margin:1px 0;color:var(--text-3);font-size:13px;font-weight:500;border-radius:10px;background:none;border:0;box-shadow:none;width:100%;text-align:left}
.app .side button.nav:hover{color:var(--text);background:rgba(255,255,255,.035);transform:none}
.app .side button.nav.on,.app .side button.nav.active{color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05));font-weight:600;box-shadow:none}
.app .btn.white,.app .btn-primary{background:#fff;color:#000;border:0;box-shadow:0 0 24px rgba(255,255,255,.12);border-radius:12px}
.app .btn.white:hover,.app .btn-primary:hover{background:#fff;color:#000;filter:none;transform:translateY(-1px)}
.app .btn.ghost{background:transparent;color:#c9c9c9;border:1px solid rgba(255,255,255,.1)}
.app .card,.app .cell,.app .preview,.app .coverage-box{background:linear-gradient(180deg,#0a0a0a,#050505);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.app input,.app select,.app textarea{background:#111;border-color:rgba(255,255,255,.1);color:#fff}
.app .topbar{background:rgba(0,0,0,.82)}
.app table.tbl th{background:#111}
.app #pin-hero{display:block;position:relative;overflow:hidden}
.app #pin-form{margin-top:14px}
.app #pin-form .input{width:auto;flex:1 1 180px}
.app .head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.app .head h1{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0}
.app .head p,.app .muted{color:#949494}
.app .kicker,.app .eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#e6e6e6;font-weight:800;margin-bottom:7px}
.app .price{font-size:32px;font-weight:800;letter-spacing:-.03em;margin:8px 0}
.app .plan.featured{border-color:rgba(255,255,255,.28)}
.app .empty{color:#949494;padding:18px 4px}
.app .pin{font-family:ui-monospace,monospace;font-size:22px;font-weight:800;letter-spacing:.06em;margin-top:12px}
.app .linkline{color:#c9c9c9;word-break:break-all}
.app .side nav{display:block}
.app .nav-label{display:block}
.app .avatar{display:grid;place-items:center;background:#fff;color:#000;font-weight:800;font-size:13px}
.app .brand-mark{color:#fff;font-weight:800}
.app .status-pill.offline .dot{background:#ff4d4d;box-shadow:0 0 0 3px rgba(255,77,77,.13)}
.app .main{background:#000}
.app .content::before{display:none}
.app .stack input,.app .stack select,.app .stack textarea,.app .field input,.app .field select,.app .field textarea,.app .scan-toolbar input,.app .scan-toolbar select,.app .form input,.app .form select{padding:10.5px 13px;background:#111;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff}
.app table.tbl td,.app table.tbl th{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.06);color:#e8e8e8}
.app .side > .nav-section{flex:0 0 auto}
.app .side > .nav-section + .nav-section{flex:1 1 auto}
.app .chart-head .spacer{flex:1}
.app .nav-item .tag.tag-req{background:rgba(255,77,77,.13);color:#ff4d4d;border-color:rgba(255,77,77,.35)}
.app .sc-frame{--d-bg:#000;--d-text:#fff;--d-dim:#a3a3a3;--d-titlebar:#000;--d-primary:#fff;--d-primary-soft:#e6e6e6;--d-primary-35:rgba(255,255,255,.35);--d-primary-18:rgba(255,255,255,.18);--d-primary-12:rgba(255,255,255,.12);--d-surface-40:rgba(17,17,17,.72);--d-dim-22:rgba(163,163,163,.22);--d-dim-16:rgba(163,163,163,.16)}
.app .sc-pin{font-style:normal}
.app .sc-stars{background-image:radial-gradient(1px 1px at 18% 32%, rgba(255,255,255,.45), transparent),radial-gradient(1px 1px at 72% 22%, rgba(255,255,255,.28), transparent),radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.2), transparent),radial-gradient(1px 1px at 84% 64%, rgba(255,255,255,.32), transparent)}
.app .design-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.app .design-actions{display:flex;gap:8px;flex-wrap:wrap}
.app .dz-pane{display:none}
.app .dz-pane.on{display:block}
.app .color-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.app .color-row input[type=color]{width:28px;height:28px;padding:0;border:0;background:transparent;flex:0 0 28px}
.app .color-row input[type=text]{width:92px;flex:0 0 92px;font-family:ui-monospace,monospace;font-size:12px}
.app .color-row .meta{flex:1;min-width:0}
.app .color-row .meta b{display:block;font-size:13px}
.app .color-row .meta span{display:block;color:#949494;font-size:11px}
.app #design-saved{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.app .dz-thumb{background:#0b0a09;padding:0;color:inherit;font:inherit;text-align:left;width:100%}
.app .brand-mark{background:transparent;border:0;box-shadow:none;padding:0;overflow:hidden}
.app .brand-mark img{width:34px;height:34px;display:block;object-fit:cover}
.app .sc-logo-fb{background:transparent;border:0;padding:0;overflow:hidden}
.app .sc-logo-fb img{width:40px;height:40px;display:block;border-radius:11px;object-fit:cover}
.app .sw-chip input[type=color]{width:150%;height:150%;margin:-25%;padding:0;border:0;background:none}
.app .sw-hex{width:88px;flex:0 0 88px}
.app .dz-side .tx-field input,.app .dz-side .tx-field textarea{width:100%}
.app .dz-tabs{margin-bottom:12px}
