/* The online title sits in the scene; uplink particles can pass behind it. */
.system-page .system-stage[data-mode=online] .story-shade{background:none}
.system-page .system-stage[data-mode=online] .story-copy{background:transparent;backdrop-filter:none}

/* Three compact service chips share the cable colours and a quiet connection pulse. */
.system-page .connection-chip{box-sizing:border-box;width:auto;min-width:142px;gap:9px;padding:9px 11px 9px 8px;border:1px solid color-mix(in srgb,var(--connection-color) 30%,transparent);border-radius:16px;background:linear-gradient(125deg,#ffffffed,color-mix(in srgb,var(--connection-color) 9%,#fffffff2));box-shadow:0 5px 20px #0f172a0a,inset 0 1px #fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:connection-chip-in .5s cubic-bezier(.22,1.3,.36,1) both}
.system-page .connection-icon{box-sizing:border-box;width:30px;height:30px;flex:none;padding:0;border:0;border-radius:10px;background:color-mix(in srgb,var(--connection-color) 14%,transparent)}
.system-page .connection-icon svg{width:19px;height:19px;stroke-width:1.8}
.system-page .connection-text small{display:none}
.system-page .connection-chip b{font-size:13px;font-weight:500;line-height:1.25;color:#19314a}
.system-page .connection-chip i{display:block;width:5px;height:5px;flex:none;margin:0 0 0 auto;background:var(--connection-color);opacity:.35;animation:none}
.system-page .connection-label.is-connected .connection-chip i{opacity:1;animation:connection-status-pulse 2.8s ease-in-out infinite}
.system-page .connection-leader{stroke-width:.7;stroke-dasharray:2 4;opacity:.35}
#pipe-effects>path{stroke-width:3;filter:drop-shadow(0 1px 1px #0f172a18)}
#pipe-effects>circle{filter:drop-shadow(0 0 4px currentColor)}
@keyframes connection-chip-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes connection-status-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--connection-color) 22%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--connection-color) 5%,transparent)}}

/* A lit LCD: visible emission, restrained pixel texture, and a slow scan reflection. */
.system-page .pos-surface{background:#16b2dc;box-shadow:0 0 12px #7ee9ff85,0 0 34px #38bdf84d,0 0 64px #38bdf821,inset 0 0 0 2px #d8faffb3}
.system-page .pos-surface iframe,.system-page .pos-surface[data-display=standby] iframe{filter:brightness(1.13) saturate(1.06) contrast(1.02)}
.system-page .pos-surface::before{background:linear-gradient(118deg,#ffffff15,transparent 40%,#7ee9ff09);box-shadow:inset 0 0 16px #b9f6ff45,inset 0 0 0 2px #e0fbff7a}
.system-page .pos-surface::after{background:none;box-shadow:none;opacity:0}
.system-page .system-stage:is([data-mode=pos],[data-mode=payment]) .pos-surface::after{background:repeating-linear-gradient(0deg,#06304924 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,#c4faff2b 0 1px,transparent 1px 7px);opacity:.42}
.lcd-scan{position:absolute;z-index:3;left:0;right:0;top:-25%;height:22%;pointer-events:none;background:linear-gradient(180deg,transparent,#d7fcff12 50%,#ffffff20 85%,transparent);opacity:0}
.system-stage:is([data-mode=pos],[data-mode=payment]) .lcd-scan{animation:lcd-scan-pass 6.8s linear infinite}
@keyframes lcd-scan-pass{0%{top:-25%;opacity:0}12%{opacity:.65}85%{opacity:.65}100%{top:110%;opacity:0}}
@media(max-width:599px){
 .system-page .connection-chip{min-width:117px;gap:7px;padding:7px 9px 7px 7px;border-radius:13px}
 .system-page .connection-icon{width:26px;height:26px;border-radius:8px}
 .system-page .connection-icon svg{width:17px;height:17px}
 .system-page .connection-chip b{font-size:11px}
 .system-page .connection-chip i{width:4px;height:4px}
}
@media(prefers-reduced-motion:reduce){
 .system-page .connection-chip,.system-page .connection-label.is-connected .connection-chip i,.system-stage .lcd-scan{animation:none}
 .lcd-scan{display:none}
}