/* Configure & Publish wizard — design tokens from Dan's approved screens (EON Universal family).
   Law (SPEC A §3): fixed 1920x1080 stage, scaled to fit; every grid child min-width/height 0. */
:root{
  --bg:#010F1E; --side:#0A1626; --card:#061929; --card2:#0A2136; --line:#1E293B; --line2:#28405e;
  --text:#E2E8F0; --mute:#94A3B8; --blue:#2068EE; --cyan:#2AE7FF; --green:#1FC45C; --green-dim:#0e5c2e;
  --amber:#E0A030; --red:#E5484D; --font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);height:100%;overflow:hidden;font-family:var(--font);color:var(--text)}
#stage{position:fixed;width:1920px;height:1080px;left:50%;top:50%;transform-origin:center;background:var(--bg);display:flex}
/* sidebar */
.sidebar{width:252px;height:100%;background:var(--side);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.logo .cube{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#2068EE,#2AE7FF);display:flex;align-items:center;justify-content:center;font-weight:800;color:#03101f;font-size:18px}
.logo .nm{font-size:19px;font-weight:800;letter-spacing:.4px;line-height:1.05}
.logo .nm small{display:block;font-size:10px;font-weight:600;color:var(--mute);letter-spacing:2px}
.navhead{font-size:11px;letter-spacing:2px;color:var(--mute);font-weight:700;margin:14px 8px 8px}
.nav{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:14.5px;padding:9px 10px;border-radius:9px;cursor:default}
.nav.active{background:rgba(32,104,238,.16);color:var(--cyan);font-weight:600;border-left:3px solid var(--cyan)}
.nav .ic{width:18px;text-align:center;opacity:.9}
.side-bottom{margin-top:auto;color:var(--mute);font-size:12.5px;display:flex;flex-direction:column;gap:12px;padding:0 8px}
/* main + rail */
.main{flex:1;height:1080px;overflow:hidden;padding:18px 30px 24px;display:flex;flex-direction:column;min-width:0}
.rail{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#04182b;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:var(--mute);white-space:nowrap}
.pill .dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#12233b;color:var(--mute)}
.pill.done{border-color:rgba(31,196,92,.4);color:var(--text)}
.pill.done .dot{background:var(--green);color:#03210f}
.pill.now{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.now .dot{background:#fff;color:var(--blue)}
.rail .arrow{color:var(--mute);font-size:15px}
.rail .arrow.g{color:var(--green)}
/* step header */
.stephead{display:flex;align-items:flex-start;gap:16px;margin:4px 0 14px}
.stepnum{width:52px;height:52px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;flex-shrink:0}
.steptitle{font-size:34px;font-weight:800;letter-spacing:.5px}
.stepq{color:var(--cyan);font-style:italic;font-size:17px;margin-top:2px}
/* cards + layout */
.row{display:flex;gap:18px;flex:1;min-height:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0;min-height:0}
.card h4{font-size:15px;font-weight:700;letter-spacing:.4px;margin-bottom:12px}
.wtd{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.wtd .item{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text)}
.wtd .item .ic{width:34px;height:34px;border-radius:50%;background:#0c2440;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cyan)}
/* buttons */
.btn{border:none;border-radius:10px;padding:12px 22px;font-size:16px;font-weight:800;cursor:pointer;font-family:var(--font)}
.btn.big{font-size:22px;padding:18px 30px;border-radius:12px;width:100%}
.btn.green{background:var(--green);color:#03210f}
.btn.blue{background:var(--blue);color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.ghostb{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn:disabled{background:#132539;color:var(--mute);cursor:not-allowed}
.gate{display:flex;align-items:center;gap:10px;border:1px solid var(--green);color:var(--green);border-radius:10px;padding:14px 20px;font-weight:800;font-size:17px;background:rgba(31,196,92,.07)}
.footer{display:flex;gap:16px;align-items:stretch;margin-top:14px}
.footer .btn.big{flex:1}
/* chips + lists */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:4px 11px;font-size:12.5px;font-weight:700}
.chip.g{background:rgba(31,196,92,.14);color:var(--green)}
.chip.a{background:rgba(224,160,48,.14);color:var(--amber)}
.chip.grey{background:#132539;color:var(--mute)}
.chip.r{background:rgba(229,72,77,.14);color:var(--red)}
.listrow{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid rgba(30,41,59,.6);font-size:15px}
.listrow:last-child{border-bottom:none}
.ok{width:22px;height:22px;border-radius:50%;background:var(--green);color:#03210f;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0}
.viewport{position:relative;background:#03101d;border:1px solid var(--line);border-radius:14px;overflow:hidden;flex:1;min-width:0}
.viewport .note{position:absolute;top:10px;left:10px;background:rgba(2,10,20,.78);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--mute);z-index:5;max-width:460px}
.viewport iframe{position:absolute;border:0;width:1920px;height:1080px;transform-origin:top left;transform:scale(1.28) translate(-345px,-135px)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0a2a18;border:1px solid var(--green);color:var(--green);padding:11px 20px;border-radius:10px;font-weight:700;z-index:99;opacity:0;transition:opacity .25s}
.toast.show{opacity:1}
.muted{color:var(--mute)} .small{font-size:12.5px} .amber{color:var(--amber)} .cyanT{color:var(--cyan)} .greenT{color:var(--green)}