/* FinTechCo review portal — Stripe-adjacent light-first design. All colors are custom properties; dark theme via [data-theme="dark"] on . */ :root { --bg: #f6f9fc; --surface: #ffffff; --surface-alt: #f6f9fc; --border: #e3e8ee; --text: #0a2540; --muted: #425466; --accent: #635bff; --accent-contrast: #ffffff; --accent-soft: rgba(99, 91, 255, 0.08); --pass: #1a936f; --skip: #d97706; --fail: #df1b41; --prio-a-bg: rgba(223, 27, 65, 0.09); --prio-a-fg: #c11238; --prio-b-bg: rgba(217, 119, 6, 0.11); --prio-b-fg: #9f570a; --prio-c-bg: rgba(26, 147, 111, 0.11); --prio-c-fg: #157a5b; --shadow: 0 1px 2px rgba(10, 37, 64, 0.04); --radius: 8px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } [data-theme="dark"] { --bg: #0b1523; --surface: #16243a; --surface-alt: #0e1a2c; --border: #263850; --text: #e6ebf1; --muted: #8b95a7; --accent: #8f88ff; --accent-contrast: #0b1523; --accent-soft: rgba(143, 136, 255, 0.14); --pass: #3ac490; --skip: #f0a13d; --fail: #f2617c; --prio-a-bg: rgba(242, 97, 124, 0.16); --prio-a-fg: #f2617c; --prio-b-bg: rgba(240, 161, 61, 0.15); --prio-b-fg: #f0a13d; --prio-c-bg: rgba(58, 196, 144, 0.15); --prio-c-fg: #3ac490; --shadow: none; } * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; font: 15px/1.6 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--accent); } header.site { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 28px; } .brand-row { display: flex; align-items: baseline; gap: 12px; padding: 20px 0 6px; } .brand-row h1 { font-size: 19px; margin: 0; letter-spacing: -0.01em; } .brand-row .tag { color: var(--muted); font-size: 13px; } .brand-row .logout { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration: none; } .brand-row .logout:hover { color: var(--accent); } .theme-toggle { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 15px; height: 15px; display: block; } nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; } nav.tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; } nav.tabs a:hover { color: var(--text); } nav.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); } main { max-width: 1080px; margin: 0 auto; padding: 32px 28px 64px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; margin-bottom: 22px; } .card h2 { margin-top: 0; font-size: 19px; letter-spacing: -0.01em; } .notice { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; font-size: 13.5px; color: var(--text); margin-bottom: 22px; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge.A { background: var(--prio-a-bg); color: var(--prio-a-fg); } .badge.B { background: var(--prio-b-bg); color: var(--prio-b-fg); } .badge.C { background: var(--prio-c-bg); color: var(--prio-c-fg); } table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; } code { font-family: var(--mono); font-size: 0.92em; background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; } pre code { display: block; padding: 14px; overflow-x: auto; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); } button, .btn { background: var(--accent); color: var(--accent-contrast); border: 0; border-radius: var(--radius); padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); } button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } button:disabled { opacity: 0.55; cursor: default; } input[type=text], input[type=email], input[type=password], textarea, select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; color: var(--muted); } .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .filters .chip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; font-weight: 500; } .filters .chip:hover { color: var(--accent); border-color: var(--accent); } .filters .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .status-pass { color: var(--pass); font-weight: 600; } .status-skip { color: var(--skip); font-weight: 600; } .status-fail { color: var(--fail); font-weight: 600; } .bar-track { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); } .bar-seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; min-width: 0; } [data-theme="dark"] .bar-seg { color: #0b1523; } .bar-seg.pass { background: var(--pass); } .bar-seg.skip { background: var(--skip); } .bar-seg.fail { background: var(--fail); } .legend { display: flex; gap: 18px; font-size: 13px; color: var(--muted); margin-top: 8px; } .legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: baseline; } .history { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 10px; } .history .col { flex: 1; max-width: 42px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; cursor: default; } .history .col .fill { background: var(--pass); border-radius: 4px 4px 0 0; min-height: 3px; } .history .col.has-fail .fill { background: var(--fail); } .history .col .lbl { font-size: 10px; color: var(--muted); text-align: center; margin-top: 4px; white-space: nowrap; } .log { font-family: var(--mono); font-size: 12.5px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; } .muted { color: var(--muted); } .doc-layout { display: grid; grid-template-columns: 230px 1fr; gap: 24px; } .doc-nav { position: sticky; top: 16px; align-self: start; } .doc-nav a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 13.5px; } .doc-nav a.active, .doc-nav a:hover { background: var(--accent-soft); color: var(--accent); } .doc-body img, .doc-body svg { max-width: 100%; } .doc-body h1 { font-size: 26px; letter-spacing: -0.01em; } .doc-body h2 { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-top: 34px; } .mermaid { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 16px 0; overflow-x: auto; } [data-theme="dark"] .mermaid { background: var(--surface); } @media (max-width: 800px) { .doc-layout { grid-template-columns: 1fr; } .doc-nav { position: static; } } footer.site { text-align: center; color: var(--muted); font-size: 12.5px; padding: 24px; } .login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .login-card { width: 380px; max-width: 92vw; } .error-msg { color: var(--fail); font-size: 13.5px; margin-top: 10px; } .ok-msg { color: var(--pass); font-size: 13.5px; margin-top: 10px; }