:root{
  --bg:#f7f0f2;--text:#1a1a2e;--muted:#6b7280;--brand:#f8485e;--brand-dark:#c2253a;
  --brand-soft:#fee8eb;--brand-soft-2:#fdcdd3;--focus:#f8485e;--panel:#fff;--panel-soft:#fef7f8;--panel-border:#f0e0e3;
  --success:#16a34a;--warn:#d97706;--error:#dc2626;--ink:#161827;
  --font:"Outfit",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg)}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:linear-gradient(180deg,#fff,var(--panel-soft));border-bottom:1px solid var(--panel-border)}
.brand{display:flex;align-items:center;gap:11px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;display:grid;place-items:center;font-weight:700}
.brand b{font-size:15px}.brand small{display:block;color:var(--muted);font-size:11px}
.wrap{max-width:1100px;margin:0 auto;padding:24px 28px}
h1{font-size:22px;letter-spacing:-.4px;margin:0 0 18px}
.page-header{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.page-header h1{margin:0}
.ph-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.input{font:inherit;padding:8px 10px;border:1px solid var(--panel-border);border-radius:8px;background:#fff;min-width:120px}
.input:focus{outline:2px solid var(--focus);outline-offset:1px}
.setting-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--panel-soft)}
.setting-row:last-child{border-bottom:none}
.setting-label{flex:1}
.badge.ok{background:var(--brand-soft);color:var(--brand-dark)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{border-color:var(--panel-border);color:var(--text)}
.btn{font-family:inherit;font-weight:600;font-size:14px;border-radius:9px;padding:9px 15px;border:1px solid var(--panel-border);background:#fff;color:var(--text);cursor:pointer}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border:none}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.danger{color:var(--error);border-color:#fee2e2}
.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}
.evlist{list-style:none;padding:0;margin:0}
.evlist li{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border-top:1px solid var(--panel-border)}
.evlist a{font-weight:600;color:var(--text);text-decoration:none}
.badge{font-family:var(--mono);font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 20px}
.stat{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:13px}
.stat .k{font-size:12px;color:var(--muted);font-weight:600}.stat .v{font-size:26px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.inst{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.inst.st-failed{border-color:#fee2e2}.inst.st-provisioning{border-style:dashed}
.inst .h{display:flex;align-items:center;justify-content:space-between}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.active,.dot.ready{background:var(--success)}.dot.provisioning{background:var(--warn)}
.dot.failed{background:var(--error)}.dot.destroyed{background:var(--muted)}
.bar{height:7px;border-radius:999px;background:var(--panel-soft);overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark))}
.acts{display:flex;gap:6px;border-top:1px solid var(--panel-border);padding-top:10px}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--success);font-weight:700;font-size:12px}
.live .dot{animation:p 1.6s infinite}@keyframes p{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
dialog{border:none;border-radius:14px;padding:0;box-shadow:0 12px 40px rgba(26,26,46,.2)}
dialog .b{padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-width:360px}
dialog h3{margin:0}label{font-size:13px;font-weight:600;display:block;margin-bottom:6px}
input,select{width:100%;font-family:inherit;padding:9px 11px;border:1px solid var(--panel-border);border-radius:8px}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--panel-border);background:var(--panel-soft)}

/* ---------- Cockpit parity (ported from the original mockup) ---------- */
.crumbs{color:var(--muted);font-size:13px;margin:0 0 4px}
.crumbs a{color:var(--brand-dark);text-decoration:none}
.hdr-actions{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;font-family:var(--mono)}
.badge.cart{background:var(--brand-soft);color:var(--brand-dark)}
.lab{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.big{font-size:20px}
.dot.prov{background:var(--warn)}.dot.stale{background:var(--muted)}.dot.fail{background:var(--error)}.dot.active{background:var(--success)}.dot.ready{background:#2563eb}
.dot.live{background:var(--success);animation:pulse 1.7s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
/* event header split */
.evhead{display:grid;grid-template-columns:1.4fr 1fr;gap:0;overflow:hidden;padding:0}
.evhead .L{padding:20px 22px}
.evhead .L h2{margin:8px 0 6px;font-size:21px;letter-spacing:-.4px}
.evhead .R{background:linear-gradient(160deg,#161827,#1a1a2e);color:#b8c1d9;padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.evhead .R .lab{color:#7e89a6}
.metarow{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:10px}
.metarow b{color:var(--text);font-weight:600}
.joinbox{background:rgba(255,255,255,.06);border:1px solid #272c44;border-radius:10px;padding:9px 10px;display:flex;align-items:center;gap:10px}
.joinbox code{font-family:var(--mono);font-size:12px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.joinbox button{background:var(--brand);border:none;color:#fff;border-radius:7px;padding:6px 10px;font-weight:600;cursor:pointer;font-family:inherit;font-size:12px}
.qr{width:88px;height:88px;border-radius:10px;background:#fff;border:5px solid #fff;flex-shrink:0}
.gauge{display:flex;align-items:center;gap:14px}
.ring{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p,0)*1%),rgba(255,255,255,.14) 0);display:grid;place-items:center;flex-shrink:0}
.ring i{width:50px;height:50px;border-radius:50%;background:#161827;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;color:#fff;font-family:var(--mono)}
.timer{font-family:var(--mono);font-size:20px;color:#fff}
/* grid header + filters */
.gridhead{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px;gap:14px;flex-wrap:wrap}
.gridhead h2{font-size:15px;margin:0;font-weight:700}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--panel-border);background:#fff;color:var(--muted);cursor:pointer}
.chip.on{background:#161827;color:#fff;border-color:#161827}
/* instance cards */
.inst.is-stale{border-color:#e7e2cf}
.inst.st-failed{border-color:#fee2e2;background:linear-gradient(180deg,#fff,#fffafa)}
.ihead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gid{display:flex;align-items:center;gap:9px}
.gid .av{width:30px;height:30px;border-radius:9px;background:var(--panel-muted,#faf4f6);color:var(--brand-dark);display:grid;place-items:center;font-weight:700;font-size:12px;font-family:var(--mono)}
.gid b{font-size:14px}.gid small{display:block;color:var(--muted);font-size:11px}
.st{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.st.active{color:var(--success)}.st.ready{color:#2563eb}.st.prov{color:var(--warn)}.st.stale{color:var(--muted)}.st.fail{color:var(--error)}
.meter{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:5px}
.qline{font-size:12.5px;color:#4b4b63}
.foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--panel-border);padding-top:10px}
.foot .meta{font-size:11.5px;color:var(--muted);display:flex;gap:11px}
.acts{display:flex;gap:6px}
.iact{width:30px;height:30px;border-radius:8px;border:1px solid var(--panel-border);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:14px;color:var(--muted)}
.iact:hover{border-color:var(--brand-soft-2,#fdcdd3);color:var(--brand-dark);background:var(--panel-soft)}
.iact.kill:hover{color:var(--error);border-color:#fee2e2;background:#fee2e2}
@media (max-width:760px){.evhead{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- App nav (sidebar + burger) ---------- */
body{padding-left:248px}
.side{position:fixed;top:0;left:0;bottom:0;width:248px;background:linear-gradient(180deg,#fff,var(--panel-soft));border-right:1px solid var(--panel-border);padding:22px 18px;display:flex;flex-direction:column;gap:24px;z-index:20}
.side .brand small{display:block;color:var(--muted);font-size:11px}
.side .nav{display:flex;flex-direction:column;gap:3px}
.side .nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#4b4b63;font-weight:500;font-size:14.5px}
.side .nav a .ic{width:18px;text-align:center;opacity:.8}
.side .nav a:hover{background:var(--panel-muted,#faf4f6)}
.side .nav a.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.side .spacer{flex:1}
.side .who{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px}
.side .who .av{width:32px;height:32px;border-radius:50%;background:var(--ink,#161827);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.side .who small{display:block;color:var(--muted);font-size:11.5px}
.side .ver{color:var(--muted);font-size:11px;letter-spacing:.02em;padding:2px 8px 0;font-variant-numeric:tabular-nums}
.burger{display:none;position:fixed;top:14px;left:14px;z-index:30;width:40px;height:40px;border-radius:10px;border:1px solid var(--panel-border);background:#fff;font-size:18px;cursor:pointer}
@media (max-width:900px){
  body{padding-left:0}
  .side{transform:translateX(-100%);transition:transform .2s;box-shadow:0 12px 40px rgba(26,26,46,.18)}
  .side.open{transform:translateX(0)}
  .burger{display:block}
  .top{padding-left:64px}
}