:root {
  --bg: #f4f6f9; --paper: #ffffff; --ink: #172033; --ink-2: #4a5568; --muted: #7b8698; --line: #dfe4ec; --line-2: #eef1f5;
  --navy: #1f3a5f; --navy-2: #2b4c7e; --navy-soft: #e7edf6; --navy-ink: #ffffff;
  --pass: #237a48; --pass-soft: #e3f3ea; --fail: #b3362b; --fail-soft: #fbe9e6; --warn: #9a6a12; --warn-soft: #fbf1dc; --skip: #6b7280; --skip-soft: #edf0f4;
  --critical: #7f1d1d; --high: #c2410c; --medium: #b7791f; --low: #2f6fb0; --info: #6b7280;
  --shadow: 0 1px 2px rgba(23,32,51,.06), 0 8px 24px -12px rgba(23,32,51,.18);
  --radius: 12px; --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 "Inter Variable", Inter, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--navy-2); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
.muted { color: var(--muted); font-size: 13px; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,76,126,.35); } 70% { box-shadow: 0 0 0 8px rgba(43,76,126,0); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }

/* top bar */
/* ---------- sidebar ---------- */
:root { --side-w: 244px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 14px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -.01em; padding: 4px 8px 16px; }
.brand .brand-mark { display: block; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(23,32,51,.18)); }
.brand span { font-size: 18px; letter-spacing: .02em; text-transform: uppercase; font-weight: 800; }
.brand span::first-letter { color: #2f8ad6; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 5px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 550; transition: background .15s var(--ease), color .15s; }
.side-nav a:hover { background: var(--navy-soft); color: var(--navy); }
.side-nav a.on { background: var(--navy); color: #fff; font-weight: 650; }
.side-nav a.on .i { color: #fff; }
.side-nav .i { width: 17px; height: 17px; color: var(--muted); }
.side-nav a:hover .i { color: var(--navy); }
.side-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 20px; padding: 1px 8px; }
.side-nav a.on .side-count { color: #fff; background: rgba(255,255,255,.2); }

.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 9px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; transition: background .15s; }
.side-item:hover { background: var(--navy-soft); }
.side-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }
.side-av.plain { background: var(--bg); color: var(--ink-2); }
.side-av .i { width: 15px; height: 15px; }
.side-item-text { min-width: 0; }
.side-item-text b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item-text small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 36; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); cursor: pointer; place-items: center; box-shadow: var(--shadow); }
.side-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(23,32,51,.35); animation: fade .2s; }

body { padding-left: var(--side-w); }
.page { max-width: 1080px; margin: 0 auto; padding: 36px 24px 64px; }

@media (max-width: 1040px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: 8px 0 32px -22px rgba(23,32,51,.6); }
  body.side-open .sidebar { transform: none; }
  .side-toggle { display: grid; }
  body.side-open .side-toggle { display: none; }
  body { padding-left: 0; }
  .page { padding-top: 66px; }
}

/* hero / start */
.hero { animation: fadeUp .4s var(--ease); }
.hero h1 { font-size: 30px; }
.lede { color: var(--ink-2); max-width: 64ch; margin: 8px 0 22px; font-size: 15.5px; }
.runbar { display: flex; gap: 10px; }
.field { flex: 1; position: relative; display: flex; align-items: center; }
.field .lead { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.field input { width: 100%; height: 52px; padding: 0 14px 0 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font: inherit; font-size: 16px; color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px rgba(43,76,126,.15), var(--shadow); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { border-color: #c9d2de; background: #fbfcfe; }
.btn:active { transform: translateY(1px); }
.btn.primary { height: 52px; padding: 0 22px; background: var(--navy); border-color: var(--navy); color: var(--navy-ink); font-size: 15px; box-shadow: 0 6px 18px -8px rgba(31,58,95,.7); }
.btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn.primary:disabled { opacity: .6; cursor: progress; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--navy-soft); color: var(--navy); }
.btn .i { width: 18px; height: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); background: var(--paper); }
.btn .count { margin-left: 2px; font-weight: 700; font-size: 12px; color: var(--navy); background: var(--navy-soft); border-radius: 20px; padding: 1px 8px; }
.btn:disabled .count { color: var(--ink-2); background: var(--line-2); }

/* ---------- checks: grouped settings-style list ---------- */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; }
@media (max-width: 980px) { .checks { grid-template-columns: 1fr; } }
.chk-group { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; animation: fadeUp .4s var(--ease) both; }
.chk-group:nth-child(2) { animation-delay: .06s; }
.chk-group header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.chk-group h3 { font-size: 13px; font-weight: 650; letter-spacing: -.005em; color: var(--ink); }
.chk-group header span { font-size: 12px; color: var(--muted); text-align: right; }
.chk-list { display: flex; flex-direction: column; }
.chk { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--line-2); cursor: pointer; transition: background .12s; }
.chk:hover { background: #fafbfd; }
.chk .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--navy); color: #fff; transition: background .15s, color .15s; }
.chk .ico .i { width: 16px; height: 16px; stroke-width: 1.9; }
.chk .txt { min-width: 0; }
.chk b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.chk small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 1px; }
.chk .std { font-size: 11.5px; color: var(--muted); text-align: right; max-width: 190px; line-height: 1.35; white-space: normal; }
@media (max-width: 1240px) { .chk .std { display: none; } }
/* iOS-style switch */
.sw { position: relative; width: 40px; height: 24px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 24px; background: #d7dce3; transition: background .18s var(--ease); }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.04); transition: transform .18s var(--ease); }
.sw input:checked + i { background: var(--navy); }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(43,76,126,.25); }
.chk:has(input:not(:checked)) .ico { background: var(--skip-soft); color: var(--muted); }
.chk:has(input:not(:checked)) b, .chk:has(input:not(:checked)) small { color: var(--muted); }

.advanced { margin-top: 10px; }
.advanced summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; font-weight: 500; padding: 6px 8px; border-radius: 8px; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary:hover { background: var(--navy-soft); color: var(--navy); }
.advanced summary .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.advanced[open] summary .i { transform: rotate(180deg); }
/* Advanced options: three text fields on one row (label above, box, hint below — all on the
   same baselines), then the ZAP switch on its own row. */
.advgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; padding: 12px 8px 4px; animation: fadeUp .25s var(--ease); }
.advgrid label { display: grid; grid-template-rows: 18px 38px auto; align-content: start; font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.advgrid label > span:first-child { line-height: 18px; }
.advgrid input[type=text], .advgrid input[type=url] { display: block; width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); -webkit-appearance: none; appearance: none; }
.advgrid input[type=text]:focus, .advgrid input[type=url]:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(43,76,126,.15); }
.advgrid small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; line-height: 1.4; margin-top: 5px; }
.advgrid label.check { grid-column: 1 / -1; grid-template-rows: none; display: flex; align-items: center; gap: 10px; font-weight: 500; padding-top: 4px; }
.advgrid label.check .sw { width: 40px; height: 24px; }
@media (max-width: 900px) { .advgrid { grid-template-columns: 1fr; } }

/* run panel */
.run { animation: fadeUp .4s var(--ease); }
.runhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-2); font-weight: 700; }
.run h2 { font-size: 24px; margin-top: 2px; word-break: break-all; }
.runmeta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.runmeta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--line-2); padding: 1px 6px; border-radius: 5px; }
.runstate { display: flex; align-items: center; gap: 14px; }
.timer { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: var(--ink-2); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.status .i { width: 16px; height: 16px; }
.status.running { background: var(--navy-soft); color: var(--navy); animation: pulse 1.6s infinite; }
.status.pass { background: var(--pass-soft); color: var(--pass); } .status.fail, .status.error { background: var(--fail-soft); color: var(--fail); } .status.warn { background: var(--warn-soft); color: var(--warn); } .status.skipped { background: var(--skip-soft); color: var(--skip); }

.stepper { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 6px; }
.stepper li { flex: 1; min-width: 0; position: relative; padding: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stepper li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: 8px; transition: background .3s; }
.stepper li.active { color: var(--navy); }
.stepper li.active::before { background: linear-gradient(90deg, var(--navy-2) 0%, #8fb0e0 50%, var(--navy-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.stepper li.done { color: var(--ink-2); } .stepper li.done::before { background: var(--navy-2); }
.stepper li.pass::before { background: var(--pass); } .stepper li.fail::before, .stepper li.error::before { background: var(--fail); } .stepper li.warn::before { background: var(--warn); } .stepper li.skipped::before { background: #c5ccd6; }
.stepper li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); animation: fadeUp .35s var(--ease) both; transition: border-color .2s; display: grid; grid-template-columns: 38px 1fr auto; gap: 4px 12px; align-items: start; }
.card .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); grid-row: span 3; transition: background .2s, color .2s; }
.card.pass .ico { background: var(--pass-soft); color: var(--pass); } .card.fail .ico, .card.error .ico { background: var(--fail-soft); color: var(--fail); } .card.warn .ico { background: var(--warn-soft); color: var(--warn); } .card.skipped .ico { background: var(--skip-soft); color: var(--skip); }
.card.running { border-color: var(--navy-2); }
.card h3 { font-size: 14.5px; }
.card .pill { justify-self: end; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--skip-soft); color: var(--skip); display: inline-flex; align-items: center; gap: 5px; }
.card .pill .i { width: 12px; height: 12px; }
.card.running .pill { background: var(--navy-soft); color: var(--navy); }
.card.pass .pill { background: var(--pass-soft); color: var(--pass); } .card.fail .pill, .card.error .pill { background: var(--fail-soft); color: var(--fail); } .card.warn .pill { background: var(--warn-soft); color: var(--warn); }
.card .sum { grid-column: 2 / 4; font-size: 13.5px; color: var(--ink-2); min-height: 1.4em; }
.card .sum.pending { color: var(--muted); font-style: italic; }
.card .meta { grid-column: 2 / 4; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.card .sevbar { grid-column: 2 / 4; display: none; height: 6px; border-radius: 4px; overflow: hidden; background: var(--line-2); margin-top: 4px; }
.card .sevbar i { display: block; height: 100%; transition: width .4s var(--ease); }
.sev-critical { background: var(--critical); } .sev-high { background: var(--high); } .sev-medium { background: var(--medium); } .sev-low { background: var(--low); } .sev-info { background: var(--info); }

.results { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 18px; animation: fadeUp .4s var(--ease); }
.results-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px 28px; align-items: center; }
.donut { position: relative; width: 220px; height: 220px; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.donut-center span { font-size: 12px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.good b { color: var(--pass); } .stat.bad b { color: var(--fail); }
.actions { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line-2); }
@media (max-width: 720px) { .results-grid { grid-template-columns: 1fr; justify-items: center; } .actions { grid-column: 1; } }

.terminal { background: #12161d; color: #cfd6e0; border-radius: var(--radius); overflow: hidden; border: 1px solid #1f2632; }
.terminal summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: #aeb8c6; background: #171c25; }
.terminal summary::-webkit-details-marker { display: none; }
.terminal .count { margin-left: auto; font-weight: 500; color: #6f7a8a; }
.terminal pre { margin: 0; padding: 12px 14px; max-height: 360px; overflow: auto; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.terminal .l.err { color: #f0b46a; } .terminal .l.sec { color: #8fb4e8; font-weight: 700; margin-top: 6px; } .terminal .l.ok { color: #7fd39a; } .terminal .l.bad { color: #f08a7c; } .terminal .l.warn { color: #f0c96a; }

/* history */
.history { margin-top: 36px; }
.sechead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sechead h2 { font-size: 18px; }
.runs { display: flex; flex-direction: column; gap: 8px; }
.runrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 150px auto; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: inherit; transition: border-color .15s, box-shadow .15s; animation: fadeUp .3s var(--ease) both; }
.runrow:hover { border-color: #c9d2de; box-shadow: var(--shadow); }
.runrow.gone { opacity: 0; transform: translateX(12px); transition: opacity .2s, transform .2s var(--ease); }
.runrow .status { padding: 5px 10px; font-size: 11px; justify-self: start; }
.runrow .repo { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; min-width: 0; }
.runrow .repo:hover { color: var(--navy); }
.runrow .repo small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.runrow .chips { display: flex; gap: 4px; flex-wrap: wrap; max-width: 320px; justify-content: flex-end; }
/* Row actions: open report, rerun, delete — quiet until the row is hovered. */
.runrow .acts { display: flex; gap: 4px; }
.runrow .acts .ab { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.runrow .acts .ab .i { width: 16px; height: 16px; }
.runrow .acts .ab:hover { background: var(--navy-soft); color: var(--navy); }
.runrow .acts .ab.danger:hover { background: var(--fail-soft); color: var(--fail); }
.runrow .acts .ab:disabled { opacity: .45; cursor: default; }
.runrow .acts .ab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43,76,126,.25); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.pager .btn.small { gap: 4px; }
.pager .btn .i { width: 16px; height: 16px; }
.pager-info { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .runrow { grid-template-columns: 96px minmax(0, 1fr) auto; } .runrow .chips, .runrow .when { display: none; } }
.chip { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--skip-soft); color: var(--skip); }
.chip.pass { background: var(--pass-soft); color: var(--pass); } .chip.fail, .chip.error { background: var(--fail-soft); color: var(--fail); } .chip.warn { background: var(--warn-soft); color: var(--warn); }
.runrow .when { color: var(--muted); font-size: 12.5px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); font-size: 14px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }

/* drawer */
.drawer { position: fixed; inset: 0; background: rgba(23,32,51,.35); display: flex; justify-content: flex-end; z-index: 20; animation: fade .2s; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.drawer-panel { width: min(440px, 100%); background: var(--paper); height: 100%; padding: 22px 24px; overflow: auto; box-shadow: -12px 0 40px -20px rgba(0,0,0,.4); animation: slide .25s var(--ease); }
@keyframes slide { from { transform: translateX(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.doctor { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.doctor div { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13.5px; }
.doctor .ok { color: var(--pass); } .doctor .no { color: var(--muted); }
.doctor b { display: block; font-weight: 600; color: var(--ink); } .doctor small { color: var(--muted); }

.foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 20px; border-top: 1px solid var(--line); }

/* ---- uploaded test files ---- */
.tests { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); animation: fadeUp .4s var(--ease); }
.tests-head h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.badge-count { font-size: 11px; font-weight: 700; background: var(--navy-2); color: #fff; border-radius: 999px; padding: 2px 8px; }
.tests-lede { color: var(--muted); font-size: 13px; margin: 5px 0 14px; max-width: 74ch; }
.dropzone { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; color: var(--ink-2); transition: border-color .15s, background .15s, transform .12s var(--ease); }
.dropzone:hover, .dropzone.over { border-color: var(--navy-2); background: var(--navy-soft); color: var(--navy); }
.dropzone.over { transform: scale(1.01); }
.dropzone .i { width: 22px; height: 22px; }
.dropzone b { font-weight: 600; font-size: 14px; }
.dropzone small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.dropzone.disabled { opacity: .55; cursor: not-allowed; }
.testlist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.testrow { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); animation: fadeUp .25s var(--ease); }
.testrow.staged { border-color: var(--navy-2); background: var(--navy-soft); }
.testrow .i { width: 16px; height: 16px; color: var(--muted); }
.testrow.saved .i { color: var(--pass); }
.testrow input { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.testrow input:focus { outline: none; border-color: var(--navy-2); background: var(--paper); box-shadow: 0 0 0 3px rgba(43,76,126,.14); }
.testrow input[readonly] { color: var(--ink-2); cursor: default; }
.testrow .size { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.testrow .rm { border: none; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.testrow .rm:hover { background: var(--fail-soft); color: var(--fail); }
.tests-actions { display: flex; gap: 8px; margin-top: 12px; }
.tests-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ===================== dashboard ===================== */
.page.dash { max-width: 1240px; }
.page.dash h1 { font-size: 26px; margin: 0 0 4px; }
.dash .sechead { align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dashtools { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.dashtools .btn { height: 44px; }
.selwrap { display: inline-flex; flex-direction: column; gap: 3px; }
.selwrap span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.selwrap select { height: 44px; min-width: 210px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.selwrap select:focus { outline: none; border-color: var(--navy); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); animation: fadeUp .4s var(--ease) both; }
.kpi:nth-child(2){animation-delay:.04s}.kpi:nth-child(3){animation-delay:.08s}.kpi:nth-child(4){animation-delay:.12s}.kpi:nth-child(5){animation-delay:.16s}
.kpi b { display: block; font-size: 30px; font-weight: 660; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .l { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.kpi .s { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.kpi.good b { color: var(--pass); } .kpi.bad b { color: var(--fail); } .kpi.warn b { color: var(--warn); }

.dashgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* `display: block` overrides the three-column grid the run-result .card uses. */
.dashgrid .card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 14px; box-shadow: var(--shadow); min-width: 0; grid-template-columns: none; }
.dashgrid .card h2 { font-size: 15.5px; }
.dashgrid .card.wide { grid-column: 1 / -1; }
.cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.cardhead h2 { font-size: 15.5px; margin: 0 0 2px; font-weight: 650; }
.cardhead .muted { font-size: 12.5px; margin: 0; }
.chartbox { position: relative; height: 252px; }
.chartbox.tall { height: 300px; }

.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: #fafbfd; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .num.bad { color: var(--fail); font-weight: 650; }
.dtable .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dtable .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dtable a { text-decoration: none; }
.dtable .acts { white-space: nowrap; text-align: right; }
.dtable .lnk { font-size: 12px; font-weight: 600; color: var(--navy); background: var(--navy-soft); border-radius: 5px; padding: 3px 9px; margin-left: 6px; }
.dtable .lnk:hover { background: var(--navy); color: #fff; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.pill.pass { background: var(--pass-soft); color: var(--pass); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.fail, .pill.error { background: var(--fail-soft); color: var(--fail); }
.pill.skipped { background: var(--skip-soft); color: var(--skip); }

.rate { display: flex; align-items: center; gap: 9px; }
.rbar { flex: 1; min-width: 56px; height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.rbar i { display: block; height: 100%; background: var(--pass); border-radius: 4px; }
.rate span { font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 34px; }

.hist { display: inline-flex; gap: 3px; }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; background: var(--skip); }
.dot.pass { background: #0ca30c; } .dot.warn { background: #fab219; }
.dot.fail { background: #d03b3b; } .dot.error { background: #8f1d1d; } .dot.skipped { background: #c3c9d2; }

.empty-state { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 48px 24px; text-align: center; box-shadow: var(--shadow); }
.empty-state h2 { margin: 0 0 6px; font-size: 19px; }
.empty-state .btn { margin-top: 16px; }

@media (max-width: 900px) { .dashgrid { grid-template-columns: 1fr; } .dashgrid .card.wide { grid-column: auto; } }

/* ===================== account drawer ===================== */
.acct { display: grid; gap: 14px; }
.acct .who { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.acct .who .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); font-weight: 700; font-size: 15px; flex: none; }
.acct .who b { display: block; font-size: 15px; }
.acct .who span { font-size: 12.5px; color: var(--muted); }
.acct .who .pill { margin-left: auto; }
.acct label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.acct input[type=password], .acct input[type=text] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); }
.acct input:focus { outline: none; border-color: var(--navy); }
.acct .row { display: flex; gap: 8px; align-items: center; }
.acct .note { font-size: 12.5px; color: var(--ink-2); background: var(--navy-soft); border-radius: 9px; padding: 11px 13px; line-height: 1.5; }
.acct .note code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.acct .msg { font-size: 13px; padding: 10px 12px; border-radius: 9px; }
.acct .msg.ok { background: var(--pass-soft); color: var(--pass); }
.acct .msg.err { background: var(--fail-soft); color: var(--fail); }
.acct ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.acct ul li { margin: 3px 0; }

/* ===================== repository access prompt ===================== */
.authblock { display: flex; gap: 14px; align-items: flex-start; background: var(--warn-soft); border: 1px solid #e8d5a8; border-radius: var(--radius); padding: 15px 17px; margin: 0 0 16px; animation: fadeUp .3s var(--ease); }
.authblock .lock { width: 22px; height: 22px; color: var(--warn); margin-top: 1px; }
.authblock .ab-body { flex: 1; min-width: 0; }
.authblock b { display: block; font-size: 15px; color: #6f4e0c; }
.authblock p { margin: 5px 0 0; font-size: 13.5px; color: #6f4e0c; line-height: 1.5; }
.authblock p.who { font-size: 12.5px; color: #8a6a24; }
.authblock p.who code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(255,255,255,.65); border-radius: 4px; padding: 1px 6px; }
.ab-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ab-actions .btn { background: #fff; }
.ab-actions .btn.primary { background: var(--navy); color: #fff; }
.ab-actions .btn.ghost { background: transparent; }
.acct .context { background: var(--warn-soft); border: 1px solid #e8d5a8; color: #6f4e0c; border-radius: 9px; padding: 11px 13px; font-size: 13px; line-height: 1.5; }
.acct .context b { display: block; margin-bottom: 2px; }
.ab-steps { margin: 10px 0 0; padding-left: 20px; }
.ab-steps li { font-size: 13px; color: #6f4e0c; line-height: 1.55; margin: 4px 0; }
.ab-steps li b { font-weight: 650; }
.ab-steps li code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(255,255,255,.7); border-radius: 4px; padding: 1px 5px; font-size: 12px; }

/* ===================== browser sign-in ===================== */
.signin-hero { display: grid; gap: 12px; }
.signin-hero .btn.gh { height: 50px; font-size: 15px; background: #1f2328; border-color: #1f2328; color: #fff; }
.signin-hero .btn.gh:hover { background: #32383f; border-color: #32383f; }
.signin-hero .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.signin-hero .or::before, .signin-hero .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.devcode { display: grid; gap: 12px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; background: var(--paper); }
.devcode .lead { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.devcode .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 30px; font-weight: 700; letter-spacing: .16em; color: var(--navy); background: var(--navy-soft); border-radius: 10px; padding: 14px 10px; user-select: all; }
.devcode .hint { font-size: 12.5px; color: var(--muted); margin: 0; }
.devcode .waiting { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.devcode .row2 { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.devcode ol { text-align: left; margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.setupbox { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; background: var(--paper); display: grid; gap: 9px; }
.setupbox h4 { margin: 0; font-size: 14px; font-weight: 650; }
.setupbox ol { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.setupbox ol code, .setupbox p code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--navy-soft); color: var(--navy); border-radius: 4px; padding: 1px 6px; font-size: 11.5px; }
.setupbox p { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ===================== assistant (opt-in) ===================== */
.ai-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 26px; background: var(--navy); color: #fff; font: inherit; font-weight: 650; font-size: 14px; cursor: pointer; box-shadow: 0 10px 28px -10px rgba(31,58,95,.75); transition: transform .14s var(--ease), background .15s; }
.ai-fab:hover { background: var(--navy-2); transform: translateY(-1px); }
.ai-fab .i { width: 18px; height: 18px; }

.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); z-index: 45; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -18px 0 46px -28px rgba(23,32,51,.5); display: flex; flex-direction: column; animation: slideIn .22s var(--ease); }
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.ai-head b { font-size: 15px; display: block; }
.ai-sub { font-size: 11.5px; color: var(--muted); }
.ai-headbtns { display: flex; gap: 2px; }
.iconbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.iconbtn:hover { background: var(--navy-soft); color: var(--navy); }
.iconbtn .i { width: 17px; height: 17px; }

.ai-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { max-width: 92%; font-size: 13.5px; line-height: 1.6; border-radius: 12px; padding: 9px 12px; white-space: pre-wrap; word-wrap: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.ai-msg.bot code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--navy-soft); color: var(--navy); border-radius: 4px; padding: 1px 5px; font-size: .88em; }
.ai-msg.bot pre { background: #11161f; color: #c7d0dd; border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12px; margin: 8px 0; white-space: pre; }
.ai-msg.bot pre code { background: none; color: inherit; padding: 0; }
.ai-msg.err { align-self: stretch; background: var(--fail-soft); color: var(--fail); border: 0; font-size: 13px; }
.ai-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite both; }
.ai-typing i:nth-child(2) { animation-delay: .18s } .ai-typing i:nth-child(3) { animation-delay: .36s }
@keyframes blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

.ai-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.ai-composer textarea { flex: 1; resize: none; max-height: 140px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--paper); }
.ai-composer textarea:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(43,76,126,.14); }

.ai-intro { display: grid; gap: 12px; }
.ai-intro h3 { font-size: 15px; }
.ai-intro p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.ai-intro .privacy { background: var(--navy-soft); border-radius: 9px; padding: 11px 13px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.ai-intro label { display: block; font-size: 12px; font-weight: 650; color: var(--ink-2); margin-bottom: 5px; }
.ai-intro select, .ai-intro input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink); }
.ai-intro select:focus, .ai-intro input:focus { outline: none; border-color: var(--navy-2); }
.ai-intro .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.ai-intro .hint a { color: var(--navy-2); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip { font-size: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 18px; padding: 6px 12px; cursor: pointer; font-family: inherit; text-align: left; }
.ai-chip:hover { border-color: var(--navy-2); color: var(--navy); background: var(--navy-soft); }
.ai-off { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 560px) { .ai-panel { width: 100vw; } }

/* ---------- tooltips (data-tip) ---------- */
.tip { position: fixed; z-index: 90; max-width: 280px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; line-height: 1.4; font-weight: 500; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .12s, transform .12s; }
.tip.show { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.tip.below::after { bottom: auto; top: -4px; }
.hint { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); font-size: 11px; font-weight: 700; cursor: help; user-select: none; }

/* ---------- sidebar account block ---------- */
.side-item.me { border: 1px solid var(--line); background: var(--bg); margin-bottom: 4px; }
.side-item.me:hover { border-color: var(--navy-2); background: var(--navy-soft); }
.side-item.me .side-av { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.side-item.me .side-item-text small { color: var(--ink-2); }

/* ---------- sign-in page ---------- */
body.auth-page { padding-left: 0; display: grid; min-height: 100vh; place-items: center; background: radial-gradient(1200px 600px at -10% -20%, #e4ebf5 0, transparent 60%), radial-gradient(900px 500px at 110% 120%, #e8eef6 0, transparent 55%), var(--bg); }
.auth { width: min(1040px, calc(100% - 32px)); display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px -40px rgba(23,32,51,.45), var(--shadow); overflow: hidden; margin: 24px 0; animation: fadeUp .45s var(--ease); }
.auth-side { padding: 40px 42px; background: linear-gradient(160deg, var(--navy) 0%, #16304f 60%, #122741 100%); color: #e8eef7; display: flex; flex-direction: column; gap: 18px; }
.auth-side .brand { color: #fff; padding: 0 0 12px; font-size: 19px; }
.auth-side .brand span::first-letter { color: #7cc4ff; }
.auth-side h1 { font-size: 27px; line-height: 1.2; color: #fff; }
.auth-side p { margin: 0; color: #c9d5e6; font-size: 14.5px; }
.auth-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-points li { display: flex; gap: 12px; font-size: 13.5px; color: #d7e0ee; }
.auth-points .i { width: 20px; height: 20px; color: #9fc0ea; margin-top: 2px; }
.auth-points b { color: #fff; font-weight: 650; }
.auth-foot { margin-top: auto !important; font-size: 12px !important; color: #8aa0bd !important; }
.auth-card { padding: 40px 42px; display: flex; flex-direction: column; justify-content: center; min-height: 520px; }
.auth-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 12px; animation: fadeUp .3s var(--ease); }
.auth-form h2 { font-size: 24px; }
.auth-form > .muted { margin: -4px 0 4px; font-size: 13.5px; }
.auth-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.auth-form label input { display: block; width: 100%; margin-top: 5px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.auth-form label input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(43,76,126,.15); }
.auth-form label small { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; font-size: 12px; }
.opt { font-weight: 500; color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.meter { height: 4px; border-radius: 3px; background: var(--line-2); margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .25s var(--ease), background .25s; }
.meter i.weak { background: var(--fail); } .meter i.ok { background: var(--warn); } .meter i.strong { background: var(--pass); }
.auth-error { background: var(--fail-soft); color: var(--fail); border: 1px solid #f1c9c4; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; }
.btn.big { height: 48px; font-size: 15px; margin-top: 4px; }
.auth-alt { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-side { padding: 28px 26px; gap: 12px; } .auth-side h1 { font-size: 22px; } .auth-points { display: none; } .auth-card { padding: 28px 26px; min-height: 0; } }

/* ---------- account page ---------- */
.acct-page .sechead { align-items: flex-start; margin-bottom: 18px; }
.acct-page h1 { font-size: 26px; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); animation: fadeUp .35s var(--ease) both; min-width: 0; }
.panel.wide { grid-column: 1 / -1; }
.panel.admin { border-color: #cfdcee; background: linear-gradient(180deg, #f8fafd, var(--paper) 60px); }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel-head h2 { font-size: 16.5px; }
.panel-head .btn, .panel-head .switch { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: 11px; }
.stack label, .row label.inline { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.stack label input, .row label.inline input, .row label.inline select, .invite-out input { display: block; width: 100%; margin-top: 5px; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); }
.stack label input:focus, .row label.inline input:focus, .row label.inline select:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(43,76,126,.15); }
.stack label small { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; font-size: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row.wrap { flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; margin-bottom: 12px; }
.row .grow { flex: 1; min-width: 200px; }
.acct-page .btn { height: 40px; font-size: 13.5px; }
.acct-page .btn.primary { height: 40px; font-size: 13.5px; box-shadow: none; }
.btn.small { height: 32px !important; padding: 0 12px; font-size: 12.5px !important; }
.note { margin-top: 10px; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; }
.note.ok { background: var(--pass-soft); color: var(--pass); }
.note.err { background: var(--fail-soft); color: var(--fail); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); white-space: nowrap; }
.tag.ok { background: var(--pass-soft); color: var(--pass); } .tag.bad { background: var(--fail-soft); color: var(--fail); } .tag.warn { background: var(--warn-soft); color: var(--warn); }
.dtable tr.current td { background: #f6f9fd; }
.dtable tr.bad td { color: var(--fail); }
.dtable .nowrap { white-space: nowrap; }
.dtable button.lnk { border: 0; cursor: pointer; font-family: inherit; }
.dtable .lnk.danger { color: var(--fail); background: var(--fail-soft); } .dtable .lnk.danger:hover { background: var(--fail); color: #fff; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.conn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.conn .i { width: 22px; height: 22px; color: var(--navy); }
.conn > div { flex: 1; min-width: 0; }
.conn b { display: block; font-size: 14px; }
.conn small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.switch input { width: 36px; height: 20px; appearance: none; background: var(--line); border-radius: 20px; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked { background: var(--pass); } .switch input:checked::after { left: 18px; }
.invite-out { margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--pass-soft); color: var(--pass); font-size: 13px; }
.invite-out .row { margin-top: 8px; } .invite-out input { margin: 0; flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink); }
@media (max-width: 760px) { .acct-grid { grid-template-columns: 1fr; } }

/* ---------- review card (results) ---------- */
.review { border-left: 4px solid var(--line); background: var(--bg); border-radius: 12px; padding: 16px 18px 14px; margin-bottom: 18px; }
.review.pass { border-left-color: var(--pass); } .review.warn { border-left-color: var(--warn); } .review.fail, .review.error { border-left-color: var(--fail); }
.review-head .eyebrow { display: block; margin-bottom: 2px; }
.review-head h3 { font-size: 19px; }
.review-verdict { margin: 8px 0 10px; font-size: 14.5px; color: var(--ink-2); max-width: 90ch; }
.review-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.review-scores .stat { background: var(--paper); border: 1px solid var(--line); }
.review-scores .stat.warn b { color: var(--warn); }
.review-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.review h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.review-list { margin: 0; padding: 0; list-style: none; }
.review-list li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.review-list li:last-child { border-bottom: 0; }
.review-list .sev { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; height: fit-content; margin-top: 2px; }
.review-list .sev.critical { background: #fde2e2; color: var(--critical); } .review-list .sev.high { background: var(--fail-soft); color: var(--high); } .review-list .sev.medium { background: var(--warn-soft); color: var(--medium); } .review-list .sev.low { background: #e6eef8; color: var(--low); } .review-list .sev.info { background: var(--skip-soft); color: var(--info); }
.review-list .why { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.review-list small.mono { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); font-size: 11.5px; }
.review-todo { margin: 0; padding-left: 20px; font-size: 13.5px; }
.review-todo li { margin: 4px 0; }
.review-trend { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.review-trend .bad { color: var(--fail); font-weight: 600; } .review-trend .good { color: var(--pass); font-weight: 600; }
@media (max-width: 800px) { .review-cols { grid-template-columns: 1fr; } }

/* ---------- tool installer ---------- */
.doctor div { grid-template-columns: 24px 1fr auto; }
.doctor .btn.small { height: 32px; }
.doctor .btn.ok, .toolbanner .btn.ok { background: var(--pass-soft); color: var(--pass); border-color: transparent; }
.note-inline { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12px; }
.install-log { margin: 8px 0 0; max-height: 160px; overflow: auto; background: var(--ink); color: #dfe6f0; font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.toolbanner { margin: 10px 0 14px; border: 1px solid #f1d9a6; background: #fff8e8; border-radius: 10px; padding: 12px 14px; }
.tb-head { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; } .tb-head .i { color: var(--warn); margin-top: 2px; }
.tb-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f1e3c4; }
.tb-row b { display: block; font-size: 14px; } .tb-row small { display: block; color: var(--muted); font-size: 12px; } .tb-row > div { flex: 1; min-width: 0; }
.tb-foot { padding-top: 8px; }
.btn.small.primary { height: 32px; font-size: 12.5px; padding: 0 12px; box-shadow: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- OWASP strip & how-to ---------- */
.review-owasp { margin-top: 14px; }
.ow-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.ow { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--paper); cursor: help; }
.ow b { display: block; font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; } .ow span { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--ink-2); }
.ow.ok { border-color: #bfe3cc; background: var(--pass-soft); } .ow.hit { border-color: #f0c4bd; background: var(--fail-soft); } .ow.hit b { color: var(--fail); } .ow.na { opacity: .7; } .ow.off { border-style: dashed; }
.owtag { display: inline-block; font-size: 10.5px; font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--navy-soft); color: var(--navy); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.howto-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.howto-table th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.howto-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.howto-table a { color: var(--navy-2); text-decoration: none; border-bottom: 1px dotted var(--navy-2); }


.howto-sub { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 18px 0 8px; letter-spacing: .01em; }

/* A check explaining why it could not do its job */
.card .whynot { display:flex; gap:8px; align-items:flex-start; margin:8px 0 2px; padding:8px 10px; border-radius:8px; background:var(--warn-soft); color:var(--warn); font-size:12.5px; line-height:1.4; }
.card .whynot .i { width:15px; height:15px; flex:none; margin-top:1px; }

/* History filter */
.hfilter { display:flex; flex-direction:column; gap:8px; margin: 0 0 12px; }
.hf-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hf-row #hq { flex:1; min-width:260px; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:13.5px; background:var(--paper); }
.hf-row #hq:focus, .hf-row select:focus { outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(43,76,126,.15); }
.hf-row select { height:36px; padding:0 10px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:13px; background:var(--paper); color:var(--ink); }
.hf-row.chips { gap:6px; }
.hchip { font:inherit; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); cursor:pointer; transition: background .15s, color .15s, border-color .15s; }
.hchip:hover { border-color:#c9d2de; }
.hchip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.runrow .sums { grid-column: 2 / -1; display:flex; flex-direction:column; gap:3px; margin-top:4px; font-size:12.5px; color:var(--ink-2); }
.runrow .sums span b { font-weight:700; margin-right:6px; }
.runrow .sums span.fail b, .runrow .sums span.error b { color:var(--fail); } .runrow .sums span.warn b { color:var(--warn); } .runrow .sums span.pass b { color:var(--pass); }
.runrow .sums mark { background: #fff3bf; color: inherit; border-radius:3px; padding:0 2px; }

/* Source switcher, folder browser, source info */
.source { display:inline-flex; gap:4px; padding:4px; background:var(--navy-soft); border-radius:12px; margin: 2px 0 12px; }
.source .src { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition: background .15s, color .15s, box-shadow .15s; }
.source .src .i { width:16px; height:16px; }
.source .src.on { background:var(--paper); color:var(--navy); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.source .src[disabled] { opacity:.45; cursor:not-allowed; }
.runbar .field { position:relative; }
.runbar .field .inside { position:absolute; right:8px; top:50%; transform:translateY(-50%); height:30px; }
.runbar .inside-file { height:48px; padding:0 16px; cursor:pointer; }
.srcinfo { margin: -4px 0 12px; padding: 10px 14px; border-radius:10px; background:var(--paper); border:1px solid var(--line); font-size:13px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.srcinfo.bad { border-color: var(--fail); background: var(--fail-soft); color: var(--fail); }
.srcinfo b { font-weight:700; } .srcinfo .chip { margin:0; }
.srcinfo .spin { width:16px; height:16px; }
.browser { margin: -4px 0 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; animation: fadeUp .2s var(--ease); }
.br-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line-2); }
.br-roots { display:flex; gap:4px; flex-wrap:wrap; }
.br-roots button { font:inherit; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); cursor:pointer; }
.br-roots button:hover { border-color:#c9d2de; color:var(--navy); }
.br-path { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line-2); }
.br-path code { flex:1; font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.br-list { max-height:320px; overflow:auto; }
.br-list .d { display:grid; grid-template-columns: 22px 1fr auto; gap:10px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--line-2); cursor:pointer; font-size:13.5px; }
.br-list .d:hover { background:var(--navy-soft); }
.br-list .d .i { width:16px; height:16px; color:var(--muted); }
.br-list .d.git .i { color:var(--navy); }
.br-list .d small { color:var(--muted); font-size:12px; }
.br-list .empty { padding:14px; border:0; }

.stackwarn { display:flex; gap:10px; align-items:flex-start; margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--ink); border:1px solid rgba(180,120,0,.25); font-size: 13.5px; line-height:1.45; }
.stackwarn .i { width:18px; height:18px; color: var(--warn); flex:none; margin-top:1px; }
.runmeta .bad { color: var(--fail); font-weight:600; }

/* Upload mode: a friendly slot instead of the raw upload reference */
.runbar .field.upload #repo { display:none; }
.upslot { display:flex; align-items:center; gap:10px; width:100%; height:100%; padding: 0 12px 0 44px; font-size:14.5px; color:var(--ink); }
.upslot .upname { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upslot .upname.placeholder { font-weight:400; color:var(--muted); }
.upslot .upmeta { color:var(--muted); font-size:12.5px; white-space:nowrap; }
.upslot .upclear { margin-left:auto; width:26px; height:26px; border-radius:50%; border:0; background:var(--navy-soft); color:var(--ink-2); font-size:16px; line-height:1; cursor:pointer; flex:none; }
.upslot .upclear:hover { background:var(--fail-soft); color:var(--fail); }
.srcinfo.bad { align-items:flex-start; }
.srcinfo.bad .i { color:var(--fail); flex:none; margin-top:2px; }
.srcinfo.bad b { display:block; }
.srcinfo.bad span { display:block; color:var(--ink); }
.srcinfo.note { align-items:flex-start; border-color: rgba(180,120,0,.35); background: var(--warn-soft); }
.srcinfo.note .i { color: var(--warn); flex:none; margin-top:2px; } .srcinfo.note b { display:block; } .srcinfo.note span { display:block; }

/* Sign-up policy (Account → Users) */
.policy { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.policy-head { padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line-2); }
.policy-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .15s; }
.policy-opt:hover { background: #fbfcfe; }
.policy-opt:has(input:checked) { background: var(--navy-soft, #e8edf4); }
.policy-opt input[type="radio"] { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--navy); flex: none; cursor: pointer; }
.policy-opt > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.policy-opt b { font-size: 14px; color: var(--ink); }
.policy-opt small { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.policy-domains { display: none; gap: 8px; margin-top: 8px; flex-direction: row !important; align-items: center; }
.policy[data-mode="domain"] .policy-domains { display: flex; }
.policy-domains input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.policy-domains input:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,58,95,.14); }
.policy-foot { padding: 9px 14px; font-size: 12px; color: var(--muted); }