:root{--bg:#0b1220;--panel:#121a2b;--muted:#8aa0bf;--text:#e7eefc;--primary:#5cc8ff;--accent:#52e0a5;--danger:#ff6b6b;--warn:#ffd166;--card:#0f1726;--border: #1e2a42;--shadow: 0 6px 20px rgba(0,0,0,.25)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial;background:radial-gradient(1200px 800px at 10% 0%,#0d1730 0%,var(--bg) 60%);color:var(--text)}a{color:inherit;text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:20px}.nav{position:sticky;top:0;z-index:10;background:#121a2be6;-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border)}.nav .inner{display:flex;align-items:center;gap:16px;padding:12px 20px;position:relative}.brand{font-weight:700;letter-spacing:.3px}.brand b{color:var(--primary)}.hamburger{display:none;flex-direction:column;justify-content:space-around;width:24px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:11}.hamburger span{width:100%;height:2px;background:var(--text);border-radius:1px;transition:all .3s ease}.hamburger:hover span{background:var(--primary)}.navlinks{display:flex;gap:12px;margin-left:auto;transition:all .3s ease}.navlinks a{padding:8px 12px;border-radius:10px;transition:all .2s ease}.navlinks a:hover{background:#5cc8ff14}.navlinks a.active{background:#5cc8ff1f;outline:1px solid rgba(92,200,255,.35)}.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}.card{background:linear-gradient(180deg,#5cc8ff0f,#5cc8ff05);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.card-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.card-body{padding:16px}.card-title{font-size:16px;font-weight:600}.muted{color:var(--muted);font-size:14px}.kpi{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,#0c1324,#0a1222)}.kpi .value{font-size:28px;font-weight:700}.kpi .label{color:var(--muted);font-size:12px}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#0f1627;color:var(--text);cursor:pointer}.btn:hover{outline:1px solid rgba(92,200,255,.35)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn.primary{background:linear-gradient(180deg,#1a83bb,#176b99);border-color:#1a83bb}.btn.danger{background:linear-gradient(180deg,#b33b3b,#922f2f);border-color:#b33b3b}.input,.select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0e1526;color:var(--text)}.input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}.input[type=datetime-local]{color-scheme:dark}.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border)}.table th{color:var(--muted);font-weight:600;text-align:left}.badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent;display:inline-flex;align-items:center;box-shadow:0 2px 8px #00000026;transition:all .2s ease}.badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.badge.ok{background:linear-gradient(135deg,#52e0a52e,#52e0a514);color:#52e0a5;border-color:#52e0a566;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge.warn{background:linear-gradient(135deg,#ffd1662e,#ffd16614);color:#ffd166;border-color:#ffd16666;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge.err{background:linear-gradient(135deg,#ff6b6b2e,#ff6b6b14);color:#ff6b6b;border-color:#ff6b6b66;text-shadow:0 1px 2px rgba(0,0,0,.2)}.section-title{font-size:18px;font-weight:700;margin:10px 0 6px}.subtle{font-size:13px;color:var(--muted)}.card-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.hero{max-width:420px;margin:40px auto;padding:24px;border:1px solid var(--border);border-radius:18px;background:#0e1628;box-shadow:var(--shadow)}.center{text-align:center}@media (max-width: 768px){.hamburger{display:flex;margin-left:auto}.navlinks{position:absolute;top:100%;left:0;right:0;background:#121a2bf2;-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--border);flex-direction:column;gap:0;margin-left:0;padding:12px 20px;transform:translateY(-100%);opacity:0;visibility:hidden}.navlinks-open{transform:translateY(0);opacity:1;visibility:visible}.navlinks a{padding:12px 16px;border-radius:8px;margin:2px 0;text-align:left;border:1px solid transparent}.navlinks a:hover{background:#5cc8ff1f;border-color:#5cc8ff40}.navlinks a.active{background:#5cc8ff26;border-color:#5cc8ff66}}@media (max-width: 480px){.nav .inner{padding:12px 16px}.brand{font-size:16px}.navlinks{padding:12px 16px}}.alert{padding:12px 16px;border-radius:10px;border:1px solid;margin:12px 0}.alert.error{background:#ff6b6b1f;color:var(--danger);border-color:#ff6b6b59}.alert.success{background:#52e0a51f;color:var(--accent);border-color:#52e0a559}.user-info{display:flex;align-items:center;gap:12px;margin-left:auto}.user-name{color:var(--muted);font-size:14px}.btn.logout{background:#ff6b6b1f;color:var(--danger);border-color:#ff6b6b59}.btn.logout:hover{background:#ff6b6b33;border-color:#ff6b6b80}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted)}@media (max-width: 768px){.user-info{margin-left:0;margin-top:12px;justify-content:space-between}.user-name{font-size:13px}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#0b1220,#1a2a42,#0b1220);position:relative;overflow:hidden}.login-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(92,200,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(82,224,165,.08) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,107,107,.05) 0%,transparent 50%);pointer-events:none}.login-card{background:linear-gradient(145deg,#121a2bf2,#0f1625f2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(92,200,255,.2);border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 25px 50px #0000004d,0 0 0 1px #ffffff0d,inset 0 1px #ffffff1a;position:relative;z-index:1;animation:loginSlideIn .6s ease-out}@keyframes loginSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-header{text-align:center;margin-bottom:40px}.login-logo{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}.logo-icon{font-size:32px;filter:drop-shadow(0 0 10px rgba(92,200,255,.3));animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.login-title{font-size:32px;font-weight:700;background:linear-gradient(135deg,#5cc8ff,#52e0a5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-.5px}.login-subtitle{color:var(--muted);font-size:16px;margin:0;line-height:1.5}.login-error{background:linear-gradient(135deg,#ff6b6b26,#ff6b6b14);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;gap:12px;color:var(--danger);font-size:14px;animation:errorShake .5s ease-in-out}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.error-icon{font-size:16px;flex-shrink:0}.login-form{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:600;color:var(--text);letter-spacing:.3px}.form-input{padding:16px 20px;border:2px solid rgba(92,200,255,.2);border-radius:12px;background:#0f1625cc;color:var(--text);font-size:16px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #5cc8ff1a,0 0 20px #5cc8ff33;background:#0f1625f2}.form-input::placeholder{color:var(--muted);opacity:.7}.form-input:disabled{opacity:.6;cursor:not-allowed}.login-button{padding:18px 24px;background:linear-gradient(135deg,#1a83bb,#176b99);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden;letter-spacing:.3px}.login-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.login-button:hover:before{left:100%}.login-button:hover{background:linear-gradient(135deg,#1e8cc7,#1a7ba8);transform:translateY(-2px);box-shadow:0 10px 25px #1a83bb4d}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}.loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-footer{text-align:center;padding-top:24px;border-top:1px solid rgba(92,200,255,.1)}.login-help{color:var(--muted);font-size:14px;margin:0;line-height:1.5}.help-link{color:var(--primary);cursor:pointer;text-decoration:underline;transition:color .3s ease}.help-link:hover{color:var(--accent)}@media (max-width: 480px){.login-container{padding:16px}.login-card{padding:32px 24px;border-radius:20px}.login-title{font-size:28px}.login-subtitle{font-size:14px}.form-input{padding:14px 16px;font-size:16px}.login-button{padding:16px 20px;font-size:15px}}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.page-title{font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#5cc8ff,#52e0a5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle{color:var(--muted);font-size:14px;margin:8px 0 0}.config-btn{background:#5cc8ff1a;border-color:#5cc8ff4d;color:var(--primary)}.config-btn:hover{background:#5cc8ff26;border-color:var(--primary)}.config-panel{background:linear-gradient(145deg,#121a2be6,#0f1625e6);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px;display:grid;gap:24px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.config-content{display:flex;flex-direction:column;gap:20px}.config-title{font-size:20px;font-weight:600;margin:0;color:var(--text)}.config-section{display:flex;flex-direction:column;gap:8px}.config-label{font-size:14px;font-weight:600;color:var(--text)}.config-input{padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:#0f1625cc;color:var(--text);font-size:14px;transition:all .3s ease}.config-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #5cc8ff1a}.config-hint{font-size:12px;color:var(--muted);margin:0}.auth-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}.auth-field{display:flex;flex-direction:column;gap:6px}@media (max-width: 768px){.auth-inputs{grid-template-columns:1fr;gap:12px}}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}.preset-btn{padding:8px 16px;font-size:13px;background:#52e0a51a;border-color:#52e0a54d;color:var(--accent)}.preset-btn:hover{background:#52e0a526;border-color:var(--accent)}.config-actions{display:flex;gap:12px;margin-top:8px}.config-help{background:#5cc8ff0d;border:1px solid rgba(92,200,255,.2);border-radius:12px;padding:20px}.help-title{font-size:16px;font-weight:600;margin:0 0 12px;color:var(--primary)}.help-list{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.8}.help-list strong{color:var(--text)}.temperature-chart-container{background:linear-gradient(145deg,#121a2b99,#0f162599);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.chart-title-section{flex:1}.chart-title{font-size:24px;font-weight:700;margin:0;color:var(--text)}.chart-subtitle{font-size:13px;color:var(--muted);margin:4px 0 0}.connection-status{display:flex;align-items:center;gap:12px}.status-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;border:1px solid}.status-indicator.connected{background:#52e0a51a;color:var(--accent);border-color:#52e0a54d}.status-indicator.disconnected{background:#ff6b6b1a;color:var(--danger);border-color:#ff6b6b4d}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}.clear-btn{background:#ff6b6b1a;border-color:#ff6b6b4d;color:var(--danger)}.clear-btn:hover{background:#ff6b6b26;border-color:var(--danger)}.chart-error{background:linear-gradient(135deg,#ff6b6b26,#ff6b6b14);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;gap:12px;color:var(--danger);font-size:14px}.temp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}.temp-kpi{background:linear-gradient(145deg,#0f1625cc,#0c1324cc);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;transition:all .3s ease}.temp-kpi:hover{border-color:#5cc8ff4d;transform:translateY(-2px)}.temp-kpi.current{background:linear-gradient(135deg,#5cc8ff1a,#52e0a514);border-color:#5cc8ff66}.kpi-icon{font-size:24px;flex-shrink:0}.kpi-content{flex:1}.kpi-label{font-size:12px;color:var(--muted);margin-bottom:4px}.kpi-value{font-size:20px;font-weight:700;color:var(--text)}.chart-wrapper{background:#0b122066;border:1px solid var(--border);border-radius:12px;padding:20px;min-height:400px;display:flex;align-items:center;justify-content:center}.chart-empty{text-align:center;padding:60px 20px}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-text{font-size:18px;font-weight:600;color:var(--text);margin:0 0 8px}.empty-hint{font-size:14px;color:var(--muted);margin:0}.chart-info{margin-top:16px;text-align:center}.info-text{font-size:13px;color:var(--muted);margin:0}.instructions-panel{background:linear-gradient(145deg,#121a2b99,#0f162599);border:1px solid var(--border);border-radius:16px;padding:24px}.instructions-title{font-size:20px;font-weight:600;margin:0 0 20px;color:var(--text)}.instructions-content{display:flex;flex-direction:column;gap:20px}.instruction-step{display:flex;gap:16px}.step-number{width:32px;height:32px;background:linear-gradient(135deg,#5cc8ff,#52e0a5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b1220;flex-shrink:0}.step-content{flex:1}.step-content h4{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--text)}.step-description{font-size:14px;color:var(--muted);margin:0;line-height:1.6}.code-block{display:block;background:#0b122099;border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-family:Courier New,monospace;font-size:13px;color:var(--accent);overflow-x:auto;margin:8px 0 0}@media (max-width: 768px){.page-header,.chart-header{flex-direction:column;align-items:flex-start}.connection-status{width:100%;justify-content:space-between}.temp-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.config-actions{flex-direction:column}.config-actions .btn{width:100%}.instruction-step{flex-direction:column}.step-number{align-self:flex-start}}.chart-time-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.time-range-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:#0f1627;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.3px}.time-range-btn:hover{border-color:#5cc8ff66;color:var(--text);background:#5cc8ff14}.time-range-btn.active{background:linear-gradient(135deg,#5cc8ff33,#5cc8ff1a);border-color:#5cc8ff99;color:var(--primary);box-shadow:0 0 8px #5cc8ff26}.time-range-btn--custom{margin-left:4px;border-style:dashed}.time-range-btn--custom.active{background:linear-gradient(135deg,#52e0a52e,#52e0a514);border-color:#52e0a580;color:var(--accent);box-shadow:0 0 8px #52e0a526;border-style:solid}.chart-custom-range{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:16px 20px;background:linear-gradient(135deg,#52e0a50f,#52e0a505);border:1px solid rgba(82,224,165,.2);border-radius:12px;margin-bottom:20px;animation:slideDown .25s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.chart-custom-range__group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}.chart-custom-range__label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.chart-custom-range__input{width:100%}.chart-custom-range__error{width:100%;font-size:12px;color:var(--danger);margin:0;padding:6px 10px;background:#ff6b6b14;border:1px solid rgba(255,107,107,.25);border-radius:6px}@media (max-width: 600px){.chart-time-controls{gap:6px}.time-range-btn{padding:6px 10px;font-size:12px}.chart-custom-range{flex-direction:column;padding:12px 16px}.chart-custom-range__group{width:100%;min-width:unset}}