:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: #edf5f7;
  background: #080d11;
  --canvas: #080d11;
  --sidebar: #11171b;
  --surface: #151b1f;
  --surface-2: #1a2126;
  --surface-3: #0d1317;
  --border: #273137;
  --border-soft: #20292e;
  --cyan: #12c7df;
  --cyan-deep: #0c8597;
  --cyan-soft: #0d3037;
  --text: #edf5f7;
  --muted: #8e9ba3;
  --green: #34d399;
  --amber: #f5b74b;
  --red: #ff6b72;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
.session-loading { opacity: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(1.65rem, 2vw, 2.15rem); letter-spacing: -.035em; }
h2 { margin-bottom: .45rem; font-size: 1.13rem; letter-spacing: -.015em; }
h3 { margin-bottom: .45rem; font-size: 1rem; }
.muted { color: var(--muted); }
.eyebrow { margin-bottom: .45rem; color: var(--cyan); font-size: .72rem; font-weight: 750; letter-spacing: .13em; }
.icon, .brand-mark, .metric-icon, .empty-icon { display: inline-block; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.i-home { --icon: url('/assets/icons/home.svg'); }.i-target-arrow { --icon: url('/assets/icons/target-arrow.svg'); }.i-radar { --icon: url('/assets/icons/radar.svg'); }.i-alert-triangle { --icon: url('/assets/icons/alert-triangle.svg'); }.i-file-text { --icon: url('/assets/icons/file-text.svg'); }.i-checklist { --icon: url('/assets/icons/checklist.svg'); }.i-logout { --icon: url('/assets/icons/logout.svg'); }.i-plus { --icon: url('/assets/icons/plus.svg'); }.i-shield-check { --icon: url('/assets/icons/shield-check.svg'); }.i-search { --icon: url('/assets/icons/search.svg'); }.i-download { --icon: url('/assets/icons/download.svg'); }.i-lock { --icon: url('/assets/icons/lock.svg'); }.i-eye { --icon: url('/assets/icons/eye.svg'); }.i-menu { --icon: url('/assets/icons/menu-2.svg'); }.i-user { --icon: url('/assets/icons/user.svg'); }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(420px, .88fr); background: #0a0e11; }
.login-visual { position: relative; min-height: 720px; overflow: hidden; background: #050b11; }
.login-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .88; }
.login-visual::after { content: ""; position: absolute; inset: 0; background: rgba(4, 9, 14, .2); box-shadow: inset -80px 0 120px #0a0e11; pointer-events: none; }
.brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.05rem; letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: .72rem; margin-top: .08rem; }
.brand-mark { width: 2rem; height: 2rem; color: var(--cyan); }
.brand-login { position: absolute; z-index: 2; top: 2.3rem; left: 3rem; }
.brand-login strong { font-size: 1.35rem; }
.brand-login small { color: #9eb0bc; }
.visual-caption { position: absolute; z-index: 2; left: 3rem; bottom: 2.6rem; display: flex; align-items: flex-start; gap: .8rem; max-width: 390px; padding: .9rem 1rem; border: 1px solid rgba(18,199,223,.28); background: rgba(8,17,24,.82); border-radius: 8px; backdrop-filter: blur(10px); }
.visual-caption p { margin: 0; color: #b7c5ce; font-size: .85rem; }
.visual-caption strong { color: #f3f8fa; }
.signal, .status-dot { width: .55rem; height: .55rem; margin-top: .35rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52,211,153,.12); flex: 0 0 auto; }
.login-panel { display: grid; align-items: center; padding: 4rem clamp(2.2rem, 5vw, 6rem); background: #101416; border-left: 1px solid #1a2328; }
.login-form { width: min(100%, 470px); margin: auto; }
.login-form h1 { font-size: 2rem; }
.login-form > .muted { margin-bottom: 2rem; }
.login-form label { display: grid; gap: .5rem; margin: 1.1rem 0; color: #cad4d9; font-size: .8rem; font-weight: 650; }
.login-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.4rem; color: #75838b; font-size: .75rem; }

input, select, textarea { width: 100%; min-height: 42px; padding: .68rem .8rem; color: var(--text); background: #0c1114; border: 1px solid #303a40; border-radius: 5px; }
input::placeholder, textarea::placeholder { color: #5f6c73; }
textarea { min-height: 94px; resize: vertical; line-height: 1.45; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .48rem; min-height: 38px; padding: .58rem .9rem; border: 1px solid transparent; border-radius: 5px; font-weight: 700; font-size: .8rem; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.button:disabled { cursor: wait; opacity: .6; }
.button-primary { color: #031014; background: var(--cyan); border-color: var(--cyan); }
.button-primary:hover { background: #40d4e6; }
.button-secondary { color: var(--cyan); background: transparent; border-color: var(--cyan-deep); }
.button-secondary:hover, .button-quiet:hover { background: var(--cyan-soft); }
.button-quiet { color: #b9c5cb; background: transparent; border-color: #39444a; }
.button-wide { width: 100%; margin-top: .4rem; }
.text-button { padding: 0; color: var(--cyan); background: none; border: 0; font-weight: 700; font-size: .78rem; cursor: pointer; }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; color: #aab8bf; background: transparent; border: 1px solid #303a40; border-radius: 50%; cursor: pointer; }
.form-message { min-height: 1.2rem; margin: .9rem 0 0; color: #9fb0b8; font-size: .78rem; }
.form-message.error { color: #ff9ca1; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 10; height: 100vh; padding: 1.35rem 1rem; background: var(--sidebar); border-right: 1px solid var(--border-soft); }
.sidebar .brand { height: 48px; margin: 0 .45rem 1.8rem; }
.sidebar nav { display: grid; gap: .32rem; }
.nav-item { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 43px; padding: .72rem .8rem; color: #aab4ba; background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: .82rem; font-weight: 650; text-align: left; cursor: pointer; }
.nav-item:hover { color: #eef7fa; background: #192126; }
.nav-item.active { color: var(--cyan); background: #123039; border-color: #166575; }
.nav-item .icon { width: 1.15rem; height: 1.15rem; }
.sidebar-foot { position: absolute; right: 1.2rem; bottom: 1.4rem; left: 1.2rem; display: flex; align-items: flex-start; gap: .72rem; padding: .8rem; background: #0d1418; border: 1px solid #243036; border-radius: 6px; }
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { font-size: .76rem; }
.sidebar-foot small { margin-top: .14rem; color: var(--muted); font-size: .67rem; }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 8; display: flex; justify-content: space-between; align-items: center; min-height: 72px; margin: 0; padding: .8rem 1.7rem; background: rgba(15,20,23,.95); border-bottom: 1px solid var(--border-soft); backdrop-filter: blur(12px); }
.topbar-actions, .admin-profile { display: flex; align-items: center; gap: .8rem; }
.admin-profile { position: relative; margin-left: auto; }
.profile-trigger { display: flex; align-items: center; gap: .8rem; padding: .3rem; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.profile-trigger:hover, .profile-trigger[aria-expanded="true"] { background: #182126; border-color: #29363c; }
.profile-identity { text-align: right; }
.profile-identity strong, .profile-identity small { display: block; }
.profile-identity strong { color: #e4edef; font-size: .78rem; }
.profile-identity small { margin-top: .1rem; color: var(--cyan); font-size: .68rem; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; color: #dff8fb; background: #203137; border-radius: 50%; font-size: .75rem; font-weight: 800; }
.profile-menu { position: absolute; z-index: 30; top: calc(100% + .45rem); right: 0; display: grid; min-width: 172px; padding: .3rem; background: #181d20; border: 1px solid #273137; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.profile-menu button { display: flex; align-items: center; gap: .65rem; min-height: 38px; padding: .6rem .72rem; color: #d7e1e5; background: transparent; border: 0; border-radius: 4px; text-align: left; cursor: pointer; }
.profile-menu button:hover, .profile-menu button:focus-visible { color: var(--cyan); background: var(--cyan-soft); }
.profile-menu .icon { width: 1rem; height: 1rem; }
.mode-chip, .session-label, .total-pill { display: inline-flex; align-items: center; gap: .55rem; color: #9faeb5; font-size: .72rem; font-weight: 650; }
.content { min-height: calc(100vh - 118px); padding: 2.2rem clamp(1.25rem, 2.2vw, 2.35rem); }
.view { display: none; }
.view.active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.65rem; }
.page-heading p:last-child { margin-bottom: 0; }
.guardrail { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; padding: .9rem 1rem; color: #bce8ee; background: #0d242a; border: 1px solid #154e59; border-left: 3px solid var(--cyan); border-radius: 5px; font-size: .79rem; }
.guardrail.neutral { color: #bec9ce; background: #161c20; border-color: #323c41; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.metric { position: relative; min-height: 174px; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.metric::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; opacity: .65; }
.metric-icon { float: right; width: 3.2rem; height: 3.2rem; padding: .8rem; color: currentColor; opacity: .8; }
.metric div { margin-top: 1.65rem; }
.metric strong, .metric span, .metric small { display: block; }
.metric strong { color: #f5fafb; font-size: 2rem; line-height: 1; }
.metric span { margin-top: .4rem; color: #dce7ea; font-weight: 700; }
.metric small { position: absolute; bottom: 1.3rem; color: var(--muted); font-size: .72rem; }
.metric-cyan { color: var(--cyan); }.metric-amber { color: var(--amber); }.metric-green { color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1rem; }
.panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px; }
.panel:not(.table-panel):not(.filters) { padding: 1.25rem; }
.panel-heading, .table-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.panel-heading { margin-bottom: 1rem; }
.panel-heading p, .panel-heading h2 { margin-bottom: .25rem; }
.quick-start { background: #121c20; border-color: #1c444d; }
.quick-start > p { max-width: 580px; color: #9eacb3; line-height: 1.65; }
.step-badge { padding: .32rem .48rem; color: var(--cyan); background: #0d2e35; border: 1px solid #185d6a; border-radius: 4px; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.empty-state { display: grid; justify-items: center; align-content: center; min-height: 155px; color: #829097; text-align: center; }
.empty-state.compact { min-height: 190px; }
.empty-state .empty-icon { width: 2rem; height: 2rem; margin-bottom: .7rem; color: #4a5b63; }
.empty-state strong { color: #b9c5ca; }
.empty-state p { margin: .28rem 0 0; font-size: .76rem; }
.activity-list { width: 100%; }
.activity-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .72rem 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
.activity-row:last-child { border-bottom: 0; }
.activity-row > span:nth-child(2) strong, .activity-row > span:nth-child(2) small { display: block; }
.activity-row > span:nth-child(2) strong { color: #dbe6e9; font-size: .78rem; }
.activity-row > span:nth-child(2) small { margin-top: .15rem; color: var(--muted); font-size: .68rem; }
.activity-icon { display: inline-block; width: 1.35rem; height: 1.35rem; color: var(--cyan); background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.scan-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr); gap: 1rem; margin-bottom: 1rem; }
.reports-layout { display: grid; gap: 1rem; }
.form-panel { padding: 1.2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.form-grid label { display: grid; align-content: start; gap: .36rem; color: #aebbc1; font-size: .76rem; font-weight: 650; }
.form-grid label small { color: #68777f; font-size: .68rem; font-weight: 500; }
.form-grid .full { grid-column: 1 / -1; }
.profile-panel { padding: 1.25rem; }
.profile-summary { display: flex; align-items: center; gap: 1rem; min-height: 120px; padding: .25rem 0 1.25rem; border-bottom: 1px solid var(--border); }
.profile-summary h2, .profile-summary p { margin-bottom: .32rem; }
.profile-summary .button { margin-left: auto; align-self: flex-start; }
.profile-avatar { width: 88px; height: 88px; color: #effcfd; background: #14353c; font-size: 1.8rem; }
.profile-columns { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.2rem; }
.profile-columns.password-open { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.profile-section { padding: 1.1rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.profile-form-grid.single-column { grid-template-columns: 1fr; }
.profile-form-grid label { display: grid; gap: .36rem; color: #aebbc1; font-size: .76rem; font-weight: 650; }
.profile-form-grid label small { color: #68777f; font-size: .68rem; font-weight: 500; }
.profile-form-grid .full { grid-column: 1 / -1; }
.profile-form-grid input[readonly] { color: #849198; background: #11171a; cursor: not-allowed; }
.check { grid-template-columns: auto 1fr !important; align-items: flex-start; padding: .85rem; background: #0e1519; border: 1px solid #28343a; border-radius: 5px; }
.check input { width: 16px; min-height: 16px; margin: .08rem 0 0; accent-color: var(--cyan); }
.scope-card ul { margin: 1rem 0 1.2rem; padding-left: 1.2rem; color: #adbac0; line-height: 2; font-size: .8rem; }
.scope-card li::marker { color: var(--cyan); }
.scope-stop { display: flex; gap: .7rem; padding: .8rem; color: #a5b1b6; background: #0d1317; border: 1px solid #2c373c; border-radius: 5px; font-size: .75rem; }
.table-panel { overflow: hidden; }
.table-toolbar { align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: .72rem .85rem; border-bottom: 1px solid #20282d; text-align: left; vertical-align: middle; }
th { color: #dce6e9; background: #19545e; font-size: .68rem; letter-spacing: .025em; }
td { color: #b6c1c6; background: #11171a; font-size: .74rem; }
tbody tr:hover td { background: #151e22; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .45rem; border-radius: 4px; font-size: .67rem; font-weight: 800; }
.badge-green { color: var(--green); background: rgba(52,211,153,.11); }.badge-amber { color: var(--amber); background: rgba(245,183,75,.11); }.badge-red { color: var(--red); background: rgba(255,107,114,.11); }.badge-cyan { color: var(--cyan); background: rgba(18,199,223,.1); }
.download-button { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--green); background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2); border-radius: 4px; cursor: pointer; }
.filters { display: grid; grid-template-columns: minmax(260px, 1fr) 240px; gap: .8rem; margin-bottom: 1rem; padding: .8rem; }
.filters label { display: flex; align-items: center; gap: .6rem; color: #aebbc1; font-size: .75rem; }
.filters .icon { margin-left: .3rem; color: #75858c; }
.filters input { border: 0; background: transparent; }
.total-pill { padding: .45rem .65rem; color: var(--cyan); background: var(--cyan-soft); border: 1px solid #175461; border-radius: 4px; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.test-card { display: flex; flex-direction: column; min-height: 210px; padding: 1rem; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 7px; }
.test-card .meta { color: var(--cyan); font-size: .68rem; font-weight: 750; letter-spacing: .07em; }
.test-card h3 { line-height: 1.35; }
.test-card > p:not(.meta) { flex: 1; color: #93a1a8; font-size: .77rem; line-height: 1.55; }
.approval { align-self: flex-start; padding: .25rem .42rem; color: #b8f4e2; background: #17332c; border-radius: 4px; font-size: .64rem; font-weight: 750; }
.approval.active { color: #ffdaa0; background: #3b2d17; }.approval.two-person { color: #ffb7bc; background: #3a2024; }.approval.human { color: #b9dcff; background: #1d3044; }
footer { padding: 1rem 2.35rem; color: #627078; border-top: 1px solid var(--border-soft); font-size: .68rem; }
.mobile-only { display: none; }

@media (max-width: 1100px) {
  .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 2rem 1.4rem; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -250px; width: 236px; transition: left .2s ease; box-shadow: 12px 0 30px rgba(0,0,0,.42); }
  .app-shell.menu-open .sidebar { left: 0; }
  .mobile-only { display: inline-grid; }
  .topbar { gap: .8rem; padding: .7rem 1rem; }
  .topbar-actions .mode-chip { display: none; }
  .profile-identity { display: none; }
  .content { padding: 1.5rem 1rem; }
  .metrics, .dashboard-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .profile-columns.password-open { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
}

@media (max-width: 560px) {
  .catalogue-grid, .filters { grid-template-columns: 1fr; }
  .topbar-actions .button { font-size: 0; }
  .topbar-actions .button .icon { margin: 0; }
  .metric { min-height: 150px; }
  .admin-profile { gap: .45rem; }
  .profile-summary { align-items: flex-start; flex-wrap: wrap; }
  .profile-summary .button { width: 100%; margin-left: 0; }
  .profile-avatar { width: 64px; height: 64px; font-size: 1.25rem; }
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-form-grid .full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }