Spaces:
Sleeping
Sleeping
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --bg0:#02060E;--bg1:#060D1A;--bg2:#091422;--bg3:#0D1C30; | |
| --surface:rgba(9,20,34,0.92);--glass:rgba(30,100,200,0.05); | |
| --b1:rgba(30,120,255,0.12);--b2:rgba(30,120,255,0.25);--b3:rgba(30,120,255,0.5); | |
| --blue:#1E78FF;--blue-dim:rgba(30,120,255,0.7);--blue-glow:rgba(30,120,255,0.2); | |
| --cyan:#00D4FF;--cyan-glow:rgba(0,212,255,0.15); | |
| --green:#00E887;--green-dim:rgba(0,232,135,0.7);--green-glow:rgba(0,232,135,0.12); | |
| --red:#FF3A5C;--red-dim:rgba(255,58,92,0.7);--red-glow:rgba(255,58,92,0.12); | |
| --amber:#FFAA00;--amber-glow:rgba(255,170,0,0.12); | |
| --violet:#9B6DFF; | |
| --t1:#EDF2FF;--t2:rgba(180,210,255,0.7);--t3:rgba(120,160,210,0.45);--t4:rgba(80,120,180,0.3); | |
| --mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed',sans-serif;--body:'Barlow',sans-serif; | |
| --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px; | |
| --sidebar-w:62px; | |
| --ease:cubic-bezier(.4,0,.2,1); | |
| --header-bg:rgba(2,6,14,0.85); | |
| --sidebar-bg:linear-gradient(180deg,rgba(6,13,26,.98),rgba(3,8,18,.99)); | |
| --card-shadow:0 8px 32px rgba(0,0,0,.3); | |
| } | |
| :root[data-theme="light"]{ | |
| --bg0:#F4F6FC;--bg1:#FFFFFF;--bg2:#EBF0F9;--bg3:#DFE6F5; | |
| --surface:#FFFFFF;--glass:rgba(30,100,200,0.04); | |
| --b1:rgba(30,90,200,0.15);--b2:rgba(30,90,200,0.3);--b3:rgba(30,90,200,0.55); | |
| --blue:#1E66FF;--blue-dim:rgba(30,102,255,0.8);--blue-glow:rgba(30,102,255,0.15); | |
| --cyan:#009BBF;--cyan-glow:rgba(0,155,191,0.12); | |
| --green:#04A760;--green-dim:rgba(4,167,96,0.8);--green-glow:rgba(4,167,96,0.12); | |
| --red:#E11D48;--red-dim:rgba(225,29,72,0.8);--red-glow:rgba(225,29,72,0.12); | |
| --amber:#D97706;--amber-glow:rgba(217,119,6,0.12); | |
| --violet:#8B5CF6; | |
| --t1:#0F172A;--t2:#334155;--t3:#64748B;--t4:#94A3B8; | |
| --header-bg:rgba(255,255,255,0.92); | |
| --sidebar-bg:linear-gradient(180deg,#FFFFFF,#F1F5F9); | |
| --card-shadow:0 8px 24px rgba(15,23,42,.06); | |
| } | |
| :root[data-theme="cyber"]{ | |
| --bg0:#050014;--bg1:#0D0028;--bg2:#16003B;--bg3:#210052; | |
| --surface:rgba(13,0,40,0.94);--glass:rgba(255,0,212,0.06); | |
| --b1:rgba(255,0,212,0.2);--b2:rgba(255,0,212,0.4);--b3:rgba(255,0,212,0.7); | |
| --blue:#00F0FF;--blue-dim:rgba(0,240,255,0.8);--blue-glow:rgba(0,240,255,0.25); | |
| --cyan:#FF00D4;--cyan-glow:rgba(255,0,212,0.2); | |
| --green:#00FF88;--green-dim:rgba(0,255,136,0.8);--green-glow:rgba(0,255,136,0.2); | |
| --red:#FF0055;--red-dim:rgba(255,0,85,0.8);--red-glow:rgba(255,0,85,0.2); | |
| --amber:#FFB800;--amber-glow:rgba(255,184,0,0.2); | |
| --violet:#BD00FF; | |
| --t1:#FFFFFF;--t2:rgba(230,200,255,0.8);--t3:rgba(180,140,220,0.6);--t4:rgba(140,100,180,0.4); | |
| --header-bg:rgba(5,0,20,0.9); | |
| --sidebar-bg:linear-gradient(180deg,#0D0028,#050014); | |
| --card-shadow:0 8px 32px rgba(255,0,212,.15); | |
| } | |
| html,body{height:100%;background:var(--bg0);color:var(--t1);font-family:var(--body);overflow-x:hidden;font-size:14px;transition:background-color .3s var(--ease),color .3s var(--ease);} | |
| body, .sidebar, .header, .panel, .kpi, .pro-input, .lat-row, .svc-tbl, .modal, .modal-back{transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);} | |
| /* ─── BG LAYERS ─── */ | |
| #bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0; | |
| background-image:linear-gradient(var(--b1) 1px,transparent 1px), | |
| linear-gradient(90deg,var(--b1) 1px,transparent 1px); | |
| background-size:48px 48px;opacity:0.6;} | |
| #bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0; | |
| background: | |
| radial-gradient(ellipse 55% 40% at 75% 15%,var(--blue-glow) 0%,transparent 65%), | |
| radial-gradient(ellipse 35% 50% at 5% 85%,var(--cyan-glow) 0%,transparent 55%), | |
| radial-gradient(ellipse 25% 30% at 50% 50%,var(--glass) 0%,transparent 70%);} | |
| /* ─── SIDEBAR ─── */ | |
| .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w); | |
| background:var(--sidebar-bg); | |
| border-right:1px solid var(--b1);z-index:200; | |
| display:flex;flex-direction:column;align-items:center;padding:16px 0 20px;gap:4px;} | |
| .s-logo{width:36px;height:36px;border-radius:10px;margin-bottom:20px; | |
| background:linear-gradient(135deg,var(--blue),#0040CC); | |
| display:flex;align-items:center;justify-content:center; | |
| font-family:var(--display);font-size:14px;font-weight:800;color:#fff;letter-spacing:.5px; | |
| box-shadow:0 0 24px rgba(30,120,255,0.45),0 0 60px rgba(30,120,255,0.15);} | |
| .s-btn{width:40px;height:40px;border-radius:var(--r-sm);border:none;background:transparent; | |
| color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center; | |
| font-size:16px;transition:all .2s var(--ease);position:relative;} | |
| .s-btn:hover{background:var(--glass);color:var(--blue);} | |
| .s-btn.act{background:rgba(30,120,255,0.12);color:var(--blue); | |
| box-shadow:inset 0 0 0 1px var(--b2);} | |
| .s-btn.act::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%); | |
| width:3px;height:18px;background:var(--blue);border-radius:0 3px 3px 0; | |
| box-shadow:0 0 10px var(--blue);} | |
| .s-btn svg{width:16px;height:16px;} | |
| .s-spacer{flex:1;} | |
| .s-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1a3a7a,#0d2050); | |
| border:1px solid var(--b2);display:flex;align-items:center;justify-content:center; | |
| font-size:11px;font-weight:700;color:var(--blue);font-family:var(--mono);} | |
| /* ─── APP ─── */ | |
| .app{margin-left:var(--sidebar-w);min-height:100vh;position:relative;z-index:1;} | |
| /* ─── ALERT BANNER ─── */ | |
| .alert-banner{ | |
| background:linear-gradient(90deg,rgba(255,58,92,0.15),rgba(255,58,92,0.08),transparent); | |
| border-bottom:1px solid rgba(255,58,92,0.25); | |
| padding:8px 28px;display:flex;align-items:center;gap:12px; | |
| font-family:var(--mono);font-size:11px;color:var(--red); | |
| display:none; /* hidden by default */ | |
| } | |
| .alert-banner-dot{width:6px;height:6px;border-radius:50%;background:var(--red); | |
| animation:pulse-red 1.2s infinite;} | |
| @keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(255,58,92,.6);}50%{box-shadow:0 0 0 6px rgba(255,58,92,0);}} | |
| .alert-banner-sep{width:1px;height:12px;background:rgba(255,58,92,0.3);} | |
| .alert-banner-text{color:var(--t2);} | |
| /* ─── HEADER ─── */ | |
| .header{display:flex;align-items:center;justify-content:space-between; | |
| padding:16px 28px;border-bottom:1px solid var(--b1); | |
| background:var(--header-bg);backdrop-filter:blur(24px); | |
| position:sticky;top:0;z-index:100;} | |
| .h-left{display:flex;align-items:center;gap:16px;} | |
| .h-title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.2px;} | |
| .h-sub{font-size:11px;color:var(--t3);font-family:var(--mono);margin-top:1px;} | |
| .h-right{display:flex;align-items:center;gap:8px;} | |
| .live-chip{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px; | |
| background:rgba(0,232,135,0.08);border:1px solid rgba(0,232,135,0.2); | |
| font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:2px;color:var(--green);} | |
| .live-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-g 1.6s infinite;} | |
| @keyframes pulse-g{0%,100%{box-shadow:0 0 0 0 rgba(0,232,135,.6);}50%{box-shadow:0 0 0 5px rgba(0,232,135,0);}} | |
| .theme-btn { | |
| display: flex; align-items: center; gap: 6px; padding: 6px 12px; | |
| border-radius: 20px; border: 1px solid var(--b2); | |
| background: var(--glass); color: var(--t1); | |
| font-family: var(--mono); font-size: 11px; font-weight: 600; | |
| cursor: pointer; transition: all 0.25s var(--ease); | |
| } | |
| .theme-btn:hover { | |
| background: var(--blue-glow); border-color: var(--blue); | |
| transform: translateY(-1px); box-shadow: 0 4px 14px var(--blue-glow); | |
| } | |
| .hbtn{padding:7px 14px;border-radius:var(--r-sm);font-size:11px;font-weight:600; | |
| cursor:pointer;transition:all .2s;font-family:var(--body);letter-spacing:.3px; | |
| display:flex;align-items:center;gap:6px;} | |
| .hbtn-ghost{border:1px solid var(--b1);background:transparent;color:var(--t2);} | |
| .hbtn-ghost:hover{border-color:var(--b2);color:var(--blue);} | |
| .hbtn-prim{border:1px solid var(--b2);background:rgba(30,120,255,0.12);color:var(--blue);} | |
| .hbtn-prim:hover{background:rgba(30,120,255,0.2);} | |
| .clock-box{font-family:var(--mono);font-size:11px;color:var(--t3); | |
| padding:5px 12px;border:1px solid var(--b1);border-radius:var(--r-sm);letter-spacing:1px;} | |
| .region-sel{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r-sm); | |
| color:var(--t2);font-family:var(--body);font-size:11px;padding:6px 10px;cursor:pointer;outline:none;} | |
| .region-sel:focus{border-color:var(--b2);} | |
| /* ─── TABS ─── */ | |
| .main-tab { display: none; padding:20px 28px; flex-direction:column; gap:20px; } | |
| .main-tab.act { display: flex; animation: fadein 0.3s var(--ease); } | |
| @keyframes fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } | |
| /* ─── KPI ROW ─── */ | |
| .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} | |
| .kpi{background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-lg); | |
| padding:18px 20px;position:relative; | |
| transition:border-color .3s,transform .2s,box-shadow .3s;cursor:default; | |
| backdrop-filter:blur(12px);} | |
| .kpi:hover{border-color:var(--b2);transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,.3);} | |
| .kpi-accent-line{position:absolute;top:0;left:0;right:0;height:2px; | |
| background:linear-gradient(90deg,transparent 0%,var(--ac,var(--blue)) 40%,var(--ac,var(--blue)) 60%,transparent 100%);} | |
| .kpi-icon{position:absolute;right:16px;top:16px;font-size:22px;opacity:0.12;} | |
| .kpi-label{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase; | |
| color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;font-family:var(--mono);} | |
| .kpi-val{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.5px; | |
| color:var(--vc,var(--blue));} | |
| .kpi-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px; | |
| padding:2px 7px;border-radius:4px;font-size:10px;font-family:var(--mono);font-weight:500;} | |
| .kpi-delta.up{background:rgba(0,232,135,0.1);color:var(--green);} | |
| .kpi-delta.down{background:rgba(255,58,92,0.1);color:var(--red);} | |
| .kpi-delta.neutral{background:rgba(30,120,255,0.1);color:var(--blue);} | |
| .kpi-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(30,120,255,0.06);} | |
| .kpi-bar-fill{height:100%;background:var(--ac,var(--blue));opacity:.4;transition:width 1.5s var(--ease);} | |
| /* ─── GRID 3-COL ─── */ | |
| .row2{display:grid;grid-template-columns:1fr 1fr 340px;gap:16px;} | |
| .row3{display:grid;grid-template-columns:1fr 320px;gap:16px;} | |
| /* ─── PANEL ─── */ | |
| .panel{background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-lg); | |
| backdrop-filter:blur(12px);} | |
| .ph{padding:14px 20px;border-bottom:1px solid var(--b1); | |
| display:flex;align-items:center;justify-content:space-between;} | |
| .ph-title{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:2.5px; | |
| text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:8px;} | |
| .ph-icon{color:var(--blue);} | |
| .ph-badge{font-family:var(--mono);font-size:9px;padding:2px 8px;border-radius:4px; | |
| font-weight:700;letter-spacing:1.5px;} | |
| .ph-badge.live{background:rgba(0,232,135,0.12);color:var(--green);border:1px solid rgba(0,232,135,.2);} | |
| .ph-badge.warn{background:rgba(255,58,92,0.12);color:var(--red);} | |
| .pb{padding:16px 20px;} | |
| /* ─── LATENCY MATRIX ─── */ | |
| .lat-row{display:grid;grid-template-columns:155px 1fr 72px; | |
| align-items:center;gap:12px;padding:7px 4px; | |
| border-radius:var(--r-sm);transition:background .2s;cursor:default;} | |
| .lat-row:hover{background:rgba(30,120,255,0.04);} | |
| .lat-name{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} | |
| .lat-track{height:3px;background:rgba(30,120,255,0.08);border-radius:2px;overflow:hidden;position:relative;} | |
| .lat-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(30,120,255,0.4),var(--cyan)); | |
| transition:width 1.2s var(--ease);} | |
| .lat-fill.hot{background:linear-gradient(90deg,rgba(255,170,0,0.5),var(--amber));} | |
| .lat-ms{font-family:var(--mono);font-size:10px;color:var(--cyan);text-align:right;} | |
| /* ─── UPTIME HEATMAP ─── */ | |
| .heatmap{display:flex;flex-direction:column;gap:8px;} | |
| .hm-label{font-family:var(--mono);font-size:8px;color:var(--t4);letter-spacing:1px;} | |
| .hm-grid{display:flex;gap:2px;} | |
| .hm-cell{width:10px;height:10px;border-radius:2px;cursor:pointer;transition:transform .15s;} | |
| .hm-cell:hover{transform:scale(1.3);} | |
| .hm-legend{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--t4);} | |
| .hm-leg-cell{width:8px;height:8px;border-radius:1px;} | |
| /* ─── INCIDENT FEED ─── */ | |
| .inc-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;} | |
| .inc-item{padding:12px 14px;border-radius:var(--r-sm);border:1px solid;position:relative;overflow:hidden; | |
| transition:transform .2s,border-color .2s;} | |
| .inc-item:hover{transform:translateX(2px);} | |
| .inc-item.crit{background:rgba(255,58,92,0.05);border-color:rgba(255,58,92,0.2);} | |
| .inc-item.warn{background:rgba(255,170,0,0.05);border-color:rgba(255,170,0,0.2);} | |
| .inc-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;} | |
| .inc-item.crit::before{background:var(--red);} | |
| .inc-item.warn::before{background:var(--amber);} | |
| .inc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} | |
| .inc-name{font-size:12px;font-weight:700;} | |
| .inc-tag{font-size:8px;font-weight:800;letter-spacing:1.5px;padding:2px 7px; | |
| border-radius:4px;font-family:var(--mono);text-transform:uppercase;} | |
| .inc-tag.down{background:rgba(255,58,92,0.2);color:var(--red);} | |
| .inc-tag.warn{background:rgba(255,170,0,0.2);color:var(--amber);} | |
| .inc-msg{font-size:11px;color:var(--t3);line-height:1.5;} | |
| .inc-time{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:9px;color:var(--t4);font-family:var(--mono);} | |
| .inc-elapsed{padding:1px 6px;background:rgba(255,255,255,0.06);border-radius:3px;} | |
| /* ─── SERVICE TABLE ─── */ | |
| .svc-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;} | |
| .svc-search{flex:1;position:relative;} | |
| .svc-search input{width:100%;background:rgba(30,120,255,0.04);border:1px solid var(--b1); | |
| border-radius:var(--r-sm);padding:9px 14px 9px 36px;color:var(--t1); | |
| font-size:12px;font-family:var(--body);outline:none;transition:border .2s;} | |
| .svc-search input:focus{border-color:var(--b2);} | |
| .svc-search input::placeholder{color:var(--t4);} | |
| .svc-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%); | |
| color:var(--t4);font-size:12px;pointer-events:none;} | |
| .filter-chip{padding:5px 12px;border-radius:20px;font-size:10px;font-weight:600;cursor:pointer; | |
| border:1px solid var(--b1);background:transparent;color:var(--t3); | |
| transition:all .2s;font-family:var(--mono);} | |
| .filter-chip:hover,.filter-chip.sel{border-color:var(--b2);background:rgba(30,120,255,0.1);color:var(--blue);} | |
| .filter-chip.red.sel{border-color:rgba(255,58,92,.35);background:rgba(255,58,92,0.1);color:var(--red);} | |
| .svc-tbl{width:100%;border-collapse:collapse;} | |
| .svc-tbl thead tr{border-bottom:1px solid var(--b1);} | |
| .svc-tbl th{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:2px; | |
| text-transform:uppercase;color:var(--t4);padding:7px 12px;text-align:left;cursor:pointer; | |
| user-select:none;transition:color .2s;white-space:nowrap;} | |
| .svc-tbl th:hover{color:var(--blue);} | |
| .svc-tbl th.sort-asc::after{content:' ↑';} | |
| .svc-tbl th.sort-desc::after{content:' ↓';} | |
| .svc-tbl tbody tr{border-bottom:1px solid rgba(30,120,255,0.04); | |
| transition:background .15s;cursor:pointer;} | |
| .svc-tbl tbody tr:hover{background:rgba(30,120,255,0.04);} | |
| .svc-tbl td{padding:11px 12px;vertical-align:middle;} | |
| .td-name{font-size:12px;font-weight:600;margin-bottom:2px;} | |
| .td-url{font-size:9px;color:var(--t4);font-family:var(--mono);} | |
| .scope-tag{display:inline-block;padding:2px 8px;border-radius:4px; | |
| font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase; | |
| border:1px solid var(--b1);color:var(--t4);font-family:var(--mono);} | |
| .sla-bar-wrap{width:80px;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;} | |
| .sla-bar{height:100%;border-radius:2px;transition:width 1s var(--ease);} | |
| .sla-pct{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:2px;} | |
| .spark30{display:flex;gap:1.5px;align-items:flex-end;height:20px;} | |
| .sp-bar{width:3px;border-radius:1px;transition:height .4s;} | |
| .sp-up{background:var(--green);opacity:.8;} | |
| .sp-down{background:var(--red);opacity:.9;} | |
| .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px; | |
| border-radius:5px;font-size:9px;font-weight:700;letter-spacing:1px; | |
| text-transform:uppercase;font-family:var(--mono);} | |
| .pill.online{background:rgba(0,232,135,0.09);border:1px solid rgba(0,232,135,.2);color:var(--green);} | |
| .pill.down{background:rgba(255,58,92,0.09);border:1px solid rgba(255,58,92,.2);color:var(--red);} | |
| .pill.degraded{background:rgba(255,170,0,0.09);border:1px solid rgba(255,170,0,.2);color:var(--amber);} | |
| .pill-dot{width:4px;height:4px;border-radius:50%;background:currentColor;} | |
| .pill.down .pill-dot{animation:blink .9s step-start infinite;} | |
| @keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}} | |
| .lat-td{font-family:var(--mono);font-size:11px;text-align:right;} | |
| /* ─── CHART CANVAS ─── */ | |
| .chart-wrap{padding:0 16px 16px;position:relative;} | |
| canvas{display:block;} | |
| .chart-yaxis{position:absolute;left:20px;top:0;display:flex;flex-direction:column; | |
| justify-content:space-between;height:calc(100% - 20px); | |
| font-family:var(--mono);font-size:8px;color:var(--t4);pointer-events:none;} | |
| .chart-xaxis{display:flex;justify-content:space-between;padding:4px 4px 0; | |
| font-family:var(--mono);font-size:8px;color:var(--t4);} | |
| /* ─── WORLD MAP (SVG) ─── */ | |
| .world-wrap{padding:12px 16px 14px;position:relative;} | |
| .map-node{cursor:pointer;transition:r .2s;} | |
| .map-node circle{transition:r .2s,opacity .2s;} | |
| .map-node:hover circle{r:6;} | |
| .node-ring{animation:ping 2s ease-out infinite;} | |
| @keyframes ping{0%{r:6;opacity:.6;}100%{r:16;opacity:0;}} | |
| /* ─── MODAL ─── */ | |
| .modal-back{position:fixed;inset:0;z-index:500; | |
| background:rgba(1,4,10,.88);backdrop-filter:blur(12px); | |
| display:none;align-items:center;justify-content:center;} | |
| .modal-back.open{display:flex;} | |
| .modal{background:linear-gradient(135deg,rgba(6,14,28,.99),rgba(4,10,22,.99)); | |
| border:1px solid var(--b2);border-radius:var(--r-xl);width:660px;max-width:95vw; | |
| max-height:90vh;overflow-y:auto; | |
| box-shadow:0 0 80px rgba(30,100,200,0.25),0 0 200px rgba(30,100,200,0.08); | |
| animation:mdin .22s var(--ease);} | |
| @keyframes mdin{from{opacity:0;transform:scale(.96) translateY(14px);}to{opacity:1;transform:none;}} | |
| .modal-hd{padding:22px 24px 18px;border-bottom:1px solid var(--b1); | |
| display:flex;align-items:flex-start;justify-content:space-between;position:sticky;top:0; | |
| background:rgba(6,14,28,.98);z-index:10;} | |
| .modal-hd-info{} | |
| .modal-title{font-family:var(--display);font-size:22px;font-weight:700;} | |
| .modal-meta{display:flex;align-items:center;gap:10px;margin-top:5px;} | |
| .modal-url{font-family:var(--mono);font-size:10px;color:var(--t4);} | |
| .modal-status-chip{display:inline-flex;align-items:center;gap:5px; | |
| padding:3px 10px;border-radius:5px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;} | |
| .mclose{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--b1); | |
| background:transparent;color:var(--t3);cursor:pointer;font-size:14px; | |
| display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;} | |
| .mclose:hover{border-color:var(--red);color:var(--red);} | |
| .modal-tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);} | |
| .mtab{padding:11px 20px;font-size:11px;font-weight:600;cursor:pointer;border:none; | |
| background:transparent;color:var(--t3);border-bottom:2px solid transparent; | |
| transition:all .2s;font-family:var(--body);} | |
| .mtab:hover{color:var(--t1);} | |
| .mtab.act{color:var(--blue);border-bottom-color:var(--blue);} | |
| .mtab-panel{padding:20px 24px;display:none;} | |
| .mtab-panel.act{display:block;} | |
| .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} | |
| .m-card{background:rgba(30,120,255,0.03);border:1px solid var(--b1); | |
| border-radius:var(--r-md);padding:14px 16px;} | |
| .m-card-title{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:2px; | |
| text-transform:uppercase;color:var(--t3);margin-bottom:12px; | |
| display:flex;align-items:center;gap:6px;} | |
| .mc-icon{font-size:11px;} | |
| .m-stat{font-family:var(--display);font-size:28px;font-weight:700;color:var(--t1);} | |
| .m-stat-unit{font-size:14px;font-weight:400;color:var(--t3);} | |
| .m-stat-sub{font-size:10px;color:var(--t4);font-family:var(--mono);margin-top:4px;} | |
| .nominal{display:flex;flex-direction:column;align-items:center;justify-content:center; | |
| height:70px;gap:6px;} | |
| .nominal-ico{font-size:22px;} | |
| .nominal-txt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--green);} | |
| .incident-txt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--red);} | |
| /* history table */ | |
| .h-tbl{width:100%;border-collapse:collapse;} | |
| .h-tbl th{font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase; | |
| color:var(--t4);padding:6px 10px;text-align:left;border-bottom:1px solid var(--b1);} | |
| .h-tbl td{padding:8px 10px;font-size:11px;border-bottom:1px solid rgba(30,120,255,0.04);} | |
| .h-tbl td:last-child{font-family:var(--mono);font-size:10px;} | |
| /* ─── TOAST ─── */ | |
| #toasts{position:fixed;bottom:20px;right:20px;z-index:999999; | |
| display:flex;flex-direction:column;gap:8px;align-items:flex-end;} | |
| .toast{padding:12px 16px;border-radius:var(--r-md); | |
| background:#0F172A;border:1px solid #334155; | |
| box-shadow:0 12px 36px rgba(0,0,0,.6); | |
| display:flex;align-items:center;gap:10px; | |
| font-size:12px;min-width:280px;max-width:440px; | |
| animation:toast-in .3s var(--ease);cursor:pointer;color:#FFFFFF;} | |
| .toast.exit{animation:toast-out .3s var(--ease) forwards;} | |
| @keyframes toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}} | |
| @keyframes toast-out{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(20px);}} | |
| .toast-ico{font-size:16px;flex-shrink:0;} | |
| .toast-body{flex:1;} | |
| .toast-title{font-weight:700;font-size:12px;color:#FFFFFF;} | |
| .toast-msg{font-size:11px;color:#94A3B8;margin-top:2px;line-height:1.45;word-break:break-word;} | |
| .toast.err{border-color:rgba(255,58,92,.6);background:#1E1018;} | |
| .toast.ok{border-color:rgba(0,232,135,.6);background:#091A14;} | |
| .toast.info{border-color:#334155;background:#0F172A;} | |
| /* ─── LOADING OVERLAY ─── */ | |
| #loader{position:fixed;inset:0;z-index:9999;background:var(--bg0); | |
| display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; | |
| transition:opacity .5s;} | |
| #loader.hide{opacity:0;pointer-events:none;} | |
| .loader-logo{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:4px;color:var(--t1);} | |
| .loader-bar{width:200px;height:2px;background:rgba(30,120,255,0.15);border-radius:1px;overflow:hidden;} | |
| .loader-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan)); | |
| border-radius:1px;animation:load-bar 1.4s var(--ease) forwards;} | |
| @keyframes load-bar{from{width:0;}to{width:100%;}} | |
| .loader-txt{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:2px;} | |
| /* ─── ANIM ─── */ | |
| .fade-up{animation:fu .5s var(--ease) both;} | |
| @keyframes fu{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} | |
| .fade-up:nth-child(1){animation-delay:.06s;} | |
| .fade-up:nth-child(2){animation-delay:.12s;} | |
| .fade-up:nth-child(3){animation-delay:.18s;} | |
| .fade-up:nth-child(4){animation-delay:.24s;} | |
| /* ─── ADDITIONS FOR OPERATIONS AND TEST LAB ─── */ | |
| .ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| .ops-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } | |
| .input-group { margin-bottom: 12px; } | |
| .input-group label { display: block; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; } | |
| .pro-input { width: 100%; background: rgba(30,120,255,0.04); border: 1px solid var(--b1); border-radius: var(--r-sm); padding: 10px 14px; color: var(--t1); font-size: 13px; font-family: var(--body); outline: none; transition: border .2s; } | |
| .pro-input:focus { border-color: var(--b2); } | |
| .pro-input::placeholder { color: var(--t4); } | |
| .btn-primary { width: 100%; padding: 10px; background: rgba(30,120,255,0.12); border: 1px solid var(--b2); border-radius: var(--r-sm); color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; } | |
| .btn-primary:hover { background: rgba(30,120,255,0.2); } | |
| .btn-danger-outline { width: 100%; padding: 8px; background: rgba(255,58,92,0.05); border: 1px solid rgba(255,58,92,0.2); border-radius: var(--r-sm); color: var(--red); font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top:10px; } | |
| .btn-danger-outline:hover { background: rgba(255,58,92,0.1); } | |
| .manage-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(30,120,255,0.02); border: 1px solid var(--b1); border-radius: var(--r-sm); margin-bottom: 6px; } | |
| .manage-item-info b { font-size: 12px; color: var(--t1); } | |
| .manage-item-info span { font-size: 10px; color: var(--t4); font-family: var(--mono); display: block; margin-top:2px; } | |
| .btn-remove { padding: 4px 10px; background: rgba(255,58,92,0.08); border: 1px solid rgba(255,58,92,0.15); border-radius: 4px; color: var(--red); font-size: 10px; font-weight: 600; cursor: pointer; transition: 0.2s; font-family:var(--mono); text-transform:uppercase; letter-spacing:1px; } | |
| .btn-remove:hover { background: var(--red); color: #fff; } | |
| /* ─── AUTH OVERLAY ─── */ | |
| .auth-overlay { position: fixed; inset: 0; background: rgba(2,6,14,0.95); display: flex; justify-content: center; align-items: center; z-index: 99999; backdrop-filter: blur(10px); } | |
| .auth-box { width: 400px; max-width: 90%; background: var(--surface); border: 1px solid var(--b2); border-radius: var(--r-xl); padding: 32px; text-align: center; box-shadow: 0 20px 60px rgba(30,120,255,0.1); } | |
| .auth-box .s-logo { margin: 0 auto 20px; } | |
| .auth-box h3 { font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 8px; } | |
| .auth-box p { font-size: 12px; color: var(--t3); margin-bottom: 24px; } | |
| /* ─── TOOLTIPS (HIGH CONTRAST & LEGIBILITY) ─── */ | |
| .tip { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| width: 15px; height: 15px; border-radius: 50%; | |
| background: var(--cyan-glow); color: var(--cyan); | |
| font-size: 10px; font-weight: 800; cursor: help; | |
| position: relative; margin-left: 6px; border: 1px solid var(--b2); | |
| font-family: var(--mono); vertical-align: middle; | |
| } | |
| .tip:hover::after { | |
| content: attr(data-tip); | |
| position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); | |
| background: #0F172A; color: #FFFFFF; | |
| padding: 8px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; | |
| font-family: var(--body); | |
| white-space: normal; z-index: 10000; border: 1px solid #334155; | |
| box-shadow: 0 12px 32px rgba(0,0,0,0.6); pointer-events: none; | |
| width: max-content; max-width: 280px; line-height: 1.45; text-transform: none; letter-spacing: normal; text-align: left; | |
| } | |
| /* ─── TEST LAB DIAGNOSTIC SUITE ─── */ | |
| .testlab-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; width: 100%; } | |
| .console-box { | |
| background: #030712; border: 1px solid var(--b2); border-radius: var(--r-md); | |
| padding: 14px 16px; font-family: var(--mono); font-size: 11px; | |
| min-height: 240px; max-height: 320px; overflow-y: auto; | |
| box-shadow: inset 0 2px 10px rgba(0,0,0,0.8); | |
| } | |
| .console-line { line-height: 1.6; margin-bottom: 4px; word-break: break-all; } | |
| .console-line.text-dim { color: #64748B; } | |
| .console-line.text-ok { color: #10B981; font-weight: 600; } | |
| .console-line.text-warn { color: #F59E0B; } | |
| .console-line.text-err { color: #EF4444; font-weight: 700; } | |
| .console-line.text-cyan { color: #00D4FF; } | |
| .testlab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } | |
| .t-kpi { background: var(--surface); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 12px 14px; backdrop-filter: blur(12px); } | |
| .t-kpi-label { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--t3); margin-bottom: 4px; } | |
| .t-kpi-val { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--t1); } | |