/* ============================================================ CYBERCORE PENTEST DASHBOARD — STYLE.CSS v11.0 Clean Light Security Interface | CyberCore Edition ============================================================ */ /* ══════════════════════════════════════════════════════════ CSS VARIABLES ══════════════════════════════════════════════════════════ */ :root { --sidebar-w: 230px; --topbar-h: 56px; /* Core backgrounds */ --bg-base: #f2f5fa; --bg-primary: #ecf1f8; --bg-secondary: #e3e9f3; --bg-tertiary: #d8e1ee; --bg-terminal: #ffffff; --bg-card: #ffffff; --bg-hover: #eef3fb; --bg-glass: rgba(255,255,255,.88); /* Accent palette — deepened for contrast on light surfaces */ --accent-green: #0a8a3e; --accent-cyan: #0089ad; --accent-blue: #2563eb; --accent-purple: #7c3aed; --accent-gold: #a6790a; --accent-red: #dc2626; --accent-teal: #0f8a99; /* Status */ --status-success: #0a8a3e; --status-warning: #c2740a; --status-error: #dc2626; --status-info: #0284c7; --status-critical: #b91c1c; /* Text */ --text-primary: #1c2733; --text-secondary: #46566b; --text-muted: #7c8aa0; --text-bright: #0a0f1a; /* Borders */ --border-primary: #d8e0ec; --border-accent: #c2cee2; --border-subtle: #e8edf5; --border-glow: rgba(10,138,62,.22); /* Shadows — soft cool-gray */ --shadow-sm: 0 2px 10px rgba(30,41,59,.08); --shadow-md: 0 6px 24px rgba(30,41,59,.12); --shadow-lg: 0 12px 40px rgba(30,41,59,.16); --shadow-xl: 0 20px 60px rgba(30,41,59,.20); /* Glows — faint; a neon halo reads as a mistake on a light surface */ --glow-green: 0 0 10px rgba(10,138,62,.18); --glow-blue: 0 0 10px rgba(37,99,235,.18); --glow-cyan: 0 0 10px rgba(0,137,173,.16); --glow-red: 0 0 10px rgba(220,38,38,.18); --glow-gold: 0 0 10px rgba(166,121,10,.16); --glow-purple: 0 0 10px rgba(124,58,237,.16); /* Transitions */ --t-fast: 0.1s ease; --t-normal: 0.22s ease; --t-slow: 0.42s ease; /* Typography */ --font-ui: 'Fira Code', 'Consolas', 'Monaco', monospace; --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace; --font-code: 'Fira Code', 'Consolas', 'Monaco', monospace; color-scheme: light; } /* ══════════════════════════════════════════════════════════ DARK THEME — token overrides Applied via . This is the original "hacker terminal" palette; toggled at runtime (see the script in and the topbar theme button), default is light. ══════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; /* Core backgrounds */ --bg-base: #030810; --bg-primary: #070e18; --bg-secondary: #0c1422; --bg-tertiary: #101e2e; --bg-terminal: #040810; --bg-card: #090f1a; --bg-hover: #131f30; --bg-glass: rgba(9,15,26,.82); /* Accent palette */ --accent-green: #00ff41; --accent-cyan: #00d9ff; --accent-blue: #58a6ff; --accent-purple: #9370db; --accent-gold: #ffd700; --accent-red: #ff4444; --accent-teal: #00bcd4; /* Status */ --status-success: #00ff41; --status-warning: #ffa500; --status-error: #ff4444; --status-info: #00bfff; --status-critical: #ff0000; /* Text */ --text-primary: #d4dde8; --text-secondary: #a8bfd4; --text-muted: #6090b8; --text-bright: #ffffff; /* Borders */ --border-primary: #1e2d42; --border-accent: #253650; --border-subtle: #152030; --border-glow: rgba(0,255,65,.25); /* Shadows */ --shadow-sm: 0 2px 10px rgba(0,0,0,.7); --shadow-md: 0 6px 24px rgba(0,0,0,.8); --shadow-lg: 0 12px 40px rgba(0,0,0,.9); --shadow-xl: 0 20px 60px rgba(0,0,0,.95); /* Glows */ --glow-green: 0 0 18px rgba(0,255,65,.35); --glow-blue: 0 0 18px rgba(88,166,255,.35); --glow-cyan: 0 0 18px rgba(0,217,255,.3); --glow-red: 0 0 18px rgba(255,68,68,.35); --glow-gold: 0 0 18px rgba(255,215,0,.3); --glow-purple: 0 0 18px rgba(147,112,219,.3); } /* Flatten neon text-shadow glows — a flat, professional look for the light UI only; dark mode keeps its neon glow signature (pulse-glow, terminal-title, etc). The live scan console (.terminal-section / .fullscreen-overlay / AI report code blocks) stays a dark "console" surface in BOTH themes by design — see the scoped variable re-darkening further down — so its syntax colours stay legible regardless of the app-wide theme. */ :root:not([data-theme="dark"]) * { text-shadow: none !important; } body { transition: background-color .2s ease, color .2s ease; } /* ══════════════════════════════════════════════════════════ RESET ══════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* CRT grid texture */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,255,65,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,65,.012) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } /* Ambient corner glow */ body::after { content: ''; position: fixed; top: -200px; left: -200px; width: 600px; height: 600px; background: radial-gradient(ellipse at center, rgba(0,255,65,.03) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ══════════════════════════════════════════════════════════ APP SHELL ══════════════════════════════════════════════════════════ */ .app-shell { display: flex; height: 100vh; overflow: hidden; position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════ */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, #0c1422 0%, #070e18 100%); border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; z-index: 100; transition: width var(--t-normal); box-shadow: 4px 0 28px rgba(0,0,0,.6); } /* Animated shimmer line at top */ .sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent-green) 30%, var(--accent-cyan) 60%, transparent 100%); background-size: 200% 100%; animation: shimmer-line 4s linear infinite; opacity: .9; z-index: 2; } @keyframes shimmer-line { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Brand */ .sidebar-brand { padding: 20px 18px 16px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .sidebar-brand-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #eafff1, #dcf6e4); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--accent-green); flex-shrink: 0; box-shadow: var(--glow-green), inset 0 1px 0 rgba(255,255,255,.5); position: relative; overflow: hidden; border: 1px solid rgba(10,138,62,.3); } .brand-icon::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(135deg, rgba(10,138,62,.08) 0%, transparent 60%); pointer-events: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; } .brand-name { font-size: 13.5px; font-weight: 700; color: var(--accent-green); letter-spacing: 2px; font-family: var(--font-mono); white-space: nowrap; text-shadow: 0 0 20px rgba(0,255,65,.5); animation: pulse-glow 3s ease infinite; } @keyframes pulse-glow { 0%,100% { text-shadow: 0 0 8px rgba(0,255,65,.4); } 50% { text-shadow: 0 0 20px rgba(0,255,65,.7); } } .brand-sub { font-size: 9.5px; color: var(--accent-cyan); font-family: var(--font-mono); white-space: nowrap; letter-spacing: .3px; } /* Nav */ .sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; overflow-x: hidden; } .sidebar-nav::-webkit-scrollbar { width: 3px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 2px; } .nav-section-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent-cyan); padding: 14px 12px 6px; font-family: var(--font-mono); white-space: nowrap; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 8px; cursor: pointer; transition: all var(--t-normal); color: var(--text-primary); font-size: 12.5px; font-weight: 500; position: relative; user-select: none; border: 1px solid transparent; margin-bottom: 2px; white-space: nowrap; overflow: hidden; } .nav-item i { width: 17px; font-size: 13px; flex-shrink: 0; transition: all var(--t-normal); opacity: .9; } .nav-item:hover { background: rgba(0,255,65,.06); color: var(--accent-green); border-color: rgba(0,255,65,.15); } .nav-item:hover i { transform: scale(1.12); opacity: 1; color: var(--accent-green); } .nav-item.active { background: linear-gradient(90deg, rgba(0,255,65,.12), rgba(0,255,65,.04)); color: var(--accent-green); border-color: rgba(0,255,65,.25); font-weight: 600; box-shadow: inset 0 0 20px rgba(0,255,65,.05); } .nav-item.active i { color: var(--accent-green); opacity: 1; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 20%; width: 3px; height: 60%; background: linear-gradient(180deg, var(--accent-green), var(--accent-cyan)); border-radius: 0 3px 3px 0; box-shadow: var(--glow-green); } .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav-badge { margin-left: auto; background: var(--status-error); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; font-family: var(--font-mono); flex-shrink: 0; animation: pulse-badge 2.5s infinite; box-shadow: var(--glow-red); } .nav-badge.hidden { display: none !important; } @keyframes pulse-badge { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.1); } } /* Sidebar footer */ .sidebar-footer { padding: 14px 12px 18px; border-top: 1px solid var(--border-primary); flex-shrink: 0; } .status-pill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-tertiary); border-radius: 7px; border: 1px solid rgba(0,255,65,.18); transition: border-color var(--t-normal); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 10px var(--status-success); flex-shrink: 0; animation: dot-pulse 2.2s infinite; transition: background .3s ease, box-shadow .3s ease; } @keyframes dot-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 10px var(--status-success); } 50% { opacity: .5; box-shadow: 0 0 4px var(--status-success); } } .status-pill span { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; transition: color var(--t-normal); } /* Logout button */ .logout-btn { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background: transparent; border: 1px solid rgba(255,61,87,.2); border-radius: 7px; color: #a0c8e0; font-family: var(--font-mono); font-size: 11px; text-decoration: none; cursor: pointer; transition: all .2s; width: 100%; } .logout-btn:hover { background: rgba(255,61,87,.08); border-color: rgba(255,61,87,.5); color: #ff3d57; } .logout-btn i { font-size: 12px; } /* ══════════════════════════════════════════════════════════ MAIN CONTENT ══════════════════════════════════════════════════════════ */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* ── Topbar ── */ .topbar { height: var(--topbar-h); background: linear-gradient(90deg, #0c1628 0%, #080f1e 100%); border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; padding: 0 28px; flex-shrink: 0; gap: 14px; box-shadow: 0 2px 20px rgba(0,0,0,.5); position: relative; } .topbar::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,255,65,.3), transparent); opacity: .6; } .topbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .topbar-breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); display: flex; align-items: center; gap: 7px; white-space: nowrap; } .topbar-breadcrumb i { color: var(--accent-green); } .topbar-breadcrumb .sep { color: var(--text-muted); opacity: .6; } .topbar-breadcrumb .current { color: var(--accent-green); font-weight: 600; letter-spacing: .3px; text-shadow: 0 0 12px rgba(0,255,65,.3); } .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .topbar-tag { font-family: var(--font-mono); font-size: 10px; padding: 4px 10px; border-radius: 5px; background: rgba(0,255,65,.1); border: 1px solid rgba(0,255,65,.3); color: var(--accent-green); white-space: nowrap; letter-spacing: .3px; transition: all var(--t-normal); font-weight: 600; text-shadow: 0 0 8px rgba(0,255,65,.3); } .topbar-tag.hidden { display: none; } /* Theme toggle — deliberately `position: fixed` and outside the topbar's flexbox flow, so it can never be hidden by a topbar layout/overflow issue. Same mechanism/markup as the login page's toggle. */ .theme-toggle-fixed { position: fixed; top: 12px; right: 20px; z-index: 500; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: all var(--t-normal); } .theme-toggle-fixed:hover { color: var(--accent-green); border-color: rgba(10,138,62,.35); } /* Live badge */ #live-badge { display: none; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; padding: 4px 10px; border-radius: 5px; background: rgba(0,255,65,.1); border: 1px solid rgba(0,255,65,.3); color: var(--accent-green); animation: pulse-status 1.2s infinite; } #live-badge.active { display: flex; } #live-badge .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); } /* Page scrollable area */ .page-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 30px 36px; background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-base) 100%); } .page-area::-webkit-scrollbar { width: 6px; } .page-area::-webkit-scrollbar-track { background: var(--bg-primary); } .page-area::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 3px; } .page-area::-webkit-scrollbar-thumb:hover { background: var(--accent-green); box-shadow: var(--glow-green); } /* Tab pages */ .tab-page { display: none; } .tab-page.active { display: block; animation: fadeInPage .28s cubic-bezier(.22,.68,0,1.2); } @keyframes fadeInPage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Page Header ── */ .page-header { margin-bottom: 28px; } .page-header h1 { font-size: 20px; font-weight: 700; color: var(--text-bright); display: flex; align-items: center; gap: 11px; margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: .5px; text-shadow: 0 0 30px rgba(255,255,255,.08); } .page-header h1 i { color: var(--accent-green); font-size: 17px; } .page-header p { font-size: 12.5px; color: var(--accent-cyan); margin-left: 28px; } /* ── Cards ── */ .card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 22px; position: relative; transition: box-shadow var(--t-normal), border-color var(--t-normal); } .card:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,217,255,.12); border-color: rgba(0,217,255,.3); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(0,255,65,.015) 0%, transparent 100%); pointer-events: none; border-radius: 12px 12px 0 0; } .card-accent { border-top: 2px solid var(--accent-green); box-shadow: var(--shadow-sm), 0 -2px 14px rgba(0,255,65,.15); } .card-header { padding: 14px 22px; background: linear-gradient(90deg, #0e1a2e 0%, #0a1220 100%); border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 12.5px; font-weight: 700; color: var(--text-bright); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); letter-spacing: .3px; } .card-title i { color: var(--accent-green); } .card-body { padding: 22px; } .scan-container { max-width: 1200px; } /* ── Input Group ── */ .input-group { margin-bottom: 18px; } .input-group label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-family: var(--font-mono); } .input-group label i { color: var(--accent-green); font-size: 11px; } .input-wrapper { display: flex; gap: 10px; align-items: stretch; } .input-wrapper input { flex: 1; } /* Target IP-vs-URL field pair — both stay usable; the active mode is highlighted so it's clear which one will be used on launch. */ .target-field-group { padding: 12px 14px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-secondary); transition: border-color var(--t-normal), opacity var(--t-normal), background var(--t-normal); opacity: .55; } .target-field-group.active { border-color: rgba(10,138,62,.35); background: rgba(10,138,62,.04); opacity: 1; } .hint { font-size: 11px; color: var(--text-muted); margin-top: 7px; font-style: italic; display: block; } /* ── Form Controls ── */ input[type="text"], input[type="file"] { width: 100%; padding: 10px 16px; background: var(--bg-terminal); border: 1.5px solid rgba(88,166,255,.22); border-radius: 8px; color: var(--text-bright); font-family: var(--font-mono); font-size: 13px; transition: all var(--t-normal); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); } input[type="text"]:hover { border-color: rgba(0,255,65,.45); background: rgba(0,255,65,.02); } input[type="text"]:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 3px rgba(0,255,65,.12), inset 0 2px 6px rgba(0,0,0,.3); background: var(--bg-secondary); color: var(--text-bright); } input[type="text"]::placeholder { color: #4a7a9a; } input[type="file"] { cursor: pointer; padding: 10px 14px; color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border: none; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; cursor: pointer; transition: all var(--t-normal); letter-spacing: .7px; text-transform: uppercase; white-space: nowrap; position: relative; overflow: hidden; flex-shrink: 0; } .btn i { font-size: 11.5px; transition: transform var(--t-fast); } .btn:hover i { transform: scale(1.18) rotate(-3deg); } .btn::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); transform: skewX(-20deg); transition: left var(--t-slow); pointer-events: none; } .btn:hover::after { left: 150%; } /* Primary */ .btn-primary { background: linear-gradient(135deg, #0a8a3e 0%, #0c6e33 100%); color: #ffffff; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.15); border: 1px solid rgba(10,138,62,.3); } .btn-primary:hover { background: linear-gradient(135deg, #0c9a46, #0a8a3e); box-shadow: var(--glow-green), var(--shadow-md); color: #fff; transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* Secondary */ .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1.5px solid rgba(88,166,255,.3); } .btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent-cyan); color: var(--accent-cyan); box-shadow: var(--glow-cyan); transform: translateY(-2px); } .btn-secondary:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } /* Danger */ .btn-danger { background: linear-gradient(135deg, #6e0a10, #9c1220); color: #fff; border: 1px solid rgba(255,68,68,.2); } .btn-danger:hover { background: linear-gradient(135deg, #9c1220, #c81830); box-shadow: var(--glow-red); transform: translateY(-2px); } /* Icon ctrl */ .btn-ctrl { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border: 1px solid var(--border-accent); border-radius: 7px; color: var(--text-secondary); font-size: 11.5px; cursor: pointer; transition: all var(--t-normal); flex-shrink: 0; } .btn-ctrl:hover { background: var(--bg-hover); color: var(--accent-green); border-color: rgba(0,255,65,.3); box-shadow: var(--glow-green); transform: scale(1.08); } /* Exit button */ .btn-exit { background: linear-gradient(135deg, #6e0a10, #9c1220); color: #fff; border: none; padding: 8px 16px; border-radius: 7px; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; transition: all var(--t-normal); display: inline-flex; align-items: center; gap: 6px; } .btn-exit:hover { background: linear-gradient(135deg, #9c1220, #c81830); box-shadow: var(--glow-red); transform: translateY(-1px); } /* Clear logs */ .btn-clear-logs { background: linear-gradient(135deg, #5e1a00, #883200); color: #ffaa55; border: 1px solid rgba(255,80,0,.15); padding: 10px 15px; border-radius: 8px; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; transition: all var(--t-normal); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .btn-clear-logs:hover { background: linear-gradient(135deg, #883200, #b04500); box-shadow: 0 0 16px rgba(180,60,0,.4); transform: translateY(-1px); } /* Loading state (applied via JS) */ .btn-loading { opacity: .75 !important; pointer-events: none !important; cursor: not-allowed !important; } /* ══════════════════════════════════════════════════════════ PROGRESS BAR ══════════════════════════════════════════════════════════ */ .progress-section { margin-bottom: 22px; } .progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .progress-header h3 { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); } .progress-header h3 i { color: var(--accent-green); animation: spin-slow 3s linear infinite; } @keyframes spin-slow { to { transform: rotate(360deg); } } .progress-bar-container { background: var(--bg-tertiary); border-radius: 8px; height: 10px; overflow: hidden; margin: 8px 0; border: 1px solid var(--border-primary); box-shadow: inset 0 1px 4px rgba(0,0,0,.5); } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan)); background-size: 200% 100%; border-radius: 8px; transition: width .5s cubic-bezier(.4,0,.2,1); animation: progress-shimmer 2s linear infinite; position: relative; box-shadow: 0 0 14px rgba(0,255,65,.6); width: 0%; } .progress-bar::after { content: ''; position: absolute; top: 0; right: -2px; width: 4px; height: 100%; background: rgba(255,255,255,.7); border-radius: 50%; filter: blur(2px); } @keyframes progress-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .scan-status { font-size: 11px; color: var(--accent-green); font-family: var(--font-mono); background: rgba(0,255,65,.07); padding: 4px 11px; border-radius: 5px; border: 1px solid rgba(0,255,65,.2); white-space: nowrap; animation: pulse-status 2s ease infinite; text-shadow: 0 0 10px rgba(0,255,65,.3); } @keyframes pulse-status { 0%,100% { opacity: 1; } 50% { opacity: .7; } } .step-indicator { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); margin-top: 4px; } /* ── Step Tracker ── */ .step-tracker { display: flex; flex-wrap: wrap; gap: 5px 7px; margin: 10px 0 2px; } .step-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-family: var(--font-mono); padding: 3px 9px 3px 7px; border-radius: 5px; border: 1px solid rgba(88,166,255,.14); background: rgba(88,166,255,.04); color: var(--text-secondary); transition: all .22s ease; white-space: nowrap; } .strack-num { font-weight: 700; font-size: 10px; min-width: 13px; text-align: center; opacity: .7; } .strack-icon { margin-left: 3px; font-size: 9px; } .step-item.strack-pending { opacity: .45; } .step-item.strack-active { border-color: rgba(0,217,255,.4); background: rgba(0,217,255,.08); color: var(--accent-cyan); box-shadow: 0 0 8px rgba(0,217,255,.15); } .step-item.strack-active .strack-num { opacity: 1; } .step-item.strack-done { border-color: rgba(0,255,65,.2); background: rgba(0,255,65,.05); color: var(--status-success); } .step-item.strack-done .strack-num { opacity: 1; } /* ── Scan Complete / Error Banner ── */ .scan-complete-bar { display: flex; align-items: center; gap: 12px; background: rgba(0,255,65,.06); border: 1px solid rgba(0,255,65,.22); border-radius: 8px; padding: 11px 16px; margin-top: 14px; font-size: 12px; font-family: var(--font-mono); animation: fadeInPage .25s ease; } .scan-complete-bar i { color: var(--accent-green); font-size: 15px; flex-shrink: 0; } .scan-complete-bar span { color: var(--text-primary); flex: 1; } .scan-complete-bar strong { color: var(--accent-green); } .scan-complete-bar.error-bar { background: rgba(255,68,68,.06); border-color: rgba(255,68,68,.22); } .scan-complete-bar.error-bar i { color: var(--status-error); } /* ══════════════════════════════════════════════════════════ TERMINAL ══════════════════════════════════════════════════════════ */ .terminal-section { margin-bottom: 22px; } .terminal-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: linear-gradient(90deg, #0a1018 0%, #060c14 100%); border: 1px solid var(--border-primary); border-bottom: none; border-radius: 10px 10px 0 0; } .terminal-dots { display: flex; gap: 6px; margin-right: 10px; } .terminal-dots span { width: 11px; height: 11px; border-radius: 50%; } .dot-red { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,.4); } .dot-yellow { background: #febc2e; box-shadow: 0 0 6px rgba(254,188,46,.4); } .dot-green { background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,.4); } .terminal-title { font-size: 11.5px; font-weight: 600; color: var(--accent-green); display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); flex: 1; text-shadow: 0 0 12px rgba(0,255,65,.4); } .terminal-controls { display: flex; gap: 6px; } .terminal-output { background: var(--bg-terminal); border: 1px solid var(--border-primary); border-top: none; border-radius: 0 0 10px 10px; padding: 14px 18px; font-family: var(--font-mono); font-size: 11.5px; max-height: 420px; min-height: 60px; overflow-y: auto; position: relative; } /* Scanline CRT */ .terminal-output::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,255,65,.008) 2px, rgba(0,255,65,.008) 4px ); pointer-events: none; z-index: 1; } .terminal-output::-webkit-scrollbar { width: 6px; } .terminal-output::-webkit-scrollbar-track { background: var(--bg-terminal); } .terminal-output::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 3px; } .terminal-output::-webkit-scrollbar-thumb:hover { background: var(--accent-green); box-shadow: var(--glow-green); } /* Log meta bar — controlled via JS style.display */ #log-meta-bar { display: none; justify-content: space-between; align-items: center; padding: 8px 16px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-top: none; border-radius: 0 0 10px 10px; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); flex-wrap: wrap; gap: 6px; } #log-meta-bar span { display: flex; align-items: center; gap: 5px; } #log-meta-bar i { color: var(--accent-green); font-size: 10px; } /* Log line colour coding */ .log-line { padding: 3px 10px; margin: 1px 0; border-left: 2px solid transparent; font-family: var(--font-mono); line-height: 1.65; font-size: 11.5px; border-radius: 4px; transition: background var(--t-fast); position: relative; z-index: 2; white-space: pre-wrap; word-break: break-word; color: #ccd8e4; } .log-line:hover { background: rgba(88,166,255,.04); } /* ── Step banners ── */ .log-line.step-header { color: #00e8ff; font-weight: 700; border-left: 4px solid #00d9ff; background: rgba(0,217,255,.13); margin: 10px 0 4px; padding: 7px 14px; border-radius: 6px; text-shadow: 0 0 14px rgba(0,217,255,.55); box-shadow: inset 0 0 24px rgba(0,217,255,.04); } .log-line.section-end { color: #00ff99; font-weight: 700; border-left: 4px solid #00ff88; background: rgba(0,255,136,.10); padding: 5px 12px; border-radius: 5px; text-shadow: 0 0 12px rgba(0,255,136,.5); } /* ── Severity ── */ .log-line.critical { color: #ff6070; font-weight: 700; border-left: 4px solid #ff2040; background: rgba(255,32,64,.14); text-shadow: 0 0 10px rgba(255,32,64,.4); box-shadow: inset 4px 0 10px rgba(255,32,64,.06); } .log-line.vuln { color: #ffbb55; font-weight: 600; border-left: 3px solid #ff9000; background: rgba(255,144,0,.11); } .log-line.warning { color: #ffd070; font-weight: 600; border-left: 3px solid #ffaa00; background: rgba(255,170,0,.08); } .log-line.error { color: #ff9090; font-weight: 600; border-left: 3px solid #ff4444; background: rgba(255,68,68,.10); } /* ── Open ports (most important finding) ── */ .log-line.port-open { color: #4dff88; font-weight: 700; border-left: 4px solid #00ff65; background: rgba(0,255,65,.10); text-shadow: 0 0 8px rgba(0,255,65,.45); } /* ── Positive / success ── */ .log-line.success { color: #7ee8a2; font-weight: 600; border-left: 3px solid rgba(0,255,65,.7); background: rgba(0,255,65,.05); } .log-line.log-pass { color: #4dff88; font-weight: 700; border-left: 3px solid #00ff65; background: rgba(0,255,65,.08); } /* ── Informational ── */ .log-line.log-info { color: #7dd4f0; border-left: 2px solid rgba(0,217,255,.65); background: rgba(0,217,255,.06); } /* ── Skipped lines — clearly secondary ── */ .log-line.log-skip { color: #5a7090; border-left: 2px solid #253650; background: transparent; } .log-line.cmd { color: #c3a6ff; font-style: italic; border-left: 2px solid rgba(160,122,255,.5); background: rgba(147,112,219,.05); } .log-line.exit-code { color: #4a6a8a; font-size: 11px; } /* Syntax highlight spans */ .ip-address { color: #00e0ff; font-weight: 700; background: rgba(0,217,255,.13); padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(0,217,255,.3); } .port-open { color: #4dff88; font-weight: 700; text-shadow: 0 0 8px rgba(0,255,65,.45); } .port-closed { color: #ff7070; font-weight: 600; } .port-filtered { color: #ffaa00; font-weight: 600; } .service-name { color: #b090ff; font-weight: 700; } .version-info { color: #ff80c0; font-weight: 600; } .cve-ref { color: #ff7080; font-weight: 700; background: rgba(255,30,50,.18); padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255,30,50,.42); cursor: pointer; transition: all var(--t-fast); text-shadow: 0 0 6px rgba(255,30,50,.3); } .cve-ref:hover { background: rgba(255,30,50,.32); box-shadow: 0 0 12px rgba(255,30,50,.45); color: #ff9090; } .vuln-critical { color: #ff4050; font-weight: 700; text-shadow: 0 0 6px rgba(255,40,64,.4); } .vuln-high { color: #ff7020; font-weight: 700; } .vuln-medium { color: #ffbb00; font-weight: 600; } .keyword-exploit { color: #ff2080; font-weight: 700; text-shadow: 0 0 8px rgba(255,20,128,.3); } .keyword-auth { color: #ffd700; font-weight: 600; } .keyword-ssl { color: #7fffd4; font-weight: 600; } /* ══════════════════════════════════════════════════════════ ANALYSIS / AI REPORT ══════════════════════════════════════════════════════════ */ .analysis-section { border: 1px solid var(--border-primary); border-top: 2px solid var(--accent-green); border-radius: 10px; overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow-sm), 0 -2px 14px rgba(0,255,65,.1); } .analysis-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; background: linear-gradient(90deg, #0b1420 0%, #080f19 100%); border-bottom: 1px solid var(--border-primary); gap: 12px; flex-wrap: wrap; } .analysis-header h3 { font-size: 13px; font-weight: 600; color: var(--accent-green); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); text-shadow: 0 0 12px rgba(0,255,65,.3); } .export-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Stats bar inside analysis header area */ .analysis-stats-bar { padding: 16px 20px; background: #070b10; border-bottom: 1px solid var(--border-primary); display: none; } /* Stats grid */ .stats-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-left: 4px solid var(--accent-green); padding: 12px 14px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,255,65,.06); transition: all var(--t-normal); } .stat-card:hover { box-shadow: 0 0 18px rgba(0,255,65,.16); border-left-color: var(--accent-cyan); transform: translateY(-1px); } .stat-card strong { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px; font-family: var(--font-mono); } .stat-card .number { font-size: 1.55rem; color: var(--accent-green); font-weight: 700; text-shadow: 0 0 12px rgba(0,255,65,.35); font-family: var(--font-mono); line-height: 1.1; transition: color .3s ease; } .stat-card .number.danger { color: var(--status-error); } .stat-card .number.warn { color: var(--status-warning); } .stat-card .number.info { color: var(--status-info); } .stat-card .number.small { font-size: 1rem; } /* Legacy stat-box (bulk page) */ .stat-box { background: var(--bg-secondary); border: 1px solid var(--border-accent); border-left: 3px solid var(--accent-green); border-radius: 8px; padding: 13px 15px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); text-align: center; } .stat-box strong { display: block; color: var(--accent-green); font-size: 20px; margin-bottom: 3px; text-shadow: 0 0 10px rgba(0,255,65,.3); } /* Analysis content (rendered markdown) */ .analysis-content { background: var(--bg-card); padding: 28px 32px; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.9; color: var(--text-primary); } .analysis-block { margin-top: 12px; } .analysis-block-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; color: var(--accent-cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; font-family: var(--font-mono); } .analysis-view-btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .analysis-content h1 { font-size: 1.5rem; color: var(--accent-green); border-bottom: 2px solid rgba(0,255,65,.2); padding-bottom: 10px; margin: 0 0 20px; font-family: var(--font-mono); text-shadow: 0 0 16px rgba(0,255,65,.25); } .analysis-content h2 { font-size: 1.15rem; color: var(--accent-cyan); border-bottom: 1px solid rgba(0,217,255,.15); padding-bottom: 7px; margin: 28px 0 14px; font-family: var(--font-mono); } .analysis-content h2:first-child { margin-top: 0; } .analysis-content h3 { font-size: 1rem; color: var(--accent-blue); margin: 22px 0 10px; font-family: var(--font-mono); } .analysis-content h4 { font-size: .93rem; color: var(--accent-gold); margin: 16px 0 8px; } .analysis-content p { margin-bottom: 13px; } .analysis-content ul, .analysis-content ol { margin-left: 26px; margin-bottom: 14px; } .analysis-content li { margin-bottom: 6px; } .analysis-content li strong { color: var(--accent-gold); } .analysis-content strong { color: var(--text-bright); font-weight: 700; } .analysis-content em { color: var(--text-secondary); } .analysis-content code { background: rgba(0,255,65,.07); padding: 2px 7px; border-radius: 4px; color: #ff9aaa; font-size: .84em; border: 1px solid rgba(0,255,65,.15); font-family: var(--font-mono); } .analysis-content pre { background: var(--bg-terminal); border: 1px solid var(--border-accent); border-left: 3px solid var(--accent-green); padding: 16px 18px; border-radius: 8px; overflow-x: auto; margin: 16px 0; box-shadow: inset 0 2px 8px rgba(0,0,0,.3); } .analysis-content pre code { background: none; padding: 0; border: none; font-size: .88rem; color: var(--text-primary); } .analysis-content blockquote { border-left: 3px solid var(--accent-green); padding: 12px 18px; margin: 16px 0; background: rgba(0,255,65,.04); border-radius: 5px; color: var(--text-secondary); font-style: italic; } .analysis-content table { width: 100%; border-collapse: collapse; margin: 20px 0; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; font-size: .9em; box-shadow: var(--shadow-sm); border: 1px solid var(--border-primary); } .analysis-content th { background: linear-gradient(90deg, #0b1420, #080f19); color: var(--accent-green); padding: 12px 16px; text-align: left; font-weight: 700; font-size: .8em; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1.5px solid rgba(0,255,65,.15); font-family: var(--font-mono); } .analysis-content td { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); word-break: break-word; font-size: .91em; vertical-align: top; } .analysis-content tr:last-child td { border-bottom: none; } .analysis-content tr:nth-child(even) { background: rgba(0,255,65,.025); } .analysis-content tr:hover { background: rgba(0,255,65,.06); transition: background var(--t-fast); } .analysis-content hr { border: none; border-top: 1px solid var(--border-primary); margin: 20px 0; } /* Analysis view switch (AI report / manual plan) */ .analysis-view-switch { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border-accent); border-radius: 8px; background: var(--bg-terminal); } .analysis-view-btn { border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: all var(--t-fast); } .analysis-view-btn:hover { color: var(--text-primary); background: var(--bg-hover); } .analysis-view-btn.active { color: var(--accent-green); border-color: rgba(0,255,65,.3); background: rgba(0,255,65,.1); box-shadow: 0 0 10px rgba(0,255,65,.12); } /* Severity badges */ .severity-badge { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; font-family: var(--font-mono); vertical-align: middle; } .severity-critical { background: var(--status-critical); color: #fff; box-shadow: var(--glow-red); } .severity-high { background: #f85149; color: #fff; } .severity-medium { background: #f0883e; color: #0d1117; } .severity-low { background: #3fb950; color: #fff; } .severity-info { background: #0f3d7a; color: #fff; } /* Confidence badges */ .conf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-family: var(--font-mono); vertical-align: middle; } .conf-badge.HIGH { background: rgba(0,255,65,.1); color: var(--accent-green); border: 1px solid rgba(0,255,65,.28); } .conf-badge.MEDIUM { background: rgba(255,165,0,.1); color: var(--status-warning); border: 1px solid rgba(255,165,0,.28); } .conf-badge.LOW { background: rgba(88,166,255,.1); color: var(--accent-blue); border: 1px solid rgba(88,166,255,.28); } /* ══════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ══════════════════════════════════════════════════════════ */ #toast-container { position: fixed; bottom: 24px; right: 28px; z-index: 99999; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; background: #0b1019; border: 1px solid #21262d; border-left: 4px solid var(--accent-green); color: var(--text-primary); padding: 11px 16px; border-radius: 8px; font-size: 12.5px; font-family: var(--font-mono); box-shadow: 0 8px 32px rgba(0,0,0,.85); max-width: 420px; pointer-events: auto; animation: toast-in .28s ease forwards; } .toast.toast-success { border-left-color: var(--status-success); } .toast.toast-success .t-icon { color: var(--status-success); } .toast.toast-error { border-left-color: var(--status-error); } .toast.toast-error .t-icon { color: var(--status-error); } .toast.toast-warning { border-left-color: var(--status-warning); } .toast.toast-warning .t-icon { color: var(--status-warning); } .toast.toast-info { border-left-color: var(--status-info); } .toast.toast-info .t-icon { color: var(--status-info); } .toast.toast-out { animation: toast-out .25s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } } @keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } } .t-icon { font-size: 14px; flex-shrink: 0; } .t-msg { flex: 1; line-height: 1.4; } .t-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 0 2px; flex-shrink: 0; transition: color var(--t-fast); line-height: 1; } .t-close:hover { color: var(--text-primary); } /* ══════════════════════════════════════════════════════════ CONFIRM MODAL ══════════════════════════════════════════════════════════ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(3,6,8,.8); z-index: 9500; display: flex; align-items: center; justify-content: center; animation: toast-in .18s ease; } .modal-backdrop.hidden { display: none; } .modal-box { background: #0b1019; border: 1px solid #1a2030; border-top: 3px solid #ff4444; border-radius: 10px; padding: 24px 28px; max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.9); } .modal-box h4 { color: var(--status-error); font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); } .modal-box p { font-size: 12.5px; color: var(--text-secondary); font-family: var(--font-mono); line-height: 1.65; margin-bottom: 20px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ══════════════════════════════════════════════════════════ PDF EXPORT OVERLAY ══════════════════════════════════════════════════════════ */ #export-overlay { display: none; position: fixed; inset: 0; background: rgba(3,6,8,.82); z-index: 9000; align-items: center; justify-content: center; flex-direction: column; gap: 18px; } #export-overlay.active { display: flex; animation: toast-in .2s ease; } #export-overlay .spinner { width: 48px; height: 48px; border: 3px solid var(--border-primary); border-top-color: var(--accent-green); border-radius: 50%; animation: spin .7s linear infinite; box-shadow: 0 0 20px rgba(0,255,65,.25); } #export-overlay p { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); letter-spacing: .3px; } /* ══════════════════════════════════════════════════════════ BULK SCAN ══════════════════════════════════════════════════════════ */ .file-drop-zone { border: 2px dashed rgba(0,255,65,.25); padding: 42px 28px; text-align: center; border-radius: 12px; cursor: pointer; transition: all var(--t-normal); background: linear-gradient(135deg, var(--bg-terminal) 0%, var(--bg-primary) 100%); position: relative; overflow: hidden; margin-bottom: 18px; } .file-drop-zone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,255,65,.08) 0%, transparent 70%); transform: scale(0); transition: transform var(--t-slow); pointer-events: none; } .file-drop-zone:hover::before { transform: scale(1); } .file-drop-zone:hover, .file-drop-zone.drag-over { border-color: var(--accent-green); border-style: solid; background: linear-gradient(135deg, rgba(0,255,65,.05) 0%, var(--bg-primary) 100%); box-shadow: var(--glow-green), inset 0 0 30px rgba(0,255,65,.03); } .file-drop-zone.file-ready { border-color: var(--accent-green); border-style: solid; background: linear-gradient(135deg, rgba(0,255,65,.04) 0%, var(--bg-primary) 100%); } .file-drop-zone i { font-size: 2.8rem; color: var(--accent-green); display: block; margin-bottom: 14px; transition: all var(--t-normal); } .file-drop-zone:hover i { transform: scale(1.1) translateY(-5px); } .file-drop-zone p { color: var(--text-secondary); font-size: 13px; line-height: 1.65; } .file-drop-zone strong { color: var(--accent-green); } /* IP progress cards grid */ .ip-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; } .ip-card { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border-radius: 10px; border: 1px solid var(--border-primary); border-left: 3px solid var(--border-accent); padding: 14px 16px; transition: all var(--t-normal); box-shadow: var(--shadow-sm); } .ip-card:hover { box-shadow: var(--shadow-md); transform: translateX(3px); } .ip-card.ip-inprogress { border-left-color: var(--accent-cyan); box-shadow: -3px 0 12px rgba(0,217,255,.15); } .ip-card.ip-pending { border-left-color: #3d4f65; opacity: .75; box-shadow: -3px 0 8px rgba(61,79,101,.15); } .ip-card.ip-done { border-left-color: var(--status-success); box-shadow: -3px 0 12px rgba(0,255,65,.15); } .ip-card.ip-failed { border-left-color: var(--status-error); box-shadow: -3px 0 12px rgba(255,68,68,.15); } .ip-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .ip-card-addr { font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .ip-card.ip-inprogress .ip-card-addr { color: var(--accent-cyan); } .ip-card.ip-pending .ip-card-addr { color: #5a7080; } .ip-card.ip-done .ip-card-addr { color: var(--status-success); } .ip-card.ip-failed .ip-card-addr { color: var(--status-error); } .ip-card-step { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); } .ip-card-label { font-size: 10.5px; color: var(--text-muted); font-style: italic; margin-bottom: 8px; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ip-mini-bar { background: var(--bg-tertiary); border-radius: 4px; height: 4px; overflow: hidden; border: 1px solid var(--border-subtle); } .ip-mini-bar-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1); background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan)); } .ip-card.ip-done .ip-mini-bar-fill { background: var(--status-success); } .ip-card.ip-failed .ip-mini-bar-fill { background: var(--status-error); } /* ══════════════════════════════════════════════════════════ LOG VIEWER ══════════════════════════════════════════════════════════ */ .log-controls-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .log-search-wrap { flex: 1; min-width: 200px; position: relative; } .log-search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; pointer-events: none; } .log-search-wrap input { padding-left: 36px; } .log-search-wrap input.has-value { border-color: rgba(0,255,65,.4); } .log-search-wrap input.no-results { border-color: rgba(255,68,68,.5); } #session-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } /* Session block */ .session-block { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-primary) 100%); border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--t-normal), border-color var(--t-normal); } .session-block:hover { border-color: rgba(0,255,65,.2); box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,255,65,.08); } .session-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(90deg, #0e1a2e 0%, #0a1220 100%); border-bottom: 1px solid var(--border-primary); user-select: none; min-height: 50px; } .session-header-left { flex: 1; display: flex; align-items: center; gap: 9px; cursor: pointer; min-width: 0; } .session-chevron { font-size: 10px; color: var(--text-muted); transition: transform var(--t-normal); flex-shrink: 0; width: 12px; text-align: center; } .session-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-bright); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .session-meta { margin-left: auto; font-size: 10.5px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; } /* Type badges */ .session-type-badge { padding: 2px 8px; border-radius: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; font-family: var(--font-mono); flex-shrink: 0; white-space: nowrap; } .session-type-badge.bulk { background: rgba(0,255,65,.1); color: var(--accent-green); border: 1px solid rgba(0,255,65,.25); } .session-type-badge.single { background: rgba(61,142,255,.1); color: var(--accent-blue); border: 1px solid rgba(61,142,255,.25); } /* Delete session btn */ .btn-session-delete { background: transparent; border: 1px solid rgba(255,61,87,.35); color: #ff3d57; padding: 5px 11px; border-radius: 6px; font-size: 11px; font-family: var(--font-mono); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--t-normal); display: inline-flex; align-items: center; gap: 5px; } .btn-session-delete:hover { background: rgba(255,61,87,.12); border-color: rgba(255,61,87,.7); box-shadow: 0 0 12px rgba(255,61,87,.2); transform: translateY(-1px); } /* Session body */ .session-body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; } .session-body.hidden { display: none; } /* Log item rows */ .log-item { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-left: 3px solid rgba(88,166,255,.35); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all var(--t-normal); cursor: default; } .log-item:hover { border-left-color: var(--accent-blue); background: var(--bg-hover); box-shadow: var(--shadow-sm); transform: translateX(2px); } .log-item-info { flex: 1; min-width: 0; } .log-item-ip { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent-green); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(0,255,65,.22); display: flex; align-items: center; gap: 7px; } .log-item-meta { font-size: 10.5px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Section heading */ .available-logs h3 { font-size: 13px; font-weight: 700; color: var(--text-bright); margin-bottom: 14px; font-family: var(--font-mono); display: flex; align-items: center; gap: 8px; } .available-logs h3 i { color: var(--accent-green); } /* Session name input row */ .session-name-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); } .session-name-row label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; font-family: var(--font-mono); } .session-name-row label i { color: var(--accent-green); font-size: 11px; } .session-name-row .session-opt-label { color: var(--text-muted); font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; } .session-name-row input[type="text"] { max-width: 420px; border-color: var(--border-subtle); } .session-name-row input[type="text"]:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(0,217,255,.08), inset 0 2px 6px rgba(0,0,0,.3); } /* Empty states */ .session-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; } .session-empty i { font-size: 2.4rem; display: block; margin-bottom: 14px; color: var(--border-accent); } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state i { font-size: 3rem; margin-bottom: 18px; opacity: .3; display: block; } .empty-state p { font-size: 13px; } /* ══════════════════════════════════════════════════════════ FULLSCREEN OVERLAY ══════════════════════════════════════════════════════════ */ .fullscreen-overlay { display: none; position: fixed; inset: 0; background: rgba(1,3,7,.97); z-index: 9999; flex-direction: column; padding: 16px; backdrop-filter: blur(4px); } .fullscreen-overlay.active { display: flex; animation: fadeInPage .18s ease; } .fullscreen-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 18px; background: linear-gradient(90deg, #090f18 0%, #060c14 100%); border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; border-top: 2px solid var(--accent-green); } .fullscreen-header h3 { margin: 0; color: var(--accent-green); font-size: 13px; font-family: var(--font-mono); display: flex; align-items: center; gap: 8px; text-shadow: 0 0 12px rgba(0,255,65,.4); } .fullscreen-content { flex: 1; overflow-y: auto; background: var(--bg-terminal); padding: 18px; font-family: var(--font-mono); font-size: 12px; border-radius: 0 0 10px 10px; border: 1px solid var(--border-primary); border-top: none; white-space: pre-wrap; word-break: break-word; } .btn-exit-fs { background: linear-gradient(135deg, #6e0a10, #9c1220); color: #fff; border: none; padding: 9px 20px; border-radius: 7px; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; transition: all var(--t-normal); display: inline-flex; align-items: center; gap: 7px; letter-spacing: .5px; animation: exit-pulse 2.5s infinite; } .btn-exit-fs:hover { background: linear-gradient(135deg, #9c1220, #c81830); box-shadow: var(--glow-red); transform: translateY(-1px); } @keyframes exit-pulse { 0%,100% { box-shadow: 0 0 10px rgba(156,18,32,.35); } 50% { box-shadow: 0 0 22px rgba(156,18,32,.6); } } /* ══════════════════════════════════════════════════════════ TOOLTIP ══════════════════════════════════════════════════════════ */ .tooltip { position: relative; } .tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(2,5,12,.97); color: var(--accent-green); padding: 8px 12px; border-radius: 6px; font-size: 11px; white-space: nowrap; z-index: 1000; pointer-events: none; border: 1px solid rgba(0,255,65,.3); box-shadow: var(--glow-green); animation: tooltip-fade 0.2s ease; } @keyframes tooltip-fade { from { opacity: 0; transform: translateX(-50%) translateY(5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ══════════════════════════════════════════════════════════ UTILITIES ══════════════════════════════════════════════════════════ */ .hidden { display: none !important; } .divider { height: 1px; background: var(--border-primary); margin: 20px 0; } .text-success { color: var(--status-success); } .text-warning { color: var(--status-warning); } .text-error { color: var(--status-error); } .text-info { color: var(--status-info); } .text-muted { color: var(--text-muted); } /* Spinners */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { border: 2.5px solid var(--border-accent); border-top-color: var(--accent-green); border-radius: 50%; width: 30px; height: 30px; animation: spin 0.75s linear infinite; margin: 20px auto; } .report-loading { text-align: center; padding: 60px 20px; } .report-spinner { display: inline-block; width: 40px; height: 40px; border: 3px solid var(--border-accent); border-top-color: var(--accent-green); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; box-shadow: 0 0 20px rgba(0,255,65,.3); } .report-loading p { color: var(--accent-green); font-weight: 600; } .report-error { background: rgba(255,68,68,.06); border: 1px solid rgba(255,68,68,.3); border-left: 4px solid var(--status-error); border-radius: 8px; padding: 22px 24px; margin: 12px 0; } .report-error strong { color: var(--status-error); font-size: 13px; display: block; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .report-error p { color: var(--text-secondary); font-size: 12px; margin-bottom: 0; } /* ── Analysis Loading Skeleton ── */ .analysis-loading { text-align: center; padding: 40px 20px; font-family: var(--font-mono); } .analysis-skeleton { height: 12px; background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(255,255,255,.9) 50%, var(--bg-tertiary) 75%); background-size: 400% 100%; animation: skeleton-shimmer 1.6s ease infinite; border-radius: 6px; margin: 10px auto; width: 100%; max-width: 480px; } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Topbar model badge glow when active ── */ #topbar-model { transition: color .3s, border-color .3s; } /* ── Connection Lost status ── */ .status-pill[data-bad] .status-dot { background: var(--status-error) !important; box-shadow: 0 0 8px rgba(255,68,68,.6) !important; } /* Global scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-green); box-shadow: var(--glow-green); } ::-webkit-scrollbar-corner { background: var(--bg-primary); } /* Focus visible */ button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.04); } } @keyframes scan-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } } .scanning { animation: scan-pulse 1.5s infinite; } /* ══════════════════════════════════════════════════════════ CHROME SURFACES — light gradients These bars use literal (non-variable) gradients rather than var(--bg-*), so they're set directly here instead of in :root. ══════════════════════════════════════════════════════════ */ .sidebar { background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%); box-shadow: 4px 0 24px rgba(30,41,59,.06); } .topbar { background: linear-gradient(90deg, #ffffff 0%, #f4f7fc 100%); box-shadow: 0 2px 14px rgba(30,41,59,.05); } .card-header, .analysis-header, .session-header, .ip-search-header { background: linear-gradient(90deg, #f7f9fc 0%, #eef2f8 100%); } .analysis-stats-bar { background: #f7f9fc; } .analysis-content th { background: linear-gradient(90deg, #f2f5fa, #eaeff7); } .toast { background: #ffffff; border-color: #e0e6ef; box-shadow: 0 8px 28px rgba(30,41,59,.14); } .modal-box { background: #ffffff; border-color: #e0e6ef; box-shadow: 0 20px 55px rgba(30,41,59,.18); } .modal-backdrop { background: rgba(20,28,40,.35); } .ip-search-panel { background: linear-gradient(135deg, #ffffff 0%, #f4f7fc 100%); box-shadow: var(--shadow-sm), 0 0 24px rgba(0,137,173,.05); } /* The live scan console (.terminal-section) and the fullscreen log overlay are a deliberate dark "console" surface — their severity/syntax colours are tuned for a dark background, so the variables are re-scoped back to dark here instead of re-deriving every log-line/syntax colour for a light background. */ .terminal-section, .fullscreen-overlay { --bg-base: #030810; --bg-primary: #070e18; --bg-secondary: #0c1422; --bg-tertiary: #101e2e; --bg-hover: #131f30; --bg-card: #090f1a; --bg-terminal: #040810; --border-primary: #1e2d42; --border-accent: #253650; --border-subtle: #152030; --text-primary: #d4dde8; --text-secondary: #a8bfd4; --text-muted: #6090b8; --text-bright: #ffffff; --accent-green: #00ff41; --accent-cyan: #00d9ff; --accent-blue: #58a6ff; --status-success: #00ff41; --status-error: #ff4444; --status-warning: #ffa500; --status-info: #00bfff; } /* AI report code blocks stay a dark console for code legibility */ .analysis-content pre { --bg-terminal: #040810; --border-accent: #253650; --accent-green: #00ff41; --text-primary: #d4dde8; } /* ══════════════════════════════════════════════════════════ DARK THEME — component overrides These components use literal (non-variable) gradients/colours, so — same as the light chrome-surfaces block above — they need an explicit dark-mode value here rather than adapting via var(). ══════════════════════════════════════════════════════════ */ :root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0c1422 0%, #070e18 100%); box-shadow: 4px 0 28px rgba(0,0,0,.6); } :root[data-theme="dark"] .topbar { background: linear-gradient(90deg, #0c1628 0%, #080f1e 100%); box-shadow: 0 2px 20px rgba(0,0,0,.5); } :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .analysis-header, :root[data-theme="dark"] .session-header, :root[data-theme="dark"] .ip-search-header { background: linear-gradient(90deg, #0e1a2e 0%, #0a1220 100%); } :root[data-theme="dark"] .analysis-stats-bar { background: #070b10; } :root[data-theme="dark"] .analysis-content th { background: linear-gradient(90deg, #0b1420, #080f19); } :root[data-theme="dark"] .toast { background: #0b1019; border-color: #21262d; box-shadow: 0 8px 32px rgba(0,0,0,.85); } :root[data-theme="dark"] .modal-box { background: #0b1019; border-color: #1a2030; box-shadow: 0 20px 60px rgba(0,0,0,.9); } :root[data-theme="dark"] .modal-backdrop { background: rgba(3,6,8,.8); } :root[data-theme="dark"] .ip-search-panel { background: linear-gradient(135deg, #080f18 0%, #05090f 100%); box-shadow: var(--shadow-sm), 0 0 28px rgba(0,217,255,.06); } /* Primary button + brand icon — the light versions were redesigned for contrast on a white page; the original neon-on-near-black look is correct again once the surrounding chrome is actually dark. */ :root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #003d1a 0%, #00662b 100%); color: var(--accent-green); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(0,255,65,.1); border-color: rgba(0,255,65,.25); } :root[data-theme="dark"] .btn-primary:hover { background: linear-gradient(135deg, #00662b, #00993e); box-shadow: var(--glow-green), var(--shadow-md); color: #fff; } :root[data-theme="dark"] .brand-icon { background: linear-gradient(135deg, #003d1a, #006628); box-shadow: var(--glow-green), inset 0 1px 0 rgba(0,255,65,.15); border-color: rgba(0,255,65,.3); } :root[data-theme="dark"] .brand-icon::after { background: linear-gradient(135deg, rgba(0,255,65,.12) 0%, transparent 60%); } /* Loading-skeleton shimmer — a bright sweep only makes sense against the light theme's pale bar; dark mode wants the original subtle highlight. */ :root[data-theme="dark"] .analysis-skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(255,255,255,.04) 50%, var(--bg-tertiary) 75%); background-size: 400% 100%; } /* Icon glow — restores the neon drop-shadow the light theme flattened */ :root[data-theme="dark"] .page-header h1 i { filter: drop-shadow(0 0 6px rgba(0,255,65,.5)); } :root[data-theme="dark"] .card-title i { filter: drop-shadow(0 0 4px rgba(0,255,65,.4)); } :root[data-theme="dark"] .file-drop-zone i { filter: drop-shadow(0 0 8px rgba(0,255,65,.5)); } :root[data-theme="dark"] .file-drop-zone:hover i { filter: drop-shadow(0 0 14px rgba(0,255,65,.7)); } :root[data-theme="dark"] .session-empty i { filter: drop-shadow(0 0 6px rgba(0,255,65,.08)); } /* Consent box — the light-mode amber was darkened for contrast on white; restore the original lighter amber for a dark card background. */ :root[data-theme="dark"] .consent-box { border-color: rgba(255,170,0,.35); background: rgba(255,170,0,.06); color: #e8b75f; } :root[data-theme="dark"] .consent-box small { color: #d5a64f; } /* Target IP/URL field active indicator — the light-mode tint is a specific deep-green shade tuned for a white card; dark mode reads better with the same vivid neon-green highlight the rest of the dark theme uses (e.g. .nav-item.active). */ :root[data-theme="dark"] .target-field-group.active { border-color: rgba(0,255,65,.35); background: rgba(0,255,65,.06); } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { :root { --sidebar-w: 60px; } .brand-text, .nav-label, .nav-badge, .nav-section-label, .status-pill span { display: none; } .nav-item { justify-content: center; padding: 10px; } .nav-item.active::before { display: none; } .sidebar-brand { padding: 14px 12px; justify-content: center; } .brand-icon { margin: 0 auto; } .sidebar-footer { padding: 10px 8px; } .page-area { padding: 20px 18px; } .topbar-breadcrumb .current { display: none; } .session-meta { display: none; } .session-name { max-width: 180px; } .stats-panel { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } @media (max-width: 600px) { :root { --sidebar-w: 0px; } .sidebar { display: none; } .page-area { padding: 14px 14px; } .analysis-content { padding: 18px 16px; } .topbar { padding: 0 16px; } .topbar-right { gap: 5px; } .topbar-tag { font-size: 9px; padding: 3px 7px; } .ip-cards-grid { grid-template-columns: 1fr; } .export-controls { gap: 5px; } .card-body { padding: 16px; } .session-header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; } .session-header-left { flex-wrap: wrap; gap: 6px; } .session-name { max-width: 140px; } .session-type-badge { display: none; } .session-name-row input[type="text"] { max-width: 100%; } .log-item { flex-wrap: wrap; gap: 8px; } .log-item .btn { width: 100%; justify-content: center; } .stats-panel { grid-template-columns: repeat(2, 1fr); } .scan-complete-bar { flex-wrap: wrap; } #toast-container { right: 14px; bottom: 14px; } .toast { max-width: calc(100vw - 28px); } } /* ══════════════════════════════════════════════════════════ ACCESSIBILITY ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-contrast: high) { :root:not([data-theme="dark"]) { --accent-green: #006622; --accent-cyan: #00596b; --status-error: #b30000; --text-primary: #000000; --border-primary: #6b7684; } :root[data-theme="dark"] { --accent-green: #00ff00; --accent-cyan: #00ffff; --status-error: #ff0000; --text-primary: #ffffff; } } /* ══════════════════════════════════════════════════════════ PRINT ══════════════════════════════════════════════════════════ */ @media print { .sidebar, .topbar, .btn, .terminal-header, .log-controls-bar, #toast-container, .modal-backdrop { display: none; } .page-area { padding: 0; } .analysis-content { border: 1px solid #ccc; background: #fff; color: #000; border-radius: 0; padding: 20px; } .analysis-content h1 { color: #003; border-color: #003; } .analysis-content h2 { color: #005; border-color: #005; } .analysis-content h3 { color: #006; } .analysis-content code { background: #f5f5f5; color: #333; border-color: #ccc; } .analysis-content th { background: #eee; color: #000; } } /* ══════════════════════════════════════════════════════════ LOG VIEWER TABS ══════════════════════════════════════════════════════════ */ .lv-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 10px; padding: 4px; box-shadow: var(--shadow-sm); } .lv-tab { flex: 1; padding: 9px 16px; border-radius: 7px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-align: center; transition: all var(--t-normal); color: var(--text-secondary); border: 1px solid transparent; letter-spacing: .5px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 7px; } .lv-tab i { font-size: 12px; } .lv-tab:hover { color: var(--text-primary); background: var(--bg-hover); } .lv-tab.active { background: rgba(0,255,65,.1); color: var(--accent-green); border-color: rgba(0,255,65,.28); box-shadow: 0 0 12px rgba(0,255,65,.1); text-shadow: 0 0 8px rgba(0,255,65,.3); } .lv-pane { display: none; } .lv-pane.active { display: block; animation: fadeInPage .2s ease; } /* ══════════════════════════════════════════════════════════ IP SEARCH PANEL ══════════════════════════════════════════════════════════ */ .ip-search-panel { background: linear-gradient(135deg, #080f18 0%, #05090f 100%); border: 1px solid var(--border-primary); border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow-sm), 0 0 28px rgba(0,217,255,.04); transition: box-shadow var(--t-normal), border-color var(--t-normal); } .ip-search-panel:focus-within { border-color: rgba(0,217,255,.25); box-shadow: var(--shadow-md), 0 0 28px rgba(0,217,255,.08); } .ip-search-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: linear-gradient(90deg, #0b1420, #080f19); border-bottom: 1px solid var(--border-primary); } .ip-search-header > i { color: var(--accent-cyan); font-size: 13px; flex-shrink: 0; } .ip-search-header > span { font-size: 12.5px; font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); letter-spacing: .3px; } .ip-search-badge { margin-left: auto; background: rgba(0,217,255,.1); color: var(--accent-cyan); border: 1px solid rgba(0,217,255,.3); padding: 3px 10px; border-radius: 10px; font-size: 10px; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; } .ip-search-body { padding: 16px 20px; } .ip-search-input-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } .ip-search-input-wrap { flex: 1; position: relative; } .ip-search-input-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; pointer-events: none; } .ip-search-input-wrap input { width: 100%; padding: 10px 14px 10px 38px; background: var(--bg-terminal); border: 1.5px solid var(--border-accent); color: var(--text-primary); border-radius: 8px; font-size: 12.5px; font-family: var(--font-mono); transition: all var(--t-normal); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); } .ip-search-input-wrap input:hover { border-color: rgba(0,217,255,.3); } .ip-search-input-wrap input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(0,217,255,.1), inset 0 2px 6px rgba(0,0,0,.3); background: var(--bg-secondary); } .ip-search-input-wrap input::placeholder { color: var(--text-muted); opacity: .7; } .ip-search-results { max-height: 340px; overflow-y: auto; } .ip-search-results::-webkit-scrollbar { width: 4px; } .ip-search-results::-webkit-scrollbar-track { background: transparent; } .ip-search-results::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 2px; } .ip-result-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all var(--t-fast); border: 1px solid transparent; margin-bottom: 4px; } .ip-result-row:hover { background: rgba(0,217,255,.06); border-color: rgba(0,217,255,.2); transform: translateX(3px); } .ip-result-icon { color: var(--accent-cyan); font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; } .ip-result-ip { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--accent-cyan); min-width: 128px; flex-shrink: 0; } .ip-result-ip mark { background: rgba(0,217,255,.25); color: var(--accent-cyan); border-radius: 2px; padding: 0 2px; } .ip-result-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; font-family: var(--font-mono); letter-spacing: .5px; } .ip-result-badge.bulk { background: rgba(0,255,65,.1); color: var(--accent-green); border: 1px solid rgba(0,255,65,.2); } .ip-result-badge.single { background: rgba(88,166,255,.1); color: var(--accent-blue); border: 1px solid rgba(88,166,255,.2); } .ip-result-session { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-result-meta { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; } .ip-search-empty { text-align: center; padding: 32px 20px; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; } .ip-search-empty i { display: block; font-size: 28px; margin-bottom: 10px; opacity: .25; color: var(--accent-cyan); } .ip-search-hint { font-size: 10.5px; color: var(--text-muted); opacity: .7; font-style: italic; } /* ══════════════════════════════════════════════════════════ v7.0 ADDITIONS — IP SEARCH, LOG HIGHLIGHTING, FILTER UX ══════════════════════════════════════════════════════════ */ /* ── Global search bar (log viewer) ── */ .log-search-wrap { display: flex; align-items: center; gap: 0; background: var(--bg-terminal); border: 1.5px solid var(--border-accent); border-radius: 8px; padding: 0 12px; flex: 1; min-width: 220px; transition: all var(--t-normal); } .log-search-wrap:focus-within { border-color: var(--accent-green); box-shadow: 0 0 0 2px rgba(0,255,65,.1), inset 0 2px 6px rgba(0,0,0,.3); } .log-search-wrap > i { color: var(--text-muted); font-size: 12px; flex-shrink: 0; } .log-search-wrap > input { flex: 1; background: none; border: none; padding: 9px 10px; font-size: 12.5px; color: var(--text-primary); font-family: var(--font-mono); outline: none; box-shadow: none; width: 100%; } .log-search-wrap > input::placeholder { color: var(--text-muted); opacity: .7; } /* Search clear button */ .search-clear-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 2px; font-size: 11px; transition: color var(--t-fast); flex-shrink: 0; display: none; } .search-clear-btn:hover { color: var(--text-primary); } /* IP search banner */ .ip-search-banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin-bottom: 12px; background: rgba(0,255,65,.05); border: 1px solid rgba(0,255,65,.2); border-left: 3px solid var(--accent-green); border-radius: 8px; font-size: 12px; font-family: var(--font-mono); animation: fadeInPage .2s ease; } .ip-search-banner i { color: var(--accent-green); font-size: 14px; } .ip-match-count { margin-left: auto; background: rgba(0,255,65,.12); color: var(--accent-green); padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; border: 1px solid rgba(0,255,65,.25); } /* Filter count pill (single scan + log viewer filter bars) */ .log-filter-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); padding: 4px 9px; border: 1px solid var(--border-accent); border-radius: 4px; white-space: nowrap; background: var(--bg-tertiary); transition: all var(--t-fast); } .log-filter-count.no-match { color: var(--status-error); border-color: rgba(255,68,68,.3); } .log-filter-count.hidden { display: none !important; } /* ── Enriched log line classes (override block — keep in sync with main section) ── */ .log-line.step-header { color: #00e8ff; font-weight: 700; border-left: 4px solid #00d9ff; background: rgba(0,217,255,.13); margin: 10px 0 4px; padding: 7px 14px; border-radius: 6px; text-shadow: 0 0 14px rgba(0,217,255,.55); box-shadow: inset 0 0 24px rgba(0,217,255,.04); } .log-line.section-end { color: #00ff99; font-weight: 700; border-left: 4px solid #00ff88; background: rgba(0,255,136,.10); padding: 5px 12px; border-radius: 5px; text-shadow: 0 0 12px rgba(0,255,136,.5); } .log-line.vuln { color: #ffbb55; font-weight: 600; border-left: 3px solid #ff9000; background: rgba(255,144,0,.11); } .log-line.critical { color: #ff6070; font-weight: 700; border-left: 4px solid #ff2040; background: rgba(255,32,64,.14); text-shadow: 0 0 10px rgba(255,32,64,.4); box-shadow: inset 4px 0 10px rgba(255,32,64,.06); } .log-line.port-open { color: #4dff88; font-weight: 700; border-left: 4px solid #00ff65; background: rgba(0,255,65,.10); text-shadow: 0 0 8px rgba(0,255,65,.45); } .log-line.success { color: #7ee8a2; font-weight: 600; border-left: 3px solid rgba(0,255,65,.7); background: rgba(0,255,65,.05); } .log-line.log-pass { color: #4dff88; font-weight: 700; border-left: 3px solid #00ff65; background: rgba(0,255,65,.08); } .log-line.log-info { color: #7dd4f0; border-left: 2px solid rgba(0,217,255,.65); background: rgba(0,217,255,.06); } .log-line.log-skip { color: #5a7090; border-left: 2px solid #253650; background: transparent; } .log-line.warning, .log-line.warning-line { color: #ffd070; font-weight: 600; border-left: 3px solid #ffaa00; background: rgba(255,170,0,.08); } .log-line.error, .log-line.error-line { color: #ff9090; font-weight: 600; border-left: 3px solid #ff4444; background: rgba(255,68,68,.10); } .log-line.cmd-line { color: #c3a6ff; font-style: italic; border-left: 2px solid rgba(160,122,255,.5); background: rgba(147,112,219,.05); } /* ── Inline highlight spans (inserted by JS) ── */ .log-line .hl-cve { background: rgba(255,30,50,.22); color: #ff7080; border: 1px solid rgba(255,30,50,.42); padding: 1px 6px; border-radius: 4px; font-size: 10.5px; cursor: pointer; font-weight: 700; transition: all var(--t-fast); text-decoration: none; text-shadow: 0 0 6px rgba(255,30,50,.3); } .log-line .hl-cve:hover { background: rgba(255,30,50,.36); box-shadow: 0 0 10px rgba(255,30,50,.45); color: #ff9090; } .log-line .hl-ip { color: #00e0ff; font-weight: 700; background: rgba(0,217,255,.12); padding: 0 4px; border-radius: 3px; } .log-line .hl-port { color: #ffd070; font-weight: 700; } .log-line .hl-port-open { color: #4dff88; font-weight: 700; text-shadow: 0 0 6px rgba(0,255,65,.45); } .log-line .hl-port-filtered { color: #ffaa00; } .log-line .hl-port-closed { color: #5a7090; } .log-line .hl-service { color: #00d9ff; font-weight: 600; } .log-line .hl-version { color: #c3a6ff; font-size: 11px; } .log-line .hl-sev-critical, .log-line .hl-sev-high { color: #ff4050; font-weight: 700; text-shadow: 0 0 6px rgba(255,40,64,.35); } .log-line .hl-sev-medium { color: #ffbb00; font-weight: 600; } .log-line .hl-sev-low { color: #58a6ff; } /* ── Log meta bar — controlled via JS style.display ── */ /* The existing #log-meta-bar in style.css handles display:none default */ /* Improve session item IP label alignment */ .log-item-ip { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--accent-green); font-family: var(--font-mono); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(0,255,65,.22); } /* ── Fullscreen search input ── */ .fullscreen-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; gap: 12px; flex-wrap: wrap; } /* ── Log viewer filter controls (inside viewer terminal) ── */ #log-viewer-controls { border-radius: 0; border-top: 1px solid var(--border-primary); border-bottom: none; } /* ── Search highlight in session/log lists ── */ .search-hl { background: rgba(0,217,255,.2); color: var(--accent-cyan); border-radius: 2px; padding: 0 1px; font-style: normal; } mark.search-hl { background: rgba(0,217,255,.2); color: var(--accent-cyan); } /* ── Inline log line CVE / IP badges ── */ .log-cve { display: inline-block; font-size: 9.5px; font-weight: 700; background: rgba(255,30,50,.2); color: #ff6070; border: 1px solid rgba(255,30,50,.45); border-radius: 4px; padding: 1px 6px; margin: 0 2px; font-family: var(--font-mono); vertical-align: middle; cursor: pointer; text-decoration: none; transition: all var(--t-fast); line-height: 1.6; text-shadow: 0 0 6px rgba(255,30,50,.3); } .log-cve:hover { background: rgba(255,30,50,.35); box-shadow: 0 0 10px rgba(255,30,50,.5); color: #ff8090; } .log-ip-inline { font-weight: 700; color: #00e0ff; background: rgba(0,217,255,.13); padding: 0 4px; border-radius: 3px; border: 1px solid rgba(0,217,255,.22); } .log-port { font-weight: 700; color: #4dff88; text-shadow: 0 0 8px rgba(0,255,65,.5); } /* ── IP search responsive overrides ── */ @media (max-width: 960px) { .ip-result-meta { display: none; } .ip-result-session { max-width: 120px; } .lv-tab span { display: none; } } @media (max-width: 620px) { .ip-search-input-row { flex-wrap: wrap; } .ip-result-badge { display: none; } .lv-tabs { gap: 2px; } .lv-tab { padding: 8px 10px; font-size: 10px; } } /* ══════════════════════════════════════════════════════════ VESSEL PT REPORTS ══════════════════════════════════════════════════════════ */ /* Vessel form field */ .vessel-field { width: 100%; background: var(--bg-terminal); border: 1.5px solid var(--border-accent); color: var(--text-primary); border-radius: 8px; padding: 10px 14px; font-family: var(--font-mono); font-size: 13px; transition: border-color var(--t-normal), box-shadow var(--t-normal); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); } .vessel-field:hover { border-color: rgba(0,255,65,.3); } .vessel-field:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 3px rgba(0,255,65,.1), inset 0 2px 6px rgba(0,0,0,.3); background: var(--bg-secondary); } .vessel-field::placeholder { color: var(--text-muted); opacity: .7; } /* Section divider */ .vr-section-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0 18px; font-size: 11px; letter-spacing: 2px; color: var(--accent-cyan); text-transform: uppercase; font-family: var(--font-mono); font-weight: 700; } .vr-section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,217,255,.3), transparent); } /* Upload group */ .vr-upload-group { margin-bottom: 24px; } .vr-upload-label { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.5px; color: var(--accent-green); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; font-family: var(--font-mono); } .vr-count-badge { margin-left: auto; background: rgba(0,255,65,.1); border: 1px solid rgba(0,255,65,.3); color: var(--accent-green); border-radius: 10px; padding: 2px 10px; font-size: 10px; font-weight: 700; font-family: var(--font-mono); } /* Drop zone */ .vr-drop-zone { border: 2px dashed var(--border-primary); border-radius: 10px; padding: 28px 20px; text-align: center; background: var(--bg-base); cursor: pointer; transition: all var(--t-normal); position: relative; } .vr-drop-zone:hover, .vr-drop-zone.drag-over { border-color: rgba(0,255,65,.5); background: rgba(0,255,65,.03); box-shadow: 0 0 20px rgba(0,255,65,.08); } .vr-drop-zone.has-files { border-color: rgba(0,255,65,.4); border-style: solid; } .vr-drop-zone-icon { font-size: 1.8rem; opacity: .35; display: block; margin-bottom: 10px; } .vr-drop-zone-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .vr-drop-zone-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; font-family: var(--font-mono); } /* Browse button */ .vr-browse-btn { padding: 8px 18px; background: transparent; border: 1px solid rgba(0,255,65,.4); border-radius: 6px; color: var(--accent-green); font-family: var(--font-mono); font-size: 11px; font-weight: 600; cursor: pointer; transition: all var(--t-normal); letter-spacing: .5px; text-transform: uppercase; } .vr-browse-btn:hover { background: rgba(0,255,65,.08); box-shadow: 0 0 12px rgba(0,255,65,.15); transform: translateY(-1px); } /* Preview grid */ .vr-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; } .vr-preview-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-primary); background: var(--bg-card); aspect-ratio: 4/3; transition: border-color var(--t-normal); } .vr-preview-item:hover { border-color: rgba(0,255,65,.3); } .vr-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .vr-remove-btn { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,68,68,.85); border: none; color: #fff; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast); line-height: 1; } .vr-remove-btn:hover { background: var(--accent-red); } .vr-file-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.7); padding: 3px 6px; font-size: 9px; color: var(--accent-green); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Submit button variant */ .btn-vr-submit { width: 100%; padding: 14px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; } /* Status bar */ .vr-status-bar { margin-top: 16px; } .vr-status-bar i { color: var(--accent-cyan); } /* ══════════════════════════════════════════════════════════ DOWNLOAD REPORT MODAL ══════════════════════════════════════════════════════════ */ #download-modal .modal-box { border-top-color: var(--accent-green); text-align: center; max-width: 480px; } .dl-success-icon { font-size: 3.2rem; margin-bottom: 14px; animation: dl-pop .4s cubic-bezier(.36,.07,.19,.97); } @keyframes dl-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } .dl-title { color: var(--accent-green); font-size: 18px; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; text-shadow: 0 0 18px rgba(0,255,65,.3); } .dl-sub { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); margin-bottom: 24px; } .dl-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .btn-dl-word { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all var(--t-normal); text-decoration: none; background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan)); color: var(--bg-base); border: none; box-shadow: 0 4px 20px rgba(0,255,65,.25); } .btn-dl-word:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(0,255,65,.45); color: var(--bg-base); } .btn-dl-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all var(--t-normal); text-decoration: none; background: transparent; color: var(--accent-green); border: 2px solid rgba(0,255,65,.5); } .btn-dl-pdf:hover { background: rgba(0,255,65,.08); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,255,65,.2); color: var(--accent-green); border-color: var(--accent-green); } .dl-again { color: var(--accent-cyan); font-size: 12px; font-family: var(--font-mono); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: opacity var(--t-fast); opacity: .8; } .dl-again:hover { opacity: 1; } /* ══════════════════════════════════════════════════════════ CONSENT BOX ══════════════════════════════════════════════════════════ */ .consent-box { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(194,116,10,.35); background: rgba(194,116,10,.07); border-radius: 8px; font-size: 11px; color: #8a5a06; font-family: var(--font-mono); } .consent-box label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .consent-box input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; } .consent-box small { display: block; margin-top: 4px; color: #6e4705; } /* ══════════════════════════════════════════════════════════ UTILITY ADDITIONS — semantic class replacements ══════════════════════════════════════════════════════════ */ /* Visually hidden file inputs */ .visually-hidden { display: none !important; } /* Misc layout utilities */ .ml-auto { margin-left: auto; } .fs-tiny { font-size: 8px; } /* Flat status legend (no border-radius) */ .status-legend--flat { border-radius: 0; } /* Status legend pill colours */ .status-legend span, .leg-200, .leg-3xx, .leg-403, .leg-401, .leg-500, .leg-open, .leg-vuln, .leg-step { padding: 2px 7px; border-radius: 3px; cursor: pointer; transition: opacity var(--t-fast); } .leg-200 { background: rgba(255,140,0,.15); color: #ff8c00; border: 1px solid rgba(255,140,0,.3); } .leg-3xx { background: rgba(61,142,255,.12); color: #3d8eff; border: 1px solid rgba(61,142,255,.25); } .leg-403 { background: rgba(255,170,0,.12); color: #ffaa00; border: 1px solid rgba(255,170,0,.25); } .leg-401 { background: rgba(160,122,255,.12);color: #a07aff; border: 1px solid rgba(160,122,255,.25); } .leg-500 { background: rgba(255,61,87,.18); color: #ff3d57; border: 1px solid rgba(255,61,87,.3); } .leg-open { background: rgba(0,255,65,.08); color: var(--accent-green); border: 1px solid rgba(0,255,65,.2); } .leg-vuln { background: rgba(255,61,87,.12); color: #ff6b7a; border: 1px solid rgba(255,61,87,.25); } .leg-step { background: rgba(255,215,0,.08); color: #ffd700; border: 1px solid rgba(255,215,0,.2); } .status-legend span:hover, .leg-200:hover, .leg-3xx:hover, .leg-403:hover, .leg-401:hover, .leg-500:hover, .leg-open:hover, .leg-vuln:hover, .leg-step:hover { opacity: .7; } /* HTTP status filter button colours */ .btn-filter-200 { border-color: rgba(255,140,0,.4) !important; color: #ff8c00 !important; } .btn-filter-3xx { border-color: rgba(61,142,255,.4) !important; color: #3d8eff !important; } .btn-filter-403 { border-color: rgba(255,170,0,.4) !important; color: #ffaa00 !important; } .btn-filter-500 { border-color: rgba(255,61,87,.4) !important; color: #ff3d57 !important; } /* Soft danger confirm button */ .btn-danger-soft { background: rgba(255,68,68,.15) !important; border: 1px solid rgba(255,68,68,.4) !important; color: #ff4444 !important; } .btn-danger-soft:hover { background: rgba(255,68,68,.28) !important; box-shadow: 0 0 12px rgba(255,68,68,.3) !important; } /* Conf badge inline margin */ .conf-badge-inline { margin-left: 8px; } /* Session count label */ .session-count-label { font-size: 11px; color: var(--text-secondary); font-weight: 400; margin-left: 8px; } /* Required field star */ .required-star { color: var(--accent-red); } /* Bulk scan layout helpers */ .bulk-controls-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .file-label-text { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .bulk-banner-wrapper { margin-top: 12px; } .bulk-progress-wrapper { margin-top: 20px; } /* Log action bar (bottom of log viewer) */ .log-action-bar { padding: 14px 18px; background: var(--bg-primary); border-top: 1px solid var(--border-primary); display: flex; justify-content: center; gap: 10px; }