/* styles.css (ui styles, includes inline-radio alignment) */
:root{
  --bg:#0f172a; --panel:#111827; --accent:#22c55e; --muted:#94a3b8; --text:#e5e7eb; --danger:#ef4444; --line:#1f2937;
}
*{box-sizing:border-box}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text)}
header{padding:20px; border-bottom:1px solid var(--line)}
.wrap{display:grid; grid-template-columns: 380px 1fr; gap:16px; padding:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px}
.card .body{padding:16px}

.row{display:grid; grid-template-columns: 1fr 1fr; gap:8px}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:8px}
.grid-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px}
.grid-4{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px}

label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
input, select{width:100%; padding:10px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:var(--text)}
.btn{display:inline-flex; gap:8px; padding:10px 14px; border-radius:10px; background:#0b1220; border:1px solid #334155; color:#e5e7eb; cursor:pointer}
.btn.ghost{background:transparent}
.btn.primary{background: linear-gradient(180deg,#10b981,#059669); border-color: #16a34a}
.btn:disabled{opacity:.6; cursor:not-allowed}

.list{display:flex; flex-direction:column; gap:8px}
.item{background:#0b1220; border:1px solid #334155; border-radius:10px; padding:10px}

.summary{background:#0b1220; border:1px solid #334155; border-radius:10px; padding:10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px}
.log{background:#0b1220; border:1px solid #334155; border-radius:10px; padding:10px; max-height:180px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px}
.pill{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid #334155; background:#0b1220; font-size:12px}
.error{color:var(--danger)}

.hidden{display:none}

.inline-radio{ display:flex; align-items:center; gap:8px; margin:2px 0; }
.inline-radio input[type="radio"]{ margin:0; }

#modelSchema, #layerSummary{white-space:pre-wrap}
#trainLog{white-space:pre-wrap}

@media(max-width:1100px){ .wrap{grid-template-columns: 1fr} .row{grid-template-columns:1fr} .grid-3,.grid-4{grid-template-columns:1fr 1fr} }


.toolbar-group{ display:inline-flex; align-items:center; gap:8px; margin-left:12px; flex-wrap:wrap; }