@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary:#020611;--bg-panel:#080e1c66;--bg-card:#101a2d73;--bg-card-hover:#18264199;--border:#ffffff0f;--border-bright:#00d5ff4d;--border-light:#ffffff1f;--cyan:#00d5ff;--cyan-dim:#00d5ff1f;--green:#00fa9a;--green-dim:#00fa9a1f;--amber:#fa0;--amber-dim:#ffaa001f;--red:#f35;--red-dim:#ff335526;--purple:#b366ff;--purple-dim:#b366ff1f;--text-primary:#fff;--text-secondary:#d2e1ffb3;--text-muted:#8ca5d273;--font-main:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--shadow-glow-cyan:0 0 24px #00d5ff4d;--shadow-glow-red:0 0 28px #f356;--shadow-card:0 12px 40px #0009, inset 0 1px 0 #ffffff14;--backdrop-blur:blur(24px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-main);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}.ambient-bg{z-index:0;pointer-events:none;width:100vw;height:100vh;position:absolute;top:0;left:0;overflow:hidden}.ambient-orb{filter:blur(100px);opacity:.4;border-radius:50%;animation:20s ease-in-out infinite alternate float;position:absolute}.ambient-orb-1{background:radial-gradient(circle, var(--cyan), transparent 70%);width:600px;height:600px;top:-10%;left:10%}.ambient-orb-2{background:radial-gradient(circle, var(--purple), transparent 70%);width:800px;height:800px;animation-delay:-5s;bottom:-20%;right:-5%}@keyframes float{0%{transform:translate(0)scale(1)}to{transform:translate(50px,50px)scale(1.1)}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}.app{z-index:10;background:0 0;grid-template-rows:72px 1fr;grid-template-columns:280px 1fr 340px;gap:20px;height:100vh;padding:20px;display:grid;position:relative}.header{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);box-shadow:var(--shadow-card);z-index:100;grid-column:1/-1;justify-content:space-between;align-items:center;padding:0 28px;display:flex;position:relative}.header-logo{align-items:center;gap:14px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--cyan), var(--purple));width:40px;height:40px;box-shadow:var(--shadow-glow-cyan);border-radius:12px;justify-content:center;align-items:center;font-size:20px;display:flex}.logo-text{letter-spacing:-.5px;background:linear-gradient(90deg, #fff, var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:800}.logo-sub{color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;font-size:10px;font-weight:600}.header-center{align-items:center;gap:24px;display:flex}.chain-badge{background:var(--bg-card);border:1px solid var(--border);font-size:12px;font-weight:600;font-family:var(--font-mono);color:var(--text-secondary);border-radius:24px;align-items:center;gap:8px;padding:6px 16px;display:flex;box-shadow:inset 0 1px #ffffff0d}.chain-badge.connected{color:var(--green);background:#00fa9a0f;border-color:#00fa9a40}.chain-badge.offline{color:var(--red);background:#ff33550f;border-color:#ff335540}.chain-dot{border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.block-counter{font-family:var(--font-mono);color:var(--text-secondary);font-size:13px}.block-num{color:var(--cyan);font-weight:600}.header-right{align-items:center;gap:16px;display:flex}button{border:none;outline:none;font-family:inherit}.incident-btn{border-radius:var(--radius-sm);color:var(--red);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(135deg,#ff335526,#ff33550d);border:1px solid #f356;align-items:center;gap:8px;padding:10px 20px;font-size:13px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.incident-btn:hover:not(:disabled){box-shadow:var(--shadow-glow-red);background:#ff335540;border-color:#f35c;transform:translateY(-2px)}.incident-btn:active:not(:disabled){transform:translateY(0)}.incident-btn:disabled{opacity:.5;cursor:not-allowed}.incident-btn.active{background:var(--red);color:#fff;box-shadow:var(--shadow-glow-red);animation:1.5s infinite pulseRed}.report-btn{background:var(--cyan-dim);border-radius:var(--radius-sm);color:var(--cyan);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #00d5ff4d;align-items:center;gap:8px;padding:10px 20px;font-size:13px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.report-btn:hover{box-shadow:var(--shadow-glow-cyan);background:#00d5ff33;border-color:#00d5ff99;transform:translateY(-2px)}.report-btn:active{transform:translateY(0)}.wallet-btn{border-radius:var(--radius-sm);color:var(--purple);cursor:pointer;font-size:13px;font-weight:700;font-family:var(--font-main);letter-spacing:.3px;background:#b366ff1f;border:1px solid #b366ff59;align-items:center;gap:8px;padding:8px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.wallet-btn:hover:not(:disabled){background:#b366ff38;border-color:#b366ff99;transform:translateY(-2px);box-shadow:0 0 20px #b366ff4d}.wallet-btn:active:not(:disabled){transform:translateY(0)}.wallet-btn:disabled{opacity:.5;cursor:not-allowed}.wallet-btn.connected{color:var(--green);font-family:var(--font-mono);background:#00fa9a14;border-color:#00fa9a4d;font-size:12px}.wallet-btn.connected:hover{color:var(--red);background:#ff33551a;border-color:#f356}.wallet-dot{border-radius:50%;width:7px;height:7px;animation:2s infinite pulse;box-shadow:0 0 8px}.left-panel{background:0 0;flex-direction:column;gap:16px;display:flex;overflow-y:auto}.panel-title{text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);padding:0 4px;font-size:11px;font-weight:800}.sensor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:default;-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);box-shadow:var(--shadow-card);padding:18px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.sensor-card:before{content:"";opacity:.3;background:linear-gradient(90deg,#0000,#fff3,#0000);height:1px;position:absolute;top:0;left:0;right:0}.sensor-card:hover{border-color:var(--border-light);background:var(--bg-card-hover);transform:translateY(-4px);box-shadow:0 16px 48px #000000b3,inset 0 1px #ffffff26}.sensor-card.warning{background:#ffaa0014;border-color:#fa06}.sensor-card.danger{box-shadow:var(--shadow-glow-red);background:#ff33551a;border-color:#f359;animation:1.5s infinite alternate pulseCard}.sensor-header{justify-content:space-between;align-items:flex-start;margin-bottom:16px;display:flex}.sensor-name{color:var(--text-primary);letter-spacing:-.2px;font-size:14px;font-weight:700}.sensor-zone-id{color:var(--text-muted);font-size:11px;font-family:var(--font-mono);margin-top:4px}.status-badge{text-transform:uppercase;letter-spacing:.8px;border:1px solid var(--border);background:#0003;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:10px;font-weight:800;display:flex}.status-badge.normal{color:var(--green);border-color:#00fa9a4d}.status-badge.warning{color:var(--amber);border-color:#ffaa004d}.status-badge.danger{color:var(--red);border-color:#f356;animation:.8s infinite flash}.status-dot{background:currentColor;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px}.sensor-metrics{grid-template-columns:1fr 1fr;gap:12px;display:grid}.metric{flex-direction:column;gap:4px;display:flex}.metric-label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);font-size:10px;font-weight:600}.metric-value{font-family:var(--font-mono);color:var(--text-primary);font-size:18px;font-weight:700;line-height:1}.metric-value.hot{color:var(--red);text-shadow:0 0 12px #f356}.metric-value.warn{color:var(--amber);text-shadow:0 0 12px #fa06}.metric-unit{color:var(--text-muted);font-size:10px;font-weight:500}.metric-bar{background:#ffffff0d;border-radius:2px;width:100%;height:4px;margin-top:6px;overflow:hidden;box-shadow:inset 0 1px 2px #00000080}.metric-bar-fill{border-radius:2px;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1),background .3s}.main-panel{flex-direction:column;gap:20px;display:flex;overflow-y:auto}.stats-row{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);box-shadow:var(--shadow-card);flex-direction:column;gap:8px;padding:20px;transition:all .3s;display:flex;position:relative;overflow:hidden}.stat-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);height:2px;position:absolute;top:0;left:0;right:0}.stat-card:hover{border-color:var(--border-light);background:var(--bg-card-hover);transform:translateY(-4px)}.stat-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-size:11px;font-weight:800}.stat-value{font-size:36px;font-weight:900;line-height:1;font-family:var(--font-mono);margin-top:4px}.stat-value.green{color:var(--green);text-shadow:0 0 24px #00fa9a66}.stat-value.cyan{color:var(--cyan);text-shadow:0 0 24px #00d5ff66}.stat-value.amber{color:var(--amber);text-shadow:0 0 24px #fa06}.stat-value.red{color:var(--red);text-shadow:0 0 24px #f356}.stat-trend{color:var(--text-secondary);margin-top:auto;font-size:12px}.chart-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);box-shadow:var(--shadow-card);flex-direction:column;flex:1;padding:24px;display:flex}.chart-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.chart-title{color:var(--text-primary);align-items:center;gap:10px;font-size:16px;font-weight:800;display:flex}.chart-tabs{border-radius:var(--radius-md);background:#0006;border:1px solid #ffffff0d;gap:6px;padding:4px;display:flex}.chart-tab{cursor:pointer;color:var(--text-muted);background:0 0;border-radius:10px;padding:6px 16px;font-size:12px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.chart-tab:hover:not(.active){color:var(--text-primary);background:#ffffff0d}.chart-tab.active{background:var(--cyan-dim);color:var(--cyan);border:1px solid #00d5ff33;box-shadow:0 0 16px #00d5ff1a}.right-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);box-shadow:var(--shadow-card);flex-direction:column;display:flex;overflow:hidden}.compliance-section{border-bottom:1px solid var(--border);background:linear-gradient(#ffffff05 0%,#0000 100%);padding:24px 20px}.gauge-wrapper{flex-direction:column;align-items:center;gap:16px;display:flex}.gauge-label{text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);font-size:12px;font-weight:800}.gauge-ring-wrapper{width:140px;height:140px;position:relative}.gauge-ring{transform:rotate(-90deg)}.gauge-ring-bg{fill:none;stroke:#ffffff0d;stroke-width:10px}.gauge-ring-fill{fill:none;stroke-width:10px;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1),stroke .5s}.gauge-center{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gauge-pct{font-size:32px;font-weight:900;font-family:var(--font-mono);line-height:1}.gauge-pct.high{color:var(--green);text-shadow:0 0 30px #00fa9a80}.gauge-pct.medium{color:var(--amber);text-shadow:0 0 30px #ffaa0080}.gauge-pct.low{color:var(--red);text-shadow:0 0 30px #ff335580;animation:1.5s infinite flash}.gauge-unit{color:var(--text-muted);margin-top:2px;font-size:12px}.panel-tabs{border-bottom:1px solid var(--border);background:#0003;display:flex}.panel-tab{text-align:center;cursor:pointer;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;background:0 0;flex:1;padding:16px 12px;font-size:12px;font-weight:800;transition:all .3s;position:relative}.panel-tab:hover:not(.active){color:var(--text-primary);background:#ffffff05}.panel-tab.active{color:var(--cyan);background:linear-gradient(#0000,#00d5ff0d)}.panel-tab.active:after{content:"";background:var(--cyan);height:3px;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #00d5ff80}.panel-tab .badge{background:var(--red);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;margin-left:6px;font-size:10px;animation:1.5s infinite pulse;display:inline-flex;box-shadow:0 0 10px #f356}.panel-content{flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.alert-item{border:1px solid var(--border);border-radius:var(--radius-md);background:#0006;padding:16px;transition:all .3s;animation:.4s cubic-bezier(.2,.8,.2,1) slideInRight;position:relative;overflow:hidden}.alert-item:before{content:"";width:4px;position:absolute;top:0;bottom:0;left:0}.alert-item.critical:before{background:var(--red);box-shadow:0 0 10px var(--red)}.alert-item.high:before{background:var(--amber);box-shadow:0 0 10px var(--amber)}.alert-item.critical{background:linear-gradient(90deg,#ff335514 0%,#0003 100%);border-color:#ff33554d}.alert-item.high{background:linear-gradient(90deg,#ffaa0014 0%,#0003 100%);border-color:#ffaa004d}.alert-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.alert-title{flex:1;font-size:13px;font-weight:700;line-height:1.4}.alert-item.critical .alert-title{color:#f89}.alert-item.high .alert-title{color:#fc6}.alert-severity{text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:800}.alert-severity.critical{background:var(--red);color:#fff;box-shadow:0 0 12px #f356}.alert-severity.high{background:var(--amber);color:#000;box-shadow:0 0 12px #fa06}.alert-desc{color:var(--text-secondary);background:#0003;border:1px solid #ffffff08;border-radius:6px;padding:10px;font-size:12px;line-height:1.5}.alert-action{color:var(--cyan);background:var(--cyan-dim);border:1px solid #00d5ff33;border-radius:6px;margin-top:10px;padding:8px 12px;font-size:11px;font-weight:600}.alert-tx{font-family:var(--font-mono);color:var(--text-muted);border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;font-size:10px;display:flex}.tx-hash{color:var(--purple);font-weight:600;text-decoration:none;transition:color .2s}.tx-hash:hover{color:#d4aaff;text-decoration:underline}.tx-confirmed{color:var(--green);font-weight:600}.tx-pending{color:var(--amber);font-weight:600;animation:1.5s infinite flash}.tx-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:#0000004d;padding:12px 14px;transition:all .3s;animation:.3s slideInRight}.tx-item:hover{border-color:var(--border-light);background:#ffffff08}.tx-item-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.tx-type{text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:3px 8px;font-size:10px;font-weight:800}.tx-type.SAFETY_ALERT{background:var(--red-dim);color:var(--red)}.tx-type.WORKER_REPORT{background:var(--cyan-dim);color:var(--cyan)}.tx-type.COMPLIANCE_UPDATE{background:var(--purple-dim);color:var(--purple)}.tx-status{font-size:10px;font-weight:700}.tx-status.confirmed{color:var(--green)}.tx-status.pending{color:var(--amber);animation:1.5s infinite flash}.tx-hash-row{font-family:var(--font-mono);margin-bottom:6px;font-size:11px}.tx-hash-row a{color:var(--purple);font-weight:600;text-decoration:none}.tx-hash-row a:hover{color:#d4aaff;text-decoration:underline}.tx-meta{font-family:var(--font-mono);color:var(--text-muted);justify-content:space-between;font-size:10px;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:1000;background:#000c;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-panel);border:1px solid var(--border-bright);border-radius:var(--radius-xl);width:520px;max-width:95vw;padding:36px;animation:.4s cubic-bezier(.2,.8,.2,1) scaleUp;position:relative;overflow:hidden;box-shadow:0 32px 100px #000c,inset 0 1px #ffffff1a}.modal:before{content:"";background:linear-gradient(90deg, var(--cyan), var(--purple));height:3px;position:absolute;top:0;left:0;right:0}.modal-header{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.modal-title{color:var(--text-primary);margin-bottom:4px;font-size:20px;font-weight:800}.modal-subtitle{color:var(--text-secondary);font-size:13px}.close-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .2s;display:flex}.close-btn:hover{color:#fff;background:#ffffff1a;transform:rotate(90deg)}.zk-info{background:var(--cyan-dim);border-radius:var(--radius-sm);color:var(--text-primary);border:1px solid #00d5ff33;align-items:flex-start;gap:12px;margin-bottom:24px;padding:12px 16px;font-size:12px;line-height:1.5;display:flex}.form-group{margin-bottom:20px}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:12px;font-weight:700;display:block}.form-select,.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-main);background:#0000004d;padding:12px 16px;font-size:14px;transition:all .3s}.form-select:focus,.form-textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-dim);background:#00000080;outline:none}.form-textarea{resize:vertical;height:100px}.submit-btn{background:linear-gradient(135deg, var(--purple), var(--cyan));border-radius:var(--radius-md);color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;width:100%;margin-top:8px;padding:14px;font-size:15px;font-weight:800;transition:all .3s;box-shadow:0 8px 20px #00d5ff4d}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px #00d5ff66}.submit-btn:disabled{color:#888;cursor:not-allowed;box-shadow:none;background:#333}.no-alerts{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;height:100%;padding:40px 20px;font-size:13px;display:flex}.no-alerts .icon{opacity:.5;margin-bottom:12px;font-size:32px}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #00fa9ab3}70%{transform:scale(1);box-shadow:0 0 0 6px #00fa9a00}to{transform:scale(.95);box-shadow:0 0 #00fa9a00}}@keyframes pulseRed{0%{transform:scale(.95);box-shadow:0 0 #ff3355b3}70%{transform:scale(1);box-shadow:0 0 0 8px #f350}to{transform:scale(.95);box-shadow:0 0 #f350}}@keyframes pulseCard{0%{box-shadow:0 0 10px #f353}to{box-shadow:0 0 25px #f359}}@keyframes flash{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}