:root { --ink:#e9eef9; --muted:#9ba9c2; --canvas:#08111f; --surface:#101c2e; --surface2:#14233a; --line:#223653; --accent:#53d0ac; --accent-deep:#1fa27f; --danger:#ff6b71; --warn:#f7bd5b; --medium:#9d83ff; --low:#51b5f9; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
[hidden] { display:none !important; }
* { box-sizing:border-box } body { margin:0; min-height:100vh; background:var(--canvas) } button, input, select { font:inherit } button { cursor:pointer } h1,h2,h3,p { margin-top:0 } h1 { font-size:28px; letter-spacing:-.04em; margin-bottom:0 } h2 { font-size:20px; letter-spacing:-.025em; margin-bottom:5px } h3 { margin:0; font-size:15px } .muted,.section-heading p { color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:0 }.eyebrow,.metric-label { color:#6f83a6; font-size:10px; font-weight:750; letter-spacing:.14em; margin:0 0 10px }.mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#06221c; background:linear-gradient(145deg,#7bf1cd,#38b894); font-weight:900; box-shadow:0 8px 22px #36b59033 }
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; background:radial-gradient(circle at 20% 20%,#123855 0,#08111f 44%),#08111f }.login-brand { padding:clamp(48px,12vw,160px); display:flex; flex-direction:column; justify-content:center; max-width:800px }.login-brand h1 { font-size:clamp(36px,4vw,62px); line-height:1.04; margin:8px 0 22px; max-width:640px }.login-brand>p:not(.eyebrow) { font-size:17px; line-height:1.65; color:#aabbd3; max-width:500px }.feature-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }.feature-list span { border:1px solid #2a4563; padding:8px 11px; border-radius:20px; font-size:12px; color:#b9c9df }.login-card-wrap { background:#0d1829c9; display:grid; place-items:center; padding:30px }.login-card { width:min(100%,410px); padding:38px; border:1px solid #29425f; border-radius:18px; background:#111f33; box-shadow:0 25px 80px #0006 }.login-card h2 { font-size:25px; margin-bottom:8px }.login-card>label,.modal-card>label,.field-grid label { display:flex; flex-direction:column; gap:7px; margin-top:21px; font-size:12px; font-weight:700; color:#c4d0e2 } input,select { color:var(--ink); background:#0b1627; border:1px solid #29425f; padding:11px 12px; border-radius:8px; outline:none } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #53d0ac1c }.primary,.outline,.text-button,.logout,.nav { border:0; transition:.18s ease }.primary { color:#07221c; background:var(--accent); border-radius:8px; padding:11px 16px; font-weight:800; box-shadow:0 7px 20px #3cc5a62b }.primary:hover { background:#73dfbf; transform:translateY(-1px) }.primary span { float:right; font-size:18px; line-height:12px }.wide { width:100%; margin-top:25px }.hint { color:#7183a1; font-size:11px; text-align:center; margin:18px 0 0 }.hint code { color:#a7e7d6 }.form-error { color:#ff9ca1; font-size:12px; margin:14px 0 0; padding:9px; background:#48212a; border-radius:7px }
.app-shell { display:grid; grid-template-columns:220px 1fr; min-height:100vh }.sidebar { background:#0a1424; padding:24px 14px; border-right:1px solid #1e314a; display:flex; flex-direction:column }.brand { display:flex; align-items:center; gap:11px; padding:0 10px 35px; font-weight:800; letter-spacing:-.03em; font-size:19px }.sidebar nav { display:grid; gap:4px }.nav { color:#99a9c0; background:transparent; text-align:left; border-radius:8px; padding:11px; font-size:13px; font-weight:650 }.nav span { display:inline-block; width:26px; color:#7287a7; font-size:16px }.nav:hover,.nav.active { background:#14233a; color:#e8effb }.nav.active span { color:var(--accent) }.sidebar-foot { margin-top:auto; padding:15px 10px 4px }.secure-note { color:#7287a7; font-size:11px; margin-bottom:16px }.secure-note span { color:var(--accent) }.logout,.text-button { background:transparent; color:#a3b5cc; padding:0; font-size:12px }.logout:hover,.text-button:hover { color:var(--accent) }.content { min-width:0; padding:0 42px 50px; background:linear-gradient(120deg,#0b1524,#091321 55%,#0d1727) }.topbar { height:108px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #1d3048; margin-bottom:30px }.topbar .eyebrow { margin-bottom:7px }.user-badge { display:flex; align-items:center; gap:9px; color:#b9c7d8; font-size:13px }.avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#264665; color:#a2ead5; font-size:12px; font-weight:800 }.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:24px }.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px }.metric,.panel,.application-card,.scan-card,.progress-card,.finding { border:1px solid var(--line); background:linear-gradient(145deg,#122239,#0f1c2f); border-radius:12px }.metric { padding:18px }.metric strong { display:block; font-size:31px; letter-spacing:-.05em; color:#eaf2ff; margin:2px 0 6px }.metric small { font-size:11px; color:#778ba8 }.metric.danger strong { color:#ff8990 }.two-col { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-bottom:16px }.panel { padding:21px }.panel-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:19px }.panel-title span { color:#7285a1; font-size:11px }.severity-list { display:grid; gap:12px }.severity-row { display:grid; grid-template-columns:64px 1fr 25px; gap:10px; align-items:center; font-size:12px; color:#bdc9da }.bar { height:6px; background:#20334d; border-radius:6px; overflow:hidden }.bar i { height:100%; display:block; border-radius:6px }.critical i { background:var(--danger) }.high i { background:#ff9363 }.medium i { background:var(--medium) }.low i { background:var(--low) }.info i { background:#8292ab }.quick-panel p { color:#a7b7cb; font-size:13px; line-height:1.55; margin:0 0 22px }.quick-actions { display:flex; gap:10px }.outline { color:#c7d4e4; background:#172941; border:1px solid #34506e; border-radius:8px; padding:10px 13px; font-weight:700; font-size:12px }.outline:hover { background:#1c3450; border-color:#4a7398 }.recent { padding-bottom:7px }.table-wrap { overflow:auto }.data-table { width:100%; border-collapse:collapse; font-size:12px }.data-table th { color:#6f83a1; text-align:left; font-size:10px; letter-spacing:.09em; padding:0 10px 11px }.data-table td { border-top:1px solid #1d3048; padding:13px 10px; color:#c8d5e5 }.data-table td:first-child { font-weight:700; color:#eff5ff }.pill { display:inline-block; white-space:nowrap; border-radius:20px; padding:4px 8px; background:#20344e; color:#aabeD4; font-size:10px; font-weight:800 }.pill.queued { background:#273955;color:#a9bada }.pill.running { background:#24435a;color:#8dd9f3 }.pill.completed { background:#173f39;color:#7ce1c4 }.pill.failed { background:#4a2630;color:#ff9ba3 }.pill.warnings { background:#4a3c21;color:#f7ce77 }.applications-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }.application-card { padding:20px }.card-top { display:flex; justify-content:space-between; gap:10px }.application-card h3 { margin:0 0 5px; font-size:16px }.url { display:block; color:#8fa5c3; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:13px 0 0 }.app-tags { display:flex; gap:7px; margin-top:17px; flex-wrap:wrap }.app-tags span { padding:4px 7px; font-size:10px; border-radius:5px; background:#203450; color:#a8c0dc }.card-actions { display:flex; gap:8px; margin-top:20px }.card-actions button { flex:1 }.empty { border:1px dashed #34506e; color:#91a5c0; padding:32px; text-align:center; border-radius:11px; font-size:13px }.scan-list { display:grid; gap:11px }.scan-card { padding:18px 20px }.scan-row { display:flex; justify-content:space-between; gap:18px; align-items:center }.scan-main { min-width:0 }.scan-main h3 { margin:0 0 4px }.scan-main p { margin:0; color:#7f93af; font-size:12px }.scan-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end }.mini-progress { height:5px; border-radius:8px; background:#20334c; margin-top:15px; overflow:hidden }.mini-progress i { display:block; height:100%; background:var(--accent); border-radius:8px }.scan-actions { display:flex; gap:7px; margin-top:14px }.small-button { border:1px solid #34506e; background:transparent; color:#b8c9dc; padding:6px 9px; border-radius:6px; font-size:11px }.small-button:hover { border-color:#64cbae; color:#81e2c6 }.back-link { color:#72d6bb; font-size:12px; font-weight:700; cursor:pointer; margin-bottom:12px }.report-buttons { display:flex; gap:9px }.progress-card { padding:17px; margin-bottom:15px }.progress-top { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:13px }.progress-top span { color:#9dafc8 }.progress-line { margin-top:12px; height:8px; background:#1b2e46; border-radius:9px; overflow:hidden }.progress-line i { display:block; height:100%; background:linear-gradient(90deg,#2dac8d,#72e3c3); border-radius:9px }.findings-list { display:grid; gap:11px }.finding { padding:18px 20px }.finding-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:10px }.finding h3 { font-size:15px }.severity { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:5px; font-size:10px; font-weight:900; letter-spacing:.05em }.severity.critical { color:#ffabb0;background:#4a252d }.severity.high { color:#ffb08e;background:#4e3028 }.severity.medium { color:#c4b3ff;background:#302d54 }.severity.low { color:#92d7ff;background:#173c56 }.severity.info { color:#b7c1d0;background:#26364b }.finding-asset { color:#6fd0b3; font-size:11px; font-family:ui-monospace,monospace; margin:0 0 11px }.finding p { color:#aebcd0; line-height:1.5; font-size:13px; margin:0 0 12px }.finding details { border-top:1px solid #233650; padding-top:11px; color:#8ea3bf; font-size:12px }.finding summary { cursor:pointer; color:#b7c7da }.evidence { margin:8px 0 0; padding:9px; background:#091523; border-radius:6px; font:11px ui-monospace,monospace; white-space:pre-wrap; color:#b9c9dc }.remediation { margin-top:10px; font-size:12px; color:#b1c5de }.remediation strong { color:#81dbbf }.notice { padding:11px 14px; border:1px solid #306752; background:#123e34; color:#93e8ce; font-size:13px; border-radius:8px; margin:-10px 0 22px }.notice.error { border-color:#7a3b45; background:#48252c; color:#ffafb5 }
dialog { border:0; padding:0; background:transparent; max-width:min(680px,calc(100vw - 28px)); width:100%; color:var(--ink) } dialog::backdrop { background:#030914bb; backdrop-filter:blur(4px) }.modal-card { background:#102038; border:1px solid #34506e; border-radius:14px; padding:27px; box-shadow:0 25px 90px #000b }.modal-head { display:flex; justify-content:space-between; gap:10px }.modal-head h2 { font-size:21px; margin:0 }.icon-button { border:0; color:#91a6c0; background:transparent; font-size:26px; line-height:1; padding:0 3px }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px }.check { flex-direction:row!important; align-items:flex-start; font-size:12px!important; line-height:1.45; color:#aebdd0!important }.check input { margin:2px 0 0 }.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:25px }.upload-drop { align-items:center; justify-content:center; text-align:center; min-height:130px; border:1px dashed #52799b; background:#0c192a; border-radius:9px; cursor:pointer; color:#aabbd2!important; line-height:1.7; padding:16px; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease }.upload-drop:hover { border-color:#6ebcaa; background:#0f2031 }.upload-drop.compact { min-height:88px; margin-top:20px }.upload-drop input { display:none }.upload-drop strong { color:#72e2c2 }.upload-drop small { color:#6f86a4 }.upload-drop.has-file { border-style:solid; border-color:#3fbd9c; background:#102d31; box-shadow:0 0 0 3px #53d0ac12 }.upload-selection { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; text-align:left; line-height:1.35 }.file-type { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; color:#07221c; background:var(--accent); font-size:10px; font-weight:900; letter-spacing:.05em }.file-details { min-width:0 }.file-details strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e7f5f1 }.file-details small { display:block; margin-top:3px; color:#8fa9b4 }.selected-file-status { color:#75e1c3; font-size:11px; font-weight:800; white-space:nowrap }.upload-drop.uploading .selected-file-status { color:#80cfff }.upload-drop.upload-failed { border-color:#bb5965; background:#382129 }.upload-drop.upload-failed .selected-file-status { color:#ff9ca1 }
@media (max-width:900px) { .content { padding:0 24px 40px }.metric-grid { grid-template-columns:repeat(2,1fr) }.two-col { grid-template-columns:1fr }.login-shell { grid-template-columns:1fr }.login-brand { padding:50px 10vw }.login-card-wrap { padding:42px 20px }.app-shell { grid-template-columns:1fr }.sidebar { padding:13px 18px; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid #1e314a }.brand { padding:0 25px 0 0 }.sidebar nav { display:flex }.sidebar-foot { margin:0 0 0 auto; padding:0 }.secure-note { display:none }.nav { padding:9px }.nav span { width:auto;margin-right:4px } }
@media (max-width:620px) { .content { padding:0 15px 30px }.topbar { height:85px; margin-bottom:20px }.topbar h1 { font-size:23px }.user-badge span:last-child { display:none }.section-heading { flex-direction:column; margin-bottom:18px }.metric-grid { grid-template-columns:1fr 1fr; gap:9px }.metric { padding:14px }.metric strong { font-size:25px }.field-grid { grid-template-columns:1fr }.report-buttons { width:100% }.report-buttons button { flex:1 }.scan-row { align-items:flex-start; flex-direction:column }.scan-meta { justify-content:flex-start }.sidebar { overflow:auto }.brand { font-size:16px }.nav { font-size:11px; white-space:nowrap }.nav span { display:none }.login-card { padding:28px 23px }.login-brand h1 { font-size:37px } }