:root{
  --bg:#0d1117; --bg2:#0a0e14;
  --panel:#161c26; --panel2:#1b2330;
  --line:#2a3340; --line2:#394556;
  --ink:#e9eef5; --muted:#8b98a8; --faint:#5d6b7d;
  --copper:#e0934a; --copper-d:#b06f30; --copper-glow:rgba(224,147,74,.16);
  --ok:#62c08a; --ok-bg:rgba(98,192,138,.10); --ok-bd:rgba(98,192,138,.4);
  --bad:#e0615f; --bad-bg:rgba(224,97,95,.10); --bad-bd:rgba(224,97,95,.45);
  --warn:#e0934a; --warn-bg:rgba(224,147,74,.10);
  --r:10px;
  --disp:"Bricolage Grotesque",serif; --body:"Spline Sans",sans-serif; --mono:"Spline Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:44px 44px; background-attachment:fixed;
}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 70% at 50% -8%,rgba(224,147,74,.06),transparent 55%),radial-gradient(140% 120% at 50% 120%,rgba(0,0,0,.55),transparent 60%);}
a{color:var(--copper); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 22px 80px}
.wrap.narrow{max-width:520px}
.wrap.mid{max-width:820px}

/* top bar */
.topbar{position:sticky; top:0; z-index:30; background:linear-gradient(180deg,rgba(13,17,23,.97),rgba(13,17,23,.82));
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); margin-bottom:26px}
.topbar .inner{max-width:1080px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:baseline; gap:10px; font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .spark{font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.28em; color:var(--copper); text-transform:uppercase}
.navlinks{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.navlinks a, .navlinks form button{font-size:13px; color:var(--muted); padding:7px 12px; border-radius:8px; border:1px solid transparent; background:transparent; cursor:pointer; font-family:var(--body)}
.navlinks a:hover, .navlinks form button:hover{color:var(--ink); border-color:var(--line2); text-decoration:none}
.navlinks a.active{color:var(--copper); border-color:var(--copper-d)}
.navlinks .who{font-size:12px; color:var(--faint); font-family:var(--mono)}
.navlinks form{margin:0}

/* headings */
.spark-lg{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.3em; color:var(--copper); text-transform:uppercase}
h1.page{font-family:var(--disp); font-weight:800; font-size:clamp(22px,3.4vw,32px); letter-spacing:-.015em; line-height:1.05; margin:6px 0 4px}
.lede{color:var(--muted); font-size:14px; max-width:70ch; margin:0 0 22px}

/* cards / panels */
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:18px; overflow:hidden}
.card .head{display:flex; align-items:center; gap:13px; padding:15px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--panel2),transparent)}
.card .head h2{font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.01em; margin:0}
.card .head .badge{margin-left:auto}
.card .body{padding:18px 20px}

/* forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
label{font-size:12.5px; color:var(--ink); font-weight:500}
label .hint{color:var(--faint); font-weight:400; font-size:11.5px}
input,select,textarea{font-family:var(--body); font-size:14px; color:var(--ink); background:var(--bg2);
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; width:100%; transition:.15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-glow); background:#0c1119}
textarea{resize:vertical; min-height:72px}
.codefield{font-family:var(--mono); letter-spacing:.04em}

/* buttons */
.btn{font-family:var(--body); font-weight:600; font-size:14px; border-radius:10px; padding:11px 20px; cursor:pointer;
  border:1px solid transparent; transition:.15s; display:inline-block; text-align:center}
.btn:hover{text-decoration:none}
.btn.solid{background:var(--copper); color:#1a1208; border-color:var(--copper)}
.btn.solid:hover{background:#eda155; box-shadow:0 6px 22px -8px var(--copper)}
.btn.ghost{background:transparent; border-color:var(--line2); color:var(--ink)}
.btn.ghost:hover{border-color:var(--copper); color:var(--copper)}
.btn.sm{padding:7px 13px; font-size:12.5px}
.btn.danger{background:transparent; border-color:var(--bad-bd); color:var(--bad)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.full{width:100%}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* alerts */
.alert{padding:11px 14px; border-radius:9px; font-size:13px; margin-bottom:16px}
.alert.err{background:var(--bad-bg); border:1px solid var(--bad-bd); color:var(--ink)}
.alert.ok{background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ink)}
.alert.info{background:var(--copper-glow); border:1px solid var(--copper-d); color:var(--ink)}

/* tables */
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:9px 12px; border-bottom:1px solid var(--line)}
td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel2)}
.codeval{font-family:var(--mono); font-size:12px}

/* pills / badges */
.pill{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em; padding:4px 9px; border-radius:99px; white-space:nowrap; display:inline-block}
.pill.pass,.pill.go{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-bd)}
.pill.fail,.pill.nogo{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd)}
.pill.cond,.pill.warn{background:var(--warn-bg); color:var(--copper); border:1px solid var(--copper-d)}
.pill.neutral{background:var(--bg2); color:var(--muted); border:1px solid var(--line)}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.tile .k{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.tile .v{font-family:var(--disp); font-weight:800; font-size:28px; margin-top:6px; color:var(--ink)}
.tile .v.copper{color:var(--copper)}

/* key-value grid for intake review */
.kvgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.kvgrid > div{background:var(--panel); padding:11px 15px}
.kvgrid .k{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.kvgrid .v{font-size:14px; margin-top:3px; word-break:break-word}
.kvgrid .v.empty{color:var(--faint); font-style:italic}
.subhead{font-family:var(--disp); font-weight:700; font-size:15px; color:var(--copper); margin:22px 0 10px}

.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.empty-state{text-align:center; color:var(--muted); padding:34px 16px; font-size:14px}
.dropwrap{border:1px dashed var(--line2); border-radius:10px; padding:14px; background:var(--bg2)}

@media(max-width:680px){
  .kvgrid{grid-template-columns:1fr}
  .navlinks .who{display:none}
}