/* ========================================================================== Pistos Security — Master Stylesheet Theming via [data-theme] on . Default: cyber-dark ========================================================================== */ /* -------------------------------------------------------------------------- THEME DEFINITIONS -------------------------------------------------------------------------- */ /* 1. Pistos Security — default */ :root, [data-theme="cyber-dark"] { --bg: #070c0a; --bg-surface: #0c1410; --bg-elevated: #111d16; --sidebar-bg: #091210; --sidebar-border: rgba(0,210,120,.12); --accent: #00d278; --accent-hover: #2de890; --accent-glow: rgba(0,210,120,.22); --accent2: #00b8a0; --accent2-hover: #1fd4bc; --accent2-glow: rgba(0,184,160,.2); --text: #d8ede4; --text-muted: #5a7a6a; --text-faint: #1e3328; --border: rgba(0,210,120,.07); --border-strong: rgba(0,210,120,.16); --glass: rgba(0,210,120,.03); --glass-hover: rgba(0,210,120,.06); --success: #00e676; --warning: #ffb300; --danger: #ff3d3d; --info: #29b6f6; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(0,0,0,.6); --shadow-lg: 0 8px 32px rgba(0,0,0,.7); --shadow-accent: 0 4px 20px rgba(0,210,120,.2); --nav-active-bg: rgba(0,210,120,.1); --nav-active-fg: #00d278; --nav-active-bar: #00d278; --input-bg: rgba(0,0,0,.4); --scrollbar-track: rgba(0,210,120,.04); --scrollbar-thumb: rgba(0,210,120,.14); --code-bg: #060e09; --code-border: #0f2418; --code-text: #a7f3c8; --login-bg: radial-gradient(ellipse at 50% 0%, #071a10 0%, #070c0a 60%); } /* 2. Midnight Blue */ [data-theme="midnight"] { --bg: #060810; --bg-surface: #0c1020; --bg-elevated: #111828; --sidebar-bg: #090c18; --sidebar-border: rgba(99,102,241,.15); --accent: #818cf8; --accent-hover: #a5b4fc; --accent-glow: rgba(129,140,248,.25); --accent2: #f472b6; --accent2-hover: #f9a8d4; --accent2-glow: rgba(244,114,182,.25); --text: #e2e8f0; --text-muted: #64748b; --text-faint: #1e293b; --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.13); --glass: rgba(129,140,248,.03); --glass-hover: rgba(129,140,248,.07); --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 4px 16px rgba(0,0,0,.55); --shadow-lg: 0 8px 32px rgba(0,0,0,.65); --shadow-accent: 0 4px 20px rgba(129,140,248,.2); --nav-active-bg: rgba(129,140,248,.1); --nav-active-fg: #a5b4fc; --nav-active-bar: #818cf8; --input-bg: rgba(0,0,0,.4); --scrollbar-track: rgba(255,255,255,.04); --scrollbar-thumb: rgba(129,140,248,.2); --code-bg: #0d1020; --code-border: #1e2a40; --code-text: #c9d1d9; --login-bg: radial-gradient(ellipse at 50% 0%, #0d1535 0%, #060810 60%); } /* 3. Terminal Green */ [data-theme="terminal"] { --bg: #050905; --bg-surface: #0a120a; --bg-elevated: #0f1a0f; --sidebar-bg: #070e07; --sidebar-border: rgba(34,197,94,.12); --accent: #22c55e; --accent-hover: #4ade80; --accent-glow: rgba(34,197,94,.25); --accent2: #84cc16; --accent2-hover: #a3e635; --accent2-glow: rgba(132,204,22,.25); --text: #d1fae5; --text-muted: #4b6858; --text-faint: #1a2e1a; --border: rgba(34,197,94,.08); --border-strong: rgba(34,197,94,.18); --glass: rgba(34,197,94,.03); --glass-hover: rgba(34,197,94,.06); --success: #4ade80; --warning: #facc15; --danger: #f87171; --info: #38bdf8; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(0,0,0,.6); --shadow-lg: 0 8px 32px rgba(0,0,0,.7); --shadow-accent: 0 4px 20px rgba(34,197,94,.2); --nav-active-bg: rgba(34,197,94,.1); --nav-active-fg: #4ade80; --nav-active-bar: #22c55e; --input-bg: rgba(0,0,0,.4); --scrollbar-track: rgba(34,197,94,.04); --scrollbar-thumb: rgba(34,197,94,.15); --code-bg: #040804; --code-border: #0f2010; --code-text: #a7f3d0; --login-bg: radial-gradient(ellipse at 50% 0%, #071a07 0%, #050905 60%); } /* 4. Slate Light */ [data-theme="light"] { --bg: #f4f6f8; --bg-surface: #ffffff; --bg-elevated: #f8f9fb; --sidebar-bg: #0f172a; --sidebar-border: rgba(255,255,255,.08); --accent: #2563eb; --accent-hover: #1d4ed8; --accent-glow: rgba(37,99,235,.18); --accent2: #3b82f6; --accent2-hover: #2563eb; --accent2-glow: rgba(59,130,246,.15); --text: #0f172a; --text-muted: #4b5563; --text-faint: #9ca3af; --border: rgba(0,0,0,.09); --border-strong: rgba(0,0,0,.15); --glass: #ffffff; --glass-hover: #f8f9fb; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05); --shadow-lg: 0 8px 24px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06); --shadow-accent: 0 4px 16px rgba(37,99,235,.2); --nav-active-bg: rgba(37,99,235,.1); --nav-active-fg: #ffffff; --nav-active-bar: #3b82f6; --input-bg: #ffffff; --scrollbar-track: rgba(0,0,0,.04); --scrollbar-thumb: rgba(0,0,0,.18); --code-bg: #1e293b; --code-border: #334155; --code-text: #bae6fd; --login-bg: linear-gradient(160deg, #eff6ff 0%, #f4f6f8 60%); } /* 5. Blood Red */ [data-theme="blood"] { --bg: #0a0505; --bg-surface: #120808; --bg-elevated: #1a0c0c; --sidebar-bg: #0d0606; --sidebar-border: rgba(239,68,68,.12); --accent: #ef4444; --accent-hover: #f87171; --accent-glow: rgba(239,68,68,.28); --accent2: #f97316; --accent2-hover: #fb923c; --accent2-glow: rgba(249,115,22,.25); --text: #fef2f2; --text-muted: #6b4040; --text-faint: #2d1515; --border: rgba(239,68,68,.08); --border-strong: rgba(239,68,68,.18); --glass: rgba(239,68,68,.03); --glass-hover: rgba(239,68,68,.07); --success: #4ade80; --warning: #fbbf24; --danger: #dc2626; --info: #60a5fa; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(0,0,0,.6); --shadow-lg: 0 8px 32px rgba(0,0,0,.7); --shadow-accent: 0 4px 20px rgba(239,68,68,.25); --nav-active-bg: rgba(239,68,68,.1); --nav-active-fg: #f87171; --nav-active-bar: #ef4444; --input-bg: rgba(0,0,0,.4); --scrollbar-track: rgba(239,68,68,.04); --scrollbar-thumb: rgba(239,68,68,.18); --code-bg: #0a0303; --code-border: #2d0f0f; --code-text: #fecaca; --login-bg: radial-gradient(ellipse at 50% 0%, #1a0505 0%, #0a0505 60%); } /* -------------------------------------------------------------------------- TYPOGRAPHY SCALE & SPACING -------------------------------------------------------------------------- */ :root { --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 0.875rem; --r-xl: 1.25rem; --r-2xl: 1.75rem; --touch: 2.75rem; --sidebar-w: 264px; --header-h: 60px; --max-w: 1680px; /* Legacy aliases — keep older JS/HTML working */ --bg-dark: var(--bg); --accent-primary: var(--accent2); --accent-secondary:var(--accent); --text-primary: var(--text); --text-dim: var(--text-muted); --glass-bg: var(--glass); --glass-border: var(--border); --shadow-premium: var(--shadow-lg); --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-8: var(--sp-8); --space-10:var(--sp-10); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --touch-min: var(--touch); --sidebar-width: var(--sidebar-w); --header-height: var(--header-h); --content-max: var(--max-w); } /* -------------------------------------------------------------------------- RESET -------------------------------------------------------------------------- */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } img,svg { max-width:100%; height:auto; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* -------------------------------------------------------------------------- SCROLLBAR -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* -------------------------------------------------------------------------- UTILITY CLASSES -------------------------------------------------------------------------- */ .hidden { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .text-red { color: var(--danger); } .text-orange { color: var(--warning); } .text-cyan { color: var(--accent); } .text-dim { color: var(--text-muted); } .text-sm { font-size:.85rem; } .text-xs { font-size:.75rem; } .text-center { text-align:center; } .text-mono { font-family: var(--font-mono); } .flex { display:flex; } .flex-col { flex-direction:column; } .flex-wrap { flex-wrap:wrap; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } .justify-end { justify-content:flex-end; } .gap-2 { gap:var(--sp-2); } .gap-3 { gap:var(--sp-3); } .gap-4 { gap:var(--sp-4); } .p-4 { padding:var(--sp-6); } .mb-4 { margin-bottom:var(--sp-8); } .mt-4 { margin-top:var(--sp-6); } .mt-2 { margin-top:var(--sp-2); } .w-full { width:100%; } /* -------------------------------------------------------------------------- GLASS SURFACE -------------------------------------------------------------------------- */ .glass { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .glass > h3, .view-header-row > h3 { margin-bottom: var(--sp-4); font-size:1.05rem; font-weight:600; color: var(--text); } /* -------------------------------------------------------------------------- APP SHELL -------------------------------------------------------------------------- */ .app-container { display:flex; min-height:100vh; min-height:100dvh; width:100%; } .content { flex:1; min-width:0; padding: var(--sp-8); overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; background: var(--bg); } header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-10); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border); } h1 { font-size:clamp(1.3rem, 2.5vw, 1.65rem); font-weight:700; letter-spacing:-.4px; color: var(--text); } h2,h3 { letter-spacing:-.3px; color: var(--text); } .header-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; } .view { width:100%; min-width:0; } /* -------------------------------------------------------------------------- SIDEBAR -------------------------------------------------------------------------- */ .sidebar { width: var(--sidebar-w); flex-shrink:0; background: var(--sidebar-bg); border-right:1px solid var(--sidebar-border); display:flex; flex-direction:column; padding:var(--sp-6); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:1001; overflow-y: auto; } /* Logo */ .logo,.logo-small { display:flex; align-items:center; gap:var(--sp-3); } .logo { margin-bottom:var(--sp-8); } .logo-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background: var(--accent); border-radius: var(--r-md); color:#fff; flex-shrink:0; } .logo-text { font-weight:800; font-size:1.1rem; letter-spacing:-.4px; color: #ffffff; -webkit-text-fill-color: #ffffff; } .logo-version { font-size:.65rem; font-weight:600; color: var(--text-muted); letter-spacing:.05em; text-transform:uppercase; margin-top:-2px; } /* Nav */ nav { display:flex; flex-direction:column; gap:var(--sp-1); flex-grow:1; } .nav-section-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--text-muted); padding: var(--sp-4) var(--sp-4) var(--sp-2); margin-top: var(--sp-3); opacity:.55; } .nav-item { background:none; border:none; color: var(--text-muted); text-align:left; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); cursor:pointer; font-size:.88rem; font-weight:500; min-height: var(--touch); transition: background .15s, color .15s, border-color .15s; display:flex; align-items:center; gap: var(--sp-3); border-left:3px solid transparent; width:100%; } .nav-item:hover { background: var(--glass-hover); color: var(--text); } .nav-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight:600; border-left-color: var(--nav-active-bar); } .nav-icon { width:1rem; height:1rem; flex-shrink:0; opacity:.7; display:block; } .nav-item.active .nav-icon { opacity:1; } /* Sidebar footer */ .sidebar-footer { margin-top:auto; padding-top: var(--sp-4); border-top:1px solid var(--border); } .user-info { display:flex; flex-direction:column; gap:var(--sp-1); padding: var(--sp-3) var(--sp-3) var(--sp-1); border-radius: var(--r-md); background: var(--glass); border:1px solid var(--border); margin-bottom: var(--sp-3); } .user-info-row { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-2); } #current-user-name { font-size:.88rem; font-weight:600; color: var(--text); word-break:break-word; } .user-role-badge { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.12rem .45rem; border-radius:2rem; background: var(--accent-glow); color: var(--accent); border:1px solid var(--accent-glow); white-space:nowrap; } .status-indicator { display:flex; align-items:center; gap: var(--sp-2); font-size:.75rem; color: var(--text-muted); padding: var(--sp-2) var(--sp-3); } .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .dot.online { background:var(--success); box-shadow:0 0 6px var(--success); animation: pulse-dot 2.5s ease infinite; } @keyframes pulse-dot { 0%,100% { box-shadow:0 0 4px var(--success); } 50% { box-shadow:0 0 10px var(--success); } } /* Theme picker in sidebar */ .theme-picker { padding: var(--sp-3); background: var(--glass); border:1px solid var(--border); border-radius: var(--r-md); margin-top: var(--sp-3); } .theme-picker-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--text-muted); margin-bottom: var(--sp-2); display:block; } .theme-swatches { display:flex; gap: var(--sp-2); flex-wrap:wrap; } .theme-swatch { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition: transform .15s, border-color .15s; flex-shrink:0; background:none; padding:0; } .theme-swatch:hover { transform:scale(1.2); } .theme-swatch[data-active="true"] { border-color: var(--text); transform:scale(1.15); } .theme-swatch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:50%; } .swatch-cyber-dark { background: conic-gradient(#00d2ff 0%,#ff3e6c 50%,#080a10 50%); } .swatch-midnight { background: conic-gradient(#818cf8 0%,#f472b6 50%,#060810 50%); } .swatch-terminal { background: conic-gradient(#22c55e 0%,#84cc16 50%,#050905 50%); } .swatch-light { background: conic-gradient(#2d7a4f 0%,#4a8c6a 50%,#f5f7f5 50%); } .swatch-blood { background: conic-gradient(#ef4444 0%,#f97316 50%,#0a0505 50%); } /* Mobile nav header */ .mobile-nav-header { display:none; height: var(--header-h); padding:0 var(--sp-6); justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1002; flex-shrink:0; background: var(--sidebar-bg); border-bottom:1px solid var(--border); } .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:1000; } .hamburger { display:block; width:22px; height:2px; background:var(--text); position:relative; transition: background .2s; } .hamburger::before,.hamburger::after { content:''; position:absolute; width:22px; height:2px; background:var(--text); left:0; transition:transform .25s, top .25s, bottom .25s; } .hamburger::before { top:-7px; } .hamburger::after { bottom:-7px; } .mobile-menu-active .hamburger { background:transparent; } .mobile-menu-active .hamburger::before { transform:rotate(45deg); top:0; } .mobile-menu-active .hamburger::after { transform:rotate(-45deg); bottom:0; } /* -------------------------------------------------------------------------- STAT CARDS -------------------------------------------------------------------------- */ .stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,190px),1fr)); gap:var(--sp-5); margin-bottom:var(--sp-10); } .stat-card { padding:var(--sp-5) var(--sp-6); transition: box-shadow .2s, border-color .2s; position:relative; overflow:hidden; } .stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .stat-card h3 { font-size:.7rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:var(--sp-2); } .stat-value { font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; font-family: var(--font-mono); word-break:break-word; line-height:1.1; } .stat-card small { display:block; font-size:.75rem; color: var(--text-muted); margin-top:var(--sp-2); } /* -------------------------------------------------------------------------- TOOLS GRID -------------------------------------------------------------------------- */ .tools-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,210px),1fr)); gap:var(--sp-5); } .tools-grid .stat-card small { word-break:break-all; } /* -------------------------------------------------------------------------- CHARTS -------------------------------------------------------------------------- */ .charts-row { display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-6); min-width:0; } .chart-container { padding:var(--sp-6); position:relative; min-width:0; } .chart-canvas-wrap { position:relative; width:100%; height:clamp(220px,36vw,300px); max-height:300px; } .chart-canvas-wrap canvas { display:block; width:100% !important; height:100% !important; max-height:300px; } .chart-total-stat { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; z-index:1; } .chart-total-stat span { display:block; font-size:.8rem; color: var(--text-muted); } #stat-total-vulns { font-size:2rem; font-weight:800; color: var(--text); font-family: var(--font-mono); } .recent-activity { padding:var(--sp-6); min-height:320px; display:flex; flex-direction:column; min-width:0; } .activity-list { display:flex; flex-direction:column; gap:var(--sp-2); max-height:300px; overflow-y:auto; margin-top:var(--sp-4); } .activity-item { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background: var(--glass); border-radius: var(--r-md); border:1px solid var(--border); font-size:.88rem; transition: border-color .15s; } .activity-item:hover { border-color: var(--border-strong); } .activity-item small { display:block; color:var(--text-muted); font-size:.77rem; margin-top:var(--sp-1); word-break:break-word; } .activity-info p { margin:0; font-weight:500; color: var(--text); } /* -------------------------------------------------------------------------- WORKER STATUS BAR -------------------------------------------------------------------------- */ .worker-status-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4) var(--sp-8); padding:var(--sp-4) var(--sp-6); } .worker-stat { display:flex; align-items:center; gap:var(--sp-2); font-size:.88rem; color: var(--text-muted); } .worker-stat strong { color:var(--text); font-family:var(--font-mono); font-size:.95rem; } .worker-stat-icon { font-size:1rem; line-height:1; } /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ .btn-primary, .btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--touch); padding:var(--sp-3) var(--sp-5); border-radius:var(--r-md); font-weight:600; font-size:.88rem; cursor:pointer; white-space:nowrap; transition: opacity .15s, transform .15s, background .15s, box-shadow .15s; font-family:inherit; } .btn-primary { background: var(--accent); color:#fff; border:none; } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 14px var(--accent-glow); } .btn-secondary { background: var(--glass); color: var(--text); border:1px solid var(--border-strong); } .btn-secondary:hover { background: var(--glass-hover); border-color: var(--accent); } .btn-primary:focus-visible, .btn-secondary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .btn-sm { min-height:2.1rem; padding:var(--sp-2) var(--sp-3); font-size:.8rem; border-radius: var(--r-sm); } .btn-danger { background: var(--danger) !important; color:#fff !important; border-color:transparent !important; box-shadow: 0 2px 10px rgba(239,68,68,.3); } .btn-danger:hover { filter:brightness(1.1); } .btn-text-small { background:none; border:none; color:var(--accent); font-size:.82rem; font-weight:600; cursor:pointer; padding:var(--sp-2) var(--sp-3); min-height:var(--touch); border-radius:var(--r-sm); transition: color .15s, background .15s; font-family:inherit; } .btn-text-small:hover { color:var(--text); background: var(--glass); } .btn-icon { background:none; border:none; cursor:pointer; padding:var(--sp-3); min-width:var(--touch); min-height:var(--touch); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); border-radius:var(--r-md); transition: color .15s, background .15s; } .btn-icon:hover { color:var(--text); background:var(--glass); } .btn-icon:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } button:disabled,.btn-secondary:disabled,.btn-primary:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; } /* -------------------------------------------------------------------------- TABLES -------------------------------------------------------------------------- */ .table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } table { width:100%; min-width:540px; border-collapse:collapse; } thead tr { border-bottom:1px solid var(--border-strong); } th { text-align:left; padding:var(--sp-3) var(--sp-4); color: var(--text-muted); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; } td { padding:var(--sp-3) var(--sp-4); font-size:.88rem; border-bottom:1px solid var(--border); vertical-align:middle; word-break:break-word; color: var(--text); } tbody tr { transition: background .12s; } tbody tr:hover { background: var(--glass); } tbody tr:last-child td { border-bottom:none; } .cell-url { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .actions-cell { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; } /* -------------------------------------------------------------------------- FORMS -------------------------------------------------------------------------- */ .form-group { margin-bottom:var(--sp-5); width:100%; } .form-group label, .form-label-sm { display:block; margin-bottom:var(--sp-2); font-size:.8rem; color: var(--text-muted); font-weight:600; letter-spacing:.02em; } .form-field-narrow { width:5rem; flex-grow:0 !important; flex-shrink:0; } .form-group--submit { display:flex; align-items:flex-end; } input,select,textarea { width:100%; background: var(--input-bg); border:1px solid var(--border-strong); color:var(--text); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); font-size:.88rem; min-height:2.35rem; font-family:inherit; transition: border-color .15s, box-shadow .15s; appearance: auto; } input:focus,select:focus,textarea:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } input::placeholder { color: var(--text-muted); opacity:.6; } select option { background: var(--bg-elevated); color: var(--text); } .target-form { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-4); align-items:flex-end; } .target-form > input, .target-form > select, .target-form > button, .target-form > .form-group { flex:1 1 11rem; min-width:min(100%,10rem); } .target-form > button { flex:0 1 auto; } .target-form .form-group { margin-bottom:0; } .target-form .form-group--full { flex:1 1 100%; } .target-form--admin { align-items:stretch; } .target-form--admin .checkbox-label { flex:1 1 auto; min-width:8rem; } .checkbox-group { display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); padding:var(--sp-2) 0; } .checkbox-label { display:flex; align-items:center; gap:var(--sp-2); font-size:.88rem; color:var(--text); cursor:pointer; min-height:var(--touch); } .checkbox-label input[type="checkbox"] { width:1rem; height:1rem; min-height:auto; flex-shrink:0; cursor:pointer; accent-color: var(--accent); } /* -------------------------------------------------------------------------- VIEW CHROME -------------------------------------------------------------------------- */ .view-header-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-5); } .search-box { flex:1 1 200px; max-width:360px; min-width:0; } .search-box input { background: var(--input-bg); } .pagination { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-5) var(--sp-4) 0; margin-top:var(--sp-2); border-top:1px solid var(--border); } .pagination span { font-size:.82rem; color:var(--text-muted); } .pagination button:disabled { opacity:.35; cursor:not-allowed; } /* -------------------------------------------------------------------------- STATUS & BADGE -------------------------------------------------------------------------- */ /* Status badges — use semantic color vars, no hardcoded rgba */ .status-badge { padding:.2rem .6rem; border-radius:var(--r-sm); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; display:inline-block; border:1px solid transparent; } .status-badge.completed { background:rgba(16,185,129,.12); color:var(--success); border-color:rgba(16,185,129,.22); } .status-badge.running { background:rgba(59,130,246,.12); color:#60a5fa; border-color:rgba(59,130,246,.22); } .status-badge.failed { background:rgba(239,68,68,.12); color:var(--danger); border-color:rgba(239,68,68,.22); } .status-badge.pending { background:rgba(100,116,139,.1); color:var(--text-muted); border-color:rgba(100,116,139,.18); } .status-badge.cancelled { background:rgba(100,116,139,.08); color:#94a3b8; border-color:rgba(100,116,139,.14); } .status-badge.paused { background:rgba(245,158,11,.12); color:var(--warning); border-color:rgba(245,158,11,.22); } .status-badge.approved { background:rgba(16,185,129,.12); color:var(--success); border-color:rgba(16,185,129,.22); } .status-text { font-size:.78rem; color:var(--text-muted); text-transform:capitalize; flex-shrink:0; } .scan-type-badge { display:inline-block; font-size:.68rem; padding:.12rem .45rem; border-radius:2rem; background:var(--accent-glow); color:var(--accent); margin-left:var(--sp-2); vertical-align:middle; } /* -------------------------------------------------------------------------- MODAL — compact, professional -------------------------------------------------------------------------- */ .modal { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:2000; padding:var(--sp-4); overflow-y:auto; } .modal-content { width:100%; max-width:28rem; max-height:min(88dvh,720px); overflow-y:auto; padding:var(--sp-6); margin:auto; background: var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); animation: modal-in .18s ease; } @keyframes modal-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } .modal-content h2 { margin-bottom:var(--sp-4); font-size:1.05rem; font-weight:700; color:var(--text); letter-spacing:-.2px; } /* compact inputs inside modals */ .modal-content input, .modal-content select, .modal-box input, .modal-box select { min-height:2.1rem; padding:var(--sp-2) var(--sp-3); font-size:.85rem; } .modal-content .form-group, .modal-box .form-group { margin-bottom:var(--sp-3); } /* two-column row inside dialogs */ .dlg-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(7rem,1fr)); gap:0 var(--sp-3); } .modal-actions { display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); } .modal-actions .btn-primary, .modal-actions .btn-secondary { min-height:2.1rem; padding:var(--sp-2) var(--sp-4); font-size:.82rem; flex:0 0 auto; } /* Modal overlay variant (billing modals) */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:2500; padding:var(--sp-4); overflow-y:auto; } .modal-overlay.hidden { display:none !important; } .modal-box { width:100%; max-width:34rem; max-height:min(88dvh,760px); overflow-y:auto; padding:var(--sp-6); margin:auto; background: var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); animation: modal-in .18s ease; } .modal-box h3 { font-size:.95rem; font-weight:700; margin-bottom:var(--sp-4); color:var(--text); letter-spacing:-.15px; padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); } /* Scan modal tabs */ .target-selection-tabs { display:flex; gap:2px; background:var(--glass); padding:2px; border-radius:var(--r-sm); border:1px solid var(--border); margin-bottom:var(--sp-4); } .tab-btn { flex:1; background:none; border:none; color:var(--text-muted); padding:var(--sp-2) var(--sp-3); border-radius:calc(var(--r-sm) - 1px); cursor:pointer; font-size:.78rem; font-weight:600; min-height:1.9rem; transition:background .12s, color .12s; font-family:inherit; } .tab-btn.active { background:var(--accent-glow); color:var(--accent); } .tab-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } /* -------------------------------------------------------------------------- PROGRESS -------------------------------------------------------------------------- */ .progress-wrapper { display:flex; align-items:center; gap:var(--sp-2); min-width:0; width:100%; max-width:9rem; } .progress-container { flex:1; min-width:3rem; height:5px; background:var(--border); border-radius:3px; overflow:hidden; } .progress-bar { height:100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .4s ease; border-radius:3px; } .progress-text { font-size:.7rem; color:var(--text-muted); min-width:2rem; text-align:right; flex-shrink:0; font-family:var(--font-mono); } /* -------------------------------------------------------------------------- FINDINGS -------------------------------------------------------------------------- */ .findings-container { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); } .finding-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); position:relative; overflow:hidden; transition: border-color .15s; } .finding-card:hover { border-color: var(--border-strong); } .finding-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:2px 0 0 2px; } .severity-critical::before { background:var(--danger); } .severity-high::before { background:var(--warning); } .severity-medium::before { background:var(--accent); } .severity-low::before { background:var(--success); } .severity-info::before { background:var(--text-muted); } .module-sqli { border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.03); } .module-sqli::before { background:linear-gradient(180deg,var(--danger),var(--warning)); } .module-badge { display:inline-block; font-size:.65rem; font-weight:700; padding:.1rem .4rem; border-radius:2rem; vertical-align:middle; margin-left:.35rem; text-transform:uppercase; letter-spacing:.04em; } .module-badge-sqli { background:rgba(239,68,68,.15); color:var(--danger); border:1px solid rgba(239,68,68,.35); } .finding-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-3); } .finding-title { font-weight:600; font-size:1rem; color:var(--text); word-break:break-word; } .finding-badge { padding:.18rem .55rem; border-radius:2rem; font-size:.7rem; text-transform:uppercase; font-weight:700; flex-shrink:0; } .badge-critical,.finding-badge.badge-critical { background:rgba(239,68,68,.15); color:var(--danger); border:1px solid rgba(239,68,68,.25); } .badge-high,.finding-badge.badge-high { background:rgba(245,158,11,.15); color:var(--warning); border:1px solid rgba(245,158,11,.25); } .badge-medium,.finding-badge.badge-medium { background:var(--accent-glow); color:var(--accent); border:1px solid var(--accent-glow); } .badge-low,.finding-badge.badge-low { background:rgba(16,185,129,.15); color:var(--success); border:1px solid rgba(16,185,129,.25); } .badge-info,.finding-badge.badge-info { background:rgba(100,116,139,.15); color:var(--text-muted); border:1px solid rgba(100,116,139,.2); } .finding-desc { color:var(--text-muted); font-size:.9rem; line-height:1.6; margin-bottom:var(--sp-4); word-break:break-word; } .finding-meta { display:flex; flex-wrap:wrap; gap:var(--sp-4); font-size:.8rem; color:var(--text-muted); } /* -------------------------------------------------------------------------- SCAN DETAIL -------------------------------------------------------------------------- */ .scan-summary-info { display:block; color:var(--text); font-weight:500; word-break:break-word; } .scan-detail-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4); width:100%; } .scan-detail-header .scan-summary-info { flex:1 1 100%; } /* -------------------------------------------------------------------------- RECOMMENDATIONS -------------------------------------------------------------------------- */ .recommendations-section { margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--border); } .recommendations-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-5); } .recommendations-header h3 { margin:0; } .recommendations-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); } .recommendations-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr)); gap:var(--sp-4); } .rec-card { padding:var(--sp-5); border-radius:var(--r-lg); min-width:0; } .rec-card.rec-full-width { grid-column:1/-1; } .rec-card h4 { margin:0 0 var(--sp-3) 0; color:var(--accent); font-size:.88rem; text-transform:uppercase; letter-spacing:.04em; } .rec-body { color:var(--text-muted); font-size:.9rem; line-height:1.65; word-break:break-word; } .rec-body h1,.rec-body h2,.rec-body h3 { color:var(--text); margin-top:var(--sp-3); } .rec-body ul,.rec-body ol { padding-left:1.25rem; } .rec-body code { background:var(--glass); padding:.1rem .35rem; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.83em; word-break:break-all; border:1px solid var(--border); } .rec-status-badge { font-size:.7rem; padding:.18rem .55rem; border-radius:2rem; text-transform:uppercase; font-weight:700; } .rec-status-completed { background:rgba(16,185,129,.15); color:var(--success); } .rec-status-generating { background:rgba(59,130,246,.15); color:#60a5fa; } .rec-status-failed { background:rgba(239,68,68,.15); color:var(--danger); } .rec-status-pending { background:rgba(100,116,139,.15); color:var(--text-muted); } .rec-error { color:var(--danger); border:1px solid rgba(239,68,68,.25); } .ai-fix-card { background:var(--code-bg); border-left:3px solid var(--accent); position:relative; padding-top:var(--sp-6); } .ai-fix-card h4 { color:var(--accent); } .ai-fix-card .rec-content { background:var(--code-bg); color:var(--code-text); font-family:var(--font-mono); padding:var(--sp-4); border-radius:var(--r-sm); border:1px solid var(--code-border); white-space:pre-wrap; font-size:.83rem; max-height:400px; overflow-y:auto; word-break:break-word; } .copy-btn { position:absolute; top:var(--sp-4); right:var(--sp-4); background:var(--accent); color:#fff; border:none; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); font-size:.75rem; font-weight:600; cursor:pointer; min-height:2rem; z-index:10; transition:filter .15s; } .copy-btn:hover { filter:brightness(1.1); } .copy-btn.success { background:var(--success); } /* -------------------------------------------------------------------------- REPORT GENERATION -------------------------------------------------------------------------- */ .report-gen-controls { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-5); padding:var(--sp-4); background:var(--glass); border-radius:var(--r-md); border:1px solid var(--border); } .report-gen-controls select { flex:1 1 8rem; min-width:min(100%,8rem); } .report-gen-controls .btn-primary { flex:1 1 auto; } .report-gen-controls.report-gen-busy { opacity:.55; pointer-events:none; } .report-gen-loading { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); padding:var(--sp-4); background:var(--accent-glow); border:1px solid var(--border-strong); border-radius:var(--r-md); font-size:.9rem; } .report-gen-spinner { width:20px; height:20px; flex-shrink:0; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .75s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } #report-gen-btn.report-gen-btn-loading { position:relative; color:transparent; pointer-events:none; } #report-gen-btn.report-gen-btn-loading::after { content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; } /* -------------------------------------------------------------------------- BILLING -------------------------------------------------------------------------- */ .billing-plans-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,240px),1fr)); gap:var(--sp-5); padding-top:var(--sp-4); } .billing-plan-card { display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6); border-radius:var(--r-xl); transition:border-color .2s, transform .2s, box-shadow .2s; background:var(--glass); border:1px solid var(--border); } .billing-plan-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-accent); } .billing-plan-header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); } .billing-plan-header h4 { font-size:1rem; font-weight:700; color:var(--text); } .billing-plan-price { text-align:right; flex-shrink:0; } .billing-price-amount { font-size:1.5rem; font-weight:800; color:var(--accent); font-family:var(--font-mono); } .billing-price-period { font-size:.75rem; color:var(--text-muted); } .billing-price-alt { display:block; font-size:.72rem; color:var(--text-muted); margin-top:2px; } .billing-plan-desc { font-size:.88rem; line-height:1.5; color:var(--text-muted); } .billing-plan-features { list-style:none; display:flex; flex-direction:column; gap:var(--sp-2); font-size:.85rem; color:var(--text-muted); flex:1; } .billing-plan-features li { display:flex; align-items:flex-start; gap:var(--sp-2); } .billing-plan-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:auto; } /* -------------------------------------------------------------------------- LOGIN -------------------------------------------------------------------------- */ .login-overlay { position:fixed; inset:0; background: var(--login-bg); display:flex; align-items:center; justify-content:center; z-index:3000; padding:var(--sp-4); overflow-y:auto; } .login-card { width:100%; max-width:26rem; padding:clamp(1.5rem,5vw,2.5rem); text-align:center; background: var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--r-2xl); box-shadow: var(--shadow-lg), 0 0 80px var(--accent-glow); } .login-logo { width:52px; height:52px; display:flex; align-items:center; justify-content:center; background: var(--accent); border-radius:var(--r-xl); margin:0 auto var(--sp-4); box-shadow: 0 4px 16px var(--accent-glow); } .login-card h2 { font-size:clamp(1.3rem,4vw,1.75rem); margin-bottom:var(--sp-2); color:var(--text); font-weight:700; letter-spacing:-.4px; } .login-card > p { color:var(--text-muted); font-size:.88rem; margin-bottom:var(--sp-6); } .auth-tabs { display:flex; justify-content:center; gap:var(--sp-1); margin-bottom:var(--sp-6); background:var(--glass); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-1); } .auth-tab { flex:1; background:none; border:none; color:var(--text-muted); padding:var(--sp-2) var(--sp-3); font-size:.88rem; font-weight:600; cursor:pointer; min-height:2.25rem; border-radius:var(--r-sm); transition:background .15s, color .15s; font-family:inherit; } .auth-tab.active { background:var(--accent-glow); color:var(--accent); box-shadow:var(--shadow-sm); } .auth-tab:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .login-section-title { font-size:.8rem; color:var(--text-muted); margin-bottom:var(--sp-5); } /* -------------------------------------------------------------------------- USER ADMIN -------------------------------------------------------------------------- */ .admin-only.hidden { display:none !important; } /* -------------------------------------------------------------------------- NOTIFICATION TOAST -------------------------------------------------------------------------- */ #app-notification { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; padding:.75rem 1.25rem; border-radius:var(--r-lg); font-size:.88rem; font-weight:600; max-width:22rem; word-break:break-word; transition:opacity .3s, transform .3s; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.1); pointer-events:none; } /* -------------------------------------------------------------------------- PAGE LOADING OVERLAY -------------------------------------------------------------------------- */ #page-loader { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:5000; transition:opacity .4s; } .loader-ring { width:48px; height:48px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; } /* -------------------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width:992px) { .charts-row { grid-template-columns:1fr; } } @media (max-width:768px) { .app-container { flex-direction:column; } .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); box-shadow:10px 0 40px rgba(0,0,0,.6); } .sidebar.active { transform:translateX(0); } .sidebar-overlay.active { display:block; } .mobile-nav-header { display:flex; } .content { padding:var(--sp-4); } header { margin-bottom:var(--sp-6); } .header-actions .btn-primary { width:100%; } .modal-actions .btn-primary, .modal-actions .btn-secondary { flex:1 1 100%; } th,td { padding:var(--sp-3) var(--sp-3); font-size:.8rem; } table { min-width:460px; } .actions-cell .btn-secondary, .actions-cell .btn-primary { font-size:.75rem; padding:var(--sp-2) var(--sp-3); min-height:2rem; } .progress-wrapper { max-width:6rem; } .scan-detail-header { flex-direction:column; align-items:stretch; } .scan-detail-header .btn-secondary { width:100%; } } @media (max-width:480px) { .content { padding:var(--sp-3); } .p-4 { padding:var(--sp-4); } .stat-card { padding:var(--sp-4); } .checkbox-group { flex-direction:column; gap:var(--sp-2); } .auth-tabs { gap:var(--sp-1); } .target-form > input, .target-form > select, .target-form > button { flex:1 1 100%; } .stats-grid { gap:var(--sp-3); margin-bottom:var(--sp-6); } .billing-plans-grid { grid-template-columns:1fr; } } @media (min-width:640px) { .scan-detail-header .scan-summary-info { flex:1 1 auto; margin-left:var(--sp-4); } } @media (min-width:1024px) { .content { padding: var(--sp-8) clamp(var(--sp-6),3vw,var(--sp-12)); } } @media (min-width:1366px) { .charts-row,.stats-grid { gap:var(--sp-8); } } @media (min-width:1920px) { .content { max-width:var(--max-w); margin-inline:auto; width:100%; } .sidebar { position:sticky; top:0; height:100dvh; align-self:flex-start; } } @media (min-width:2560px) { :root { --max-w:1920px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* -------------------------------------------------------------------------- LIGHT THEME OVERRIDES -------------------------------------------------------------------------- */ [data-theme="light"] body { background:var(--bg); color:var(--text); } [data-theme="light"] .sidebar { background:var(--sidebar-bg); border-right-color:rgba(255,255,255,.08); } [data-theme="light"] .nav-section-label { color:rgba(255,255,255,.28); } [data-theme="light"] .nav-item { color:rgba(255,255,255,.55); border-left-color:transparent; } [data-theme="light"] .nav-item:hover { background:rgba(255,255,255,.08); color:#fff; } [data-theme="light"] .nav-item.active { background:rgba(255,255,255,.12); color:#fff; border-left-color:var(--nav-active-bar); } [data-theme="light"] .logo-text { color:#fff; -webkit-text-fill-color:#fff; } [data-theme="light"] .logo-icon { background:#2563eb; } [data-theme="light"] .logo-version { color:rgba(255,255,255,.38); } [data-theme="light"] .user-info { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); } [data-theme="light"] #current-user-name { color:#fff; } [data-theme="light"] .user-role-badge { background:rgba(59,130,246,.25); color:#93c5fd; border-color:rgba(59,130,246,.3); } [data-theme="light"] .btn-text-small { color:#93c5fd; } [data-theme="light"] .btn-text-small:hover { color:#fff; background:rgba(255,255,255,.08); } [data-theme="light"] .status-indicator { color:rgba(255,255,255,.38); } [data-theme="light"] .dot.online { background:#4ade80; box-shadow:0 0 6px #4ade80; } [data-theme="light"] .theme-picker { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); } [data-theme="light"] .theme-picker-label { color:rgba(255,255,255,.38); } [data-theme="light"] .sidebar-footer { border-top-color:rgba(255,255,255,.08); } [data-theme="light"] .mobile-nav-header { background:var(--sidebar-bg); border-bottom-color:rgba(255,255,255,.08); } [data-theme="light"] .hamburger, [data-theme="light"] .hamburger::before, [data-theme="light"] .hamburger::after { background:rgba(255,255,255,.8); } [data-theme="light"] .glass { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); } [data-theme="light"] header { border-bottom-color:rgba(0,0,0,.09); } [data-theme="light"] thead tr { border-bottom-color:rgba(0,0,0,.12); } [data-theme="light"] th { color:#6b7280; } [data-theme="light"] td { color:var(--text); border-bottom-color:rgba(0,0,0,.06); } [data-theme="light"] tbody tr:hover { background:#f8fafc; } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background:#fff; color:var(--text); border-color:rgba(0,0,0,.15); } [data-theme="light"] input::placeholder { color:#9ca3af; opacity:1; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); } [data-theme="light"] select option { background:#fff; color:var(--text); } [data-theme="light"] .btn-primary { background:linear-gradient(135deg,#2563eb,#3b82f6); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.3); } [data-theme="light"] .btn-secondary { background:#fff; color:var(--text); border-color:rgba(0,0,0,.15); } [data-theme="light"] .btn-secondary:hover { background:#f8fafc; border-color:rgba(0,0,0,.22); } [data-theme="light"] .modal { background:rgba(15,23,42,.5); } [data-theme="light"] .modal-content, [data-theme="light"] .modal-box { background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 20px 60px rgba(0,0,0,.15); } [data-theme="light"] .modal-actions { border-top-color:rgba(0,0,0,.08); } [data-theme="light"] .target-selection-tabs { background:#f4f6f8; border-color:rgba(0,0,0,.1); } [data-theme="light"] .tab-btn { color:#6b7280; } [data-theme="light"] .tab-btn.active { background:rgba(37,99,235,.1); color:#2563eb; } [data-theme="light"] .status-badge.completed { background:rgba(22,163,74,.1); color:#15803d; border-color:rgba(22,163,74,.2); } [data-theme="light"] .status-badge.running { background:rgba(37,99,235,.1); color:#2563eb; border-color:rgba(37,99,235,.2); } [data-theme="light"] .status-badge.failed { background:rgba(220,38,38,.1); color:#dc2626; border-color:rgba(220,38,38,.2); } [data-theme="light"] .status-badge.pending { background:rgba(107,114,128,.1); color:#4b5563; border-color:rgba(107,114,128,.2); } [data-theme="light"] .status-badge.paused { background:rgba(217,119,6,.1); color:#d97706; border-color:rgba(217,119,6,.2); } [data-theme="light"] .status-badge.cancelled { background:rgba(107,114,128,.08); color:#6b7280; border-color:rgba(107,114,128,.15); } [data-theme="light"] .finding-card { background:#fff; border-color:rgba(0,0,0,.09); } [data-theme="light"] .finding-card:hover { border-color:rgba(0,0,0,.18); box-shadow:0 2px 8px rgba(0,0,0,.06); } [data-theme="light"] .finding-title { color:var(--text); } [data-theme="light"] .finding-desc { color:#4b5563; } [data-theme="light"] .finding-meta { color:#9ca3af; } [data-theme="light"] .severity-critical::before { background:#dc2626; } [data-theme="light"] .severity-high::before { background:#ea580c; } [data-theme="light"] .severity-medium::before { background:#ca8a04; } [data-theme="light"] .severity-low::before { background:#16a34a; } [data-theme="light"] .severity-info::before { background:#9ca3af; } [data-theme="light"] .badge-critical { background:rgba(220,38,38,.08); color:#b91c1c; border-color:rgba(220,38,38,.2); } [data-theme="light"] .badge-high { background:rgba(234,88,12,.08); color:#c2410c; border-color:rgba(234,88,12,.2); } [data-theme="light"] .badge-medium { background:rgba(202,138,4,.1); color:#a16207; border-color:rgba(202,138,4,.2); } [data-theme="light"] .badge-low { background:rgba(22,163,74,.08); color:#15803d; border-color:rgba(22,163,74,.2); } [data-theme="light"] .badge-info { background:rgba(2,132,199,.08); color:#0369a1; border-color:rgba(2,132,199,.18); } [data-theme="light"] .rec-card { background:#fff; border-color:rgba(0,0,0,.09); } [data-theme="light"] .rec-card h4 { color:#2563eb; } [data-theme="light"] .rec-body { color:#4b5563; } [data-theme="light"] .rec-body h1, [data-theme="light"] .rec-body h2, [data-theme="light"] .rec-body h3 { color:var(--text); } [data-theme="light"] .rec-body code { background:#f1f5f9; color:#0f172a; border-color:rgba(0,0,0,.1); } [data-theme="light"] .rec-status-generating { color:#2563eb; background:rgba(37,99,235,.1); } [data-theme="light"] .ai-fix-card { background:#1e293b; border-left-color:#3b82f6; } [data-theme="light"] .ai-fix-card h4 { color:#93c5fd; } [data-theme="light"] .ai-fix-card .rec-content { background:#0f172a; color:#bae6fd; border-color:#334155; } [data-theme="light"] .worker-status-bar { background:#fff; border-color:rgba(0,0,0,.09); } [data-theme="light"] .activity-item { background:#f8fafc; border-color:rgba(0,0,0,.08); } [data-theme="light"] .activity-item:hover { border-color:rgba(0,0,0,.15); } [data-theme="light"] .activity-info p { color:var(--text); } [data-theme="light"] .pagination { border-top-color:rgba(0,0,0,.09); } [data-theme="light"] .progress-container { background:rgba(0,0,0,.08); } [data-theme="light"] .progress-bar { background:linear-gradient(90deg,#2563eb,#3b82f6); } [data-theme="light"] .report-gen-controls { background:#f8fafc; border-color:rgba(0,0,0,.09); } [data-theme="light"] .report-gen-loading { background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.2); } [data-theme="light"] .scan-type-badge { background:rgba(37,99,235,.1); color:#2563eb; } [data-theme="light"] .billing-plan-card { background:#fff; border-color:rgba(0,0,0,.09); } [data-theme="light"] .billing-plan-card:hover { border-color:#2563eb; box-shadow:0 4px 16px rgba(37,99,235,.12); } [data-theme="light"] .billing-price-amount { color:#2563eb; } [data-theme="light"] #app-notification { border-color:rgba(0,0,0,.12); } /* ---- Shared inner container -------------------------------------------- */ .pub-section-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); } /* ---- NAVBAR ------------------------------------------------------------ */ .pub-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 4rem); background: rgba(7, 12, 10, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.06); } .pub-nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .pub-nav-icon-wrap { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); border-radius: 8px; font-size: 1rem; line-height: 1; box-shadow: 0 0 12px var(--accent-glow); flex-shrink: 0; } .pub-nav-brand { font-size: 1rem; font-weight: 800; letter-spacing: -0.3px; color: var(--text); } .pub-nav-brand-dim { color: var(--text-muted); font-weight: 500; } /* All nav items on the right in one row */ .pub-nav-right { display: flex; align-items: center; gap: 0.15rem; } .pub-nav-link { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: var(--r-md); text-decoration: none; white-space: nowrap; transition: color 0.15s, background 0.15s; } .pub-nav-link:hover { color: var(--text); background: var(--glass); } /* Thin vertical divider between links and Sign In */ .pub-nav-divider { width: 1px; height: 20px; background: var(--border-strong); margin: 0 0.5rem; flex-shrink: 0; } /* Sign In button */ .pub-signin-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1.05rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--glass); color: var(--text); font-family: var(--font-sans); font-size: 0.845rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; overflow: hidden; transition: border-color 0.18s, box-shadow 0.18s, color 0.18s; } .pub-signin-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); opacity: 0; transition: opacity 0.2s; } .pub-signin-btn:hover { border-color: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent-glow), 0 4px 16px var(--accent-glow); } .pub-signin-btn:hover::after { opacity: 1; } .pub-signin-btn:active { transform: scale(0.98); } .pub-signin-btn > * { position: relative; z-index: 1; } .pub-signin-icon { width: 13px; height: 13px; flex-shrink: 0; } /* Hamburger (hidden on desktop) */ .pub-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--r-md); transition: background 0.15s; flex-shrink: 0; } .pub-hamburger:hover { background: var(--glass); } .pub-hamburger span { display: block; width: 100%; height: 2px; background: var(--text-muted); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; } .pub-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pub-hamburger--open span:nth-child(2) { opacity: 0; } .pub-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile: collapse nav-right, show hamburger */ @media (max-width: 768px) { .pub-hamburger { display: flex; } .pub-nav-right { display: none; position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.75rem 1rem 1.25rem; background: rgba(7, 12, 10, 0.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); z-index: 499; } .pub-nav-right--open { display: flex; } .pub-nav-link { padding: 0.85rem 1rem; font-size: 0.95rem; border-radius: var(--r-md); } .pub-nav-divider { width: 100%; height: 1px; margin: 0.5rem 0; } .pub-signin-btn { margin-top: 0.25rem; justify-content: center; padding: 0.75rem 1rem; } } .pub-hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(64px + 4rem) 0 5rem; overflow: hidden; } .pub-hero .pub-section-inner { position: relative; z-index: 1; } .pub-hero-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: min(900px, 120vw); height: min(600px, 80vw); background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 65%); pointer-events: none; opacity: .6; } .pub-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-strong); background: var(--glass); padding: 0.3rem 0.85rem; border-radius: 2rem; margin-bottom: 1.75rem; } .pub-hero-title { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -2px; color: var(--text); margin-bottom: 1.5rem; max-width: 760px; } .pub-hero-accent { background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pub-hero-sub { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-muted); line-height: 1.75; max-width: 580px; margin-bottom: 2.5rem; } .pub-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } /* Primary CTA button */ .pub-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.75rem; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color: #fff; border: none; border-radius: var(--r-md); font-family: var(--font-sans); font-size: 0.925rem; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 20px var(--accent-glow); transition: filter 0.18s, transform 0.15s, box-shadow 0.18s; } .pub-btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 28px var(--accent-glow); } .pub-btn-primary:active { transform: translateY(0); filter: brightness(1); } /* Ghost button */ .pub-btn-ghost { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1.5rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-family: var(--font-sans); font-size: 0.925rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; } .pub-btn-ghost:hover { color: var(--text); border-color: var(--accent); background: var(--glass); } /* ---- STATS STRIP ------------------------------------------------------- */ .pub-stats-strip { width: 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--glass); padding: 2rem 0; } .pub-stats-inner { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 2rem 1rem; } .pub-stat { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; } .pub-stat-n { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; font-family: var(--font-mono); color: var(--accent); line-height: 1; } .pub-stat-l { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; } .pub-stat-div { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; } /* ---- SECTIONS ---------------------------------------------------------- */ .pub-section { width: 100%; padding: 5rem 0; } .pub-section--alt { background: var(--glass); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pub-section-header { text-align: center; margin-bottom: 3.5rem; } .pub-section-label { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .pub-section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.8px; color: var(--text); max-width: 640px; margin: 0 auto; line-height: 1.2; } /* ---- FEATURES GRID ----------------------------------------------------- */ .pub-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pub-feat-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-xl); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .pub-feat-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-accent); } .pub-feat-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.25rem; } .pub-feat-icon--accent { color: var(--accent); } .pub-feat-icon--danger { color: var(--danger); } .pub-feat-icon--warn { color: var(--warning); } .pub-feat-icon--success { color: var(--success); } .pub-feat-card h3 { font-size: 0.975rem; font-weight: 700; color: var(--text); margin: 0; } .pub-feat-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; margin: 0; } .pub-feat-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; padding: 0; margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); } .pub-feat-card li { font-size: 0.82rem; color: var(--text-muted); padding-left: 1rem; position: relative; } .pub-feat-card li::before { content: '›'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* ---- TOOLS GRID -------------------------------------------------------- */ .pub-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .pub-tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 1.25rem 1.25rem 1.1rem; background: var(--bg-surface, var(--bg)); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color 0.18s, box-shadow 0.18s; } .pub-tool-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); } .pub-tool-icon { font-size: 0.4rem; color: var(--accent); margin-bottom: 0.25rem; display: block; } .pub-tool-name { font-size: 0.92rem; font-weight: 700; color: var(--text); font-family: var(--font-mono); } .pub-tool-desc { font-size: 0.78rem; color: var(--text-muted); } /* ---- COMPLIANCE GRID --------------------------------------------------- */ .pub-compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; } .pub-compliance-card { padding: 1.75rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 0.75rem; } .pub-compliance-icon { font-size: 0.5rem; color: var(--success); letter-spacing: -0.1em; margin-bottom: 0.2rem; } .pub-compliance-card h3 { font-size: 0.975rem; font-weight: 700; color: var(--text); margin: 0; } .pub-compliance-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; margin: 0; } /* Disclaimer bar */ .pub-disclaimer { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 1.4rem; background: rgba(255, 179, 0, 0.05); border: 1px solid rgba(255, 179, 0, 0.22); border-radius: var(--r-lg); } .pub-disclaimer svg { flex-shrink: 0; margin-top: 2px; color: var(--warning); } .pub-disclaimer p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; margin: 0; } .pub-disclaimer strong { color: var(--warning); } /* ---- FOOTER CTA -------------------------------------------------------- */ .pub-footer-cta { background: linear-gradient(135deg, rgba(0,210,120,.07) 0%, rgba(0,184,160,.04) 100%); border-top: 1px solid var(--border); padding: 4rem 0; } .pub-footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .pub-footer-cta-title { font-size: clamp(1.3rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.5px; color: var(--text); margin-bottom: 0.5rem; } .pub-footer-cta-sub { font-size: 0.9rem; color: var(--text-muted); margin: 0; } /* ---- SITE FOOTER ------------------------------------------------------- */ .pub-footer { border-top: 1px solid var(--border); padding: 1.5rem 0; background: var(--bg); } .pub-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pub-footer-brand { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); letter-spacing: -0.2px; } .pub-footer-copy { font-size: 0.8rem; color: var(--text-faint, var(--text-muted)); } /* ---- RESPONSIVE -------------------------------------------------------- */ @media (max-width: 1024px) { .pub-features-grid { grid-template-columns: repeat(2, 1fr); } .pub-tools-grid { grid-template-columns: repeat(3, 1fr); } .pub-compliance-grid { grid-template-columns: repeat(2, 1fr); } .pub-stat-div { display: none; } } @media (max-width: 768px) { /* Hamburger visible, nav links hidden by default */ .pub-hamburger { display: flex; } .pub-nav-links { display: none; position: fixed; top: 64px; left: 0; right: 0; background: rgba(7,12,10,0.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1rem 1rem; z-index: 499; } .pub-nav-links--open { display: flex; } .pub-nav-link { padding: 0.85rem 1rem; font-size: 1rem; border-radius: var(--r-md); } .pub-hero { min-height: auto; padding: calc(64px + 3rem) 0 3.5rem; } .pub-hero-title { letter-spacing: -1px; } .pub-features-grid { grid-template-columns: 1fr; } .pub-tools-grid { grid-template-columns: repeat(2, 1fr); } .pub-compliance-grid { grid-template-columns: 1fr; } .pub-footer-cta-inner { flex-direction: column; align-items: flex-start; } .pub-section { padding: 3.5rem 0; } .pub-section-header { margin-bottom: 2.5rem; } } @media (max-width: 480px) { .pub-tools-grid { grid-template-columns: repeat(2, 1fr); } .pub-hero-cta { flex-direction: column; align-items: stretch; } .pub-btn-primary, .pub-btn-ghost { justify-content: center; } .pub-stats-inner { gap: 1.5rem; } .pub-stat-n { font-size: 1.8rem; } } /* Light theme — AI Fix Agent card readability */ [data-theme="light"] .ai-fix-card { background: #f6fdf8; border-left-color: var(--accent); } [data-theme="light"] .ai-fix-card h4 { color: var(--accent); } [data-theme="light"] .ai-fix-card .rec-content { background: #14532d; color: #dcfce7; border-color: #166534; } [data-theme="light"] .rec-card h4 { color: var(--accent); } [data-theme="light"] .rec-body { color: var(--text-muted); } [data-theme="light"] .rec-body h1, [data-theme="light"] .rec-body h2, [data-theme="light"] .rec-body h3 { color: var(--text); } [data-theme="light"] .rec-body code { background: #dcfce7; color: #14532d; border-color: #86efac; } [data-theme="light"] .rec-status-generating { color: #0d9488; background: rgba(13,148,136,.12); }