:root{--font-family: "Inter", system-ui, -apple-system, sans-serif;--bg-color: #0d1117;--card-bg: rgba(255, 255, 255, .03);--card-border: rgba(255, 255, 255, .1);--text-main: #e6edf3;--text-muted: #8b949e;--accent-color: #58a6ff;--brand-color: #238636;--danger-color: #f85149;--warning-color: #d29922;--success-color: #3fb950}body{margin:0;font-family:var(--font-family);background-color:var(--bg-color);background-image:radial-gradient(circle at 50% 0%,#161b22,#0d1117);color:var(--text-main);-webkit-font-smoothing:antialiased}.app{max-width:1400px;margin:0 auto;padding:2rem}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--card-border)}.brand{display:flex;align-items:center;gap:1rem}.logo{background:linear-gradient(135deg,#238636,#2ea043);width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff;box-shadow:0 4px 12px #23863666}h1{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.lead{margin:.2rem 0 0;font-size:.9rem;color:var(--text-muted)}.chip{background:#388bfd26;color:#58a6ff;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:1px solid rgba(88,166,255,.2)}.muted{color:var(--text-muted);font-size:.85rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:1.5rem;transition:transform .2s,box-shadow .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card.clickable{cursor:pointer}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003;border-color:#fff3}.card.tvoc{border-top:4px solid #a371f7}.card.co2{border-top:4px solid #f85149}.card.temp{border-top:4px solid #d29922}.card.hum{border-top:4px solid #58a6ff}.card.pm25{border-top:4px solid #3fb950}.card.pm10{border-top:4px solid #238636}.card.pm1{border-top:4px solid #7ee787}.card.alarm{border-top:4px solid #f85149}.card.relay{border-top:4px solid #db6d28}.title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}h2{margin:0;font-size:1.1rem;font-weight:600}.small{font-size:.8rem;color:var(--text-muted);margin-top:.2rem}.value{font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:.5rem;font-feature-settings:"tnum"}.unit{font-size:1rem;color:var(--text-muted);font-weight:500}.spark{width:120px;height:40px;overflow:visible}.spark path{fill:none;stroke:var(--text-muted);stroke-width:2;vector-effect:non-scaling-stroke}.card.tvoc .spark path{stroke:#a371f7}.card.co2 .spark path{stroke:#f85149}.card.temp .spark path{stroke:#d29922}.card.hum .spark path{stroke:#58a6ff}.card.pm25 .spark path{stroke:#3fb950}.card.pm10 .spark path{stroke:#238636}.card.pm1 .spark path{stroke:#7ee787}.meter{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.meter i{display:block;height:100%;background:#f85149;border-radius:3px;transition:width .5s ease}.big{grid-column:1 / -1}.chart-card{min-height:400px;padding:2rem}footer{margin-top:3rem;text-align:center;color:var(--text-muted);font-size:.9rem;padding-bottom:2rem}.table-container{overflow-x:auto;border-radius:8px;border:1px solid var(--card-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:1rem;border-bottom:1px solid var(--card-border)}th{background:#ffffff0d;font-weight:600;color:var(--text-muted);font-size:.9rem}td{font-family:monospace;font-size:.9rem}.btn{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-main);padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-family:inherit;font-weight:600;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}.btn:hover{background:#ffffff1a}.btn-primary{background:#238636;border-color:#238636;color:#fff}.btn-primary:hover{background:#2ea043}.pagination{display:flex;justify-content:center;align-items:center;margin-top:1.5rem;gap:1.5rem}.pagination-info{font-size:.9rem;color:var(--text-muted)}.page-numbers{font-size:.9rem;font-weight:600;color:var(--text-main)}