:root { --bg:#07111d; --panel:#0b1927; --line:rgba(163,194,220,.15); --line-bright:rgba(163,194,220,.28); --text:#e9f1f5; --muted:#8ca2b2; --cyan:#62e3dc; --amber:#f3bd68; --red:#f47779; --green:#7be49e; --serif:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { background:var(--bg); } body { margin:0; color:var(--text); background:radial-gradient(circle at 80% 0%,#123044 0,transparent 28rem),var(--bg); font:14px/1.5 var(--sans); letter-spacing:.01em; } button,textarea { font:inherit; } button { cursor:pointer; }
.app-shell { max-width:1440px; min-height:100vh; margin:auto; padding:0 56px; } .topbar { min-height:78px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; } .brand { color:var(--text); display:flex; align-items:center; gap:12px; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--cyan); border-radius:50%; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.08em; } .brand strong,.brand small { display:block; } .brand strong { font-size:12px; letter-spacing:.04em; } .brand small { color:var(--muted); font-size:10px; margin-top:1px; }
.topbar-meta { align-items:center; color:var(--muted); display:flex; gap:11px; font-size:10px; letter-spacing:.14em; } .live-dot { background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green); height:6px; width:6px; } .track-pill,.status-chip,.evidence-badge,.safe-note,.audit-lock { border:1px solid var(--line-bright); border-radius:999px; padding:5px 9px; color:var(--cyan); font-size:9px; letter-spacing:.12em; white-space:nowrap; }
main { padding:72px 0 42px; } .hero { max-width:850px; } .eyebrow,.section-kicker,.metric-label,.approval-label { color:var(--cyan); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .eyebrow { align-items:center; display:flex; gap:9px; } .eyebrow span { background:var(--cyan); border-radius:50%; box-shadow:0 0 14px var(--cyan); height:6px; width:6px; } h1 { font:400 clamp(47px,6vw,82px)/.98 var(--serif); letter-spacing:-.055em; margin:22px 0 26px; } h1 em { color:var(--cyan); font-style:italic; } .hero-copy { color:#afc1cc; font-size:16px; line-height:1.7; max-width:680px; } .hero-proof { color:var(--muted); display:flex; gap:12px; margin:28px 0 58px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .hero-proof i { color:var(--cyan); font-style:normal; }
.command-card,.pipeline-card,.panel,.approval-card { background:linear-gradient(145deg,rgba(22,46,65,.82),rgba(9,22,35,.86)); border:1px solid var(--line); border-radius:3px; } .command-card,.pipeline-card { padding:22px 24px; margin-top:18px; } .section-kicker { align-items:center; display:flex; gap:10px; } .step-no,.panel-index { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; } .kicker-rule { background:var(--line); height:1px; flex:1; } .safe-note { color:var(--amber); border-color:rgba(243,189,104,.3); } textarea { background:#07131f; border:1px solid var(--line); border-radius:2px; color:var(--text); display:block; font:16px/1.55 var(--serif); margin:20px 0 13px; min-height:100px; outline:none; padding:15px 17px; resize:vertical; width:100%; } textarea:focus { border-color:rgba(98,227,220,.7); box-shadow:0 0 0 3px rgba(98,227,220,.08); } .command-footer { align-items:center; display:flex; justify-content:space-between; gap:15px; } .hint,.metric-card small,.plan-summary,.impact-row p,.approval-copy p { color:var(--muted); } .hint { font-size:11px; }
.button { border:0; border-radius:2px; font-weight:800; letter-spacing:.03em; padding:12px 17px; transition:transform .2s,background .2s,opacity .2s; } .button:hover:not(:disabled) { transform:translateY(-1px); } .button:disabled { cursor:not-allowed; opacity:.35; } .primary { background:var(--cyan); color:#092029; } .ghost { background:transparent; border:1px solid var(--line-bright); color:var(--text); } .approve { background:var(--green); color:#072116; } .status-chip { color:var(--muted); } .status-chip.approval { color:var(--amber); border-color:rgba(243,189,104,.35); } .status-chip.resolved { color:var(--green); border-color:rgba(123,228,158,.35); }
.pipeline { display:flex; align-items:flex-start; margin:27px 0 2px; } .pipeline-stage { color:#6e8595; align-items:center; display:flex; flex:1; font-size:10px; gap:8px; position:relative; white-space:nowrap; } .pipeline-stage i { background:var(--line); height:1px; flex:1; margin:0 8px; } .pipeline-stage.done,.pipeline-stage.current { color:var(--text); } .pipeline-stage.current { color:var(--cyan); } .stage-dot { align-items:center; border:1px solid var(--line-bright); border-radius:50%; display:inline-flex; font:9px ui-monospace,monospace; height:23px; justify-content:center; width:23px; } .done .stage-dot { border-color:var(--cyan); color:var(--cyan); } .current .stage-dot { background:var(--cyan); color:#072029; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:18px; } .metric-card { background:var(--panel); min-height:135px; padding:21px 22px; } .metric-card.highlight { background:linear-gradient(145deg,#123640,#0b202b); } .metric-card strong { display:block; font:400 46px/1 var(--serif); letter-spacing:-.05em; margin:18px 0 9px; } .metric-card strong span { color:var(--cyan); font:400 17px var(--sans); margin-left:3px; } .metric-card small { font-size:10px; }
.work-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin-top:18px; } .panel { min-height:378px; padding:23px 24px; } .panel-heading { align-items:flex-start; display:flex; justify-content:space-between; gap:10px; } .panel-heading>div { align-items:center; display:flex; gap:11px; } h2,h3 { font-weight:500; margin:0; } h2 { font-size:17px; letter-spacing:-.02em; } h3 { font-size:13px; } .panel-index { color:var(--cyan); } .evidence-badge,.plan-id { color:var(--muted); font:9px ui-monospace,monospace; letter-spacing:.08em; }
.impact-groups { margin-top:25px; } .impact-row { align-items:center; border-top:1px solid var(--line); display:grid; grid-template-columns:65px 1fr 20px; gap:12px; padding:17px 0; } .impact-count { color:var(--text); font:25px var(--serif); line-height:1; } .impact-count small { display:block; color:var(--muted); font:8px var(--sans); letter-spacing:.1em; margin-top:5px; } .impact-row p { font-size:11px; line-height:1.45; margin:4px 0 0; } .impact-arrow { color:var(--muted); } .impact-row.red .impact-count { color:var(--red); }.impact-row.amber .impact-count { color:var(--amber); }.impact-row.cyan .impact-count { color:var(--cyan); }
.plan-summary { border-bottom:1px solid var(--line); font-size:12px; line-height:1.6; margin:24px 0 0; padding-bottom:18px; } .plan-actions { margin-top:3px; } .plan-row { align-items:center; border-bottom:1px solid var(--line); display:grid; grid-template-columns:30px 1fr 18px; gap:10px; min-height:43px; font-size:11px; } .action-icon { align-items:center; border:1px solid var(--line-bright); color:var(--cyan); display:inline-flex; font:10px var(--serif); height:22px; justify-content:center; width:22px; } .action-check { color:var(--muted); font-size:17px; } .resolved .action-check { color:var(--green); }
.approval-card { align-items:center; display:grid; grid-template-columns:50px 1fr auto; gap:18px; margin-top:18px; padding:23px 24px; } .approval-card.ready { border-color:rgba(243,189,104,.45); box-shadow:inset 3px 0 var(--amber); } .approval-card.resolved { border-color:rgba(123,228,158,.4); box-shadow:inset 3px 0 var(--green); } .approval-icon { align-items:center; border:1px solid var(--line-bright); border-radius:50%; color:var(--muted); display:flex; font-size:18px; height:38px; justify-content:center; width:38px; } .ready .approval-icon { border-color:var(--amber); color:var(--amber); }.resolved .approval-icon { border-color:var(--green); color:var(--green); } .approval-label { color:var(--amber); font-size:9px; }.resolved .approval-label { color:var(--green); } .approval-copy h2 { margin-top:3px; }.approval-copy p { font-size:11px; margin:5px 0 0; }.approval-actions { display:flex; gap:8px; }
.audit-section { margin:42px 0 0; } .audit-list { margin-top:18px; } .audit-row { align-items:center; border-bottom:1px solid var(--line); color:#b9c7cf; display:flex; font-size:11px; gap:13px; min-height:40px; } .audit-time { color:var(--muted); font:10px ui-monospace,monospace; width:66px; } .audit-dot { background:var(--cyan); border-radius:50%; height:5px; width:5px; } .audit-dot.amber { background:var(--amber); }.audit-dot.green { background:var(--green); }.audit-dot.muted { background:#526675; }.audit-lock { color:var(--muted); } .footer { border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; margin-top:48px; padding:20px 0 30px; font-size:10px; letter-spacing:.04em; }
.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); } @media (max-width:800px) { .app-shell{padding:0 20px;} .topbar-meta{display:none;} main{padding-top:44px;} .hero-proof{flex-wrap:wrap;margin-bottom:35px;} .command-footer,.footer{align-items:flex-start;flex-direction:column;} .metrics-grid,.work-grid{grid-template-columns:1fr 1fr;} .work-grid{grid-template-columns:1fr;} .approval-card{display:flex;align-items:flex-start;flex-direction:column;} .pipeline{overflow-x:auto;padding-bottom:8px;} .pipeline-stage{min-width:120px;} .pipeline-stage i{min-width:22px;} .approval-actions{width:100%;} .approval-actions .button{flex:1;} } @media (max-width:500px) { .metrics-grid{grid-template-columns:1fr 1fr;} .metric-card{min-height:112px;padding:16px;} .metric-card strong{font-size:36px;margin-top:11px;} h1{font-size:46px;} }