/* ============================================================================ ARGUS — Elytra Application Design Foundation (redesign prototype) Maps the Elytra Security brand (onyx · copper · parchment) onto a dense, data-rich on-prem security console. Light is default; dark via . Class names are prototype-local; the production port maps these onto the existing .argus-* / .ac-* class names. ============================================================================ */ :root { /* ---- Brand source palette (Elytra Security) ---- */ --onyx:#0E1116; --graphite:#1A1F27; --slate:#2A313D; --steel:#5A6373; --mist:#B8BFCB; --parchment:#F4EFE6; --bone:#E8E1D3; --ink:#11151B; --copper:#C97B3F; --copper-bright:#E0954F; --copper-deep:#8E5224; --amber:#D9A86C; --trust:#4A7B8C; /* ---- Type ---- */ --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --serif:'Source Serif 4',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; /* ---- Shape ---- */ --radius:2px; --radius-lg:4px; --radius-pill:100px; /* ============ SEMANTIC TOKENS — LIGHT (default) ============ */ --app-bg:#F3F1EB; --surface:#FFFFFF; --surface-2:#FBF9F4; --surface-sunken:#EEEAE0; --border:#E2DCCF; --border-strong:#CBC3B2; --divider:#ECE7DC; --text:#1B1F26; --text-2:#5A6373; --text-3:#8C8576; --text-inv:#F4EFE6; --accent:#BC6F36; --accent-hover:#A85E29; --accent-soft:#F6EADE; --accent-text:#8E5224; --info:#3C6E80; --info-soft:#E4EDF0; --nav-bg:#FFFFFF; --nav-text:#3A414E; --nav-text-active:#8E5224; --nav-active-bg:#F6EADE; --footer-bg:#11151B; --footer-text:#B8BFCB; --shadow-sm:0 1px 2px rgba(17,21,27,0.04); --shadow:0 1px 3px rgba(17,21,27,0.06),0 1px 2px rgba(17,21,27,0.04); --shadow-pop:0 8px 28px rgba(17,21,27,0.14); /* risk / band semantic chips */ --risk-crit-bg:#F3D9D4; --risk-crit-tx:#7A2417; --risk-crit-line:#C7493A; --risk-high-bg:#F9E0D0; --risk-high-tx:#8A3D17; --risk-high-line:#C2410C; --risk-med-bg:#F6EACF; --risk-med-tx:#7A571A; --risk-med-line:#D9A24A; --risk-low-bg:#E2EAD7; --risk-low-tx:#45602F; --risk-low-line:#6E8C5A; --ok-bg:#DCEBDD; --ok-tx:#2E5B36; --ok-line:#3F8A4E; --neutral-bg:#ECE7DC; --neutral-tx:#5A6373; --neutral-line:#9A917F; --trust-bg:#E4EDF0; --trust-tx:#2C5563; --trust-line:#4A7B8C; } html[data-theme="dark"] { --app-bg:#0E1116; --surface:#161B22; --surface-2:#1A1F27; --surface-sunken:#0B0E12; --border:#272E39; --border-strong:#36404E; --divider:#232A34; --text:#ECE7DC; --text-2:#9AA3B2; --text-3:#6B7484; --text-inv:#11151B; --accent:#E0954F; --accent-hover:#EDA864; --accent-soft:#2A2118; --accent-text:#E0954F; --info:#6FA3B5; --info-soft:#16242A; --nav-bg:#14181F; --nav-text:#B8BFCB; --nav-text-active:#E0954F; --nav-active-bg:#211A12; --footer-bg:#0A0D11; --footer-text:#8C95A4; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow:0 1px 3px rgba(0,0,0,0.5); --shadow-pop:0 10px 34px rgba(0,0,0,0.6); --risk-crit-bg:#33150F; --risk-crit-tx:#F0A99C; --risk-crit-line:#C7493A; --risk-high-bg:#2E1B10; --risk-high-tx:#ECA678; --risk-high-line:#D98A5A; --risk-med-bg:#2A2310; --risk-med-tx:#E0C27A; --risk-med-line:#D9A24A; --risk-low-bg:#18230F; --risk-low-tx:#A6C488; --risk-low-line:#6E8C5A; --ok-bg:#10251A; --ok-tx:#86D6A0; --ok-line:#3F8A4E; --neutral-bg:#1E242E; --neutral-tx:#9AA3B2; --neutral-line:#3A4350; --trust-bg:#13242B; --trust-tx:#8FC0CF; --trust-line:#4A7B8C; } * { box-sizing:border-box; } html, body { margin:0; padding:0; } body { background:var(--app-bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } a { color:inherit; } /* ============================================================================ APP FRAME — fixed sidebar + scrolling content ============================================================================ */ .app { display:flex; min-height:100vh; } /* ---- Sidebar ---- */ .sb { width:var(--sb-w,232px); flex-shrink:0; background:var(--nav-bg); border-right:1px solid var(--border); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; z-index:40; transition:width .18s ease; } .sb__head { display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--border); min-height:64px; } .sb__mark { flex-shrink:0; } .sb__brand { display:flex; flex-direction:column; line-height:1.05; min-width:0; } .sb__name { font-weight:700; font-size:1.02rem; letter-spacing:-0.01em; color:var(--text); } .sb__ver { font-family:var(--mono); font-size:10px; color:var(--text-3); letter-spacing:0.04em; margin-top:3px; } .sb__nav { flex:1; overflow-y:auto; padding:10px 0 14px; scrollbar-width:thin; } .sb__nav::-webkit-scrollbar { width:6px; } .sb__nav::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; } .sb__label { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); padding:14px 20px 6px; } .sb__item { display:flex; align-items:center; gap:11px; padding:8px 18px; margin:1px 10px; font-size:13.5px; font-weight:500; color:var(--nav-text); text-decoration:none; border-radius:var(--radius); white-space:nowrap; position:relative; cursor:pointer; transition:background .13s, color .13s; } .sb__item:hover { background:var(--surface-2); color:var(--text); } html[data-theme="dark"] .sb__item:hover { background:rgba(255,255,255,0.04); } .sb__item.active { background:var(--nav-active-bg); color:var(--nav-text-active); font-weight:600; } .sb__item.active::before { content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:2px; background:var(--accent); border-radius:2px; } .sb__ico { width:17px; height:17px; flex-shrink:0; stroke-width:1.6; opacity:.9; } .sb__item.active .sb__ico { opacity:1; } .sb__txt { flex:1; overflow:hidden; text-overflow:ellipsis; } .sb__dot { width:7px; height:7px; border-radius:50%; background:var(--risk-crit-line); flex-shrink:0; } .sb__count { font-family:var(--mono); font-size:10.5px; color:var(--text-3); } .sb__foot { padding:12px 14px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; } /* icon-rail variant */ .sb.rail { --sb-w:64px; } .sb.rail .sb__brand, .sb.rail .sb__txt, .sb.rail .sb__label, .sb.rail .sb__count, .sb.rail .sb__ver, .sb.rail .btn__txt { display:none; } .sb.rail .sb__item { justify-content:center; margin:1px 8px; padding:9px 0; } .sb.rail .sb__head { justify-content:center; padding:18px 0 16px; } .sb.rail .sb__foot { align-items:center; } .sb.rail .sb__item .sb__dot { position:absolute; top:5px; right:10px; } /* ---- Content column ---- */ .content { flex:1; min-width:0; display:flex; flex-direction:column; } /* ---- Topbar ---- */ .topbar { display:flex; align-items:center; gap:18px; padding:0 28px; min-height:58px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; } .topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--copper) 0%,var(--amber) 32%,transparent 64%); } .topbar__scan { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-2); } .topbar__status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .dot-idle { background:var(--ok-line); } .dot-run { background:var(--copper); box-shadow:0 0 0 0 var(--copper); animation:pulse 1.6s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(201,123,63,.5);} 70%{box-shadow:0 0 0 6px rgba(201,123,63,0);} 100%{box-shadow:0 0 0 0 rgba(201,123,63,0);} } .topbar__live { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:0.08em; color:var(--ok-tx); cursor:pointer; } .topbar__live .ld { width:7px; height:7px; border-radius:50%; background:var(--ok-line); } .topbar__spacer { flex:1; } .topbar__meta { font-family:var(--mono); font-size:11px; color:var(--text-3); text-align:right; line-height:1.5; } .topbar__meta b { color:var(--text-2); font-weight:600; } /* ---- Main scroll region ---- */ .main { padding:30px 30px 48px; max-width:1500px; width:100%; margin:0 auto; } @media (max-width:1100px){ .main{ padding:24px 18px 40px; } } /* ---- Footer ---- */ .foot { margin-top:auto; background:var(--footer-bg); color:var(--footer-text); border-top:2px solid var(--copper-deep); padding:18px 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; letter-spacing:0.02em; } .foot .mono { font-family:var(--mono); } /* ============================================================================ TYPE & PRIMITIVES ============================================================================ */ .eyebrow { font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-text); } .page-h { font-family:var(--sans); font-weight:600; font-size:1.7rem; letter-spacing:-0.015em; color:var(--text); line-height:1.05; margin:6px 0 0; } .page-sub { color:var(--text-2); font-size:0.92rem; margin-top:7px; max-width:62ch; } .section-label { font-size:11px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--text-3); margin:0 0 13px; } .muted { color:var(--text-2); } .muted-3 { color:var(--text-3); } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; } .rule { width:56px; height:2px; background:var(--copper); border:none; margin:0; } .serif { font-family:var(--serif); } .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--border); } .page-head__meta { text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--text-3); line-height:1.7; white-space:nowrap; } .page-head__meta b { color:var(--text); font-weight:600; } /* ---- Cards / panels ---- */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); } .card--pad { padding:22px 24px; } .panel-h { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .panel-h h2 { font-family:var(--sans); font-weight:600; font-size:1.02rem; letter-spacing:0.01em; color:var(--text); margin:0; display:flex; align-items:baseline; gap:9px; } .panel-h h2 .c { font-family:var(--mono); font-size:0.78rem; color:var(--accent-text); font-weight:600; } .link { color:var(--accent-text); text-decoration:none; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; } .link:hover { text-decoration:underline; } /* ---- Buttons ---- */ .btn { font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:0.02em; border-radius:var(--radius); cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); padding:8px 15px; transition:all .14s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; } .btn:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); } .btn--primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; } .btn--sm { font-size:11.5px; padding:5px 11px; } .btn--block { width:100%; } .btn__ico { width:15px; height:15px; stroke-width:1.7; } .btn--ghost { background:transparent; border-color:var(--border); color:var(--text-2); } .btn--ghost:hover { border-color:var(--accent); color:var(--accent-text); background:transparent; } /* ---- Badges / pills ---- */ .badge { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:0.05em; padding:3px 8px; border-radius:var(--radius-pill); text-transform:uppercase; border:1px solid transparent; white-space:nowrap; background:var(--neutral-bg); color:var(--neutral-tx); } .badge--mono { font-family:var(--mono); letter-spacing:0; text-transform:none; } .b-crit { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .b-high { background:var(--risk-high-bg); color:var(--risk-high-tx); } .b-med { background:var(--risk-med-bg); color:var(--risk-med-tx); } .b-low { background:var(--risk-low-bg); color:var(--risk-low-tx); } .b-ok { background:var(--ok-bg); color:var(--ok-tx); } .b-info { background:var(--trust-bg); color:var(--trust-tx); } .b-accent { background:var(--accent-soft); color:var(--accent-text); } .b-kev { background:var(--risk-crit-bg); color:var(--risk-crit-tx); border-color:var(--risk-crit-line); } /* ---- Tables ---- */ .tbl-wrap { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); } .tbl { width:100%; border-collapse:collapse; font-size:12.5px; } .tbl thead th { text-align:left; font-weight:700; font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-2); padding:10px 14px; border-bottom:1px solid var(--border-strong); background:var(--surface-2); white-space:nowrap; } .tbl tbody td { padding:11px 14px; border-bottom:1px solid var(--divider); color:var(--text); vertical-align:middle; } .tbl tbody tr:last-child td { border-bottom:none; } .tbl tbody tr.clk { cursor:pointer; } .tbl tbody tr.clk:hover { background:var(--surface-2); } .tbl .num { font-family:var(--mono); font-variant-numeric:tabular-nums; } .tbl .kev-row td { background:var(--risk-crit-bg); } .tbl .kev-row td:first-child { box-shadow:inset 3px 0 0 0 var(--risk-crit-line); } /* ============================================================================ STAT STRIP (hairline-joined cards, copper tick) ============================================================================ */ .stats { display:grid; grid-template-columns:repeat(var(--cols,5),minmax(0,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .stat { background:var(--surface); padding:17px 18px; position:relative; } .stat::before { content:""; position:absolute; top:0; left:0; width:26px; height:2px; background:var(--copper); } .stat__l { color:var(--text-2); font-size:10px; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; margin-bottom:11px; display:flex; align-items:center; gap:6px; } .stat__v { color:var(--text); font-size:1.95rem; font-weight:600; line-height:1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; } .stat__v.warn { color:var(--risk-high-line); } .stat__v.danger { color:var(--risk-crit-line); } .stat__v.ok { color:var(--ok-line); } .stat__s { color:var(--text-3); font-size:11px; margin-top:8px; font-family:var(--mono); } /* ============================================================================ TABS ============================================================================ */ .tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:18px 0 22px; } .tab { background:none; border:none; padding:11px 18px; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--text-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; letter-spacing:0.01em; display:inline-flex; align-items:center; gap:8px; } .tab:hover { color:var(--text); } .tab.active { color:var(--accent-text); border-bottom-color:var(--accent); } .tab__badge { background:var(--risk-crit-line); color:#fff; border-radius:var(--radius-pill); padding:1px 7px; font-size:10px; font-weight:700; } .tab__badge.warn { background:var(--risk-med-line); color:#3a2a08; } /* ============================================================================ DATA-VIZ ============================================================================ */ .viz-row { display:grid; grid-template-columns:1.05fr 1.35fr; gap:18px; align-items:stretch; margin-bottom:24px; } @media (max-width:1080px){ .viz-row{ grid-template-columns:1fr; } } /* Recon Resistance gauge card */ .rrs { display:flex; flex-direction:column; } .rrs__top { display:flex; gap:22px; align-items:center; } .gauge { position:relative; width:184px; height:184px; flex-shrink:0; } .gauge svg { width:100%; height:100%; transform:rotate(-90deg); } .gauge__c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .gauge__num { font-size:3.2rem; font-weight:700; line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; } .gauge__band { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-top:4px; } .gauge__cap { font-size:10px; color:var(--text-3); letter-spacing:0.08em; text-transform:uppercase; margin-top:7px; } .trend { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); letter-spacing:0.02em; } .trend.up { background:var(--ok-bg); color:var(--ok-tx); } .trend.down { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .rrs__bars { flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; } .bar__h { display:flex; justify-content:space-between; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-2); font-weight:700; margin-bottom:5px; } .bar__h .v { font-family:var(--mono); color:var(--text-3); letter-spacing:0; } .bar { height:7px; background:var(--surface-sunken); border-radius:var(--radius-pill); overflow:hidden; } .bar > span { display:block; height:100%; border-radius:var(--radius-pill); } .factors { margin-top:16px; padding-top:15px; border-top:1px solid var(--divider); } .factor { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:12.5px; padding:5px 0; } .factor .pen { font-family:var(--mono); font-weight:700; color:var(--risk-crit-line); } .factor .add { font-family:var(--mono); font-weight:700; color:var(--ok-line); } /* radar */ .radar-card { display:flex; align-items:center; gap:20px; } .radar { flex-shrink:0; } .radar-legend { display:flex; flex-direction:column; gap:9px; font-size:12px; } .radar-legend .row { display:grid; grid-template-columns:14px 1fr auto; gap:9px; align-items:center; } .radar-legend .sw { width:11px; height:11px; border-radius:2px; } .radar-legend .vv { font-family:var(--mono); color:var(--text-2); } /* Attacker next steps */ .ans { display:flex; flex-direction:column; gap:11px; } .ans__card { border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); padding:13px 15px; } .ans__card.hi { border-left-color:var(--risk-crit-line); } .ans__card.mid { border-left-color:var(--risk-med-line); } .ans__top { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; margin-bottom:8px; } .ans__n { width:22px; height:22px; border-radius:50%; border:1px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text-2); } .ans__title { font-weight:600; font-size:13.5px; color:var(--text); } .ans__conf { font-family:var(--mono); font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-pill); } .ans__path { font-size:12px; color:var(--text-2); margin-bottom:5px; } .ans__path .tgt { color:var(--text); font-weight:600; } .ans__path .arr { color:var(--text-3); margin:0 6px; } .ans__impact { font-size:12.5px; color:var(--text-2); line-height:1.5; margin-bottom:9px; } .ans__meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .chip { font-family:var(--mono); font-size:10.5px; padding:2px 8px; border-radius:var(--radius); background:var(--surface-sunken); color:var(--text-2); border:1px solid var(--border); } .chip--block { background:var(--ok-bg); color:var(--ok-tx); border-color:transparent; text-decoration:none; } .chip--block:hover { filter:brightness(.97); } /* ============================================================================ ACTION CENTER ============================================================================ */ .ac-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; } .ac-card { text-decoration:none; display:block; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border-strong); border-radius:var(--radius-lg); padding:14px 16px; transition:all .14s; cursor:pointer; } .ac-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); } .ac-card.sel { background:var(--accent-soft); } .ac-card__l { color:var(--text-2); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; margin-bottom:8px; } .ac-card__v { color:var(--text); font-size:1.55rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; } .c-open { border-left-color:var(--trust-line); } .c-recur { border-left-color:var(--risk-med-line); } .c-prog { border-left-color:var(--info); } .c-recheck { border-left-color:#9A6DC0; } .c-vfail { border-left-color:var(--risk-crit-line); } .c-valid { border-left-color:var(--ok-line); } .c-hosts { border-left-color:var(--steel); } .filterbar { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px; margin-bottom:18px; } .filterbar label { color:var(--text-2); font-size:11px; font-weight:600; letter-spacing:0.03em; display:flex; flex-direction:column; gap:5px; text-transform:uppercase; } .sel { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius); padding:7px 9px; min-width:140px; font-family:var(--sans); font-size:13px; } .sel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .queue-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text-2); font-size:12px; } .q-row.sel td:first-child { box-shadow:inset 3px 0 0 0 var(--accent); } .prio { display:inline-block; padding:2px 9px; border-radius:var(--radius-pill); font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; } .prio-critical { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .prio-high { background:var(--risk-high-bg); color:var(--risk-high-tx); } .prio-medium { background:var(--risk-med-bg); color:var(--risk-med-tx); } .prio-low { background:var(--trust-bg); color:var(--trust-tx); } .state { display:inline-block; padding:2px 8px; border-radius:var(--radius); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; font-weight:600; background:var(--neutral-bg); color:var(--neutral-tx); } .st-open { background:var(--trust-bg); color:var(--trust-tx); } .st-in_progress { background:var(--info-soft); color:var(--info); } .st-recheck_pending { background:#EADCF3; color:#6B3E8F; } html[data-theme="dark"] .st-recheck_pending { background:#241830; color:#C79BE0; } .st-validation_failed { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .st-validated_closed { background:var(--ok-bg); color:var(--ok-tx); } .st-accepted_risk { background:var(--neutral-bg); color:var(--neutral-tx); } .st-false_positive { background:var(--neutral-bg); color:var(--text-3); } .recur-badge { background:var(--risk-med-bg); color:var(--risk-med-tx); padding:1px 7px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:700; font-family:var(--mono); } /* Fix pack detail panel */ .fp { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); margin-top:18px; box-shadow:var(--shadow-sm); } .fp__placeholder { padding:54px 24px; text-align:center; color:var(--text-3); } .fp__head { padding:20px 22px 16px; border-bottom:1px solid var(--border); } .fp__hl { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:9px; } .fp__id { font-family:var(--mono); font-size:12px; background:var(--surface-sunken); color:var(--text); padding:3px 9px; border-radius:var(--radius); } .fp__afs { font-family:var(--mono); background:var(--accent-soft); color:var(--accent-text); padding:3px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:700; } .fp__title { font-size:1.2rem; font-weight:600; color:var(--text); margin:0 0 8px; } .fp__meta { display:flex; flex-wrap:wrap; gap:7px 16px; color:var(--text-2); font-size:12.5px; } .fp__meta b { color:var(--text); font-weight:600; } .fp__banner { margin-top:13px; background:var(--risk-med-bg); color:var(--risk-med-tx); border:1px solid var(--risk-med-line); border-radius:var(--radius); padding:9px 12px; font-size:12.5px; } .fp__tabs { display:flex; gap:3px; border-bottom:1px solid var(--border); padding:0 18px; } .fp__tab { background:none; border:none; padding:11px 14px; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--text-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; } .fp__tab:hover { color:var(--text); } .fp__tab.active { color:var(--accent-text); border-bottom-color:var(--accent); } .fp__body { padding:20px 22px 24px; } .fp__sec { margin-bottom:20px; } .fp__sec-t { color:var(--text-3); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; margin:0 0 9px; } .fp__prose { color:var(--text); line-height:1.6; font-size:13.5px; } .fp__prose p { margin:0 0 10px; } .fp__bullets { color:var(--text); padding-left:20px; line-height:1.65; font-size:13px; margin:0; } .itsm { background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:14px; } .itsm pre { background:var(--surface); border:1px solid var(--border); color:var(--text); padding:12px 13px; border-radius:var(--radius); white-space:pre-wrap; font-family:var(--mono); font-size:11.5px; line-height:1.55; margin:0; overflow:auto; } /* enrichment two-col */ .fp__grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; } @media (max-width:880px){ .fp__grid{ grid-template-columns:1fr; } } .dl { display:grid; grid-template-columns:160px 1fr; gap:7px 14px; font-size:13px; margin:0; } .dl dt { color:var(--text-2); } .dl dd { color:var(--text); margin:0; font-family:var(--mono); font-size:12px; } .score-row { display:grid; grid-template-columns:150px 1fr 42px; align-items:center; gap:11px; margin-bottom:9px; } .score-row .lbl { font-size:12.5px; color:var(--text-2); } .score-row .v { font-family:var(--mono); font-size:12.5px; text-align:right; font-weight:600; } /* evidence ledger */ .ev { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); padding:11px 13px; margin-bottom:9px; } .ev__h { display:flex; gap:9px; align-items:center; font-size:11px; color:var(--text-2); font-family:var(--mono); flex-wrap:wrap; } .ev__hash { color:var(--accent-text); } .ev__s { color:var(--text); font-size:12.5px; margin-top:6px; line-height:1.5; } /* history */ .hist { width:100%; border-collapse:collapse; font-size:12px; } .hist th { text-align:left; padding:7px 10px; border-bottom:1px solid var(--border-strong); color:var(--text-2); font-size:10px; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; background:var(--surface-2); } .hist td { padding:8px 10px; border-bottom:1px solid var(--divider); vertical-align:top; } .hist .t { color:var(--text-3); white-space:nowrap; font-family:var(--mono); } .hist .ty { color:var(--accent-text); font-weight:600; } /* actions */ .fp__actions { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:15px; display:flex; gap:9px; flex-wrap:wrap; } /* ============================================================================ FLASH banners + misc ============================================================================ */ .flash { padding:11px 15px; border-radius:var(--radius); font-size:13px; margin-bottom:14px; display:flex; gap:9px; align-items:center; } .flash--err { background:var(--risk-crit-bg); color:var(--risk-crit-tx); border:1px solid var(--risk-crit-line); } .flash--warn { background:var(--risk-med-bg); color:var(--risk-med-tx); border:1px solid var(--risk-med-line); } .flash--ok { background:var(--ok-bg); color:var(--ok-tx); border:1px solid var(--ok-line); } .well { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius); padding:12px 15px; color:var(--text-2); font-size:13px; } .cards-flow { display:flex; flex-wrap:wrap; gap:12px; } .mini { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px; min-width:210px; flex:1; } .mini.warn { border-left:3px solid var(--risk-med-line); } .mini.danger { border-left:3px solid var(--risk-crit-line); } .mini__t { font-weight:600; font-size:13px; color:var(--text); margin-bottom:5px; display:flex; align-items:center; gap:7px; } .mini__d { font-size:12px; color:var(--text-2); line-height:1.45; } .connector-tag { font-family:var(--mono); font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:var(--radius); background:var(--trust-bg); color:var(--trust-tx); } /* theme toggle floating */ .theme-fab { position:fixed; bottom:18px; right:18px; z-index:60; display:inline-flex; align-items:center; gap:7px; background:var(--surface); color:var(--text-2); border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:8px 13px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.03em; cursor:pointer; box-shadow:var(--shadow-pop); } .theme-fab:hover { border-color:var(--accent); color:var(--accent-text); } .theme-fab .d { width:9px; height:9px; border-radius:50%; background:var(--copper); } details > summary { cursor:pointer; color:var(--text-2); font-size:12.5px; list-style:none; padding:7px 0; user-select:none; } details > summary::-webkit-details-marker { display:none; } details > summary::before { content:"▸ "; color:var(--text-3); } details[open] > summary::before { content:"▾ "; } /* ============================================================================ PAGE UTILITIES (click-through screens) ============================================================================ */ .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:900px){ .grid-2,.grid-3 { grid-template-columns:1fr; } } .stack-gap > * + * { margin-top:18px; } .mb-lg { margin-bottom:24px; } /* forms */ .field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .field > label { font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-2); } .field .hint { font-size:12px; color:var(--text-3); } .inp { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius); padding:9px 11px; font-family:var(--sans); font-size:13.5px; width:100%; } .inp:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .inp[readonly] { color:var(--text-3); background:var(--surface-sunken); } .inp.mono { font-family:var(--mono); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:700px){ .form-row { grid-template-columns:1fr; } } /* toggle pill */ .tog { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--text); cursor:pointer; } .tog__sw { width:34px; height:19px; border-radius:var(--radius-pill); background:var(--surface-sunken); border:1px solid var(--border-strong); position:relative; transition:background .15s; flex-shrink:0; } .tog__sw::after { content:""; position:absolute; top:1px; left:1px; width:15px; height:15px; border-radius:50%; background:var(--mist); transition:transform .15s, background .15s; } .tog.on .tog__sw { background:var(--accent); border-color:var(--accent); } .tog.on .tog__sw::after { transform:translateX(15px); background:#fff; } /* empty stub */ .stub { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px 32px; border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--surface); color:var(--text-2); } .stub__ico { width:46px; height:46px; color:var(--accent); stroke-width:1.4; margin-bottom:16px; opacity:.8; } .stub__t { font-size:1.15rem; font-weight:600; color:var(--text); margin:0 0 8px; } .stub__d { font-size:13.5px; max-width:52ch; line-height:1.6; margin:0 0 14px; } .stub__tag { font-family:var(--mono); font-size:11px; padding:4px 11px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-text); font-weight:600; } /* key-value */ .kv { display:grid; grid-template-columns:180px 1fr; gap:9px 16px; font-size:13px; } .kv dt { color:var(--text-2); } .kv dd { color:var(--text); margin:0; font-family:var(--mono); font-size:12px; } /* signals feed */ .feed { display:flex; flex-direction:column; } .feed__row { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--divider); } .feed__row:last-child { border-bottom:none; } .feed__dot { width:8px; height:8px; border-radius:50%; } .feed__time { font-family:var(--mono); font-size:11px; color:var(--text-3); white-space:nowrap; } .feed__msg { font-size:13px; color:var(--text); } .feed__src { font-family:var(--mono); font-size:10.5px; color:var(--text-2); } /* attack path viz */ .pathviz { display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:8px 0 4px; } .pathnode { flex:1; min-width:150px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); padding:13px 15px; position:relative; } .pathnode.crit { border-color:var(--risk-crit-line); border-width:1.5px; } .pathnode.jewel { border-color:var(--accent); border-width:1.5px; background:var(--accent-soft); } .pathnode__k { font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); font-weight:700; margin-bottom:6px; } .pathnode__h { font-family:var(--mono); font-size:13px; color:var(--text); font-weight:600; } .pathnode__m { font-size:11.5px; color:var(--text-2); margin-top:5px; } .patharrow { display:flex; align-items:center; padding:0 4px; color:var(--accent); flex-shrink:0; } /* meter */ .meter { height:7px; background:var(--surface-sunken); border-radius:var(--radius-pill); overflow:hidden; } .meter > span { display:block; height:100%; border-radius:var(--radius-pill); background:var(--accent); } /* exploit-path state cards */ .pstate-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; } @media (max-width:900px){ .pstate-grid { grid-template-columns:repeat(2,1fr); } } .pstate { background:var(--surface); padding:16px 18px; position:relative; } .pstate::before { content:""; position:absolute; top:0; left:0; width:26px; height:2px; background:var(--steel); } .pstate.on::before { background:var(--accent); } .pstate__n { font-size:1.8rem; font-weight:700; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; } .pstate.on .pstate__n { color:var(--accent-text); } .pstate__k { font-size:12px; font-weight:600; color:var(--text); margin-top:8px; } .pstate__d { font-size:11px; color:var(--text-3); margin-top:4px; line-height:1.4; } /* chip filter bar */ .chipbar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:14px; } .chipbar__lbl { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); font-weight:700; margin-right:4px; } .chip-btn { padding:5px 13px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); } .chip-btn:hover { border-color:var(--accent); color:var(--accent-text); } .chip-btn.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-text); } .chipbar__sp { flex:1; } .zoombtn { width:28px; height:28px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2); cursor:pointer; font-size:15px; line-height:1; } /* attack graph */ .graph-wrap { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-sunken); position:relative; overflow:hidden; } .graph-meta { font-size:11px; color:var(--text-3); font-family:var(--mono); } /* intel-scope add rows + section entries */ .iscope-sec { margin-bottom:18px; } .iscope-add { display:grid; grid-template-columns:200px 1fr auto; gap:10px; align-items:end; border:1px dashed var(--border-strong); border-radius:var(--radius); padding:13px 15px; background:var(--surface-2); margin-top:12px; } @media (max-width:700px){ .iscope-add { grid-template-columns:1fr; } } .iscope-add .field { margin:0; } .iscope-none { font-size:12.5px; color:var(--text-3); } .pill-status { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:2px 8px; border-radius:var(--radius-pill); } .pill-status.ok { background:var(--ok-bg); color:var(--ok-tx); } .pill-status.stale { background:var(--risk-crit-bg); color:var(--risk-crit-tx); }