:root { --bg:#fbfaf7; --fg:#1d1b18; --muted:#6b665e; --line:#d9d4ca; --box:#fff; --accent:#2f5d50; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#171614; --fg:#ece8e1; --muted:#9a948a; --line:#3a3732; --box:#1f1e1b; --accent:#8cc2b0; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display:flex; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--line); }
h1 { font-size:18px; margin:0; flex:1; }
#status { color:var(--muted); font-size:14px; }
#status.bad { color:#b3261e; }
button { font:inherit; padding:6px 14px; border:1px solid var(--line); background:var(--box); color:var(--fg); border-radius:6px; cursor:pointer; }
main { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(120px,30vh) auto 1fr; gap:6px 20px; padding:16px 20px; height:calc(100vh - 57px); }
label { font-weight:600; font-size:14px; }
#question-label { grid-column:1 / 3; font-size:14px; margin:0; }
#question { grid-column:1 / 3; overflow:auto; font-size:15px; }
label[for=plan] { grid-column:1; grid-row:3; } #plan { grid-column:1; grid-row:4; }
label[for=code] { grid-column:2; grid-row:3; } #code { grid-column:2; grid-row:4; }
textarea { width:100%; height:100%; resize:none; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--box); color:var(--fg); font:inherit; }
textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.code, #question { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:15px; tab-size:4; }
@media (max-width:800px) {
  main { display:flex; flex-direction:column; height:auto; }
  textarea { min-height:220px; }
}
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-size:14px; }
tr.row { cursor:pointer; } tr.row:hover { background:var(--box); }
pre { white-space:pre-wrap; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--box); font:14px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.wrap { padding:16px 20px; max-width:1200px; }
.detail { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:16px; }
.detail .full { grid-column:1 / 3; }
input { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--box); color:var(--fg); }
section { margin-bottom:32px; }
h2 { font-size:16px; margin:8px 0 12px; display:flex; align-items:center; gap:12px; }
h3 { font-size:14px; margin:0 0 6px; }
.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
#live-status { color:var(--muted); font-size:14px; }
.warn { border-color:#b3261e; color:#b3261e; }
#panel .detail pre { min-height:60px; max-height:50vh; overflow:auto; }