.operations-page{min-height:100vh;color:#102b55;background:radial-gradient(circle at 78% 7%,rgba(39,160,255,.12),transparent 28%),radial-gradient(circle at 8% 54%,rgba(80,193,255,.08),transparent 25%),linear-gradient(145deg,#f8fbff,#eef7ff 48%,#f7fbff)}.operations-header{height:72px;padding:0 clamp(24px,4vw,64px);display:flex;align-items:center;justify-content:space-between;background:#ffffffd6;border-bottom:1px solid rgba(52,119,201,.1);box-shadow:0 8px 30px #275e9b0d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;letter-spacing:.02em;color:#12315e}.brand-logo{width:32px;height:32px;flex:0 0 auto;object-fit:contain;border-radius:8px}.system-status,.mode-status,.online-summary{display:flex;align-items:center}.system-status{gap:8px;color:#57708f;font-size:13px}.status-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#19c878;box-shadow:0 0 0 4px #19c8781a}.status-dot.is-pulse{animation:status-pulse 2.2s ease-in-out infinite}@keyframes status-pulse{0%,to{box-shadow:0 0 0 4px #19c8781a}50%{box-shadow:0 0 0 7px #19c8782e}}.operations-main{width:min(100% - 64px,1480px);margin:0 auto;padding:54px 0 72px}.page-intro{margin-bottom:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}.eyebrow{margin-bottom:10px;color:#247cf0;font-size:11px;font-weight:700;letter-spacing:.18em}.page-intro h1{margin:0;color:#0b2a55;font-size:clamp(30px,3vw,42px);font-weight:750;line-height:1.2;letter-spacing:-.035em}.page-subtitle{margin-top:11px;color:#68809d;font-size:15px}.online-summary{min-width:164px;padding:12px 16px;gap:9px;color:#198359;font-size:13px;border:1px solid rgba(25,200,120,.18);border-radius:12px;background:#edfff7cc;box-shadow:0 10px 30px #188c5d0f;transition:color .22s ease,border-color .22s ease,background .22s ease}.online-summary.is-partial{color:#9a6b14;border-color:#d6a02838;background:#fff8e6e6}.online-summary.is-partial .status-dot{background:#e0a21a;box-shadow:0 0 0 4px #e0a21a1f;animation:none}.online-summary.is-partial strong{color:#8a5c0f}.online-summary.is-offline{color:#7a8ba0;border-color:#7a8ba038;background:#f1f5f9e6}.online-summary.is-offline .status-dot{background:#a9b7c8;box-shadow:none;animation:none}.online-summary.is-offline strong{color:#5f738c}.online-summary strong{margin-left:auto;color:#126e4a;font-size:14px}.mode-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.mode-card{min-height:286px;padding:20px;position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(57,132,220,.14);border-radius:16px;background:#ffffffd6;box-shadow:0 18px 48px #265b9714,inset 0 1px #ffffffe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s ease,box-shadow .28s ease,opacity .28s ease,filter .28s ease}.mode-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#348eff,transparent);transition:opacity .28s ease}.mode-card.is-offline{opacity:.72;filter:saturate(.85)}.mode-card:hover{transform:translateY(-6px);border-color:#2c83f152;box-shadow:0 28px 56px #2363ad24,inset 0 1px #fffffff2}.mode-card.is-offline:hover{opacity:.88;filter:saturate(.95)}.mode-card:hover:before{opacity:1}.card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.mode-number{color:#287ff0;font-size:11px;font-weight:650;letter-spacing:.055em}.mode-status{gap:7px;color:#97a6b9;font-size:12px}.mode-status .status-dot{width:7px;height:7px;background:#a9b7c8;box-shadow:none}.mode-status.is-online{color:#14915e}.mode-status.is-online .status-dot{background:#1ac77a;box-shadow:0 0 0 4px #1ac77a17}.mode-card h2{margin:22px 0 8px;color:#102e5a;font-size:clamp(18px,1.45vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.02em}.mode-description{margin:0 0 18px;padding-bottom:18px;color:#6c84a1;font-size:12px;line-height:1.55;border-bottom:1px solid rgba(57,117,188,.09)}.mode-meta{display:grid;gap:13px}.mode-meta>div{display:grid;grid-template-columns:17px 1fr auto;align-items:center;gap:7px;color:#6c84a1;font-size:12px}.mode-meta svg{color:#3087f5;font-size:15px}.mode-meta strong{color:#264a76;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.dashboard-button{width:100%;height:42px;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-family:inherit;font-size:13px;font-weight:600;border:0;border-radius:9px;cursor:pointer;background:linear-gradient(135deg,#3694ff,#176bef);box-shadow:0 9px 20px #176bef33;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,gap .2s ease}.dashboard-button svg{transition:transform .2s ease}.dashboard-button:not(:disabled):hover{transform:translateY(-1px);gap:12px;filter:brightness(1.04);box-shadow:0 12px 24px #176bef47}.dashboard-button:not(:disabled):hover svg{transform:translate(2px)}.dashboard-button:not(:disabled):active{transform:translateY(0);filter:brightness(.98)}.dashboard-button:disabled{cursor:not-allowed;color:#98a9bc;background:#e7eef6;box-shadow:none;opacity:.85}.state-panel{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#6e84a0;border:1px solid rgba(57,132,220,.12);border-radius:16px;background:#ffffffb8}.load-alert{border-radius:12px}@media (max-width: 1240px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 800px){.operations-main{width:min(100% - 32px,1480px);padding-top:38px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 560px){.operations-header{height:64px;padding:0 16px}.brand{font-size:16px}.system-status{font-size:0}.page-intro{align-items:flex-start;flex-direction:column;gap:20px}.online-summary{width:100%}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:270px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#102b55;background:#f4f9ff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}button,input,select,textarea{font:inherit}
