.app-container{max-width:1400px;width:100%;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column;box-sizing:border-box}.dashboard-header{text-align:center;color:#fff;margin-bottom:20px;flex-shrink:0}.dashboard-header h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.subtitle{font-size:clamp(1rem,2vw,1.2rem);opacity:.9}.width-indicator{font-size:clamp(.8rem,1.5vw,1rem);opacity:.8;margin-top:8px;padding:4px 12px;background:#fff3;border-radius:12px;display:inline-block}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:20px;flex-shrink:0;width:100%;box-sizing:border-box}.sensor-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 30px #0003;transition:transform .3s ease,box-shadow .3s ease}.sensor-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px #0000004d}.card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.card-icon{font-size:2rem}.card-header h3{font-size:1.2rem;color:#333;font-weight:600}.card-value{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}.value{font-size:2.5rem;font-weight:700;color:#2c3e50}.unit{font-size:1.2rem;color:#7f8c8d}.progress-bar{width:100%;height:8px;background:#ecf0f1;border-radius:4px;overflow:hidden;margin-bottom:12px}.progress-fill{height:100%;border-radius:4px;transition:width .5s ease}.card-range{display:flex;justify-content:space-between;font-size:.85rem;color:#95a5a6}.status-card{display:flex;flex-direction:column;justify-content:center;align-items:center}.status-indicator{margin-top:20px}.status-badge{padding:12px 32px;border-radius:24px;font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:1px}.status-badge.active{background:#2ecc71;color:#fff}.status-badge.inactive{background:#e74c3c;color:#fff}.chart-section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 30px #0003;margin-top:20px;flex:1 1 auto;display:flex;flex-direction:column;min-height:400px}.chart-section h2{color:#2c3e50;margin-bottom:24px;font-size:1.8rem;flex-shrink:0}.chart-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;flex:1 1 auto;overflow-y:auto;min-height:300px;width:100%;box-sizing:border-box}.chart{padding:16px;background:#f8f9fa;border-radius:12px;min-height:200px;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden}.chart h4{color:#2c3e50;margin-bottom:8px;font-size:1.1rem}.chart-info{display:flex;gap:12px;margin-bottom:12px;font-size:.85rem;color:#7f8c8d;flex-wrap:wrap}.chart-info span{padding:4px 8px;background:#0000000d;border-radius:4px}.chart-bars{display:flex;align-items:flex-end;gap:4px;height:150px;min-height:150px;flex-shrink:0;width:100%;overflow:hidden;position:relative}.chart-bar-container{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0;position:relative}.chart-bar{width:100%;min-height:2px;border-radius:2px 2px 0 0;transition:height .3s ease;max-width:100%}.loading{text-align:center;color:#fff;font-size:1.5rem;padding:40px}@media (max-width: 768px){.app-container{padding:10px}.dashboard-grid{grid-template-columns:1fr;gap:15px}.sensor-card{padding:20px}.value{font-size:2rem}.chart-container{grid-template-columns:1fr}.chart-bars{height:120px}}@media (max-width: 480px){.dashboard-header h1{font-size:1.8rem}.sensor-card{padding:16px}.value{font-size:1.8rem}.card-icon{font-size:1.5rem}}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed;min-height:100%;height:auto;box-sizing:border-box}#root{width:100%;max-width:100%;min-height:100vh;margin:0;padding:0}