/* GENERATED by tools/port_station_tower.py from Mana's station-mgmt.mjs CSS (md5 7ecee8b35ac4ae84097ab9456121c9fb), scoped to .st-scope. */
.st-scope { overflow-y: auto; overflow-x: hidden; }
.st-scope .st-wrap { padding: 22px 34px 40px 26px; }
.st-scope .st-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 2px 16px; }
.st-scope .st-title { font: 500 11px/1 var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
.st-scope .st-bar .st-spacer { flex: 1; }
.st-scope .st-chip { display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--eden-glass-control-fill); border: 1px solid var(--glass-border); -webkit-backdrop-filter: var(--eden-glass-control-filter); backdrop-filter: var(--eden-glass-control-filter); font-size: 12px; color: var(--text-dim); }
.st-scope .st-chip b { color: var(--gold, #C9A84C); }
.st-scope .st-opt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(149,255,168,.4); background: rgba(149,255,168,.10); color: #CFFFDA; font: 600 12px/1 var(--sans); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 22px rgba(120,240,150,.14); }
.st-scope .st-opt .g { font-size: 14px; }
.st-scope .st-body { display: flex; align-items: flex-start; gap: 16px; }
.st-scope .st-nav { flex: 0 0 210px; width: 210px; position: sticky; top: 64px; background: var(--eden-glass-control-fill); -webkit-backdrop-filter: var(--eden-glass-control-filter); backdrop-filter: var(--eden-glass-control-filter); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 8px; }
.st-scope .st-navgroup { margin-bottom: 10px; }
.st-scope .st-navtitle { font: 600 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); padding: 4px 8px 8px; opacity: .85; }
.st-scope .st-navitem { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font: 500 12.5px/1.2 var(--sans); cursor: pointer; transition: background .12s ease, color .12s ease; }
.st-scope .st-navitem:hover { background: rgba(242,232,210,.06); color: var(--text); }
.st-scope .st-navitem.active { background: rgba(242,232,210,.10); color: var(--text); }
.st-scope .st-navitem .ni-ico { width: 15px; height: 15px; opacity: .75; flex: 0 0 auto; }
.st-scope .st-navitem .ni-tag { margin-left: auto; font: 600 9px/1 var(--mono); padding: 3px 6px; border-radius: 5px; background: rgba(224,164,88,.14); color: var(--warn, #E0A458); }
.st-scope .st-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.st-scope .st-shelf { background: var(--eden-glass-fill); -webkit-backdrop-filter: var(--eden-glass-filter); backdrop-filter: var(--eden-glass-filter); border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px 18px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); scroll-margin-top: 64px; }
.st-scope .st-shead { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 14px; }
.st-scope .st-stitle { font: 600 13px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0; }
.st-scope .st-scount { font: 500 11px/1 var(--mono); color: var(--text-dim); padding: 2px 7px; border: 1px solid var(--glass-border); border-radius: 999px; }
.st-scope .st-sact { margin-left: auto; font: 600 10.5px/1 var(--mono); letter-spacing: .5px; color: var(--accent-dim); cursor: pointer; text-transform: uppercase; }
.st-scope .st-brand { display: inline-block; vertical-align: middle; }
.st-scope .st-tabular { font-variant-numeric: tabular-nums; }
.st-scope .st-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.st-scope .st-tile { position: relative; padding: 15px 15px 14px; border: 1px solid var(--hair); border-radius: 13px; background: rgba(255,255,255,.02); }
.st-scope .st-tk { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.st-scope .st-tk .st-brand { margin-left: auto; }
.st-scope .st-tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green, #95FFA8); box-shadow: 0 0 8px var(--green, #95FFA8); }
.st-scope .st-tdot.warn { background: var(--warn, #E0A458); box-shadow: 0 0 8px var(--warn, #E0A458); }
.st-scope .st-tbig { margin-top: 10px; font: 700 24px/1 var(--sans); }
.st-scope .st-tbig span { font: 500 12px/1 var(--mono); color: var(--dim); }
.st-scope .st-tsub { margin-top: 5px; font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.st-scope .st-bar2 { margin-top: 11px; height: 7px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.st-scope .st-bar2 > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green, #95FFA8), #6fe6c8); }
.st-scope .st-bar2 > i.warn { background: linear-gradient(90deg, var(--warn, #E0A458), #f0c27b); }
.st-scope .st-bar2 > i.cool { background: linear-gradient(90deg, #8FD3FF, #b6e5ff); }
.st-scope .st-tnote { margin-top: 10px; font-size: 11px; color: var(--warn, #E0A458); display: flex; gap: 6px; line-height: 1.45; }
.st-scope .st-tnote.ok { color: var(--green, #95FFA8); opacity: .82; }
.st-scope .st-rows { display: flex; flex-direction: column; gap: 8px; }
.st-scope .st-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--hair); border-radius: 12px; background: rgba(255,255,255,.02); }
.st-scope .st-rlogo { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid var(--hair); }
.st-scope .st-rname { font-size: 13.5px; font-weight: 600; color: var(--text); }
.st-scope .st-rmeta { margin-top: 3px; font: 500 11.5px/1.3 var(--mono); color: var(--dim); }
.st-scope .st-rstat { font-size: 12px; color: var(--dim); white-space: nowrap; }
.st-scope .st-rstat.ok { color: var(--green, #95FFA8); }
.st-scope .st-rstat.warn { color: var(--warn, #E0A458); }
.st-scope .st-tiny { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--glass-btn); color: var(--text); font: 600 11.5px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.st-scope .st-tiny.muted { color: var(--faint); border-style: dashed; }
.st-scope .st-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st-scope .st-gcard { border: 1px solid var(--hair); border-radius: 14px; background: rgba(255,255,255,.02); overflow: hidden; display: flex; flex-direction: column; }
.st-scope .st-ghero { height: 104px; position: relative; background-size: cover; background-position: center 32%; }
.st-scope .st-ghero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,13,.1), rgba(6,9,13,.82)); }
.st-scope .st-gbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.st-scope .st-gtitle { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.st-scope .st-gtitle .pill { font: 600 9.5px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--glass-btn); border: 1px solid var(--hair); color: var(--dim); }
.st-scope .st-spec { display: flex; flex-direction: column; gap: 5px; }
.st-scope .st-srow { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.st-scope .st-srow .k { color: var(--faint); }
.st-scope .st-srow .v { color: var(--text); font-family: var(--mono); font-size: 11px; text-align: right; }
.st-scope .st-srow .v.ok { color: var(--green, #95FFA8); }
.st-scope .st-gnote { font-size: 11px; color: var(--warn, #E0A458); line-height: 1.45; display: flex; gap: 6px; }
.st-scope .st-gact { margin-top: auto; }
.st-scope .st-gact .st-tiny { width: 100%; text-align: center; border-color: rgba(149,255,168,.3); color: #CFFFDA; background: rgba(149,255,168,.07); }
.st-scope .st-optbar { padding: 15px 18px; border: 1px dashed var(--border); border-radius: 14px; background: rgba(255,255,255,.014); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-scope .st-optbar .lead { font-size: 12.5px; color: var(--dim); flex: 1; min-width: 220px; line-height: 1.5; }
.st-scope .st-optbar .lead b { color: var(--text); }
/* ---- Overview LANDING HERO: vitals -> particle tower -> external devices ---- */
.st-scope .st-hero .st-vitals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 4px; }
.st-scope .st-vital { border: 1px solid var(--hair); border-radius: 14px; padding: 15px 16px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); position: relative; overflow: hidden; }
.st-scope .st-vital::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #95FFA8; box-shadow: 0 0 12px #95FFA8; opacity: .85; }
.st-scope .st-vital.amber::after { background: #E0A458; box-shadow: 0 0 12px #E0A458; }
.st-scope .st-vtop { display: flex; align-items: center; gap: 9px; }
.st-scope .st-vico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid var(--hair); }
.st-scope .st-vlab { font: 600 10px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.st-scope .st-vname { font-size: 13px; font-weight: 600; margin-top: 1px; color: var(--text); }
.st-scope .st-vbig { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 2px; }
.st-scope .st-vbig .n { font-size: 34px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.st-scope .st-vbig .u { font: 500 13px/1 var(--mono); color: var(--dim); }
.st-scope .st-vbig .pill { margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #95FFA8; padding: 5px 9px; border-radius: 999px; background: rgba(149,255,168,.1); border: 1px solid rgba(149,255,168,.25); }
.st-scope .st-vbig .pill.amber { color: #E0A458; background: rgba(224,164,88,.1); border-color: rgba(224,164,88,.28); }
.st-scope .st-vsub { display: flex; gap: 16px; margin-top: 8px; }
.st-scope .st-vsub div { font: 500 11.5px/1.3 var(--mono); color: var(--dim); }
.st-scope .st-vsub b { color: var(--text); font-weight: 600; }
.st-scope .st-vbar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.06); margin-top: 11px; overflow: hidden; }
.st-scope .st-vbar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #95FFA8, #6fe6c8); }
.st-scope .st-vbar > i.mana { background: linear-gradient(90deg, #5084EC, #8FD3FF); }
.st-scope .st-vbar > i.cool { background: linear-gradient(90deg, #8FD3FF, #b6e5ff); }
.st-scope .st-stage-head { display: flex; align-items: center; gap: 10px; margin: 20px 4px 6px; }
.st-scope .st-stage-head .t { font: 600 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink, #F2E8D2); }
.st-scope .st-stage-head .s { font: 500 11px/1 var(--mono); color: var(--faint); margin-left: auto; }
.st-scope .st-stage { position: relative; border-radius: 16px; overflow: visible; max-width: 1380px; margin: 8px auto 6px; background: radial-gradient(900px 620px at 50% 46%, rgba(80,132,236,0.06), transparent 72%); }
.st-scope #st-tower { width: 100%; height: auto; display: block; border-radius: 14px; cursor: grab; touch-action: none; }
/* wave 3: the tower is Sora's orb (engine). Its box sits over the hidden canvas; the panel's dark glass moves to a ::before
   with a soft see-through window over the stage, since the engine draws UNDER the page */
.st-scope #st-sec-overview.st-orb-on { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: relative; isolation: isolate; }
.st-scope #st-sec-overview.st-orb-on::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--eden-glass-fill); -webkit-backdrop-filter: var(--eden-glass-filter); backdrop-filter: var(--eden-glass-filter);
  -webkit-mask-image: radial-gradient(var(--orb-w,300px) var(--orb-h,200px) at var(--orb-x,50%) var(--orb-y,60%), transparent 72%, #000 100%);
  mask-image: radial-gradient(var(--orb-w,300px) var(--orb-h,200px) at var(--orb-x,50%) var(--orb-y,60%), transparent 72%, #000 100%); }
.st-scope .st-orb-label { opacity: 0; transform: translate(-50%,-50%); transition: opacity .5s ease; pointer-events: none; }
.st-scope .st-orb-label.on { opacity: 1; }
.st-scope .st-partpill.st-t3d-label { padding: 5px 11px; gap: 7px; z-index: 4; pointer-events: auto; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.st-scope .st-partpill.st-t3d-label:hover { transform: translate(-50%,-50%) scale(1.06); box-shadow: 0 8px 30px rgba(80,140,255,.45), inset 0 1px 0 rgba(255,255,255,0.12); }
.st-scope .st-t3d-label .pn { font-size: 10px; letter-spacing: .14em; }
.st-scope .st-t3d-label .ps { font-size: 9px; }
.st-scope .st-t3d-readout { position: absolute; right: 12px; top: 10px; z-index: 3; font: 600 11px/1 var(--mono); letter-spacing: .08em; color: rgba(190,222,255,.72); background: var(--eden-glass-control-fill); -webkit-backdrop-filter: var(--eden-glass-control-filter); backdrop-filter: var(--eden-glass-control-filter); border: 1px solid var(--glass-border); border-radius: 999px; padding: 6px 12px; pointer-events: none; }
.st-scope .st-t3d-hint { position: absolute; left: 12px; bottom: 10px; z-index: 3; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(190,222,255,.5); pointer-events: none; }
.st-scope .st-partpill { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--eden-glass-control-fill); -webkit-backdrop-filter: var(--eden-glass-control-filter); backdrop-filter: var(--eden-glass-control-filter); border: 1px solid var(--glass-border); box-shadow: 0 8px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,0.07); white-space: nowrap; pointer-events: none; z-index: 3; }
.st-scope .st-partpill .pdot { width: 7px; height: 7px; border-radius: 50%; background: #95FFA8; box-shadow: 0 0 8px #95FFA8; flex: none; }
.st-scope .st-partpill .pn { font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink, #F2E8D2); }
.st-scope .st-partpill .ps { font: 500 10.5px/1 var(--mono); color: var(--dim); letter-spacing: .04em; }
.st-scope .st-partpill.amber .pdot { background: #E0A458; box-shadow: 0 0 8px #E0A458; }
.st-scope .st-partpill.amber .pn { color: #EBC079; }
.st-scope .st-legend { display: flex; gap: 16px; justify-content: center; margin: 8px 0 2px; font: 500 11px/1 var(--mono); color: var(--faint); }
.st-scope .st-legend span { display: flex; align-items: center; gap: 6px; }
.st-scope .st-legend i { width: 8px; height: 8px; border-radius: 50%; }
.st-scope .st-legend .g { background: #95FFA8; box-shadow: 0 0 7px #95FFA8; }
.st-scope .st-legend .a { background: #E0A458; box-shadow: 0 0 7px #E0A458; }
.st-scope .st-legend .e { background: transparent; border: 1px solid rgba(230,237,243,.28); }
.st-scope .st-exhead { font: 600 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin: 20px 4px 10px; }
.st-scope .st-devices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-scope .st-dev { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; background: var(--eden-glass-fill); -webkit-backdrop-filter: var(--eden-glass-filter); backdrop-filter: var(--eden-glass-filter); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.st-scope .st-dev .dico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid var(--hair); color: var(--ink, #F2E8D2); flex: none; }
.st-scope .st-dev .dtx { min-width: 0; }
.st-scope .st-dev .dn { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.st-scope .st-dev .dm { font: 500 11px/1.3 var(--mono); color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-scope .st-dev .dd { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #95FFA8; box-shadow: 0 0 8px #95FFA8; flex: none; }