:root { color-scheme: dark; --bg:#050914; --panel:rgba(8,18,34,.88); --line:#254968; --text:#dcecff; --muted:#839ab3; --accent:#64d5ff; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 65% 20%,#102644 0,var(--bg) 52%); color:var(--text); font:14px/1.4 system-ui,sans-serif; }
.topbar { min-height:76px; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #17324c; background:rgba(3,9,20,.82); }
.user-menu { position:relative; } .menu-toggle { min-width:42px; font-size:21px; line-height:1; } .user-menu-panel { position:absolute; z-index:20; top:calc(100% + 8px); right:0; width:210px; padding:8px; border:1px solid #397e88; border-radius:7px; background:#071525; box-shadow:0 14px 35px #000b; } .user-menu-panel.hidden { display:none; } .user-menu-heading { padding:8px 9px 10px; color:#a4f6db; font-size:11px; letter-spacing:.14em; border-bottom:1px solid #24475b; } .user-menu-panel button { display:block; width:100%; margin-top:7px; text-align:left; font-size:11px; letter-spacing:.06em; } .user-menu-panel form { margin:0; } .user-menu-panel .logout-button { margin-top:12px; color:#ffb0a4; border-color:#8a4d4d; }
.eyebrow { color:var(--accent); letter-spacing:.16em; font-size:11px; } h1,h2,p { margin:0; } h1 { font-size:21px; font-weight:500; } h2 { font-size:14px; margin-bottom:12px; }
.upload { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } input[type=file] { max-width:280px; color:var(--muted); } input[type=text],input:not([type]) { min-width:150px; border:1px solid #294b65; border-radius:5px; padding:8px; color:var(--text); background:#071525; } button { border:1px solid #3d8fb3; border-radius:5px; padding:8px 12px; color:#e9fbff; background:#12384e; cursor:pointer; } button:hover { background:#18516c; }
.notice { margin:12px 24px 0; padding:9px 12px; border-radius:5px; background:var(--panel); } .notice.error { color:#ffb0a4; } .notice.success { color:#a7f5bf; }
.layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; padding:16px 24px 24px; min-height:calc(100vh - 77px); }
.sidebar,.viewer-shell { border:1px solid var(--line); background:rgba(5,13,26,.7); border-radius:8px; } .sidebar { padding:16px; } .muted { color:var(--muted); }
.snapshot-list { display:grid; gap:6px; max-height:65vh; overflow:auto; } .snapshot { display:block; padding:9px; border:1px solid transparent; border-radius:5px; color:var(--text); text-decoration:none; overflow:hidden; } .snapshot:hover,.snapshot.selected { background:#102d46; border-color:#286486; } .snapshot span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .snapshot small { color:var(--muted); }
.metadata { border-top:1px solid var(--line); margin-top:18px; padding-top:16px; color:var(--muted); display:grid; gap:5px; }
.comment { margin-top:8px; padding-top:8px; border-top:1px solid #1d3a52; color:#d1e8f4; white-space:pre-wrap; }
.viewer-shell { min-height:650px; overflow:hidden; } .canvas-wrap { position:relative; height:calc(100vh - 125px); min-height:650px; } canvas { display:block; width:100%; height:100%; cursor:grab; } canvas:active { cursor:grabbing; }
.hud { position:absolute; top:12px; left:14px; color:#8eb8d6; font-size:11px; letter-spacing:.08em; pointer-events:none; } .inspector { position:absolute; left:16px; bottom:16px; width:370px; padding:13px; border:1px solid #4b9dc2; border-radius:6px; background:rgba(2,9,19,.9); box-shadow:0 10px 30px #0008; } .inspector.hidden { display:none; } .inspector h3 { margin:0 0 7px; color:#8ce1ff; font-size:15px; } .inspector div { color:#c8d8e8; margin:3px 0; font-size:12px; } .inspector div span { color:#8eb8d6; display:inline-block; min-width:58px; font-size:10px; letter-spacing:.06em; } .inspector .inspector-accent { color:#7fe8ff; }
.viewer-actions { position:absolute; top:34px; left:14px; display:flex; align-items:center; z-index:2; } .viewer-button { position:static; margin-right:8px; padding:5px 9px; border:1px solid #3d8fb3; border-radius:5px; color:#e9fbff; background:rgba(8,31,45,.9); font-size:11px; letter-spacing:.04em; } .filter-select { appearance:auto; } .filter-select:disabled { opacity:.85; color:#a4f6db; border-color:#39a885; cursor:not-allowed; }
.snapshot-menu { position:absolute; z-index:5; top:34px; right:14px; } .snapshot-menu .viewer-button { margin:0; font-size:17px; line-height:1; } .snapshot-menu .user-menu-panel { top:calc(100% + 8px); }
.summary-button { color:#d7f3ff; } .ai-button { color:#bfffe7; border-color:#39a885; } .ai-button:disabled,.summary-button:disabled { opacity:.65; cursor:wait; }
.ai-report { position:absolute; z-index:4; top:16px; right:16px; width:min(480px,calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; padding:16px; border:1px solid #397e88; border-radius:8px; background:rgba(3,12,23,.96); box-shadow:0 14px 40px #000b; } .ai-report.hidden { display:none; } .ai-report h2 { color:#a4f6db; } .ai-report h3 { margin:0 0 4px; color:#e0f8ff; } .ai-report h4 { margin:12px 0 4px; color:#8eb8d6; font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .ai-report p { margin:8px 0; } .ai-report-head { display:flex; align-items:center; gap:8px; } .ai-report-head > div { margin-right:auto; } .ai-report-head button,.ip-links button { padding:4px 7px; font-size:11px; } .ai-summary { color:#d7edf2; } .risk { color:var(--muted); font-size:11px; letter-spacing:.1em; } .risk strong { color:#a4f6db; } .finding { margin-top:14px; padding-top:12px; border-top:1px solid #24475b; } .finding-tags { color:#ffcc8a; font-size:11px; text-transform:uppercase; } .ai-report ul { padding-left:20px; color:#c8d8e8; } .ai-report li { margin:4px 0; } .ip-links { color:#8eb8d6; margin-top:8px; } .ip-links button { margin:2px; color:#bfefff; background:#12384e; border-color:#367c91; } .loading { color:#a4f6db; } .error-box { color:#ffb0a4; } .ai-report details { margin-top:14px; color:#c8d8e8; } .ai-report details summary { cursor:pointer; color:#8eb8d6; }
.ai-thread { margin-top:14px; padding-top:10px; border-top:1px solid #24475b; } .ai-turn { margin:8px 0; padding:8px 10px; border-radius:5px; color:#d7edf2; } .ai-turn strong { display:block; margin-bottom:3px; color:#a4f6db; font-size:11px; letter-spacing:.08em; } .ai-turn.user { background:rgba(29,77,92,.34); } .ai-turn.assistant { background:rgba(29,54,77,.34); } .ai-report-foot { display:grid; gap:8px; margin-top:14px; padding-top:10px; border-top:1px solid #24475b; } .ai-report-foot textarea { width:100%; resize:vertical; border:1px solid #294b65; border-radius:5px; padding:8px; color:var(--text); background:#071525; font:inherit; } .ai-report-actions { display:flex; gap:8px; }
.direct-answer { margin:12px 0; padding:10px 12px; border-left:3px solid #64d5ff; background:rgba(23,70,88,.3); } .direct-answer h4 { margin:0 0 5px; }
.summary-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0 16px; } .summary-metrics div { padding:8px 6px; background:rgba(23,70,88,.3); text-align:center; } .summary-metrics strong,.summary-metrics small { display:block; } .summary-metrics strong { color:#a4f6db; font-size:18px; } .summary-metrics small,.summary-row small { color:var(--muted); font-size:10px; letter-spacing:.05em; } .summary-row { margin:9px 0 13px; } .summary-row-head { display:flex; justify-content:space-between; gap:8px; color:#c8d8e8; font-size:12px; } .summary-row-head button { padding:0; border:0; background:none; color:#8ce1ff; font:inherit; cursor:pointer; } .summary-bar { height:7px; margin:4px 0; border-radius:5px; background:#11283a; overflow:hidden; } .summary-bar span { display:block; height:100%; border-radius:5px; }
.summary-identity { display:flex; align-items:baseline; gap:7px; min-width:0; } .summary-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; text-transform:none; letter-spacing:0; }
.empty { height:100%; min-height:650px; display:grid; place-content:center; text-align:center; color:var(--muted); } .empty h2 { color:var(--text); font-size:20px; }
.login-form { display:grid; gap:10px; width:min(320px,calc(100vw - 40px)); margin:0 auto; } .login-form input { width:100%; border:1px solid #294b65; border-radius:5px; padding:9px; color:var(--text); background:#071525; } .login-form button { width:100%; }
.ai-report { z-index:7; } .comment-bubble { margin:9px 0; padding:9px; border-radius:6px; background:rgba(29,54,77,.34); } .comment-bubble strong { display:block; color:#a4f6db; font-size:11px; margin-bottom:3px; }
.snapshot-host-note { color:#d1e8f4; margin-bottom:4px; } .snapshot-description { display:flex; align-items:baseline; gap:6px; color:#d1e8f4; } .snapshot-description button { padding:0; border:0; background:none; color:#8eb8d6; cursor:pointer; }
.intel-window { margin:10px 0; color:#a4f6db; font-size:11px; letter-spacing:.06em; } .intel-event { margin:9px 0; padding:9px 10px; border-left:2px solid #64d5ff; background:rgba(23,70,88,.24); color:#c8d8e8; font-size:12px; } .intel-event-head { display:flex; justify-content:space-between; gap:8px; margin-bottom:5px; color:#d7edf2; } .intel-event b { color:#8eb8d6; font-size:10px; margin-right:4px; } .intel-event pre { white-space:pre-wrap; overflow-wrap:anywhere; color:#9eb7c9; font:11px/1.4 monospace; }
.upload-modal { width:min(460px,calc(100vw - 32px)); padding:0; color:var(--text); border:1px solid #397e88; border-radius:8px; background:#071525; box-shadow:0 18px 55px #000c; } .upload-modal::backdrop { background:rgba(0,0,0,.65); } .upload-modal-body { display:grid; gap:10px; padding:18px; } .upload-modal input { width:100%; border:1px solid #294b65; border-radius:5px; padding:9px; color:var(--text); background:#050f1d; } .upload-modal input[type=file] { padding:7px; } .upload-modal h2 { margin:0; } .upload-modal .ai-report-head button { margin-left:auto; font-size:20px; line-height:1; padding:4px 9px; }
@media (max-width:800px) { .topbar { align-items:flex-start; gap:12px; flex-direction:column; } .layout { grid-template-columns:1fr; } .sidebar { order:2; } .viewer-shell { order:1; } }