.app{min-height:100vh;background:linear-gradient(135deg,#f0f4ff 0%,#fafbff 50%,#f5f0ff 100%);transition:background .6s}.app-theft{background:linear-gradient(135deg,#fff0f0 0%,#fff5f5 50%,#fff0f0 100%);animation:theftPulse 1s ease-in-out infinite alternate}@keyframes theftPulse{0%{background:linear-gradient(135deg,#fff0f0 0%,#fff5f5 100%)}to{background:linear-gradient(135deg,#ffe4e4 0%,#fff0f0 100%)}}.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:64px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(99,102,241,.12);box-shadow:0 1px 20px #6366f114}.header-left{display:flex;align-items:center;gap:1rem}.logo{display:flex;align-items:center;gap:.4rem;font-size:1.25rem;letter-spacing:-.02em}.logo-bolt{font-size:1.4rem;filter:drop-shadow(0 0 6px #f59e0b)}.logo-text{color:#1e293b}.logo-text strong{color:#6366f1}.header-sub{font-size:.75rem;color:#94a3b8;border-left:1px solid #e2e8f0;padding-left:1rem}.header-right{display:flex;align-items:center;gap:.75rem}.badge-alert{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:99px;animation:bounce .6s ease infinite alternate}@keyframes bounce{0%{transform:scale(1)}to{transform:scale(1.08)}}.demo-btn{padding:.35rem 1rem;border-radius:99px;border:none;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.02em}.demo-start{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 8px #6366f166}.demo-start:hover{transform:translateY(-1px);box-shadow:0 4px 14px #6366f180}.demo-stop{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef444466;animation:blink 1s ease-in-out infinite}.conn-pill{display:flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:99px;letter-spacing:.03em}.conn-ok{background:#dcfce7;color:#16a34a}.conn-off{background:#fee2e2;color:#dc2626}.conn-dot{width:7px;height:7px;border-radius:50%;background:currentColor}.conn-ok .conn-dot{animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.header-device{font-size:.75rem;font-weight:600;color:#6366f1;background:#eff0fe;padding:.3rem .7rem;border-radius:99px}.theft-banner{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 2rem;background:linear-gradient(90deg,#ef4444,#dc2626,#ef4444);background-size:200% auto;animation:slide 2s linear infinite;color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.04em}@keyframes slide{0%{background-position:0% center}to{background-position:200% center}}.main{max-width:1400px;margin:0 auto;padding:1.75rem 2rem 3rem;display:flex;flex-direction:column;gap:1.5rem}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.kpi-card{position:relative;background:white;border-radius:16px;padding:1.25rem 1.25rem 1.4rem;box-shadow:0 1px 3px #0000000f,0 4px 24px #0000000a;border:1px solid rgba(255,255,255,.8);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:.25rem}.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000001a}.kpi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent, #6366f1);border-radius:16px 16px 0 0}.kpi-pulse{animation:cardPulse .8s ease-in-out infinite alternate}@keyframes cardPulse{0%{box-shadow:0 0 #ef44444d}to{box-shadow:0 0 0 8px #ef444400}}.kpi-icon{font-size:1.4rem;margin-bottom:.25rem;opacity:.85}.kpi-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}.kpi-value{font-size:1.9rem;font-weight:800;color:#1e293b;line-height:1.1;letter-spacing:-.02em}.kpi-unit{font-size:.85rem;font-weight:500;color:#64748b}.kpi-sub{font-size:.72rem;color:#94a3b8;margin-top:.15rem}.kpi-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent, #6366f1),transparent);opacity:.3}.stats-row{display:flex;flex-wrap:wrap;gap:.75rem}.stat-chip{background:white;border-radius:12px;padding:.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;box-shadow:0 1px 3px #0000000d;border:1px solid #f1f5f9;flex:1;min-width:130px}.stat-n{font-size:1.25rem;font-weight:700;color:#1e293b;letter-spacing:-.02em}.stat-l{font-size:.68rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}.stat-chip-red .stat-n{color:#ef4444}.charts-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1rem}.chart-card{background:white;border-radius:16px;padding:1.25rem 1.25rem .75rem;box-shadow:0 1px 3px #0000000d,0 4px 16px #0000000a;border:1px solid #f1f5f9}.chart-wide{grid-column:1 / -1}.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.chart-header h3{font-size:.9rem;font-weight:600;color:#334155}.chart-badge{font-size:.65rem;font-weight:700;background:#dcfce7;color:#16a34a;padding:.2rem .5rem;border-radius:99px;text-transform:uppercase;letter-spacing:.06em;animation:blink 1.5s ease-in-out infinite}.chart-unit{font-size:.7rem;color:#94a3b8;font-weight:600}.chart-tip{background:white;border:1px solid #e2e8f0;border-radius:10px;padding:.6rem .9rem;box-shadow:0 4px 12px #0000001a;font-size:.78rem}.tip-time{color:#94a3b8;margin-bottom:.3rem;font-size:.72rem}.alerts-section,.table-section{background:white;border-radius:16px;padding:1.25rem;box-shadow:0 1px 3px #0000000d,0 4px 16px #0000000a;border:1px solid #f1f5f9}.alerts-section{border:1px solid #fecaca}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.section-header h2{font-size:.95rem;font-weight:700;color:#1e293b}.section-count{font-size:.72rem;color:#94a3b8;font-weight:500}.alerts-list{display:flex;flex-direction:column;gap:.6rem}.alert-row{display:flex;align-items:center;gap:.9rem;background:#fff5f5;border:1px solid #fecaca;border-radius:10px;padding:.75rem 1rem}.alert-icon{font-size:1.2rem}.alert-info{flex:1;display:flex;flex-direction:column;gap:.15rem}.alert-device{font-size:.78rem;font-weight:700;color:#ef4444}.alert-detail{font-size:.75rem;color:#64748b}.alert-time{font-size:.68rem;color:#94a3b8}.ack-btn{background:white;border:1px solid #e2e8f0;border-radius:8px;padding:.35rem .75rem;font-size:.72rem;font-weight:600;color:#64748b;cursor:pointer;transition:all .15s;white-space:nowrap}.ack-btn:hover{background:#f0fdf4;border-color:#86efac;color:#16a34a}.table-wrap{overflow-x:auto;border-radius:10px}.readings-table{width:100%;border-collapse:collapse;font-size:.8rem}.readings-table th{background:#f8fafc;color:#64748b;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.6rem .9rem;text-align:left;border-bottom:1px solid #e2e8f0}.readings-table td{padding:.55rem .9rem;border-bottom:1px solid #f1f5f9;color:#334155}.readings-table tr:last-child td{border-bottom:none}.readings-table tr:hover td{background:#f8fafc}.fw-600{font-weight:600}.text-red{color:#ef4444;font-weight:600}.relay-section{display:flex;align-items:center;gap:1rem;background:white;border-radius:16px;padding:1rem 1.5rem;box-shadow:0 1px 3px #0000000d;border:1px solid #f1f5f9;flex-wrap:wrap}.relay-label{font-size:.85rem;font-weight:700;color:#334155}.relay-btns{display:flex;gap:.5rem}.relay-btn{padding:.5rem 1.25rem;border-radius:10px;border:none;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s}.relay-on{background:#dcfce7;color:#16a34a}.relay-on:hover{background:#16a34a;color:#fff;transform:translateY(-1px)}.relay-off{background:#fee2e2;color:#dc2626}.relay-off:hover{background:#dc2626;color:#fff;transform:translateY(-1px)}.relay-hint{font-size:.7rem;color:#94a3b8;margin-left:auto}.relay-hint code{background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.68rem}.footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-top:1px solid #e2e8f0;background:white;font-size:.72rem;color:#94a3b8}@media (max-width: 900px){.charts-grid{grid-template-columns:1fr}.chart-wide{grid-column:1}.header-sub{display:none}.main{padding:1rem}}@media (max-width: 600px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.footer{flex-direction:column;gap:.25rem;text-align:center}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:#f0f4ff;color:#1e293b;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}