:root{color-scheme:dark;--bg: #0b1120;--panel: #0f172a;--panel-2: #0c1526;--panel-3: #0b1223;--panel-4: #060b16;--border: #1f2937;--border-soft: rgba(148, 163, 184, .14);--muted: #94a3b8;--text: #e5e7eb;--accent: #0ea5e9;--accent-2: #fbbf24;--ok: #22c55e;--danger: #ef4444;--warn: #f59e0b;--shadow: 0 8px 20px rgba(0, 0, 0, .26);--shadow-strong: 0 12px 26px rgba(0, 0, 0, .32);font-family:Space Grotesk,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(circle at 12% 18%,rgba(14,165,233,.18),transparent 24%),radial-gradient(circle at 84% 6%,rgba(251,191,36,.16),transparent 22%),var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{transition:.18s ease}button:disabled{opacity:.65;cursor:not-allowed}.page{max-width:1280px;margin:0 auto;padding:20px 16px 32px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#0f172ac7;box-shadow:0 4px 16px #00000047;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.brand h1{margin:4px 0 0;font-size:24px}.intro{margin:10px 0 14px}h1{margin:8px 0;font-size:32px}h2,h3,h4{margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:12px;margin:0}.muted{color:var(--muted);margin:6px 0 0}.error{color:#f87171}.success{color:#34d399}.auth-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;align-items:end;background:#0f172ab3;border:1px solid var(--border);padding:8px;border-radius:10px;min-width:280px}.auth-inline label{font-size:13px;color:var(--muted)}.text-input,.text-area,.command-editor textarea,.chart-controls select{width:100%;background:var(--panel-3);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;outline:none}.text-input:focus,.text-area:focus,.command-editor textarea:focus,.chart-controls select:focus{border-color:var(--accent);box-shadow:0 0 0 1px #0ea5e959}.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;border-radius:12px;color:#fff;padding:12px 14px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px #0ea5e933}.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px #0ea5e942}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 14px}.nav-tabs{display:inline-flex;gap:8px;margin:12px 0;background:#0c1526;padding:6px;border:1px solid var(--border);border-radius:12px}.tab{background:transparent;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700}.tab:hover{border-color:#0ea5e973}.tab.active{border-color:var(--accent);box-shadow:0 0 0 1px #0ea5e966;background:#0ea5e914}.hero{margin:18px 0;padding:18px;background:linear-gradient(120deg,#0ea5e91f,#0c1526e6);border:1px solid var(--border);border-radius:14px}.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}.content{display:flex;flex-direction:column;gap:10px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.device-grid{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}.device-card{text-align:left;background:var(--panel-2);border:1px solid var(--border);color:inherit;padding:10px;border-radius:12px;cursor:pointer;box-shadow:inset 0 1px #ffffff05}.device-card:hover{border-color:#0ea5e973;transform:translateY(-1px)}.device-card.active{border-color:var(--accent);box-shadow:0 0 0 1px #0ea5e973,0 10px 18px #0000003d;background:linear-gradient(180deg,#0ea5e914,#0c1526)}.device-card__top{display:flex;justify-content:space-between;align-items:center;gap:8px}.device-id{font-weight:700}.device-name{margin:4px 0}.device-meta{margin:0;color:var(--muted);font-size:12px}.status-badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid transparent;font-weight:700}.detail-layout{display:grid;grid-template-columns:1.05fr 1.2fr;gap:12px}.detail-stack{display:grid;grid-template-columns:1fr;gap:12px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:12px}.stat-card{background:var(--panel-2);border:1px solid var(--border);padding:12px;border-radius:12px}.scada-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border-soft)}.scada-header h2{font-size:28px;line-height:1.1}.scada-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 16px}.scada-stats .stat-card{min-height:86px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel-2);box-shadow:inset 0 1px #ffffff08}.scada-stats .stat-card span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.scada-stats .stat-card strong{margin-top:6px;font-size:20px;line-height:1.2;color:#f8fafc}.scada-io{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 18px}.scada-io>div{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent),var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:inset 0 1px #ffffff08}.indicator{display:flex;align-items:center;gap:10px;margin:8px 0 0;min-height:38px;padding:8px 10px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:#0b1223bd;color:#cbd5e1;font-weight:700}.indicator .dot{width:12px;height:12px;border-radius:50%;background:#475569;box-shadow:0 0 0 3px #47556926;flex:0 0 auto}.indicator.on{border-color:#22c55e47;color:#f8fafc;background:#22c55e14}.indicator.on .dot{background:var(--ok);box-shadow:0 0 0 3px #22c55e2e,0 0 12px #22c55e73}.indicator.alarm.on{border-color:#ef444457;background:#ef444414}.indicator.alarm.on .dot{background:var(--danger);box-shadow:0 0 0 3px #ef44442e,0 0 12px #ef444473}.command-box{margin-top:10px;display:grid;grid-template-columns:1fr;gap:10px}.command-presets{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:12px}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}.preset-btn{background:var(--panel-3);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 12px;cursor:pointer;text-align:left;font-weight:700;min-height:44px}.preset-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.preset-btn.active{background:linear-gradient(180deg,#0ea5e929,#0b1223);border-color:#38bdf8;color:#f8fafc;box-shadow:0 0 0 1px #38bdf852,0 0 18px #0ea5e92e}.command-editor{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:12px;display:grid;gap:8px}.command-editor textarea{min-height:92px;resize:vertical;font-family:JetBrains Mono,Fira Code,monospace;font-size:13px}.text-area{font-family:JetBrains Mono,Fira Code,monospace;font-size:13px}.command-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.terminal{background:var(--panel-3)}.terminal-body{margin-top:8px;background:var(--panel-4);border:1px solid var(--border);border-radius:10px;padding:10px;max-height:220px;overflow-y:auto;font-family:JetBrains Mono,Fira Code,monospace;font-size:13px}.terminal-line{display:flex;gap:8px;margin-bottom:6px;align-items:baseline}.terminal-time{color:var(--accent-2);min-width:70px}.terminal-text{color:var(--text);word-break:break-all}.chip{border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-size:12px;color:var(--muted)}.kv-grid{margin-top:16px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--panel-2);display:grid;gap:6px}.kv-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.05);padding:6px 0}.kv-row:last-child{border-bottom:none}.kv-key{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.kv-val{font-weight:700;word-break:break-all}.chart-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center}.chart-controls .control{display:flex;align-items:center;gap:8px}.chart-controls label{color:var(--muted);font-size:13px}.chart-controls select{min-width:140px}.admin-panel{margin-top:14px;background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:14px}.admin-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}.card{background:var(--panel-3);border:1px solid var(--border);border-radius:12px;padding:12px}.stack{display:flex;flex-direction:column}.stack.gap{gap:10px}.stack.sm{gap:4px}.card-head{display:flex;align-items:center;justify-content:space-between}.ghost{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}.ghost:hover{border-color:#0ea5e966}.secondary{background:#0f172a;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;cursor:pointer}.secondary:hover{border-color:#0ea5e959}.user-list{display:grid;gap:10px;margin-top:10px}.user-card{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px}.user-row{display:flex;justify-content:space-between;align-items:center}.tag{padding:4px 8px;border-radius:999px;background:#0ea5e926;color:var(--accent);font-weight:700;font-size:12px}.pill{display:inline-block;background:#ffffff0d;border:1px solid var(--border);border-radius:999px;padding:4px 8px;margin:2px 4px 2px 0;font-size:12px}.perm-form{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;margin-top:8px}.chk{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}.feedback{margin-top:10px}@media (max-width: 1100px){.detail-layout{grid-template-columns:1fr}.scada-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 900px){.topbar{flex-direction:column;align-items:flex-start}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.content{flex-direction:column}.scada-io{grid-template-columns:1fr}}@media (max-width: 600px){.page{padding:16px 12px 28px}h1{font-size:26px}.metrics{grid-template-columns:1fr}.auth-inline{grid-template-columns:1fr;width:100%}.perm-form{grid-template-columns:1fr 1fr}.command-actions{flex-direction:column;align-items:stretch}.scada-stats{grid-template-columns:1fr}.preset-grid{grid-template-columns:1fr 1fr}}.mqtt-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px;margin-bottom:14px}.filter-field{display:flex;flex-direction:column;gap:6px}.filter-field label{font-size:13px;color:var(--muted)}.mqtt-datetime{min-height:44px}.mqtt-desktop-view{display:block}.mqtt-mobile-view{display:none}.mqtt-card-list{display:grid;gap:10px}.mqtt-card{background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}.mqtt-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.mqtt-card-time{margin:0;font-weight:700;color:var(--text)}.mqtt-card-summary{margin:10px 0 0;color:var(--text);line-height:1.45;word-break:break-word}.mqtt-card-detail{margin-top:12px}.mqtt-detail-btn{padding:8px 10px;border-radius:10px}.mqtt-mobile-payload{margin-top:10px;max-height:240px;overflow:auto}.mqtt-empty{padding:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px}.tab-label-mobile{display:none}.tab-label-desktop{display:inline}@media (max-width: 760px){.nav-tabs{display:flex;flex-wrap:wrap;width:100%;gap:6px}.tab{flex:1 1 calc(50% - 6px);min-width:0;padding:9px 10px;font-size:13px;text-align:center}.tab-label-desktop{display:none}.tab-label-mobile{display:inline}.mqtt-filters{grid-template-columns:1fr}.mqtt-desktop-view{display:none}.mqtt-mobile-view{display:block}.mqtt-card-time,.mqtt-card-summary{font-size:14px}}@media (max-width: 480px){.tab{flex:1 1 100%}.mqtt-card-top{flex-direction:column;align-items:flex-start}.mqtt-detail-btn{width:100%}}.access-fullscreen{padding:10px}.access-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.access-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:#020617}.access-table{width:100%;border-collapse:collapse;min-width:920px;font-size:14px}.access-table th{position:sticky;top:0;z-index:1;background:#0f172a;color:#e5e7eb;text-align:left;padding:10px 12px;border:1px solid #334155;font-weight:700;white-space:nowrap}.access-table td{padding:9px 12px;border:1px solid #1e293b;white-space:nowrap;vertical-align:middle}.access-table tbody tr:nth-child(2n){background:#0f172abf}.access-table tbody tr:nth-child(odd){background:#020617bf}.access-table tbody tr:hover{background:#0ea5e91f}.access-device{font-weight:700;color:#f8fafc}.access-center{text-align:center;font-weight:700}.access-door{font-weight:700}.access-empty{text-align:center;color:var(--muted);padding:18px}.access-section-title{margin:22px 0 10px;font-size:18px;font-weight:800;color:#f8fafc}.access-table-wrap+.access-section-title{margin-top:30px}.platform-brand{color:inherit;text-decoration:none}.platform-actions,.module-access-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.module-access-row{margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:10px}.access-message{width:min(680px,100%);margin:72px auto;padding:32px;text-align:center;background:var(--panel, #111827);border:1px solid var(--border);border-radius:14px}.access-message .area-back-link{margin-top:18px}.area-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 18px}.area-heading h2{margin:4px 0 0}.area-back-link,.nav-tabs .tab{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.app-selector{width:min(820px,100%);margin:72px auto}.app-selector__heading{margin-bottom:28px;text-align:center}.app-selector__heading h2{margin-top:8px}.app-selector__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.app-area-card{display:flex;min-height:150px;flex-direction:column;justify-content:center;gap:12px;padding:28px;color:inherit;text-decoration:none;background:var(--panel, #111827);border:1px solid #273449;border-radius:14px;transition:border-color .12s ease,transform .12s ease}.app-area-card:hover,.app-area-card:focus-visible{border-color:#0ea5e9;transform:translateY(-2px);outline:none}.app-area-card__title{font-size:1.2rem;font-weight:700}@media (max-width: 720px){.area-heading{align-items:flex-start;flex-direction:column}.app-selector{margin:36px auto}}