@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap");:root{--bg-0:#04060d;--bg-1:#070b16;--panel:rgba(13,22,38,.66);--panel-2:rgba(8,14,28,.72);--border:rgba(34,211,238,.18);--border-strong:rgba(34,211,238,.45);--text:#dbeafe;--muted:#7f9bb5;--cyan:#22d3ee;--cyan-soft:rgba(34,211,238,.55);--amber:#fbbf24;--magenta:#ff3b6b;--green:#34d399;--font-display:"Orbitron","Noto Sans SC",sans-serif;--font-label:"Rajdhani","Noto Sans SC",sans-serif;--font-body:"Noto Sans SC",system-ui,sans-serif;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}*{box-sizing:border-box}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg-0);color:var(--text);font-family:var(--font-body);letter-spacing:.02em;-webkit-font-smoothing:antialiased}.screen-wrap{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% -10%,rgba(34,211,238,.14),transparent 55%),radial-gradient(80% 70% at 100% 110%,rgba(255,59,107,.1),transparent 60%),linear-gradient(180deg,var(--bg-1),var(--bg-0))}.screen-wrap:before{inset:-2px;background-image:linear-gradient(rgba(34,211,238,.06) 1px,transparent 0),linear-gradient(90deg,rgba(34,211,238,.06) 1px,transparent 0);background-size:4vmin 4vmin;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(circle at 50% 45%,#000 55%,transparent 100%);animation:gridDrift 18s linear infinite}.screen-wrap:after,.screen-wrap:before{content:"";position:absolute;pointer-events:none}.screen-wrap:after{inset:0;background:linear-gradient(180deg,transparent 0,rgba(34,211,238,.05) 50%,transparent);height:38%;animation:scan 6s linear infinite;mix-blend-mode:screen}@keyframes gridDrift{to{background-position:4vmin 4vmin,4vmin 4vmin}}@keyframes scan{0%{transform:translateY(-40%)}to{transform:translateY(280%)}}.screen{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;padding:clamp(10px,1.6vmin,22px) clamp(12px,2vmin,24px);gap:clamp(8px,1.3vmin,16px);background-image:var(--grain)}.screen:after{content:"";position:absolute;inset:0;border:1px solid rgba(34,211,238,.12);border-radius:14px;pointer-events:none;box-shadow:inset 0 0 60px rgba(34,211,238,.05)}.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:clamp(6px,.9vmin,12px);border-bottom:1px solid var(--border)}.topbar:after{content:"";position:absolute;left:0;bottom:-1px;width:clamp(140px,20vmin,240px);height:2px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan-soft)}.topbar h1{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(18px,2.8vmin,34px);letter-spacing:clamp(3px,.55vmin,7px);background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(34,211,238,.35)}.topbar .sub{font-family:var(--font-label);font-size:clamp(10px,1.2vmin,15px);letter-spacing:.4vmin;color:var(--muted);margin-left:1.3vmin;text-transform:uppercase}.topbar-right{display:flex;align-items:center;gap:clamp(10px,1.6vmin,20px)}.clock{font-family:var(--font-display);text-align:right;line-height:1.1}.clock-t{display:block;font-size:clamp(14px,2vmin,26px);font-weight:700;color:#e6f1ff;text-shadow:0 0 14px rgba(34,211,238,.4);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.clock-d{font-size:clamp(9px,1.1vmin,14px);letter-spacing:.3vmin;color:var(--muted)}.badge,.clock-d{font-family:var(--font-label)}.badge{font-size:clamp(11px,1.3vmin,16px);font-weight:600;letter-spacing:2px;text-transform:uppercase;border-radius:999px;border:1px solid var(--border-strong);background:rgba(34,211,238,.08);position:relative;padding:clamp(4px,.5vmin,6px) clamp(10px,1.5vmin,18px) clamp(4px,.5vmin,6px) clamp(22px,2.8vmin,32px)}.badge:before{content:"";position:absolute;left:clamp(10px,1.2vmin,14px);top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.badge.open{color:var(--cyan);border-color:var(--border-strong)}.badge.open:before{background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s ease-in-out infinite}.badge.closed{color:var(--magenta);border-color:rgba(255,59,107,.5)}.badge.closed:before{background:var(--magenta);box-shadow:0 0 10px var(--magenta)}.badge.connecting{color:var(--amber);border-color:rgba(251,191,36,.5)}.badge.connecting:before{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.grid{flex:1 1;display:grid;grid-template-columns:1fr 1fr clamp(240px,33vmin,420px);grid-template-rows:auto 1fr clamp(150px,24vmin,300px);grid-template-areas:"kpi kpi rail" "center center rail" "bottom bottom alarm";grid-gap:clamp(8px,1.3vmin,16px);gap:clamp(8px,1.3vmin,16px);min-height:0}.kpi-row{grid-area:kpi;min-height:0}.center{grid-area:center;min-height:0}.rail{grid-area:rail;display:flex;flex-direction:column;gap:clamp(8px,1.3vmin,16px);min-height:0}.rail>.panel{flex:1 1;min-height:0;height:auto}.bottom{grid-area:bottom;display:flex;gap:clamp(8px,1.3vmin,16px);min-height:0}.bottom>.panel{flex:1 1;min-width:0}.alarm-area{grid-area:alarm;min-height:0;display:flex}.alarm-area>.panel{flex:1 1;min-height:0}.alarm-area,.bottom,.center,.kpi-row,.rail,.topbar{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}.kpi-row{animation-delay:.05s}.center{animation-delay:.12s}.rail{animation-delay:.18s}.bottom{animation-delay:.24s}.alarm-area{animation-delay:.3s}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.panel{position:relative;background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:clamp(8px,.9vmin,12px);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:inset 0 0 32px rgba(34,211,238,.05),0 10px 34px rgba(0,0,0,.5);padding:clamp(8px,1.1vmin,14px) clamp(9px,1.3vmin,16px);display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.panel:after,.panel:before{content:"";position:absolute;width:clamp(12px,1.5vmin,18px);height:clamp(12px,1.5vmin,18px);border:2px solid var(--cyan);opacity:.75;pointer-events:none}.panel:before{top:clamp(5px,.65vmin,9px);left:clamp(5px,.65vmin,9px);border-right:0;border-bottom:0}.panel:after{bottom:clamp(5px,.65vmin,9px);right:clamp(5px,.65vmin,9px);border-left:0;border-top:0}.panel-hd{display:flex;align-items:center;gap:clamp(5px,.7vmin,10px);font-family:var(--font-label);font-size:clamp(11px,1.3vmin,16px);font-weight:600;letter-spacing:.28vmin;text-transform:uppercase;color:var(--cyan);margin-bottom:clamp(5px,.7vmin,10px);padding-bottom:clamp(4px,.55vmin,8px);border-bottom:1px solid rgba(34,211,238,.12);text-shadow:0 0 10px rgba(34,211,238,.3)}.panel-hd .idx{margin-left:auto;font-size:clamp(9px,1vmin,13px);letter-spacing:.2vmin;color:var(--muted)}.panel-hd .dot{width:clamp(5px,.65vmin,9px);height:clamp(5px,.65vmin,9px);border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.panel-bd{flex:1 1;min-height:0;min-width:0}.center-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,.9vmin,12px);color:var(--muted);border:1px dashed rgba(34,211,238,.22);border-radius:clamp(8px,.9vmin,12px);background:radial-gradient(circle at 50% 40%,rgba(34,211,238,.08),transparent 60%);font-family:var(--font-label);letter-spacing:.4vmin}.center-placeholder .big{font-family:var(--font-display);font-size:clamp(14px,1.9vmin,24px);color:var(--cyan);letter-spacing:clamp(3px,.55vmin,7px);text-shadow:0 0 18px rgba(34,211,238,.35)}.twin-canvas{height:100%;width:100%;border:1px dashed rgba(34,211,238,.22);border-radius:clamp(8px,.9vmin,12px);overflow:hidden;background:var(--bg-0)}.kpi{display:flex;gap:0;height:100%}.kpi>div{flex:1 1;background:linear-gradient(180deg,rgba(34,211,238,.05),transparent);border:1px solid var(--border);border-radius:clamp(8px,.9vmin,12px);padding:clamp(7px,.9vmin,12px) clamp(14px,2.4vmin,30px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.kpi>div+div{margin-left:clamp(10px,1.3vmin,16px)}.kpi>div:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan-soft)}.kpi-num{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3.7vmin,46px);line-height:1;color:#fff;text-shadow:0 0 16px rgba(34,211,238,.45);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.kpi-label{font-family:var(--font-label);color:var(--muted);font-size:clamp(11px,1.3vmin,16px);letter-spacing:.28vmin;text-transform:uppercase;margin-top:clamp(5px,.7vmin,10px)}.alarm-scroll{list-style:none;margin:0;padding:0;height:100%;overflow-y:auto;overflow-x:hidden}.alarm-scroll>li{flex:0 0 auto}.vspacer{list-style:none}.alarm{display:flex;gap:clamp(6px,.9vmin,12px);align-items:center;height:clamp(28px,3.6vmin,44px);box-sizing:border-box;padding:0 clamp(7px,.9vmin,12px);margin:0;border-radius:clamp(6px,.7vmin,10px);background:hsla(0,0%,100%,.02);border-left:3px solid var(--muted);font-family:var(--font-label);letter-spacing:1px;overflow:hidden}.alarm.crit{border-left-color:var(--magenta);background:rgba(255,59,107,.08);box-shadow:inset 0 0 18px rgba(255,59,107,.08)}.alarm.warn{border-left-color:var(--amber);background:rgba(251,191,36,.07)}.alarm-level{font-weight:700;font-size:clamp(10px,1.2vmin,15px);letter-spacing:.2vmin;text-transform:uppercase;min-width:clamp(34px,3.9vmin,48px)}.alarm.crit .alarm-level{color:var(--magenta)}.alarm.warn .alarm-level{color:var(--amber)}.alarm-msg{color:var(--text);font-size:clamp(11px,1.3vmin,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alarm-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-family:var(--font-label);letter-spacing:.3vmin;font-size:clamp(11px,1.3vmin,15px)}.alarm-scroll::-webkit-scrollbar{width:clamp(4px,.5vmin,8px)}.alarm-scroll::-webkit-scrollbar-thumb{background:rgba(34,211,238,.3);border-radius:3px}