/* Prediction Challenge — styles. Self-contained. */
* { box-sizing: border-box; }
:root { --ink:#202124; --muted:#5f6368; --line:#e0e0e0; --bg:#f7f8fa; --panel:#fff; --accent:#e8710a; --test:#1a73e8; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.lm { display:flex; flex-direction:column; gap:16px; padding:20px; max-width:1180px; margin:0 auto; }
.lm section { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.lm h2 { margin:0 0 12px; font-size:16px; }
.explain-lead { font-size:14px; line-height:1.6; color:var(--ink); margin:0; max-width:900px; }
.explain-src { font-size:12.5px; color:var(--muted); margin:8px 0 0; max-width:900px; }

/* Toolbar */
.toolbar { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.tb-run { display:flex; gap:8px; }
.tb-field { display:flex; flex-direction:column; gap:3px; }
.tb-field label { font-size:11px; color:var(--muted); }
.tb-big { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.tb-field select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; min-width:96px; }
.primary-btn { padding:10px 18px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.primary-btn:hover { background:#c85f08; }
.ghost-btn { padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); cursor:pointer; font-size:14px; }
.ghost-btn:hover { background:#eef1f6; }

/* Workspace */
.workspace { display:flex; gap:18px; align-items:stretch; flex-wrap:wrap; }
.ws-col { flex:1 1 260px; min-width:240px; }
.ws-col h3 { margin:0 0 4px; font-size:13px; letter-spacing:.5px; color:var(--muted); }
.col-note { font-size:12px; color:var(--muted); margin:0 0 12px; line-height:1.5; }
.features-col { flex:0 0 240px; }
.tc-output { width:100%; padding:8px 10px; border:1px solid var(--accent); border-radius:8px; font-size:14px;
  font-weight:700; background:#fff5ec; color:var(--ink); }
.network-col { flex:1 1 470px; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 18px; }
.output-col { flex:1 1 360px; }

/* Feature tiles (the X side) */
.feat-list { display:flex; flex-direction:column; gap:8px; }
.pc-feat { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line);
  border-radius:9px; cursor:pointer; background:#fff; transition:all .12s; }
.pc-feat:hover { border-color:#bcd; background:#f6f9ff; }
.pc-feat.on { border-color:var(--accent); background:#fff5ec; box-shadow:inset 0 0 0 1px var(--accent); }
.pc-feat-check { width:20px; height:20px; border-radius:5px; border:1.5px solid var(--line); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }
.pc-feat.on .pc-feat-check { background:var(--accent); border-color:var(--accent); }
.pc-feat-name { font-size:13.5px; font-weight:600; }
.pc-feat-unit { font-size:11px; color:var(--muted); }

/* Architecture controls */
.net-head { display:flex; justify-content:center; margin-bottom:8px; }
.layer-ctrl { display:flex; align-items:center; gap:8px; }
.round-btn { width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff;
  font-size:17px; line-height:1; cursor:pointer; color:var(--ink); }
.round-btn:hover { background:#eef1f6; }
.layer-count { font-size:13px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); }
.arch-row { display:flex; justify-content:space-around; gap:10px; margin-bottom:6px; }
.pc-arch-layer { text-align:center; }
.pc-arch-lab { font-size:11px; color:var(--muted); margin-bottom:3px; }
.pc-stepper { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; padding:2px 4px; }
.pc-step { width:22px; height:22px; border:none; background:#f1f3f7; border-radius:5px; cursor:pointer; font-size:14px; line-height:1; }
.pc-step:hover { background:#e2e6ee; }
.pc-step-val { font-size:12px; font-weight:700; min-width:24px; text-align:center; font-variant-numeric:tabular-nums; }

/* Network diagram (TF Playground style) */
#pc-net svg { width:100%; height:auto; display:block; overflow:visible; }
.pc-innode, .pc-hidnode, .pc-outnode { stroke:#ffffff; stroke-width:1.2; }
.pc-innode-lab { font-size:11.5px; fill:var(--ink); font-weight:600; }
.pc-col-cap { font-size:10px; fill:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.pc-link { transition:stroke-width .15s, stroke .15s; }
.net-note { margin-top:10px; }
.k-pos { color:var(--test); }
.k-neg { color:var(--accent); }

/* Output */
.stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.stat { flex:1 1 60px; }
.cap { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.val { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.plot-note { font-size:12px; color:var(--muted); margin:0 0 8px; }
#pc-plot svg { border:1px solid var(--line); border-radius:8px; background:#fbfaff; width:100%; max-width:360px; height:auto; display:block; }
.pc-axis { stroke:#cbd0d8; stroke-width:1.5; }
.pc-axlab { font-size:11px; fill:var(--muted); }
.pc-diag { stroke:#9aa0a6; stroke-width:1.5; stroke-dasharray:4 4; }
.pc-train-pt { fill:#e8710a; opacity:.30; }
.pc-test-pt { fill:#1a73e8; opacity:.85; }

/* Score card */
.score-card { margin:12px 0; padding:12px 14px; border:1px solid #f4cfa6; border-radius:10px;
  background:linear-gradient(180deg,#fff7ef,#fff); }
.score-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.score-label { font-size:13px; font-weight:700; color:var(--ink); }
.score-lower { font-size:11px; font-weight:500; color:var(--muted); margin-left:4px; }
.score-num { font-size:30px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1; }
.score-eq { font-size:12px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; }
.score-eq b { color:var(--ink); }
.score-bars { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.score-bar { display:flex; align-items:center; gap:8px; }
.sb-lab { font-size:10px; color:var(--muted); width:74px; flex:0 0 auto; text-transform:uppercase; letter-spacing:.3px; }
.sb-track { flex:1; height:8px; background:#eef1f5; border-radius:5px; overflow:hidden; }
.sb-fill { height:100%; width:0; border-radius:5px; transition:width .18s; }
.sb-err { background:var(--test); }
.sb-size { background:var(--accent); }
.status-line { font-size:12px; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:6px;
  padding:6px 9px; margin:6px 0 10px; min-height:0; }
.status-line:empty { display:none; }
.submit-row { border-top:1px solid var(--line); padding-top:12px; margin-bottom:12px; }
.submit-btn { width:100%; padding:10px; border:none; border-radius:8px; background:#0b8043; color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.submit-btn:disabled { background:#c2ccd6; cursor:default; }
.submit-hint { font-size:12px; color:var(--muted); margin-top:6px; }
.submit-status { font-size:13px; color:#0b8043; margin-top:6px; font-weight:600; }

.chart-caption { font-size:12px; color:var(--muted); margin:8px 0 4px; }
#pc-chart { width:100%; height:80px; border:1px solid var(--line); border-radius:8px; }
#pc-chart .line { fill:none; stroke-width:1.5px; }
#pc-chart .axis line, #pc-chart .axis path { display:none; }
.k-train { color:var(--accent); font-weight:700; }
.k-test { color:var(--test); font-weight:700; }
.k-diag { color:#9aa0a6; font-weight:700; }

/* Tips */
.try-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.try-card { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; }
.try-card h3 { margin:0 0 6px; font-size:14px; color:var(--accent); }
.try-card p { margin:0; font-size:13px; line-height:1.5; color:var(--ink); }