@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;src:url('../assets/space-grotesk-400-C_H9aji2.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;src:url('../assets/space-grotesk-500-KYfcXlvK.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;src:url('../assets/space-grotesk-600-0SbvWzVy.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url('../assets/ibm-plex-mono-400-DMJ8VG8y.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;src:url('../assets/ibm-plex-mono-500-DSY6xOcd.woff2') format('woff2');font-display:swap}

:root{
  --bg:#030712;--cyan:#22d3ee;--violet:#a78bfa;--text:#f5f7ff;--muted:rgba(245,247,255,.62);
  --panel:rgba(8,14,26,.94);--line:rgba(34,211,238,.32);--header-h:56px;--side-w:420px;--red:#f43f5e;--amber:#fbbf24;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
.mono,.clock,#log,.tb{font-family:'IBM Plex Mono',monospace}

#header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:20;display:flex;align-items:center;gap:14px;padding:0 18px;
  background-image:linear-gradient(rgba(3,7,18,.92),rgba(3,7,18,.92)),linear-gradient(90deg,rgba(34,211,238,.15),var(--cyan) 25%,var(--violet) 75%,rgba(167,139,250,.15));
  background-origin:border-box;background-clip:padding-box,border-box;border-bottom:1.5px solid transparent}
#header .logo{height:30px;width:auto;display:block}
#header .vr{width:1px;height:24px;background:rgba(245,247,255,.18)}
#header h1{font-size:18px;font-weight:600;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#header .h1-sub{color:var(--cyan);font-weight:500}
#header .spacer{flex:1}
#header a.domain{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--cyan);text-decoration:none}
#header a.domain:hover{text-decoration:underline}

#layout{position:fixed;inset:var(--header-h) 0 0 0;display:grid;grid-template-columns:minmax(0,1fr) var(--side-w)}
#stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line)}
#toolbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 12px;background:rgba(8,14,26,.9);border-bottom:1px solid rgba(34,211,238,.18)}
#toolbar .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tb{font-size:11px;letter-spacing:.04em;background:rgba(34,211,238,.08);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.tb:hover:not(:disabled){border-color:var(--cyan)}
.tb[aria-pressed="true"]{background:rgba(34,211,238,.24);border-color:rgba(34,211,238,.7);color:#e6fbff}
.tb:disabled{opacity:.4;cursor:default}
.tb.sq{width:30px;padding:6px 0;text-align:center}
.tb.warn{border-color:rgba(244,63,94,.5);background:rgba(244,63,94,.1)}
.tb.warn:hover{border-color:var(--red)}
.clock{font-size:12px;color:var(--cyan);margin-left:6px;min-width:84px}
#mapwrap{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse at 50% 40%,#0a1226,#030712 75%)}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
#legend{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:6px 10px;border-radius:8px;
  background:rgba(3,7,18,.78);border:1px solid rgba(34,211,238,.18);font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);max-width:calc(100% - 20px);pointer-events:none}
#legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
#legend .hint{color:rgba(245,247,255,.45)}
#alert-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:8px;background:rgba(244,63,94,.16);
  border:1px solid rgba(244,63,94,.7);color:#ffe4e9;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  animation:pulse 1.2s ease-in-out infinite;pointer-events:none;white-space:nowrap}
@keyframes pulse{50%{box-shadow:0 0 22px rgba(244,63,94,.55)}}

#side{display:flex;flex-direction:column;min-height:0;background:var(--panel)}
#tabs{display:flex;border-bottom:1px solid rgba(34,211,238,.2)}
#tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:11px 6px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer}
#tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--cyan)}
#panes{flex:1;min-height:0;overflow:auto}
.pane{padding:10px 12px}
.empty{color:var(--muted);font-size:13px;padding:14px 4px}

.row{display:grid;grid-template-columns:14px 1fr auto;gap:2px 8px;padding:8px 8px;border:1px solid transparent;border-radius:8px;cursor:pointer;align-items:center}
.row:hover{background:rgba(34,211,238,.06)}
.row.sel{border-color:rgba(34,211,238,.6);background:rgba(34,211,238,.09)}
.row .dot{width:11px;height:11px;border-radius:50%}
.row .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{grid-column:2/4;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);line-height:1.45;overflow:hidden}
.row .meta b{color:rgba(245,247,255,.85);font-weight:500}
.chip{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}

#inspector h3{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px}
#inspector h3 .dot{width:12px;height:12px;border-radius:50%}
#inspector .role{color:var(--muted);font-size:12.5px;margin:3px 0 10px}
#inspector .btns{display:flex;gap:6px;margin:8px 0 10px}
#inspector dl{display:grid;grid-template-columns:96px 1fr;gap:4px 8px;font-size:12px;margin-bottom:10px}
#inspector dt{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
#inspector h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin:12px 0 6px}
#fsm{width:100%;height:auto;display:block;background:rgba(3,7,18,.6);border:1px solid rgba(34,211,238,.15);border-radius:8px}
#fsm .node rect{fill:rgba(15,23,42,.9);stroke:rgba(245,247,255,.25);stroke-width:1}
#fsm .node text{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:rgba(245,247,255,.75)}
#fsm .node.on rect{stroke-width:2}
#fsm .node.on text{fill:#fff;font-weight:500}
#fsm .edge{stroke:rgba(245,247,255,.28);stroke-width:1;fill:none}
#fsm .elab{font-family:'IBM Plex Mono',monospace;font-size:8px;fill:rgba(245,247,255,.5)}
ul.plain{list-style:none;font-size:12px;line-height:1.5}
ul.plain li{padding:2px 0;color:rgba(245,247,255,.8)}
ul.plain li.cur{color:var(--cyan)}
ul.plain li .mono{font-size:10.5px;color:var(--muted)}

#info .card{border:1px solid rgba(34,211,238,.18);border-radius:10px;padding:10px 12px;margin-bottom:9px;background:rgba(3,7,18,.4)}
#info .card h3{font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center}
#info .card h3 i{width:10px;height:10px;border-radius:50%;display:inline-block}
#info .card p{font-size:12px;line-height:1.5;color:rgba(245,247,255,.82);margin-top:4px}
#info .card p b{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);font-weight:500;margin-right:4px}
#info .intro{font-size:12.5px;line-height:1.55;color:var(--muted);margin:2px 0 10px}

#logbox{height:34%;min-height:150px;border-top:1px solid rgba(34,211,238,.2);display:flex;flex-direction:column}
#logbox h2{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);padding:9px 12px 6px}
#log{list-style:none;overflow:auto;flex:1;padding:0 12px 10px;font-size:11px;line-height:1.45}
#log li{padding:3px 0;border-bottom:1px dashed rgba(245,247,255,.06);color:rgba(245,247,255,.82)}
#log li time{color:var(--muted);margin-right:6px}
#log li.alerta{color:#fecdd3}
#log li.tarea{color:#c4b5fd}

@media (max-width:900px){
  html,body{overflow:auto;height:auto}
  #header{position:sticky;top:0;padding:0 12px;gap:10px}
  #header .logo{height:24px}
  #header h1{font-size:14px}
  #header .h1-sub{display:none}
  #header a.domain{font-size:11px}
  #layout{position:static;display:block}
  #stage{height:68vh;min-height:380px;border-right:0;border-bottom:1px solid var(--line)}
  #toolbar{padding:6px 8px;gap:6px}
  .tb{padding:5px 8px;font-size:10.5px}
  #legend .hint{display:none}
  #legend{font-size:9.5px;gap:4px 8px}
  #side{min-height:60vh}
  #panes{overflow:visible}
  #logbox{height:auto;max-height:360px}
}