:root{--bg: #0b1120;--panel: #111827;--panel-border: rgba(255, 255, 255, .08);--text: #e5e7eb;--text-dim: #94a3b8;--temp: #f97316;--hum: #06b6d4;--online: #22c55e;--offline: #ef4444}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}.app-shell{min-height:100vh;display:flex;flex-direction:column}#app-header{border-bottom:1px solid var(--panel-border);background:#111827b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}.header-content{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.header-left{display:flex;align-items:center;gap:.75rem}.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--temp),var(--hum));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.header-content h1{margin:0;font-size:1.1rem;font-weight:700}.subtitle{margin:.15rem 0 0;font-size:.8rem;color:var(--text-dim)}.header-nav{display:flex;gap:.5rem}.nav-link{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid transparent;color:var(--text-dim);padding:.5rem .9rem;border-radius:8px;font-size:.85rem;cursor:pointer;transition:background .2s,color .2s}.nav-link:hover{background:#ffffff0f;color:var(--text)}.nav-link.active{background:#ffffff1a;color:#fff;border-color:var(--panel-border)}.header-right{display:flex;align-items:center;gap:1rem}.status-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--panel-border)}.status-badge .status-dot{width:8px;height:8px;border-radius:50%;background:var(--offline)}.status-badge.online{color:var(--online)}.status-badge.online .status-dot{background:var(--online);box-shadow:0 0 8px var(--online)}.status-badge.offline{color:var(--offline)}.current-section{max-width:1200px;margin:0 auto;padding:1.5rem;width:100%}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}.reading-card{position:relative;background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:1.5rem;overflow:hidden}.card-row{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}.card-icon-label{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.card-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}.temp-icon{background:#f9731626;color:var(--temp)}.humidity-icon{background:#06b6d426;color:var(--hum)}.card-label{font-size:.85rem;color:var(--text-dim);font-weight:500}.card-value{display:flex;align-items:baseline;gap:.35rem}.value-number{font-size:2.75rem;font-weight:700;line-height:1;transition:color .3s}.value-updating{animation:flash .6s ease}@keyframes flash{0%{color:#fff}to{color:var(--text)}}.value-unit{font-size:1.1rem;color:var(--text-dim)}.card-ring{flex-shrink:0;width:90px;height:90px}.card-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#ffffff0f;stroke-width:8}.ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease}.ring-fill-temp{stroke:var(--temp)}.ring-fill-hum{stroke:var(--hum)}.last-update{margin-top:1rem;font-size:.8rem;color:var(--text-dim)}.trends-section{max-width:1200px;margin:0 auto;padding:0 1.5rem 2rem;width:100%;display:flex;flex-direction:column;gap:1.25rem}.chart-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:1.25rem}.chart-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem}.chart-header h2{margin:0;font-size:1rem;font-weight:600}.chart-header-right{display:flex;align-items:center;gap:.75rem}.chart-avg{display:flex;gap:.6rem;font-size:.85rem;font-weight:600}.avg-temp{color:var(--temp)}.avg-hum{color:var(--hum)}.chart-badge{font-size:.72rem;padding:.25rem .6rem;border-radius:999px;background:#ffffff0f;color:var(--text-dim);border:1px solid var(--panel-border)}.chart-container{position:relative;height:260px}#app-footer{margin-top:auto;border-top:1px solid var(--panel-border);padding:1.25rem;text-align:center;color:var(--text-dim);font-size:.8rem}.main-content{padding:2rem 1.5rem;max-width:1200px;margin:0 auto;width:100%}.controls{display:flex;gap:1rem;margin-bottom:1rem}.controls label{display:flex;align-items:center;gap:.5rem;color:var(--text);font-size:.9rem}.form-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:1.5rem;margin-bottom:1.25rem}.form-card h2{margin:0 0 .5rem;font-size:1.05rem;font-weight:600}.form-hint{margin:0 0 1.25rem;color:var(--text-dim);font-size:.85rem;line-height:1.5;max-width:60ch}.form-row{display:flex;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.25rem}.form-group{display:flex;flex-direction:column;gap:.4rem;flex:1 1 200px}.form-group label{font-size:.8rem;color:var(--text-dim);font-weight:500}.form-group input{background:#ffffff0a;border:1px solid var(--panel-border);border-radius:8px;padding:.6rem .75rem;color:var(--text);font-size:1rem;font-family:inherit}.form-group input:focus{outline:none;border-color:var(--hum)}.form-error{color:var(--offline);font-size:.85rem;margin-bottom:1rem}.form-submit{background:linear-gradient(135deg,var(--temp),var(--hum));border:none;color:#fff;font-weight:600;padding:.65rem 1.5rem;border-radius:8px;cursor:pointer;font-size:.9rem}.form-submit:disabled{opacity:.6;cursor:not-allowed}.history-table{width:100%;border-collapse:collapse;font-size:.85rem}.history-table th,.history-table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--panel-border)}.history-table th{color:var(--text-dim);font-weight:500}.log-container{background:#00000080;border:1px solid var(--panel-border);border-radius:8px;padding:1.5rem;height:60vh;overflow-y:auto;font-family:SFMono-Regular,Consolas,monospace;color:#22c55e;font-size:.85rem}@media (max-width: 640px){.header-content{padding:1rem}.header-nav{order:3;width:100%;justify-content:center}.value-number{font-size:2.1rem}.card-ring{width:70px;height:70px}}