app/static/styles.css

:root {
  --bg: #07100e;
  --bg-2: #0a1512;
  --panel: rgba(13, 27, 23, 0.86);
  --panel-2: #0d1b17;
  --line: rgba(183, 224, 209, 0.13);
  --line-strong: rgba(183, 224, 209, 0.24);
  --text: #eef8f3;
  --muted: #8fa9a0;
  --green: #b8ff65;
  --green-2: #63eeaa;
  --cyan: #6ee7df;
  --violet: #bca2ff;
  --amber: #ffca73;
  --danger: #ff7e76;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 1120px;
  background:
    radial-gradient(circle at 79% 8%, rgba(66, 213, 152, 0.08), transparent 28%),
    radial-gradient(circle at 26% 45%, rgba(73, 213, 202, 0.035), transparent 35%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.noise {
  position: fixed; inset: 0; opacity: .17; pointer-events: none; z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

.app-shell { display: grid; grid-template: 64px 1fr / 238px minmax(0,1fr); min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 15; grid-column: 1/-1; display: grid;
  grid-template-columns: 238px 1fr auto; height: 64px; align-items: center;
  background: rgba(7, 16, 14, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}

.brand { height: 64px; padding: 0 22px; display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.04em; font-size: 19px; border-right: 1px solid var(--line); }
.brand > span:last-child span { color: var(--green); }
.brand-mark { width: 29px; height: 29px; position: relative; display: block; border: 1px solid rgba(184,255,101,.45); border-radius: 7px; box-shadow: inset 0 0 16px rgba(184,255,101,.07); }
.brand-mark i { position: absolute; display: block; background: var(--green); border-radius: 4px; }
.brand-mark i:nth-child(1) { width: 3px; height: 17px; left: 7px; top: 5px; }
.brand-mark i:nth-child(2) { width: 11px; height: 3px; left: 8px; top: 8px; transform: rotate(22deg); }
.brand-mark i:nth-child(3) { width: 11px; height: 3px; left: 8px; top: 17px; transform: rotate(-22deg); }
.brand-mark i:nth-child(4) { width: 4px; height: 4px; right: 5px; top: 12px; box-shadow: 0 -7px 0 var(--green), 0 7px 0 var(--green); }

.topbar-center { display: flex; align-items: center; gap: 9px; padding: 0 24px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.slash { opacity: .35; }.repo-name { color: #d6e7df; }.branch-pill { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 999px; padding: 4px 9px; }
.system-badges { height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); color: var(--muted); font-size: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 4px rgba(99,238,170,.09), 0 0 16px rgba(99,238,170,.4); }
.divider { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }

.sidebar { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; padding: 24px 14px 18px; border-right: 1px solid var(--line); background: rgba(8,18,15,.68); }
.nav-label { font-family: var(--mono); color: #607b71; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; padding: 0 10px; margin: 0 0 10px; }
.primary-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.025); }
.nav-item.active { color: var(--text); border-color: rgba(184,255,101,.12); background: linear-gradient(90deg, rgba(184,255,101,.09), rgba(184,255,101,.02)); }
.nav-icon { font-family: var(--mono); color: var(--green); width: 17px; font-size: 17px; }
.nav-item kbd { margin-left: auto; font: 9px var(--mono); color: #547065; }
.sidebar-section { margin-top: 31px; border-top: 1px solid var(--line); padding-top: 22px; }
.mini-tree { font: 10px var(--mono); color: #789187; padding: 1px 7px; }
.tree-row { height: 31px; display: flex; align-items: center; gap: 9px; position: relative; }
.tree-row span { width: 7px; height: 7px; border: 1px solid #708d82; border-radius: 2px; background: #0d1b17; position: relative; z-index: 2; }
.tree-row.child { padding-left: 20px; }
.tree-row.child::before { content:""; position: absolute; left: 3px; top: -16px; bottom: 15px; width: 15px; border-left: 1px solid #243b33; border-bottom: 1px solid #243b33; }
.tree-row.amber span { border-color: var(--amber); }.tree-row.violet span { border-color: var(--violet); }.tree-row.green span { border-color: var(--green-2); }
.sidebar-bottom { margin-top: auto; }
.trust-card { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 13px 11px; background: rgba(255,255,255,.02); }
.trust-icon { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(184,255,101,.1); color: var(--green); font-size: 10px; }
.trust-card strong { display: block; font-size: 11px; }.trust-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.quiet-link { display: flex; justify-content: space-between; color: #6d877d; text-decoration: none; font: 9px var(--mono); padding: 16px 8px 0; }

.main { width: 100%; max-width: 1480px; padding: 48px 54px 20px; margin: 0 auto; overflow: hidden; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 9px var(--mono); color: #668176; letter-spacing: .14em; }
.eyebrow span:first-child { color: var(--green); }.eyebrow-line { width: 35px; height: 1px; background: #355045; }
h1 { margin: 16px 0 13px; font-size: clamp(42px,4vw,64px); line-height: 1.02; letter-spacing: -.055em; font-weight: 700; }
h1 em { font-style: normal; color: var(--green); }
.lede { width: 690px; margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.hero-stat { width: 180px; height: 136px; border-left: 1px solid var(--line); padding: 8px 0 0 28px; }
.stat-label { display: block; font: 8px var(--mono); letter-spacing: .15em; color: #658076; }
.hero-stat strong { display: block; font-size: 61px; line-height: .95; letter-spacing: -.08em; margin: 13px 0 8px; }.hero-stat strong span { font-size: 25px; color: var(--green); margin-left: 5px; }
.hero-stat small { font: 9px var(--mono); color: var(--muted); }

.issue-card { position: relative; padding: 23px 25px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(125deg, rgba(17,35,29,.95), rgba(10,23,19,.88)); box-shadow: 0 18px 70px rgba(0,0,0,.22); }
.panel-glow::before { content:""; position:absolute; inset: -1px; border-radius: inherit; pointer-events:none; background: linear-gradient(100deg, rgba(184,255,101,.14), transparent 30%, transparent 72%, rgba(110,231,223,.08)); mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; }
.issue-meta { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.repo-avatar { width: 36px; height: 36px; display: grid; place-items: center; background: #b8ff65; color: #102010; border-radius: 8px; font-weight: 800; font-size: 12px; }
.micro-label { display: block; font: 8px var(--mono); color: #6d897e; letter-spacing: .15em; margin-bottom: 5px; }
.repo-input { width: 260px; border: 0; outline: 0; background: none; color: #dbeae4; font: 11px var(--mono); padding: 0; }
.language-chip { margin-left: auto; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); font: 9px var(--mono); }
.language-chip i { width: 6px; height: 6px; border-radius: 50%; background: #478fca; }
.issue-card > label { display: block; font: 9px var(--mono); color: #718d82; letter-spacing: .12em; text-transform: uppercase; margin: 19px 0 7px; }
#issue { width: 100%; min-height: 69px; resize: vertical; background: transparent; color: #e5f0eb; border: 0; outline: 0; padding: 0; font: 12px/1.65 var(--mono); }
.issue-footer { display: flex; align-items: center; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 11px; }
.constraint-list { display: flex; gap: 22px; color: #7b958b; font: 9px var(--mono); }.constraint-list b { color: #bdd2c9; margin-right: 5px; font-weight: 400; }
.forge-button { margin-left: auto; min-width: 260px; height: 54px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 7px; padding: 0 15px; cursor: pointer; color: #10200f; background: var(--green); box-shadow: 0 9px 28px rgba(184,255,101,.13); transition: transform .2s, box-shadow .2s, opacity .2s; }
.forge-button:hover { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(184,255,101,.2); }.forge-button:disabled { opacity: .62; cursor: wait; transform: none; }
.button-spark { font-size: 16px; }.button-copy { display: flex; flex-direction: column; align-items: flex-start; }.button-copy b { font: 700 12px var(--sans); }.button-copy small { font: 7px var(--mono); opacity: .7; margin-top: 2px; }.button-arrow { margin-left: auto; font-size: 18px; }

.run-section { padding-top: 42px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.section-heading h2 { font-size: 23px; letter-spacing: -.04em; margin: 0; }.run-status { display: flex; gap: 8px; align-items: center; color: var(--muted); font: 9px var(--mono); }.run-status span { width: 6px; height: 6px; border: 1px solid #728c82; border-radius: 50%; }.run-status.running span { border-color: var(--green); background: var(--green); box-shadow: 0 0 12px rgba(184,255,101,.45); animation: pulse 1.4s infinite; }
.stage-track { height: 73px; margin-top: 21px; border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: center; padding: 0 25px; background: rgba(11,24,20,.68); }
.stage { min-width: 136px; display: grid; grid-template: auto auto / 28px 1fr; align-items: center; column-gap: 7px; color: #586f66; }.stage > span { grid-row: 1/3; width: 26px; height: 26px; display: grid; place-items:center; border: 1px solid #30483f; border-radius: 50%; font: 8px var(--mono); }.stage b { font-size: 10px; }.stage small { font: 8px var(--mono); }
.stage.active { color: #dff0e9; }.stage.active > span { color: #10200f; background: var(--green); border-color: var(--green); }.stage.done > span { color: var(--green); border-color: rgba(184,255,101,.55); }.stage.done > span::after { content:"✓"; position:absolute; background:#0b1814; }
.stage-track > i { flex: 1; height: 1px; background: #22392f; margin: 0 15px; position: relative; overflow: hidden; }.stage-track > i.done::after { content:""; position:absolute; inset:0; background:var(--green); animation: fillLine .5s ease both; transform-origin:left; }

.branch-arena { position: relative; padding-top: 20px; }
.base-node { width: 430px; height: 59px; margin: 0 auto; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #10201b; padding: 0 15px; box-shadow: 0 13px 40px rgba(0,0,0,.25); }
.base-icon { font: 12px var(--mono); color: var(--green); border: 1px solid rgba(184,255,101,.28); padding: 7px; border-radius: 5px; }.base-node small { display:block; color:#6e8a7e; font:7px var(--mono); letter-spacing:.12em; }.base-node strong { font: 10px var(--mono); color:#d4e7df; }.base-verified { margin-left:auto; color:var(--green-2); border:1px solid rgba(99,238,170,.2); background:rgba(99,238,170,.06); border-radius:999px; padding:4px 8px; font:7px var(--mono); }
.branch-lines { display:block; width:100%; height:80px; }.branch-lines path { fill:none; stroke:#244138; stroke-width:1.2; vector-effect:non-scaling-stroke; }.branch-lines circle { fill:#0b1714; stroke:var(--green); vector-effect:non-scaling-stroke; }
.branch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.branch-card { position:relative; min-height: 245px; border:1px solid var(--line); border-radius:9px; background:rgba(11,24,20,.78); padding:17px; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; }
.branch-card::before { content:""; position:absolute; left:0; top:0; height:2px; width:100%; opacity:.8; }.branch-card.amber::before { background:var(--amber); }.branch-card.violet::before { background:var(--violet); }.branch-card.green::before { background:var(--green-2); }
.branch-card.winner { transform:translateY(-4px); border-color:rgba(184,255,101,.45); box-shadow:0 14px 40px rgba(71,198,125,.08), inset 0 0 45px rgba(184,255,101,.025); }
.branch-top { display:flex; align-items:center; gap:7px; }.branch-top > span { width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:5px;font:8px var(--mono); }.branch-top i { width:5px;height:5px;border-radius:50%; background:#61766e; }.branch-card.running .branch-top i { background:var(--amber); box-shadow:0 0 12px currentColor; animation:pulse 1.2s infinite; }.branch-top small { margin-left:auto; font:7px var(--mono); color:#71897f; letter-spacing:.12em; }.branch-card h3 { margin:17px 0 7px; font-size:16px; letter-spacing:-.03em; }.branch-card > p { margin:0;color:var(--muted);font-size:10px;line-height:1.5;min-height:45px; }
.score-row { display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin:14px 0 10px; }.score-row span { font:7px var(--mono);color:#70897f; }.score-row strong { font:22px var(--mono);font-weight:500; }.score-bar { grid-column:1/-1;height:3px;background:#1f352d;border-radius:99px;overflow:hidden; }.score-bar i { display:block;height:100%;width:var(--score);background:var(--green-2);animation:grow .8s ease both;transform-origin:left; }
.test-strip { display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-top:11px;font:8px var(--mono);color:#789187; }.test-strip strong { color:#dbeae4;font-weight:500; }.test-strip .pass { color:var(--green-2); }.test-strip .fail { color:var(--danger); }
.branch-risk { display:flex;gap:7px;margin-top:11px;color:#7c958b;font:8px/1.45 var(--mono); }.branch-risk b { color:var(--amber);font-weight:400; }.winner-chip { position:absolute;right:14px;top:14px;padding:5px 8px;background:var(--green);color:#10200f;border-radius:999px;font:700 7px var(--mono);letter-spacing:.08em; }
.skeleton { min-height:185px; }.skeleton h3,.skeleton p { color:#50685e; }.skeleton::after { content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.025) 44%,transparent 58%);animation:shimmer 2.1s infinite; }

.result-section { padding-top:45px; }
.winner-banner { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;min-height:132px;border:1px solid rgba(184,255,101,.28);border-radius:11px;padding:23px 25px;background:linear-gradient(115deg,rgba(184,255,101,.09),rgba(16,35,28,.85) 42%,rgba(8,19,16,.9));box-shadow:0 18px 60px rgba(0,0,0,.2); }
.winner-medal { width:60px;height:60px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(184,255,101,.4);color:var(--green);font-size:23px;background:rgba(184,255,101,.07);box-shadow:inset 0 0 25px rgba(184,255,101,.07); }.winner-banner h2 { margin:3px 0 4px;font-size:24px;letter-spacing:-.04em; }.winner-banner p { margin:0;color:var(--muted);font-size:10px;max-width:680px;line-height:1.55; }
.winner-score { display:grid;grid-template-columns:auto auto;align-items:end;text-align:right;border-left:1px solid var(--line);padding-left:27px; }.winner-score strong { font:40px var(--mono);color:var(--green);line-height:1; }.winner-score > span { font:11px var(--mono);color:#668076;margin-bottom:5px; }.winner-score small { grid-column:1/-1;font:7px var(--mono);color:#678177;margin-top:6px; }
.evidence-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:15px;margin-top:15px; }.evidence-panel,.patch-panel { border:1px solid var(--line);border-radius:9px;background:rgba(11,24,20,.72);overflow:hidden; }.panel-title { height:47px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 16px;font-size:11px;font-weight:700; }.panel-title > span:last-child { font:7px var(--mono);color:var(--green-2);border:1px solid rgba(99,238,170,.18);padding:4px 7px;border-radius:999px; }.panel-title button { background:none;border:0;color:var(--green);font:8px var(--mono);cursor:pointer; }
.receipt-row { height:37px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(183,224,209,.07);font:9px var(--mono);color:#728b81; }.receipt-row strong,.receipt-row code { color:#d6e7df;font-weight:400; }.receipt-seal { margin:14px 16px;display:flex;align-items:center;gap:8px;color:var(--green-2);font:8px var(--mono); }.receipt-seal span { width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:rgba(99,238,170,.09); }
.patch-panel pre { margin:0;height:211px;overflow:auto;padding:14px 16px;background:#08110f;color:#b5c9c1;font:9px/1.6 var(--mono);white-space:pre-wrap; }.diff-add { color:var(--green-2); }.diff-remove { color:#ff9389; }.diff-head { color:#7d9bad; }

footer { display:flex;align-items:center;gap:13px;margin-top:34px;padding:19px 2px;border-top:1px solid var(--line);font:8px var(--mono);color:#536c62; }.footer-line { width:25px;height:1px;background:#355046; }
.toast { position:fixed;right:23px;bottom:23px;z-index:40;transform:translateY(20px);opacity:0;border:1px solid var(--line-strong);background:#12231d;color:#dcebe5;border-radius:8px;padding:11px 15px;font:9px var(--mono);transition:.25s; }.toast.show { opacity:1;transform:none; }

@keyframes pulse { 50% { opacity:.35; } }
@keyframes fillLine { from { transform:scaleX(0); } }
@keyframes grow { from { transform:scaleX(0); } }
@keyframes shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

@media(max-width:1240px){.main{padding-left:36px;padding-right:36px}.lede{width:620px}.constraint-list{gap:12px}.forge-button{min-width:240px}.system-badges{padding-right:15px}}
@media(max-width:800px){body{min-width:0}.app-shell{grid-template:58px 1fr/1fr}.topbar{grid-template-columns:1fr auto;height:58px}.brand{border-right:0;height:58px}.topbar-center,.sidebar{display:none}.system-badges{height:58px}.main{padding:32px 18px}.hero-row{align-items:flex-start}.hero-stat{display:none}.lede{width:auto}.issue-footer{align-items:flex-start;flex-direction:column;gap:16px}.constraint-list{flex-wrap:wrap}.forge-button{margin-left:0;width:100%}.branch-grid{grid-template-columns:1fr}.branch-lines{display:none}.stage{min-width:0}.stage small{display:none}.stage-track{padding:0 12px}.stage-track>i{margin:0 6px}.evidence-grid{grid-template-columns:1fr}.winner-banner{grid-template-columns:auto 1fr}.winner-score{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:15px 0 0}.topbar{position:relative}.main h1{font-size:42px}}