/* filename: /be-sec-web/assets/css/styles.css */
:root{
    --bg:#0b111f; --bg-2:#0e162b; --txt:#e5e7eb; --muted:#94a3b8;
    --primary:#00B5FF; --primary-300:#6bd6ff;
    --success:#16a34a; --warn:#f59e0b; --danger:#dc2626;
    --card:#111827; --border:#1f2937;
    --radius:12px;
}
*{box-sizing:border-box} html,body{margin:0}
body.page{background:var(--bg); color:var(--txt); font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--primary); text-decoration:none}
.header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #0b2b3a;background:rgba(14,22,43,.9);backdrop-filter:blur(6px)}
.logo{font-weight:800; letter-spacing:.5px}
.nav a{margin:0 10px; color:var(--txt); opacity:.9}
.nav a.active{color:var(--primary-300)}
.badge{border:1px solid var(--border); padding:4px 10px; border-radius:999px}
.badge.ghost{background:transparent}
.container{max-width:960px; margin:0 auto; padding:24px}
.hero{padding:24px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius)}
.sub{color:var(--muted)}
.scan-form .row{display:flex; gap:8px; margin-top:8px}
input[type="url"],input[type="text"]{flex:1; padding:12px; border:1px solid var(--border); border-radius:10px; background:#0b1426; color:var(--txt)}
.btn{background:var(--primary); color:#001018; border:none; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer}
.btn.secondary{background:#1f2a44; color:var(--txt)}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--txt)}
.row{display:flex; align-items:center}
.space-between{justify-content:space-between}
.align-center{align-items:center}
.gap{gap:10px}
.mt{margin-top:12px}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.card{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:var(--radius); margin-top:16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.stack{display:flex; flex-direction:column}
.hidden{display:none}
.progress{height:10px; background:#0b1426; border-radius:999px; overflow:hidden; border:1px solid var(--border); margin-top:10px}
.progress-bar{height:100%; background:var(--primary); width:0%}
.chip{padding:4px 10px; border-radius:999px; border:1px solid var(--border)}
.chip.info{background:#0b1426}
.score{display:flex; align-items:center; gap:10px}
.grade{display:inline-block; min-width:42px; text-align:center; font-weight:900; background:#081627; border:1px solid #123149; padding:6px 10px; border-radius:10px}
.score-value{opacity:.9}
.badges{display:flex; gap:6px; flex-wrap:wrap}
.badge-pill{border:1px solid var(--border); padding:6px 10px; border-radius:999px; background:#0b1426}
.badge-pill.muted{opacity:.6}
.findings{margin-top:10px}
.finding{border-left:3px solid #17304b; padding-left:10px; margin:8px 0}
.finding.high{border-color:var(--warn)}
.finding.critical{border-color:var(--danger)}
.footer{padding:24px; border-top:1px solid var(--border); text-align:center; color:var(--muted)}
.modal{border:none; background:transparent}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-card{background:var(--card); color:var(--txt); border:1px solid var(--border); border-radius:var(--radius); padding:16px; width:min(560px, 92vw)}
.list{margin:8px 0 0 0; padding-left:18px}
.row.end{justify-content:flex-end}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (max-width:800px){ .grid2{grid-template-columns:1fr} .nav a{margin:0 6px} }