:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --surface-0: #06111f; --surface-1: #081a2a; --surface-2: #0b2235; --surface-3: #0d2a41; --surface-elevated: #102f48; --surface-report: rgba(7, 26, 40, .76); --surface-evidence: rgba(5, 22, 35, .42); --border-subtle: rgba(120, 179, 218, .16); --border-strong: rgba(91, 173, 229, .38); --text: #edf5fb; --text-soft: #c2d5e4; --muted: #8ca8bd; --blue: #4db3ff; --blue-strong: #218fe5; --blue-soft: #9dd9ff; --green: #54e8a1; --amber: #ffca52; --red: #ff778b; --status-complete: var(--green); --status-partial: var(--amber); --status-error: var(--red); --focus-ring: #9edcff; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --shadow-1: 0 16px 44px rgba(0, 0, 0, .18); --shadow-2: 0 22px 64px rgba(0, 0, 0, .35); --ease: 160ms ease; } * { box-sizing: border-box; } html, body { min-width: 320px; min-height: 100%; overflow-x: hidden; } body { margin: 0; background: radial-gradient(circle at 18% -10%, rgba(37, 122, 184, .27), transparent 34rem), radial-gradient(circle at 88% 12%, rgba(23, 102, 155, .16), transparent 30rem), var(--surface-0); color: var(--text); font-size: 14px; } body::before { position: fixed; z-index: -1; inset: 0; content: ""; opacity: .42; pointer-events: none; background-image: linear-gradient(rgba(97, 164, 207, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(97, 164, 207, .025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 78%); } button, input { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .58; } a { color: inherit; } button, a, input, .finding-card, .capability-card { transition: border-color var(--ease), color var(--ease), background var(--ease), box-shadow var(--ease), transform var(--ease); } .cert-app-shell { min-height: 100vh; } .app-topbar { position: sticky; top: 0; z-index: 10; min-height: 72px; display: flex; align-items: center; gap: 28px; padding: 0 max(24px, calc((100vw - 1360px) / 2)); border-bottom: 1px solid var(--border-subtle); background: rgba(5, 15, 25, .78); backdrop-filter: blur(18px); } .brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 220px; } .brand-lockup strong { display: block; letter-spacing: -.035em; font-size: 24px; line-height: 1; } .brand-lockup small { display: block; margin-top: 4px; color: var(--text-soft); font-size: 8px; font-weight: 800; letter-spacing: .14em; } .brand-mark { width: 33px; height: 37px; display: grid; place-items: center; color: var(--blue); } .brand-mark svg { width: 100%; height: 100%; } .product-context { display: flex; flex-direction: column; gap: 3px; color: var(--text-soft); font-size: 12px; } .product-context strong { font-size: 12px; letter-spacing: .015em; } .product-context span { color: var(--muted); font-size: 11px; } .topbar-right { display: flex; align-items: center; gap: 13px; margin-left: auto; } .version-chip { padding: 5px 9px; border: 1px solid rgba(87, 181, 239, .4); border-radius: 999px; background: rgba(18, 61, 91, .66); color: var(--blue-soft); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; } .repo-link { color: var(--text-soft); font-size: 12px; text-decoration: none; } .repo-link:hover, .repo-link:focus-visible { color: white; text-decoration: underline; } .cert-main { width: min(1360px, 100%); margin: 0 auto; padding: 32px 24px 72px; } .hero-workspace { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr); gap: clamp(28px, 5vw, 74px); align-items: center; min-height: 346px; padding: clamp(30px, 5vw, 64px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(13, 43, 64, .78), rgba(6, 20, 33, .58) 64%, rgba(14, 53, 79, .55)); box-shadow: var(--shadow-1); overflow: hidden; } .hero-workspace::after { position: absolute; content: ""; width: 420px; height: 420px; margin: -310px 0 0 -220px; border: 1px solid rgba(94, 190, 246, .15); border-radius: 50%; pointer-events: none; } .hero-workspace { position: relative; } .hero-copy, .inspect-cluster { position: relative; z-index: 1; } .tagline { margin: 0 0 26px; color: var(--blue-soft); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .hero-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; color: var(--blue-soft); font-size: 12px; font-weight: 700; } .hero-kicker span { color: var(--blue); font-size: 11px; } .hero-copy h1 { margin: 0; font-size: clamp(48px, 6vw, 76px); line-height: .92; letter-spacing: -.065em; } .hero-statement { max-width: 590px; margin: 17px 0 0; color: #d9eafb; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.12; letter-spacing: -.035em; } .hero-description { max-width: 590px; margin: 18px 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.6; } .hero-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .hero-signals span { padding: 6px 10px; border: 1px solid rgba(90, 175, 229, .28); border-radius: 999px; background: rgba(12, 52, 78, .46); color: #c8e4f7; font-size: 11px; font-weight: 700; } .inspect-cluster { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(109, 190, 240, .31); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(10, 42, 65, .98), rgba(7, 27, 43, .96)); box-shadow: 0 20px 46px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .04); } .inspect-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .inspect-card-heading p { margin: 0 0 4px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .inspect-card-heading strong { font-size: 17px; } .inspect-card-status { padding: 5px 8px; border: 1px solid rgba(87, 213, 153, .35); border-radius: 999px; background: rgba(17, 76, 55, .68); color: var(--green); font-size: 10px; font-weight: 750; white-space: nowrap; } .host-field-wrap label { display: block; margin-bottom: 7px; color: #d5e6f3; font-size: 12px; font-weight: 750; } .host-field-wrap input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid rgba(106, 177, 220, .42); border-radius: var(--radius-sm); outline: none; background: rgba(4, 18, 30, .72); color: var(--text); font-size: 16px; } .host-field-wrap input::placeholder { color: #6f91aa; } .host-field-wrap input:hover { border-color: rgba(113, 195, 243, .65); } .host-field-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(76, 178, 255, .16); } .host-field-wrap small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; } .quick-hosts { display: flex; flex-wrap: wrap; gap: 7px; } .quick-hosts button { padding: 5px 8px; border: 1px solid rgba(112, 177, 218, .25); border-radius: 7px; background: rgba(19, 58, 84, .48); color: #bbd8eb; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; } .quick-hosts button:hover, .quick-hosts button:focus-visible { border-color: var(--blue); background: rgba(22, 86, 127, .65); color: white; } .inspect-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .primary-btn, .secondary-btn, .preview-demo-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 780; } .primary-btn { padding: 0 19px; border: 1px solid #4ab3ff; background: linear-gradient(180deg, #289cf3, #167cc7); box-shadow: 0 9px 25px rgba(23, 137, 223, .28); color: white; } .primary-btn:hover:not(:disabled) { border-color: #8ed3ff; background: linear-gradient(180deg, #36a7fb, #218bd7); box-shadow: 0 12px 31px rgba(23, 137, 223, .38); transform: translateY(-1px); } .primary-btn svg { width: 19px; } .secondary-btn { padding: 0 14px; border: 1px solid rgba(114, 183, 224, .4); background: rgba(10, 45, 68, .72); color: #d6e8f5; } .secondary-btn:hover:not(:disabled), .preview-demo-button:hover { border-color: var(--blue); background: rgba(22, 84, 124, .82); color: white; } .secondary-btn svg, .preview-demo-button svg { width: 17px; } .inspect-card-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .error-banner { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(255, 119, 139, .44); border-radius: var(--radius-sm); background: rgba(91, 27, 40, .48); color: #ffdce2; } .error-banner strong { color: #ffb9c4; font-size: 12px; } .error-banner span { font-size: 12px; line-height: 1.45; } .error-banner small { color: #e7a8b3; font-size: 11px; } .inspection-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 17px; align-items: center; margin-top: 22px; padding: 17px 20px; border: 1px solid rgba(78, 176, 246, .32); border-radius: var(--radius-md); background: rgba(9, 37, 56, .8); box-shadow: var(--shadow-1); } .progress-orb { width: 43px; height: 48px; color: var(--blue); animation: inspection-pulse 1.65s ease-in-out infinite; } .progress-orb svg { width: 100%; height: 100%; } .inspection-progress strong { font-size: 14px; } .inspection-progress p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .inspection-progress code { color: var(--blue-soft); } .progress-checks { display: flex; gap: 7px; } .progress-checks span { padding: 5px 8px; border-radius: 999px; background: rgba(27, 79, 111, .76); color: #bbddf3; font-size: 10px; font-weight: 750; } .capability-section { margin-top: 32px; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 2px 14px; } .section-heading p, .demo-preview-copy > p, .security-boundary p { margin: 0 0 7px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .section-heading h2 { max-width: 700px; margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.16; letter-spacing: -.035em; } .section-heading > span { padding-bottom: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; } .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; } .capability-card { position: relative; min-height: 145px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(13, 39, 59, .84), rgba(7, 24, 38, .8)); overflow: hidden; } .capability-card::after { position: absolute; inset: auto -25px -50px auto; width: 130px; height: 130px; border: 1px solid rgba(83, 180, 241, .12); border-radius: 50%; content: ""; } .capability-card:hover { border-color: rgba(96, 186, 241, .44); background: linear-gradient(145deg, rgba(15, 51, 76, .94), rgba(7, 27, 42, .9)); transform: translateY(-2px); } .capability-index { display: block; color: var(--blue); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; } .capability-card h3 { margin: 17px 0 7px; font-size: 18px; } .capability-card p { max-width: 235px; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; } .security-boundary { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2.2fr); gap: 22px; align-items: center; margin-top: 14px; padding: 18px 20px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .security-boundary strong { font-size: 15px; } .security-boundary ul { display: flex; flex-wrap: wrap; gap: 9px 16px; margin: 0; padding: 0; list-style: none; } .security-boundary li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12px; } .security-boundary svg { width: 15px; color: var(--green); } .demo-preview { display: grid; grid-template-columns: minmax(0, .88fr) minmax(340px, 1.12fr); gap: 28px; align-items: center; margin-top: 34px; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(75, 159, 214, .29); border-radius: var(--radius-lg); background: radial-gradient(circle at 86% 20%, rgba(37, 125, 182, .2), transparent 23rem), linear-gradient(135deg, rgba(8, 29, 45, .92), rgba(10, 41, 62, .82)); box-shadow: var(--shadow-1); } .demo-preview-copy h2 { max-width: 450px; margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.08; letter-spacing: -.045em; } .demo-preview-copy > span { display: block; max-width: 450px; margin-top: 13px; color: var(--text-soft); line-height: 1.6; } .preview-demo-button { margin-top: 20px; padding: 0 14px; border: 1px solid rgba(101, 192, 246, .44); background: rgba(14, 57, 85, .75); color: #d9ecf9; } .demo-preview-report { padding: 18px; border: 1px solid rgba(113, 193, 239, .35); border-radius: var(--radius-md); background: rgba(4, 19, 31, .72); box-shadow: 0 14px 30px rgba(0,0,0,.16); } .demo-preview-report header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .demo-preview-report header > div { display: grid; gap: 4px; } .demo-preview-report header span { color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .demo-preview-report header strong { font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; } .demo-preview-report header > b { color: var(--green); font-size: 34px; letter-spacing: -.05em; } .demo-preview-report header > b small { color: var(--muted); font-size: 12px; } .preview-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; } .preview-score-grid div { padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(12, 43, 63, .62); } .preview-score-grid span { display: block; color: var(--muted); font-size: 10px; font-weight: 750; } .preview-score-grid strong { display: block; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; } .preview-finding { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid rgba(255, 202, 82, .28); border-radius: var(--radius-sm); background: rgba(73, 54, 16, .28); } .preview-finding-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(190, 139, 24, .42); color: var(--amber); font-weight: 900; } .preview-finding strong { font-size: 12px; } .preview-finding p { margin: 4px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.45; } .report-workspace { margin-top: 24px; min-width: 0; } .report-context-bar { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(7, 27, 42, .72); } .report-identity p { margin: 0 0 5px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .report-identity h2 { margin: 0; overflow-wrap: anywhere; font: 700 22px/1.12 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.035em; } .report-context-meta { display: grid; grid-template-columns: .9fr 1.5fr 1fr; gap: 16px; margin: 0; } .report-context-meta div { min-width: 0; } .report-context-meta dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .report-context-meta dd { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } .address-list { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px !important; } .workspace-host-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding-top: 14px; border-top: 1px solid var(--border-subtle); } .workspace-host-form label { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .workspace-host-form input { min-width: 0; height: 37px; padding: 0 10px; border: 1px solid rgba(106, 177, 220, .42); border-radius: 8px; outline: none; background: rgba(4, 18, 30, .72); color: var(--text); } .workspace-host-form button { min-height: 37px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 8px; background: rgba(22, 84, 124, .82); color: white; font-weight: 750; } .score-row { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 2.2fr); gap: 14px; margin-top: 14px; } .category-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .metric-card { min-width: 0; min-height: 138px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(12, 40, 60, .9), rgba(6, 23, 37, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); } .metric-card.overall { min-height: 176px; padding: 23px; border-color: rgba(91, 189, 242, .4); background: radial-gradient(circle at 88% 18%, rgba(47, 158, 221, .17), transparent 11rem), linear-gradient(145deg, rgba(13, 49, 74, .96), rgba(6, 25, 39, .94)); } .metric-card > div:first-child { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .metric-card span { color: var(--blue-soft); font-size: 12px; font-weight: 780; } .metric-card strong { font-size: 31px; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .metric-card.overall strong { font-size: 52px; } .metric-card strong small { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; } .metric-card em { color: var(--text-soft); font-size: 11px; font-style: normal; line-height: 1.4; } .metric-card.green em { color: var(--green); } .metric-card.amber em { color: var(--amber); } .metric-card.red em { color: var(--red); } .metric-card.muted em { color: var(--muted); } .gauge { position: relative; width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--green) var(--gauge), rgba(72, 116, 140, .38) 0); } .metric-card.overall .gauge { width: 86px; height: 86px; } .gauge.amber { background: conic-gradient(var(--amber) var(--gauge), rgba(119, 92, 35, .5) 0); } .gauge.red { background: conic-gradient(var(--red) var(--gauge), rgba(117, 53, 68, .56) 0); } .gauge.muted { background: conic-gradient(#8ca8bd var(--gauge), rgba(72, 91, 109, .52) 0); } .gauge > div { position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-1); } .report-status-row { min-height: 27px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 11px; } .status-badge, .demo-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid rgba(119, 163, 191, .35); border-radius: 999px; background: rgba(39, 66, 83, .54); color: var(--text-soft); font-size: 11px; font-weight: 800; white-space: nowrap; } .status-badge.complete, .status-badge.green { border-color: rgba(84, 232, 161, .35); background: rgba(18, 74, 54, .72); color: var(--green); } .status-badge.partial, .status-badge.amber { border-color: rgba(255, 202, 82, .36); background: rgba(87, 66, 20, .6); color: var(--amber); } .status-badge.failed, .status-badge.red { border-color: rgba(255, 119, 139, .38); background: rgba(91, 35, 47, .65); color: #ffbdc8; } .status-badge.muted { color: var(--muted); } .demo-badge { border-color: rgba(77, 179, 255, .38); background: rgba(18, 66, 96, .66); color: var(--blue-soft); } .completeness-note { display: flex; gap: 8px; margin: 9px 0 0; padding: 10px 12px; border: 1px solid rgba(255, 202, 82, .3); border-radius: var(--radius-sm); background: rgba(80, 59, 18, .34); color: #ffe1a0; font-size: 12px; line-height: 1.45; } .completeness-note.failed { border-color: rgba(255, 119, 139, .35); background: rgba(82, 30, 43, .36); color: #ffd2da; } .report-tabs-bar { position: sticky; top: 72px; z-index: 9; min-height: 60px; display: flex; align-items: stretch; gap: 12px; margin-top: 14px; border-bottom: 1px solid var(--border-subtle); min-width: 0; background: rgba(6, 17, 31, .96); backdrop-filter: blur(14px); } .report-tabs-bar nav { display: flex; flex: 0 1 auto; min-width: 0; overflow-x: auto; } .report-tabs-bar nav button { min-width: 86px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .02em; } .report-tabs-bar nav button:hover { color: var(--text); background: rgba(36, 88, 122, .28); } .report-tabs-bar nav button.active { border-bottom-color: var(--blue); background: linear-gradient(180deg, rgba(31, 105, 151, .4), rgba(12, 40, 61, .5)); color: white; } .report-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; } .report-actions button, .mobile-action-menu button { min-height: 35px; border: 1px solid rgba(96, 172, 217, .35); border-radius: 8px; background: rgba(13, 48, 72, .72); color: #d5e7f4; } .report-actions button:hover, .mobile-action-menu button:hover { border-color: var(--blue); background: rgba(22, 79, 113, .9); } .report-actions svg, .mobile-action-menu svg { width: 16px; } .action-reinspect, .share-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; } .export-btn { padding: 0 9px; font-size: 11px; } .mobile-action-menu { display: none; position: relative; margin-left: auto; } .actions-toggle { min-width: 82px; padding: 0 11px; white-space: nowrap; } .actions-popover { position: absolute; right: 0; z-index: 5; display: grid; gap: 6px; min-width: 180px; margin-top: 6px; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-elevated); box-shadow: var(--shadow-2); } .actions-popover button { justify-content: flex-start; width: 100%; } .action-status { min-height: 18px; margin: 5px 0 0; color: var(--blue-soft); font-size: 11px; } .manual-copy-panel { display: grid; gap: 9px; margin-top: 9px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-elevated); } .manual-copy-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .manual-copy-panel p { margin: 0; color: var(--text-soft); font-size: 13px; } .manual-copy-panel button { min-height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: rgba(13, 48, 72, .72); color: var(--text); } .manual-copy-panel textarea { width: 100%; min-height: 110px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-1); color: var(--text); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; } .findings-panel { margin-top: 18px; padding: 17px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(7, 25, 39, .7); } .findings-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 2px 12px; } .findings-panel > header > div { display: flex; align-items: center; gap: 10px; } .findings-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; } .findings-panel header span { padding: 3px 9px; border-radius: 999px; background: rgba(35, 83, 112, .66); color: #c1ddeb; font-size: 10px; font-weight: 750; } .findings-panel header button, .card-link, .show-all-button { border: 0; background: transparent; color: var(--blue-soft); font-size: 11px; font-weight: 700; } .findings-panel header button:hover, .card-link:hover, .show-all-button:hover { color: white; text-decoration: underline; } .finding-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; } .finding-filters button { padding: 5px 10px; border: 1px solid rgba(109, 174, 211, .26); border-radius: 999px; background: rgba(11, 43, 64, .66); color: var(--text-soft); font-size: 12px; } .finding-filters button.active { border-color: var(--blue); background: rgba(27, 104, 151, .54); color: white; } .findings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .finding-card { width: 100%; min-height: 132px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: start; gap: 10px; padding: 14px; border: 1px solid rgba(103, 163, 197, .25); border-radius: var(--radius-sm); text-align: left; color: inherit; background: linear-gradient(145deg, rgba(10, 36, 54, .88), rgba(6, 23, 37, .84)); appearance: none; } .finding-card:hover { border-color: rgba(111, 190, 234, .5); background: linear-gradient(145deg, rgba(13, 49, 73, .94), rgba(7, 29, 45, .92)); transform: translateY(-1px); } .finding-card.critical { border-color: rgba(255, 119, 139, .45); } .finding-card.warning { border-color: rgba(255, 202, 82, .42); } .finding-card:focus-visible { outline: 2px solid #9edcff; outline-offset: 2px; } .finding-icon { width: 30px; height: 30px; display: grid; place-items: center; margin-top: 2px; border-radius: 50%; font-size: 16px; font-weight: 900; } .finding-icon.critical { background: rgba(150, 44, 65, .62); color: #ffd7de; } .finding-icon.warning { background: rgba(126, 92, 21, .66); color: #ffe08b; } .finding-icon.info { background: rgba(32, 105, 151, .62); color: #a5ddff; } .finding-icon.good { background: rgba(24, 105, 74, .64); color: #91f4bd; } .finding-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .finding-title strong { font-size: 14px; line-height: 1.28; } .pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 850; } .pill.critical { background: rgba(101, 35, 49, .82); color: #ffc2cc; } .pill.warning { background: rgba(95, 72, 18, .85); color: #ffdb70; } .pill.info { background: rgba(18, 73, 108, .85); color: #7dd1ff; } .pill.good { background: rgba(17, 79, 55, .85); color: #67edaa; } .finding-body p { margin: 6px 0; color: var(--text-soft); font-size: 13px; line-height: 1.45; } .remedy-box { padding: 8px 9px; border: 1px solid rgba(98, 159, 194, .22); border-radius: 7px; background: rgba(4, 18, 29, .45); color: #b7d3e5; font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .finding-chevron { align-self: center; color: var(--blue-soft); font-size: 24px; } .show-all-button { display: block; margin: 12px auto 0; padding: 3px 8px; } .empty-findings { margin: 0; padding: 18px 8px; color: var(--muted); } .detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; min-width: 0; } .detail-card, .evidence-card, .collector-state { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(155deg, rgba(10, 35, 53, .85), rgba(6, 22, 35, .84)); } .detail-card { min-height: 278px; padding: 16px; } .detail-card header, .single-detail > header, .evidence-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .detail-card h3, .evidence-card h3 { margin: 0; font-size: 15px; } .evidence-card-heading p { margin: 0 0 5px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .summary-list { display: grid; gap: 0; margin: 13px 0 12px; } .summary-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); } .summary-list b, .summary-list dt, .posture-list dt { color: var(--muted); font-size: 12px; font-weight: 650; } .summary-list dd, .posture-list dd { margin: 0; color: #e1ebf3; font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; } .card-link { padding: 0; } .value-good { color: var(--green) !important; } .value-warning { color: var(--amber) !important; } .value-bad { color: var(--red) !important; } .value-muted, .value-neutral { color: var(--muted) !important; } .single-detail { margin-top: 16px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(7, 26, 40, .76); min-width: 0; } .single-detail h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; } .single-detail > header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; } .evidence-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 17px; } .http-evidence-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); } .evidence-card { padding: 16px; } .evidence-table { margin-top: 13px; border-top: 1px solid var(--border-subtle); } .evidence-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); } .evidence-row > strong { color: #cfdfeb; font-size: 12px; } .evidence-value { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 7px; min-width: 0; } .evidence-value > span { color: #c8d6e2; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-line; overflow-wrap: anywhere; } .evidence-value button, .dns-row button { width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: var(--blue-soft); } .evidence-value button:hover, .dns-row button:hover { background: rgba(55, 126, 169, .38); color: white; } .evidence-value svg { width: 16px; } .posture-list { margin: 13px 0 0; } .posture-list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); } .collector-state { grid-column: 1 / -1; padding: 14px; } .collector-state > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .collector-state strong { font-size: 13px; } .collector-state ul { margin: 10px 0 0; padding-left: 18px; color: #ffcad3; font-size: 11px; line-height: 1.5; } .collector-state p { margin: 8px 0 0; color: var(--muted); font-size: 12px; } .status-good, .status-warning, .status-error, .status-neutral { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; } .status-good { color: var(--green); background: rgba(18, 74, 54, .78); } .status-warning { color: #ffdc77; background: rgba(92, 70, 19, .7); } .status-error { color: #ffc0cb; background: rgba(89, 35, 47, .78); } .status-neutral { color: #d1dee9; background: rgba(66, 88, 106, .72); } .empty-evidence { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .attempt-list { display: grid; gap: 7px; margin: 14px 0; padding: 0; list-style: none; } .attempt-list li { display: grid; gap: 4px; padding: 9px; border: 1px solid rgba(255, 119, 139, .32); border-radius: 8px; background: rgba(78, 24, 36, .4); } .attempt-list strong { color: #ffced6; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; } .attempt-list span { color: #deb3bc; font-size: 11px; } .redirect-flow { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; } .redirect-flow > li { list-style: none; } .redirect-hop { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(96, 168, 208, .3); border-radius: var(--radius-sm); background: rgba(8, 36, 55, .75); } .redirect-hop.red, .redirect-hop.error { border-color: rgba(255, 119, 139, .42); background: rgba(72, 27, 39, .56); } .redirect-hop.amber { border-color: rgba(255, 202, 82, .38); } .redirect-step { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(34, 108, 151, .7); color: #d8effe; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; } .redirect-hop > div { display: grid; gap: 3px; min-width: 0; } .redirect-protocol { color: var(--blue-soft); font-size: 10px; font-weight: 850; letter-spacing: .08em; } .redirect-hop strong { color: #d9ebf7; font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .redirect-hop small { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .redirect-connector { height: 20px; display: grid; place-items: center; color: var(--blue); font-size: 16px; } .status-chip { padding: 4px 7px; border-radius: 6px; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; } .status-chip.green { color: var(--green); background: rgba(18, 86, 62, .84); } .status-chip.amber { color: #ffe07f; background: rgba(89, 67, 18, .84); } .status-chip.red, .status-chip.error { color: #ffc2cc; background: rgba(99, 37, 51, .86); } .status-chip.muted { color: #d1dde6; background: rgba(60, 84, 101, .84); } .redirect-facts { margin-top: 14px; } .inline-alert { margin: 13px 0 0; padding: 9px 10px; border: 1px solid rgba(255, 119, 139, .38); border-radius: 8px; background: rgba(79, 27, 40, .46); font-size: 11px; } .inline-alert.error { color: #ffd0d8; } .header-matrix { display: grid; gap: 7px; margin-top: 16px; } .header-matrix > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: rgba(5, 22, 35, .42); } .header-matrix span { color: var(--text-soft); font-size: 12px; } .header-matrix strong { font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; overflow-wrap: anywhere; } .header-details { margin-top: 14px; } .header-details summary { color: var(--blue-soft); cursor: pointer; font-size: 11px; font-weight: 700; } .header-details[open] summary { margin-bottom: 8px; } .header-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; } .header-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); } .header-list span { color: var(--muted); font-size: 11px; } .header-list code { color: #cae4f4; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .json-select { padding: 5px 9px; border: 1px solid rgba(95, 170, 215, .35); border-radius: 7px; background: rgba(12, 45, 67, .72); color: var(--text-soft); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; } .single-detail > pre { max-width: 100%; max-height: 68vh; margin: 17px 0 0; padding: 16px; overflow: auto; border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; background: #04121e; color: #b4daf4; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; } .http-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 13px 0 0; color: var(--text-soft); font-size: 12px; } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); } .status-dot.green { background: var(--green); } .status-dot.amber { background: var(--amber); } .status-dot.red { background: var(--red); } .status-dot.muted { background: var(--muted); } .drawer-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; background: rgba(1, 7, 13, .76); backdrop-filter: blur(5px); } .diagnostic-drawer { width: min(500px, 100%); height: 100%; overflow-y: auto; padding: 28px; border-left: 1px solid var(--border-strong); outline: none; background: linear-gradient(180deg, #0c2639, #071a2a); box-shadow: -24px 0 60px rgba(0,0,0,.42); } .diagnostic-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .drawer-kicker { margin: 0 0 7px; color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .diagnostic-drawer h2 { margin: 0; color: white; font-size: 26px; line-height: 1.14; letter-spacing: -.035em; } .drawer-close { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(109, 181, 220, .4); border-radius: 9px; background: rgba(13, 48, 72, .78); color: #c5deee; } .drawer-close:hover { border-color: var(--blue); background: rgba(26, 79, 113, .92); } .drawer-close svg { width: 18px; } .drawer-summary { margin: 18px 0; color: var(--text-soft); line-height: 1.6; } .drawer-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 23px; } .drawer-facts div { padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(5, 22, 35, .55); } .drawer-facts dt { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .drawer-facts dd { margin: 5px 0 0; color: var(--text); font-weight: 750; } .diagnostic-drawer section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .diagnostic-drawer section h3 { margin: 0 0 10px; color: #dceaf4; font-size: 13px; } .evidence-pointers { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .evidence-pointers li { padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: rgba(5, 22, 35, .54); } .evidence-pointers code { color: var(--blue-soft); font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .drawer-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .drawer-raw-button, .drawer-evidence-button { flex: 1; min-height: 43px; border: 1px solid #4db3ff; border-radius: 10px; background: linear-gradient(180deg, #2395e9, #167bc5); color: white; font-weight: 750; } .drawer-raw-button { border-color: rgba(96, 172, 217, .35); background: rgba(13, 48, 72, .72); color: #d5e7f4; } .drawer-actions { display: flex; gap: 9px; margin-top: 24px; } /* Inspection workspace: dense evidence, one action surface and explicit state. */ .provenance-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid rgba(77, 179, 255, .38); border-radius: 999px; background: rgba(18, 66, 96, .66); color: var(--blue-soft); font-size: 10px; font-weight: 800; } .previous-report-banner { margin-top: 10px; } .inline-expand { margin-left: 7px; padding: 0; border: 0; background: transparent; color: var(--blue-soft); font-size: inherit; font-weight: 750; text-decoration: underline; } .inspect-another-btn { padding: 0 10px; font-size: 11px; } .export-control { position: relative; } .export-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 12; display: grid; gap: 5px; min-width: 132px; padding: 7px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-elevated); box-shadow: var(--shadow-2); } .export-popover button { width: 100%; padding: 7px 9px; text-align: left; } .severity-counts { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; } .finding-impact { margin-left: auto; color: var(--amber); font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace; } .finding-body small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; } .finding-card { min-height: 98px; } .finding-card .remedy-box { display: none; } .evidence-card { border: 0; border-radius: 10px; background: var(--surface-evidence); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); } .evidence-card:focus-visible, .evidence-highlight { outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(77, 179, 255, .12); } .header-matrix > div { display: grid; grid-template-columns: minmax(110px, .6fr) auto; align-items: start; } .header-matrix small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.4; } .raw-actions { display: flex; flex-wrap: wrap; gap: 7px; } .raw-actions button { min-height: 33px; padding: 0 9px; border: 1px solid rgba(96, 172, 217, .35); border-radius: 8px; background: rgba(13, 48, 72, .72); color: #d5e7f4; font-size: 11px; } .raw-actions button:hover { border-color: var(--blue); background: rgba(22, 79, 113, .9); } .single-detail > pre { white-space: pre; overflow-wrap: normal; } .single-detail > pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } button:focus-visible, input:focus-visible, a:focus-visible, [role="tab"]:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @keyframes inspection-pulse { 50% { filter: drop-shadow(0 0 10px rgba(77, 179, 255, .65)); transform: translateY(-1px); } } @media (max-width: 1100px) { .hero-workspace { grid-template-columns: 1fr; gap: 30px; } .report-context-bar { grid-template-columns: 1fr; gap: 15px; } .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-card:last-child { grid-column: 1 / -1; } } @media (max-width: 860px) { .app-topbar { padding-inline: 22px; gap: 16px; } .product-context { display: none; } .cert-main { padding-inline: 22px; } .report-context-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-context-meta div:last-child { grid-column: 1 / -1; } .score-row { grid-template-columns: 1fr; } .category-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .findings-grid, .evidence-layout, .http-evidence-layout { grid-template-columns: 1fr; } .collector-state { grid-column: auto; } .report-actions { display: none; } .mobile-action-menu { display: block; } .security-boundary { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 620px) { .app-topbar { min-height: 62px; padding-inline: 16px; } .brand-lockup { min-width: 0; } .brand-lockup strong { font-size: 21px; } .brand-lockup small { font-size: 7px; } .brand-mark { width: 29px; height: 33px; } .repo-link { display: none; } .cert-main { padding: 16px 16px 44px; } .hero-workspace { min-height: 0; padding: 25px 18px; border-radius: 18px; } .hero-copy h1 { font-size: 50px; } .hero-statement { font-size: 23px; } .hero-description { font-size: 14px; } .inspect-cluster { padding: 17px; } .inspect-actions { grid-template-columns: 1fr; } .secondary-btn { width: 100%; } .quick-hosts { gap: 6px; } .inspection-progress { grid-template-columns: auto minmax(0, 1fr); padding: 14px; } .progress-checks { grid-column: 1 / -1; } .section-heading { align-items: flex-start; flex-direction: column; } .capability-grid { grid-template-columns: 1fr; } .capability-card { min-height: 126px; } .demo-preview { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; border-radius: 18px; } .report-context-bar { padding: 15px; } .report-context-meta { grid-template-columns: 1fr; gap: 11px; } .report-context-meta div:last-child { grid-column: auto; } .workspace-host-form { grid-template-columns: 1fr; } .category-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .metric-card.overall { min-height: 122px; padding: 17px; } .category-score-grid .metric-card { min-height: 98px; padding: 12px; } .category-score-grid .metric-card strong { font-size: 25px; } .category-score-grid .metric-card strong small { font-size: 10px; } .category-score-grid .metric-card .gauge { display: none; } .category-score-grid .metric-card em { font-size: 11px; } .metric-card.overall strong { font-size: 44px; } .metric-card.overall .gauge { width: 72px; height: 72px; } .report-tabs-bar { top: 62px; gap: 7px; } .report-tabs-bar nav button { min-width: 76px; padding-inline: 10px; } .report-context-meta dd, .metric-card em, .summary-list dd, .posture-list dd { font-size: 13px; } .summary-list dt, .posture-list dt, .finding-body small { font-size: 12px; } .findings-panel { padding: 13px; } .findings-panel > header { align-items: flex-start; flex-direction: column; } .detail-grid { grid-template-columns: 1fr; } .detail-card:last-child { grid-column: auto; } .single-detail { padding: 15px; } .single-detail > header { flex-direction: column; } .summary-list > div, .posture-list > div { grid-template-columns: 98px minmax(0, 1fr); } .evidence-row { grid-template-columns: 52px minmax(0, 1fr); } .redirect-hop { grid-template-columns: 26px minmax(0, 1fr); } .redirect-hop .status-chip { grid-column: 2; justify-self: start; } .header-list li { grid-template-columns: 1fr; gap: 3px; } .diagnostic-drawer { padding: 22px; border-left: 0; } .diagnostic-drawer h2 { font-size: 22px; } .drawer-actions { flex-direction: column; } .header-matrix > div { grid-template-columns: 1fr auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }