:root{
  --bg:#0f1219; --panel:#161b25; --panel2:#1c2230; --line:#28303f;
  --fg:#eef2f8; --mut:#96a2b6; --acc:#7ac8b2; --acc2:#8fb8f0;
  --warn:#e8b866; --high:#e88a7a; --ok:#7ac8b2;
  --radius:10px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#f7f8fa; --panel:#ffffff; --panel2:#f0f2f6; --line:#dde2ea;
  --fg:#141922; --mut:#5b6675; --acc:#1d7f66; --acc2:#2a5fa8;
  --warn:#9a6b12; --high:#a8402f; --ok:#1d7f66;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--acc2)}
h1{font-size:1.5rem; margin:0 0 .3rem}
h2{font-size:1.05rem; margin:0}
h3{font-size:.95rem; margin:0 0 .3rem}

.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem 1.1rem; border-bottom:1px solid var(--line); background:var(--panel);
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:.5rem; min-width:0}
.brand .sep{color:var(--mut)}
.back{color:var(--mut); text-decoration:none; font-size:.9rem}
.back:hover{color:var(--fg)}
.topbar-right{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap}
.credits{color:var(--mut); font-size:.88rem; font-variant-numeric:tabular-nums}

button{font:inherit; cursor:pointer; border-radius:8px; padding:.4rem .75rem; border:1px solid var(--line)}
button:disabled{opacity:.5; cursor:not-allowed}
.ghost{background:transparent; color:var(--mut)}
.ghost:hover:not(:disabled){color:var(--fg); border-color:var(--mut)}
.primary{background:var(--acc); color:#06120e; border-color:transparent; font-weight:600}
:root[data-theme="light"] .primary{color:#fff}
.link{color:var(--mut); font-size:.88rem; text-decoration:none}

main{max-width:56rem; margin:0 auto; padding:1.4rem 1.1rem 3rem}
.ask{margin-bottom:1.1rem}
.help{color:var(--mut); margin:0 0 .7rem}
textarea{
  width:100%; background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--radius); padding:.7rem .8rem; font:inherit; resize:vertical; min-height:6.5rem;
}
textarea:focus{outline:2px solid var(--acc); outline-offset:1px}
.askbar{display:flex; align-items:center; gap:.5rem; margin-top:.6rem; flex-wrap:wrap}
.meter{color:var(--mut); font-size:.85rem}
.gate{color:var(--warn); font-size:.88rem; margin:.5rem 0 0}

.chips{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem}
.chip{
  border:1px solid var(--line); background:var(--panel2); color:var(--mut);
  border-radius:999px; padding:.16rem .6rem; font-size:.8rem; white-space:nowrap;
}
.chip.c-must{border-color:var(--acc); color:var(--acc)}
.chip.c-not{border-color:var(--high); color:var(--high)}
.chip.c-done{border-color:var(--acc2); color:var(--acc2)}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; margin-bottom:1.1rem;
}
.zone-head{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.5rem; flex-wrap:wrap}
.zone-actions{display:flex; gap:.4rem}
.tag{color:var(--mut); font-size:.78rem; border:1px solid var(--line); border-radius:999px; padding:.1rem .55rem}
.reading{margin:.2rem 0 .8rem; color:var(--fg)}
.summary{margin:.2rem 0 .9rem}

.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.step{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2); padding:.6rem .7rem}
.step.dropped{opacity:.45}
.step-top{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.step-n{color:var(--mut); font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:.82rem}
.step-name{font-weight:600}
.step-src{color:var(--mut); font-size:.78rem; font-family:var(--mono)}
.step-why{color:var(--mut); margin:.25rem 0 .35rem; font-size:.9rem}
.step-produces{color:var(--mut); font-size:.82rem}
.step-acts{display:flex; gap:.35rem; margin-top:.45rem; flex-wrap:wrap}
.step-acts button{padding:.2rem .55rem; font-size:.8rem}
.badge{font-size:.72rem; border-radius:999px; padding:.05rem .5rem; border:1px solid var(--line); color:var(--mut)}
.badge.opt{border-color:var(--acc2); color:var(--acc2)}
.badge.bad{border-color:var(--high); color:var(--high)}

.recon{margin:.7rem 0 0; display:flex; flex-direction:column; gap:.3rem}
.recon-item{font-size:.86rem; color:var(--warn); border-left:2px solid var(--warn); padding-left:.55rem}
.recon-item.ok{color:var(--ok); border-color:var(--ok)}
.declined{margin-top:.8rem; color:var(--mut); font-size:.88rem}
.declined summary{cursor:pointer}
.declined ul{margin:.4rem 0 0; padding-left:1.1rem}
.unknown{color:var(--warn); font-size:.88rem; margin:.6rem 0 0}

.res{border-top:1px solid var(--line); padding-top:.8rem; margin-top:.8rem}
.res:first-child{border-top:0; padding-top:0; margin-top:0}
.res-head{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.35rem}
.res-body{white-space:pre-wrap}
.res-body table{border-collapse:collapse; margin:.5rem 0; display:block; overflow-x:auto}
.res-body th,.res-body td{border:1px solid var(--line); padding:.28rem .5rem; text-align:left; font-size:.88rem}
.find{display:flex; gap:.5rem; align-items:baseline; font-size:.88rem; margin-top:.3rem}
.find .sev{font-size:.72rem; border-radius:999px; padding:.05rem .5rem; border:1px solid var(--line)}
.find .sev.warn{color:var(--warn); border-color:var(--warn)}
.find .sev.high{color:var(--high); border-color:var(--high)}
.openq,.caveats{margin-top:.9rem; font-size:.9rem; color:var(--mut)}
.openq ul,.caveats ul{margin:.3rem 0 0; padding-left:1.1rem}
.partial{color:var(--warn); font-size:.88rem}

.progress-head{display:flex; justify-content:space-between; align-items:baseline}
.progress-steps{list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem}
.progress-steps li{font-size:.8rem; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:.1rem .55rem}
.progress-steps li.on{color:var(--acc); border-color:var(--acc)}
.progress-steps li.done{color:var(--ok); border-color:var(--ok); opacity:.7}
.mono{font-family:var(--mono); color:var(--mut); font-size:.85rem}

.panel{
  position:fixed; top:0; right:0; bottom:0; width:min(26rem,92vw); background:var(--panel);
  border-left:1px solid var(--line); padding:1rem; overflow:auto; z-index:20;
}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem}
.panel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem}
.panel li{border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; font-size:.88rem}
.panel li button{margin-top:.35rem}
.muted{color:var(--mut)}

.toast{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding:.5rem .85rem; z-index:30; max-width:90vw;
}
.toast.err{border-color:var(--high); color:var(--high)}
.foot{border-top:1px solid var(--line); padding:1rem 1.1rem 2rem; color:var(--mut); font-size:.85rem}
.foot p{max-width:56rem; margin:.3rem auto}
@media (max-width:560px){ .topbar{gap:.4rem} h1{font-size:1.3rem} }