/* ============================================================================ VENUS — Intelligence Platform stylesheet · Elytra Security design language ---------------------------------------------------------------------------- Venus is a sibling of Argus and Medulus. It inherits the Elytra app design language verbatim — the same semantic token system, the same 236px left rail, the same topbar + footer chrome — so the three consoles feel like one family. Where Argus owns a cool cyan signal dot, Venus owns a luminous GOLD one (the planet / evening star). The whole console re-themes from a single attribute: (default) or . Shared shell class names (.sidebar-*, .vns-topbar, .vns-footer) are kept identical in structure to Argus so the Go templates port 1:1. ============================================================================ */ /* Fonts — served locally (air-gap safe; no external download). woff2 in fonts/ */ @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:400; font-display:swap; src:local('Inter Tight'), url('fonts/inter-tight-400.woff2') format('woff2'); } @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:500; font-display:swap; src:local('Inter Tight Medium'), url('fonts/inter-tight-500.woff2') format('woff2'); } @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:600; font-display:swap; src:local('Inter Tight SemiBold'), url('fonts/inter-tight-600.woff2') format('woff2'); } @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:700; font-display:swap; src:local('Inter Tight Bold'), url('fonts/inter-tight-700.woff2') format('woff2'); } @font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap; src:local('Source Serif 4'), url('fonts/source-serif-4-400.woff2') format('woff2'); } @font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap; src:local('Source Serif 4 SemiBold'), url('fonts/source-serif-4-600.woff2') format('woff2'); } @font-face { font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap; src:local('Source Serif 4 Italic'), url('fonts/source-serif-4-400-italic.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:local('JetBrains Mono'), url('fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:local('JetBrains Mono SemiBold'), url('fonts/jetbrains-mono-600.woff2') format('woff2'); } /* ============================================================================ TOKENS ============================================================================ */ :root { /* brand source palette (Elytra) */ --onyx:#0E1116; --graphite:#1A1F27; --slate:#2A313D; --steel:#5A6373; --mist:#B8BFCB; --parchment:#F4EFE6; --bone:#E8E1D3; --ink:#11151B; --copper:#C97B3F; --copper-bright:#E0954F; --copper-deep:#8E5224; /* Venus signature — gold / evening-star */ --gold:#C9962F; --gold-bright:#E6B24D; --gold-deep:#8A6418; --gold-glow:#F2C75A; --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; --radius:2px; --radius-lg:4px; --radius-pill:100px; --sidebar-width:236px; --topbar-h:58px; /* semantic — LIGHT (default / secondary theme) */ --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; --surface-inv:#1B1F26; --accent:#B8841F; --accent-hover:#9C6E14; --accent-soft:#F7EFD9; --accent-text:#7C5A12; --info:#3C6E80; --info-soft:#E4EDF0; --nav-bg:#FFFFFF; --nav-text:#3A414E; --nav-text-active:#7C5A12; --nav-active-bg:#F7EFD9; --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 / semantic chips (Elytra tokens) */ --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:#E0EBF0; --trust-tx:#235566; --trust-line:#4A7B8C; --violet-bg:#EADCF3; --violet-tx:#6B3E8F; --violet-line:#9A6DC0; /* data-viz ramp (feeds) */ --feed-nginx:#4A7B8C; --feed-mysql:#C9962F; --feed-ssh:#6E8C5A; --feed-portal:#9A6DC0; --feed-api:#C2410C; --feed-auth:#B14A8A; --feed-vpn:#3E63B5; /* map base (legible land vs ocean) */ --map-ocean:#DCE4E8; --map-land:#C7CDBB; --map-line:#AEB4A2; --map-grat:#C7CDBB; } 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; --surface-inv:#2A313D; --accent:#E6B24D; --accent-hover:#F0C063; --accent-soft:#2A2212; --accent-text:#E6B24D; --info:#6FA3B5; --info-soft:#16242A; --nav-bg:#14181F; --nav-text:#B8BFCB; --nav-text-active:#E6B24D; --nav-active-bg:#241D10; --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; --violet-bg:#241830; --violet-tx:#C79BE0; --violet-line:#9A6DC0; --feed-nginx:#6FA3B5; --feed-mysql:#E6B24D; --feed-ssh:#9CC07F; --feed-portal:#C79BE0; --feed-api:#E08A5A; --feed-auth:#DB8FBE; --feed-vpn:#7C96D8; --map-ocean:#0B1016; --map-land:#26313F; --map-line:#3A4858; --map-grat:#2A3340; } *, *::before, *::after { box-sizing:border-box; } /* Inline icon SVGs: constrain to their wrapper so they never balloon. Scoped so D3 chart SVGs (.vns-chart svg) keep their 100% width. */ .sidebar-ico { display:inline-flex; align-items:center; justify-content:center; } .sidebar-ico svg { width:17px; height:17px; display:block; } .sidebar-lock svg { width:11px; height:11px; display:block; } .sidebar-mark svg { display:block; } .vns-btn svg, .vns-icon-btn svg { width:15px; height:15px; display:block; flex-shrink:0; } .vns-topbar-search svg { width:16px; height:16px; display:block; flex-shrink:0; color:var(--text-3); } .vns-surface svg { width:13px; height:13px; display:block; } .vns-restricted-banner svg { width:17px; height:17px; display:block; flex-shrink:0; } .vns-htmx-note svg { width:11px; height:11px; display:block; } .vns-scrubber-label svg { width:14px; height:14px; display:block; } .vns-section-title svg, .vns-card-title svg { width:15px; height:15px; } .vns-body { margin:0; padding:0; background:var(--app-bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } .vns-shell { min-height:100vh; } .vns-shell-with-sidebar { margin-left:var(--sidebar-width); transition:margin-left .2s ease; } .vns-main { padding:24px 30px 40px; max-width:1500px; margin:0 auto; } /* ============================================================================ LEFT SIDEBAR (consistent with Argus / Medulus) ============================================================================ */ .vns-sidebar { position:fixed; top:0; left:0; width:var(--sidebar-width); height:100vh; background:var(--nav-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition:transform .2s ease; } .sidebar-header { display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; min-height:var(--topbar-h); } .sidebar-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0; } .sidebar-mark { flex-shrink:0; display:inline-flex; } .sidebar-brand-text { display:flex; flex-direction:column; line-height:1.05; min-width:0; } .sidebar-product { font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--text); letter-spacing:-0.01em; } .sidebar-product b { color:var(--accent-text); font-weight:600; } .sidebar-version { font-family:var(--mono); font-size:9.5px; color:var(--text-3); letter-spacing:0.08em; margin-top:3px; text-transform:uppercase; } .sidebar-nav { flex:1; padding:8px 0 14px; overflow-y:auto; scrollbar-width:thin; } .sidebar-nav::-webkit-scrollbar { width:6px; } .sidebar-nav::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; } .sidebar-section-label { font-size:9.5px; font-weight:700; letter-spacing:0.16em; color:var(--text-3); padding:16px 22px 6px; text-transform:uppercase; } .sidebar-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; overflow:hidden; text-overflow:ellipsis; position:relative; transition:background .13s, color .13s; cursor:pointer; } .sidebar-item:hover { background:var(--surface-2); color:var(--text); } html[data-theme="dark"] .sidebar-item:hover { background:rgba(255,255,255,0.04); } .sidebar-item.active { background:var(--nav-active-bg); color:var(--nav-text-active); font-weight:600; } .sidebar-item.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--accent); border-radius:2px; } .sidebar-ico { width:17px; height:17px; flex-shrink:0; opacity:0.85; } .sidebar-item.active .sidebar-ico { opacity:1; } .sidebar-item-text { flex:1; overflow:hidden; text-overflow:ellipsis; } .sidebar-count { font-family:var(--mono); font-size:10px; color:var(--text-3); font-weight:600; } .sidebar-item.active .sidebar-count { color:var(--accent-text); } /* restricted section divider for Credentials/Batches */ .sidebar-divider { height:1px; background:var(--border); margin:10px 18px 2px; } .sidebar-restricted .sidebar-section-label { display:flex; align-items:center; gap:7px; } .sidebar-lock { width:11px; height:11px; opacity:0.7; } .sidebar-item.restricted { color:var(--text-2); } .sidebar-item.restricted .sidebar-ico { opacity:0.7; } .sidebar-footer { padding:12px 14px 14px; border-top:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; gap:9px; } .sidebar-feeds { display:flex; flex-direction:column; gap:7px; padding:2px 4px 6px; } .sidebar-feed-row { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-2); } .sidebar-feed-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .sidebar-feed-dot.live { box-shadow:0 0 0 0 currentColor; animation:vns-pulse 2s infinite; } .sidebar-feed-name { flex:1; font-family:var(--mono); letter-spacing:0.02em; } .sidebar-feed-rate { font-family:var(--mono); color:var(--text-3); } .sidebar-user { display:flex; align-items:center; gap:10px; padding:8px 6px 2px; border-top:1px solid var(--divider); } .sidebar-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; } .sidebar-user-meta { display:flex; flex-direction:column; min-width:0; line-height:1.2; } .sidebar-user-name { font-size:12.5px; font-weight:600; color:var(--text); } .sidebar-user-role { font-size:10px; color:var(--text-3); font-family:var(--mono); letter-spacing:0.04em; } @keyframes vns-pulse { 0%{box-shadow:0 0 0 0 currentColor;} 70%{box-shadow:0 0 0 5px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } /* ============================================================================ TOPBAR ============================================================================ */ .vns-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:16px; padding:0 30px; min-height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border); } .vns-topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--gold) 0%,var(--gold-bright) 30%,transparent 62%); } .vns-topbar-nav { display:none; background:none; border:none; color:var(--text-2); font-size:1.2rem; cursor:pointer; padding:4px 8px; border-radius:var(--radius); } .vns-crumbs { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-2); } .vns-crumbs b { color:var(--text); font-weight:600; } .vns-crumb-sep { color:var(--text-3); } .vns-topbar-spacer { flex:1; } .vns-topbar-search { display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius); padding:6px 11px; min-width:230px; color:var(--text-3); } .vns-topbar-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .vns-topbar-search input { border:none; background:none; outline:none; color:var(--text); font-family:var(--sans); font-size:13px; flex:1; min-width:0; } .vns-topbar-search kbd { font-family:var(--mono); font-size:10px; color:var(--text-3); border:1px solid var(--border-strong); border-radius:3px; padding:1px 5px; } .vns-env { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--text-3); white-space:nowrap; } .vns-env-dot { width:7px; height:7px; border-radius:50%; background:var(--ok-line); color:var(--ok-line); box-shadow:0 0 0 0 currentColor; animation:vns-pulse 2.4s infinite; } .vns-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:32px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-2); cursor:pointer; transition:all .15s; } .vns-icon-btn:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .vns-icon-btn svg { width:16px; height:16px; } .vns-ico-sun { display:none; } .vns-ico-moon { display:inline-flex; } html[data-theme="dark"] .vns-ico-sun { display:inline-flex; } html[data-theme="dark"] .vns-ico-moon { display:none; } /* ============================================================================ PAGE HEAD ============================================================================ */ .vns-pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px; } .vns-page-title { font-family:var(--serif); font-size:1.9rem; font-weight:600; letter-spacing:-0.01em; color:var(--text); margin:0; line-height:1.05; } .vns-page-sub { font-size:0.86rem; color:var(--text-2); margin:6px 0 0; } .vns-pagehead-actions { display:flex; align-items:center; gap:10px; } .vns-live { display:inline-flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--ok-line); font-weight:700; letter-spacing:0.05em; text-transform:uppercase; } .vns-live-dot { width:8px; height:8px; border-radius:50%; background:var(--ok-line); color:var(--ok-line); box-shadow:0 0 0 0 currentColor; animation:vns-pulse 2s infinite; } /* ============================================================================ BUTTONS ============================================================================ */ .vns-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:var(--sans); font-size:0.84rem; font-weight:600; cursor:pointer; transition:all .14s; text-decoration:none; white-space:nowrap; } .vns-btn:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .vns-btn svg { width:15px; height:15px; } .vns-btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; } html[data-theme="dark"] .vns-btn-primary { color:#1B1405; } .vns-btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; } html[data-theme="dark"] .vns-btn-primary:hover { color:#1B1405; } .vns-btn-ghost { border-color:transparent; background:transparent; color:var(--text-2); } .vns-btn-ghost:hover { background:var(--surface-2); } .vns-btn-sm { padding:5px 10px; font-size:0.78rem; } /* ============================================================================ STAT CARDS (hairline-joined, gold tick) ============================================================================ */ .vns-stat-grid { display:grid; grid-template-columns:repeat(var(--cols,6),1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; } @media (max-width:1100px){ .vns-stat-grid { grid-template-columns:repeat(3,1fr); } } .vns-stat { background:var(--surface); padding:16px 18px; position:relative; display:flex; flex-direction:column; } .vns-stat::before { content:""; position:absolute; top:0; left:0; width:26px; height:2px; background:var(--gold); } .vns-stat-label { font-size:10px; color:var(--text-2); text-transform:uppercase; letter-spacing:0.11em; font-weight:700; margin-bottom:11px; } .vns-stat-value { font-size:1.85rem; font-weight:600; color:var(--text); line-height:1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; } .vns-stat-sub { font-size:0.72rem; color:var(--text-3); margin-top:7px; font-family:var(--mono); display:flex; align-items:center; gap:5px; } .vns-stat-value-warn { color:var(--risk-high-line); } .vns-stat-value-danger { color:var(--risk-crit-line); } .vns-delta { display:inline-flex; align-items:center; gap:3px; font-weight:700; } .vns-delta.up { color:var(--risk-crit-line); } .vns-delta.down { color:var(--ok-line); } /* ============================================================================ CARDS / SECTIONS ============================================================================ */ .vns-section-title { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.13em; margin:26px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .vns-section-title a { font-size:0.78rem; color:var(--accent-text); text-decoration:none; text-transform:none; letter-spacing:0; font-weight:600; } .vns-section-title a:hover { text-decoration:underline; } .vns-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); } .vns-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); } .vns-card-title { font-weight:600; font-size:0.96rem; color:var(--text); margin:0; display:inline-flex; align-items:baseline; gap:9px; } .vns-card-tag { font-family:var(--mono); font-size:0.7rem; color:var(--accent-text); font-weight:600; letter-spacing:0.02em; } .vns-card-body { padding:18px; } .vns-card-body--flush { padding:0; } .vns-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .vns-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:1080px){ .vns-grid-2, .vns-grid-3 { grid-template-columns:1fr; } } /* ============================================================================ DATA TABLES ============================================================================ */ .vns-table-wrap { border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface); overflow:hidden; } .vns-table { width:100%; border-collapse:collapse; font-size:12.5px; } .vns-table th { background:var(--surface-2); color:var(--text-2); font-weight:700; text-align:left; padding:10px 14px; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; border-bottom:1px solid var(--border-strong); position:relative; } .vns-table th.sortable { cursor:pointer; user-select:none; } .vns-table th.sortable:hover { color:var(--text); } .vns-table th .sort-ico { opacity:0.4; margin-left:4px; font-size:9px; } .vns-table th.sorted .sort-ico { opacity:1; color:var(--accent-text); } .vns-table td { padding:10px 14px; border-bottom:1px solid var(--divider); color:var(--text); vertical-align:middle; } .vns-table tr:last-child td { border-bottom:none; } .vns-table tbody tr { transition:background .1s; } .vns-table tbody tr:hover td { background:var(--surface-2); } .vns-table tbody tr.clickable { cursor:pointer; } .vns-table tbody tr.selected td { background:var(--accent-soft); } .vns-table tbody tr.selected td:first-child { box-shadow:inset 3px 0 0 0 var(--accent); } .vns-num { font-variant-numeric:tabular-nums; text-align:right; font-family:var(--mono); } .vns-mono { font-family:var(--mono); } .vns-mono-sm { font-family:var(--mono); font-size:0.82em; } .vns-muted { color:var(--text-3); } .vns-nowrap { white-space:nowrap; } .vns-empty-row td { text-align:center; color:var(--text-3); padding:30px; } .vns-table tr.row-crit td:first-child { box-shadow:inset 3px 0 0 0 var(--risk-crit-line); } /* truncated method+path cell */ .vns-pathcell { display:flex; align-items:center; gap:7px; max-width:340px; } .vns-method { font-family:var(--mono); font-size:10px; font-weight:700; padding:1px 6px; border-radius:var(--radius); background:var(--surface-sunken); color:var(--text-2); flex-shrink:0; } .vns-method.get { color:var(--trust-tx); background:var(--trust-bg); } .vns-method.post { color:var(--ok-tx); background:var(--ok-bg); } .vns-method.put, .vns-method.delete { color:var(--risk-high-tx); background:var(--risk-high-bg); } .vns-path { font-family:var(--mono); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vns-status-code { font-family:var(--mono); font-weight:600; } .vns-status-2 { color:var(--ok-line); } .vns-status-3 { color:var(--trust-line); } .vns-status-4 { color:var(--risk-med-line); } .vns-status-5 { color:var(--risk-crit-line); } /* ============================================================================ TAG BADGES (brief palette mapped to Elytra risk tokens) ============================================================================ */ .vns-tagrow { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; } .vns-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-pill); font-size:0.68rem; font-weight:700; letter-spacing:0.03em; white-space:nowrap; font-family:var(--mono); text-transform:lowercase; border:1px solid transparent; } .vns-tag.t-label { text-transform:none; font-family:var(--sans,inherit); letter-spacing:0; font-weight:600; } .vns-tag.t-critical { background:var(--risk-crit-bg); color:var(--risk-crit-tx); border-color:var(--risk-crit-line); } .vns-tag.t-high { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .vns-tag.t-medium { background:var(--risk-high-bg); color:var(--risk-high-tx); } .vns-tag.t-info { background:var(--neutral-bg); color:var(--neutral-tx); } .vns-tag.t-internal { background:var(--trust-bg); color:var(--trust-tx); } .vns-tag-more { font-size:0.68rem; font-weight:700; color:var(--text-3); font-family:var(--mono); padding:2px 4px; } /* generic status pill */ .vns-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:var(--radius-pill); font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; } .vns-pill.ok { background:var(--ok-bg); color:var(--ok-tx); } .vns-pill.warn { background:var(--risk-med-bg); color:var(--risk-med-tx); } .vns-pill.danger { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .vns-pill.neutral { background:var(--neutral-bg); color:var(--neutral-tx); } .vns-pill.info { background:var(--trust-bg); color:var(--trust-tx); } .vns-pill.accent { background:var(--accent-soft); color:var(--accent-text); } /* ============================================================================ COUNTRY FLAG + CODE ============================================================================ */ .vns-geo { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } .vns-flag { width:18px; height:13px; border-radius:1px; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,0.12) inset; object-fit:cover; font-size:12px; line-height:13px; text-align:center; } .vns-cc { font-family:var(--mono); font-size:11px; color:var(--text-2); font-weight:600; } /* surface icon set (web/api/portal/mysql/ssh) */ .vns-surfaces { display:inline-flex; align-items:center; gap:5px; } .vns-surface { width:22px; height:22px; border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; color:var(--text-3); background:var(--surface-sunken); } .vns-surface svg { width:13px; height:13px; } .vns-surface.on { color:#fff; } .vns-surface.on.s-web { background:var(--feed-nginx); color:#fff; } .vns-surface.on.s-api { background:var(--feed-api); color:#fff; } .vns-surface.on.s-portal { background:var(--feed-portal); color:#fff; } .vns-surface.on.s-mysql { background:var(--feed-mysql); color:#1B1405; } .vns-surface.on.s-ssh { background:var(--feed-ssh); color:#fff; } /* ============================================================================ SCORE BAR (0-100, red -> yellow -> green ramp) ============================================================================ */ .vns-score { display:flex; align-items:center; gap:9px; min-width:120px; } .vns-score-track { position:relative; flex:1; height:7px; border-radius:var(--radius-pill); overflow:hidden; background:linear-gradient(90deg,#C7493A 0%,#D9A24A 50%,#3F8A4E 100%); opacity:0.28; } .vns-score-wrap { position:relative; flex:1; height:7px; } .vns-score-bg { position:absolute; inset:0; border-radius:var(--radius-pill); background:linear-gradient(90deg,#C7493A 0%,#D9A24A 50%,#3F8A4E 100%); opacity:0.22; } .vns-score-fill { position:absolute; left:0; top:0; bottom:0; border-radius:var(--radius-pill); background:linear-gradient(90deg,#C7493A 0%,#D9A24A 55%,#3F8A4E 100%); background-size:120px 100%; } .vns-score-val { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text); min-width:22px; text-align:right; font-variant-numeric:tabular-nums; } /* behavioral progress bars (actor detail) */ .vns-meter { margin-bottom:13px; } .vns-meter-head { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-2); font-weight:700; margin-bottom:6px; } .vns-meter-head .v { font-family:var(--mono); color:var(--text); letter-spacing:0; } .vns-meter-track { height:8px; background:var(--surface-sunken); border-radius:var(--radius-pill); overflow:hidden; } .vns-meter-fill { height:100%; border-radius:var(--radius-pill); background:var(--accent); } .vns-meter-fill.scanner { background:var(--risk-crit-line); } .vns-meter-fill.persistence { background:var(--risk-med-line); } .vns-meter-fill.sophistication { background:var(--violet-line); } /* ============================================================================ FILTER BAR ============================================================================ */ .vns-filterbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 15px; margin-bottom:16px; } .vns-field { display:flex; flex-direction:column; gap:5px; } .vns-field label { font-size:0.68rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; font-weight:700; } .vns-input, .vns-select { padding:7px 10px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:var(--sans); font-size:13px; min-width:130px; } .vns-input:focus, .vns-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .vns-input.search { min-width:230px; } .vns-field-grow { flex:1; min-width:200px; } .vns-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; } .vns-toggle button { background:var(--surface); border:none; color:var(--text-2); font-family:var(--sans); font-size:12px; font-weight:600; padding:7px 12px; cursor:pointer; } .vns-toggle button.on { background:var(--accent-soft); color:var(--accent-text); } .vns-toggle button + button { border-left:1px solid var(--border-strong); } .vns-chips { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; } .vns-chip { display:inline-flex; align-items:center; gap:5px; background:var(--surface-sunken); border:1px solid var(--border); color:var(--text-2); font-size:11.5px; padding:4px 9px; border-radius:var(--radius-pill); cursor:pointer; font-family:var(--mono); } .vns-chip.on { background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent); } .vns-chip .x { opacity:0.6; } .vns-filter-apply { margin-left:auto; display:flex; gap:8px; align-items:flex-end; } /* ============================================================================ PAGINATION + table footer ============================================================================ */ .vns-tablefoot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface-2); flex-wrap:wrap; } .vns-tablefoot-meta { font-size:0.78rem; color:var(--text-3); font-family:var(--mono); } .vns-pager { display:flex; gap:5px; align-items:center; } .vns-page-btn { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius); padding:4px 10px; font-size:0.78rem; cursor:pointer; text-decoration:none; font-family:var(--mono); } .vns-page-btn:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .vns-page-btn[disabled] { opacity:0.35; cursor:not-allowed; pointer-events:none; } .vns-page-btn.current { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; } html[data-theme="dark"] .vns-page-btn.current { color:#1B1405; } .vns-rpp { display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-3); } /* ============================================================================ SLIDE-OVER PANEL ============================================================================ */ .vns-overlay { position:fixed; inset:0; background:rgba(8,10,14,0.5); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease; } .vns-overlay.open { opacity:1; pointer-events:auto; } .vns-slideover { position:fixed; top:0; right:0; height:100vh; width:540px; max-width:94vw; background:var(--surface); border-left:1px solid var(--border-strong); box-shadow:var(--shadow-pop); z-index:201; transform:translateX(100%); transition:transform .24s cubic-bezier(.2,.7,.3,1); display:flex; flex-direction:column; } .vns-slideover.open { transform:translateX(0); } .vns-slideover-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 22px 14px; border-bottom:1px solid var(--border); flex-shrink:0; } .vns-slideover-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-text); margin-bottom:7px; } .vns-slideover-title { font-family:var(--mono); font-size:1.1rem; font-weight:600; color:var(--text); } .vns-slideover-close { background:none; border:none; color:var(--text-3); font-size:1.4rem; line-height:1; cursor:pointer; padding:2px 7px; border-radius:var(--radius); } .vns-slideover-close:hover { color:var(--text); background:var(--surface-2); } .vns-slideover-body { padding:18px 22px 28px; overflow-y:auto; flex:1; } .vns-slideover-foot { padding:13px 22px; border-top:1px solid var(--border); display:flex; gap:9px; flex-shrink:0; background:var(--surface-2); } .vns-kv { display:grid; grid-template-columns:128px 1fr; gap:9px 14px; font-size:0.84rem; margin:0 0 16px; } .vns-kv dt { color:var(--text-2); } .vns-kv dd { color:var(--text); margin:0; word-break:break-word; } .vns-kv dd.mono { font-family:var(--mono); font-size:0.8rem; } .vns-subhead { font-size:0.72rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.09em; margin:18px 0 9px; } .vns-codeblock { background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; color:var(--text-2); font-family:var(--mono); font-size:0.78rem; line-height:1.6; white-space:pre-wrap; word-break:break-all; max-height:240px; overflow:auto; } .vns-mask { background:var(--surface-sunken); color:var(--text-3); font-family:var(--mono); font-size:0.78rem; padding:1px 7px; border-radius:var(--radius); border:1px dashed var(--border-strong); letter-spacing:0.1em; } /* ============================================================================ TABS ============================================================================ */ .vns-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:0 0 18px; } .vns-tab { padding:10px 16px; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:var(--sans); font-size:0.86rem; font-weight:600; color:var(--text-2); margin-bottom:-1px; display:inline-flex; align-items:center; gap:7px; } .vns-tab:hover { color:var(--text); } .vns-tab.active { color:var(--accent-text); border-bottom-color:var(--accent); } .vns-tab-count { background:var(--neutral-bg); color:var(--neutral-tx); border-radius:var(--radius-pill); padding:1px 7px; font-size:0.68rem; font-weight:700; font-family:var(--mono); } /* ============================================================================ CHARTS (D3 shells) ============================================================================ */ .vns-chart { width:100%; } .vns-chart svg { display:block; width:100%; overflow:visible; } .vns-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; } .vns-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); } .vns-legend-swatch { width:11px; height:11px; border-radius:2px; flex-shrink:0; } .vns-axis line, .vns-axis path { stroke:var(--border); } .vns-axis text { fill:var(--text-3); font-family:var(--mono); font-size:10px; } .vns-grid line { stroke:var(--divider); stroke-dasharray:2 3; } .vns-tooltip { position:fixed; pointer-events:none; z-index:300; background:var(--surface-inv); color:var(--text-inv); font-size:11.5px; padding:7px 11px; border-radius:var(--radius); box-shadow:var(--shadow-pop); opacity:0; transition:opacity .12s; max-width:240px; line-height:1.5; } html[data-theme="dark"] .vns-tooltip { background:#2A313D; color:#ECE7DC; border:1px solid var(--border-strong); } .vns-tooltip .t-title { font-weight:700; margin-bottom:2px; } .vns-tooltip .t-mono { font-family:var(--mono); } /* world map */ .vns-map-land { fill:var(--map-land); stroke:var(--map-line); stroke-width:0.5px; } html[data-theme="dark"] .vns-map-land { fill:var(--map-land); stroke:var(--map-line); } .vns-map-grat { fill:none; stroke:var(--map-grat); stroke-width:0.4px; opacity:0.55; } .vns-map-ocean { fill:var(--map-ocean); } .vns-map-dot { stroke:var(--surface); stroke-width:0.6px; cursor:pointer; transition:opacity .12s; } .vns-map-dot:hover { stroke:var(--text); } /* horizontal bar list */ .vns-hbar-list { display:flex; flex-direction:column; gap:9px; } .vns-hbar { display:grid; grid-template-columns:128px 1fr 52px; align-items:center; gap:11px; font-size:12px; } .vns-hbar-label { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:7px; } .vns-hbar-track { height:18px; background:var(--surface-sunken); border-radius:var(--radius); overflow:hidden; } .vns-hbar-fill { height:100%; background:var(--accent); border-radius:var(--radius); opacity:0.85; } .vns-hbar-val { font-family:var(--mono); font-size:11px; color:var(--text-2); text-align:right; } /* time scrubber */ .vns-scrubber { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); margin-top:16px; } .vns-scrubber input[type=range] { flex:1; accent-color:var(--accent); } .vns-scrubber-label { font-family:var(--mono); font-size:12px; color:var(--text-2); white-space:nowrap; } /* ============================================================================ ACTOR / LIST helpers ============================================================================ */ .vns-iprow { display:flex; align-items:center; gap:9px; } .vns-asn { color:var(--text-2); font-size:11.5px; } .vns-dc-badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:1px 6px; border-radius:var(--radius); background:var(--violet-bg); color:var(--violet-tx); } .vns-tagcloud { display:flex; flex-wrap:wrap; gap:7px; } .vns-tagcloud .vns-tag { cursor:default; } .vns-tagcloud .freq { opacity:0.7; margin-left:4px; } /* timeline (sessions / surfaces) */ .vns-timeline { position:relative; padding-left:22px; } .vns-timeline::before { content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:var(--divider); } .vns-tl-item { position:relative; padding:0 0 16px 14px; } .vns-tl-dot { position:absolute; left:-21px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); } .vns-tl-dot.crit { border-color:var(--risk-crit-line); } .vns-tl-time { font-family:var(--mono); font-size:11px; color:var(--text-3); } .vns-tl-title { font-size:13px; color:var(--text); font-weight:600; margin:2px 0; } .vns-tl-desc { font-size:12px; color:var(--text-2); } /* ============================================================================ PATTERNS cards ============================================================================ */ .vns-pattern-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; } .vns-pattern { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius-lg); padding:15px 17px; cursor:pointer; transition:border-color .12s, box-shadow .12s; } .vns-pattern:hover { box-shadow:var(--shadow); border-left-color:var(--accent); } .vns-pattern.sev-crit { border-left-color:var(--risk-crit-line); } .vns-pattern.sev-med { border-left-color:var(--risk-med-line); } .vns-pattern-val { font-family:var(--mono); font-size:12.5px; color:var(--text); background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:7px 10px; margin:8px 0 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vns-pattern-meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--text-3); font-family:var(--mono); } .vns-pattern-meta b { color:var(--text-2); font-weight:600; } /* ============================================================================ REPORTS viewer ============================================================================ */ .vns-report { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px 44px; font-size:14px; line-height:1.7; color:var(--text); max-width:880px; } .vns-report h1 { font-family:var(--serif); font-size:1.7rem; font-weight:600; margin:0 0 4px; } .vns-report h2 { font-family:var(--serif); font-size:1.2rem; font-weight:600; margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); } .vns-report p { margin:0 0 12px; color:var(--text-2); } .vns-report code { font-family:var(--mono); font-size:0.85em; background:var(--surface-sunken); padding:1px 6px; border-radius:var(--radius); } .vns-report pre { background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; overflow:auto; font-family:var(--mono); font-size:0.8rem; line-height:1.55; } .vns-report .meta-line { font-family:var(--mono); font-size:0.78rem; color:var(--text-3); margin-bottom:24px; } /* ============================================================================ TRENDS · SPARKLINES · ANALYTICS ============================================================================ */ .vns-trend { font-family:var(--mono); font-weight:700; font-size:11px; white-space:nowrap; } .vns-trend.rise { color:var(--risk-crit-line); } .vns-trend.fall { color:var(--ok-line); } .vns-trend.flat { color:var(--text-3); } .vns-spark { width:88px; height:28px; display:block; } /* KPI compare cards */ .vns-kpi-grid { display:grid; grid-template-columns:repeat(var(--cols,6),1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; } @media (max-width:1100px){ .vns-kpi-grid { grid-template-columns:repeat(3,1fr); } } .vns-kpi { background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:8px; position:relative; } .vns-kpi-label { font-size:10px; color:var(--text-2); text-transform:uppercase; letter-spacing:0.11em; font-weight:700; } .vns-kpi-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .vns-kpi-value { font-size:1.7rem; font-weight:600; color:var(--text); line-height:1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; } .vns-kpi-prev { font-family:var(--mono); font-size:11px; color:var(--text-3); } /* analytics: category trend table */ .vns-trendtable { width:100%; border-collapse:collapse; font-size:13px; } .vns-trendtable th { background:var(--surface-2); color:var(--text-2); font-weight:700; text-align:left; padding:10px 14px; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid var(--border-strong); } .vns-trendtable td { padding:12px 14px; border-bottom:1px solid var(--divider); vertical-align:middle; } .vns-trendtable tr:last-child td { border-bottom:none; } .vns-trendtable tbody tr:hover td { background:var(--surface-2); } .vns-trendtable .cat { font-weight:600; color:var(--text); display:flex; align-items:center; gap:9px; } .vns-trendtable .catdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* split donut for new vs returning */ .vns-donut { width:150px; height:150px; border-radius:50%; position:relative; flex-shrink:0; } .vns-donut::after { content:""; position:absolute; inset:26px; border-radius:50%; background:var(--surface); } .vns-donut-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; } .vns-donut-num { font-size:1.9rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; line-height:1; } .vns-donut-cap { font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin-top:4px; } /* redesigned patterns: category rail + ranked rows */ .vns-pat-layout { display:grid; grid-template-columns:212px 1fr; gap:18px; align-items:start; } @media (max-width:980px){ .vns-pat-layout { grid-template-columns:1fr; } } .vns-pat-rail { display:flex; flex-direction:column; gap:3px; position:sticky; top:74px; } .vns-pat-cat { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 13px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; color:var(--text-2); font-size:13px; font-weight:500; transition:all .12s; } .vns-pat-cat:hover { background:var(--surface-2); color:var(--text); } .vns-pat-cat.active { background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent); font-weight:600; } .vns-pat-cat .n { font-family:var(--mono); font-size:11px; color:var(--text-3); } .vns-pat-cat.active .n { color:var(--accent-text); } .vns-pat-row { display:grid; grid-template-columns:1fr 96px 120px; align-items:center; gap:16px; padding:13px 16px; border-bottom:1px solid var(--divider); cursor:pointer; } .vns-pat-row:last-child { border-bottom:none; } .vns-pat-row:hover { background:var(--surface-2); } .vns-pat-main { min-width:0; } .vns-pat-top { display:flex; align-items:center; gap:9px; margin-bottom:6px; } .vns-pat-obs { font-family:var(--mono); font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vns-pat-sub { font-family:var(--mono); font-size:11px; color:var(--text-3); display:flex; gap:14px; } .vns-pat-sub b { color:var(--text-2); font-weight:600; } .vns-pat-spark { display:flex; flex-direction:column; align-items:flex-end; gap:3px; } .vns-pat-metric { text-align:right; } .vns-pat-metric .v { font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; } .vns-pat-metric .l { font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); } /* redaction chip */ .vns-redact-toggle { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); } .vns-redact-note { display:flex; align-items:flex-start; gap:10px; background:var(--info-soft); border:1px solid var(--info); border-left:3px solid var(--info); border-radius:var(--radius); padding:11px 15px; margin-bottom:16px; font-size:0.84rem; color:var(--text); } .vns-redact-note svg { width:16px; height:16px; flex-shrink:0; color:var(--info); margin-top:1px; } /* ============================================================================ FORMAL REPORTS (Batch Intelligence · Actor Profile) ============================================================================ */ .vns-report-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px; position:relative; overflow:hidden; } .vns-report-head::before { content:""; position:absolute; top:0; left:0; width:50px; height:3px; background:var(--gold); } .vns-report-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-text); margin-bottom:8px; } .vns-report-id { font-family:var(--mono); font-size:1.25rem; font-weight:600; color:var(--text); } .vns-report-meta { font-family:var(--mono); font-size:12px; color:var(--text-3); margin-top:8px; } .vns-report-head-side { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .vns-research-notes { background:var(--surface-sunken); } .vns-notes-placeholder { min-height:90px; border:1px dashed var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:13px; font-style:italic; } @media print { .vns-sidebar, .vns-topbar, .vns-footer, .sidebar-overlay, .vns-pagehead-actions, .vns-report-head-side { display:none !important; } .vns-shell-with-sidebar { margin-left:0 !important; } .vns-card, .vns-table-wrap, .vns-report-head { break-inside:avoid; } } /* ============================================================================ CREDENTIALS — restricted, muted styling ============================================================================ */ .vns-restricted-banner { display:flex; align-items:center; gap:10px; background:var(--surface-sunken); border:1px solid var(--border-strong); border-left:3px solid var(--steel); border-radius:var(--radius); padding:11px 16px; margin-bottom:18px; font-size:0.84rem; color:var(--text-2); } .vns-restricted-banner svg { width:17px; height:17px; flex-shrink:0; color:var(--text-3); } .vns-restricted-banner b { color:var(--text); } .vns-creds .vns-main, .vns-creds-tint { filter:saturate(0.82); } /* ============================================================================ MISC ============================================================================ */ .vns-footer { background:var(--footer-bg); color:var(--footer-text); border-top:2px solid var(--gold-deep); padding:15px 30px; font-size:0.74rem; letter-spacing:0.02em; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-family:var(--mono); margin-left:var(--sidebar-width); } .vns-footer a { color:var(--footer-text); text-decoration:none; opacity:0.85; } .vns-footer a:hover { opacity:1; color:#fff; } .vns-htmx-note { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--text-3); background:var(--surface-sunken); border:1px dashed var(--border-strong); border-radius:var(--radius); padding:2px 8px; } .vns-spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:vns-spin .8s linear infinite; } @keyframes vns-spin { to { transform:rotate(360deg); } } /* mobile rail */ .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(14,17,22,0.55); z-index:99; } @media (max-width:1023px) { .vns-sidebar { transform:translateX(-100%); } .vns-sidebar.open { transform:translateX(0); box-shadow:var(--shadow-pop); } .vns-shell-with-sidebar, .vns-footer { margin-left:0; } .vns-topbar-nav { display:inline-flex; } .sidebar-overlay.open { display:block; } }