*{ margin:0; padding:0; box-sizing:border-box} body{ background:radial-gradient(circle at 20% 30%,#0b1120,#030614); font-family:'Inter',sans-serif; color:#edf2f7; padding:1.5rem; min-height:100vh} .glass-card{ background:rgba(18,25,45,0.65); backdrop-filter:blur(14px); border-radius:2rem; border:1px solid rgba(59,130,246,0.25); box-shadow:0 20px 35px -12px rgba(0,0,0,0.4); transition:all 0.2s ease} .glass-card:hover{ border-color:rgba(59,130,246,0.45)} .container{ max-width:1400px; margin:0 auto} .header{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:2rem; padding:0.5rem 0} .title h1{ font-size:1.9rem; font-weight:600; background:linear-gradient(135deg,#ffffff,#8bb4ff); background-clip:text; -webkit-background-clip:text; color:transparent; letter-spacing:-0.3px} .title p{ font-size:0.9rem; color:#9ca8c9; margin-top:0.25rem} .header-buttons{ display:flex; gap:1rem; align-items:center} .demo-badge{ background:rgba(255,165,0,0.2); border:1px solid #ffa500; border-radius:2rem; padding:0.4rem 1rem; font-size:0.8rem; font-weight:500; color:#ffb347} .btn{ background:rgba(59,130,246,0.2); border:1px solid rgba(59,130,246,0.5); border-radius:2rem; padding:0.5rem 1.2rem; font-weight:500; cursor:pointer; transition:0.2s; color:#90a9f0} .btn:hover{ background:rgba(59,130,246,0.4)} .btn-logout{ background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.5); color:#ffb4b4} .btn-logout:hover{ background:rgba(239,68,68,0.4)} .dashboard-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.8rem} .card{ padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:1.2rem} .card-header{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1.2rem; border-bottom:1px dashed rgba(59,130,246,0.3); padding-bottom:0.7rem} .card-header i{ color:#3b82f6} .device-list{ display:flex; flex-direction:column; gap:1rem} .device-item{ display:flex; justify-content:space-between; align-items:center; background:rgba(0,0,0,0.25); padding:0.7rem 1rem; border-radius:1.2rem} .device-info{ display:flex; align-items:center; gap:0.8rem} .device-info i{ width:28px; font-size:1.3rem; color:#b9c8ff} .toggle-switch{ position:relative; display:inline-block; width:52px; height:26px} .toggle-switch input{ opacity:0; width:0; height:0} .slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#2d3a5e; transition:0.3s; border-radius:34px} .slider:before{ position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background-color:white; transition:0.3s; border-radius:50%} input:checked + .slider{ background-color:#3b82f6} input:checked + .slider:before{ transform:translateX(26px)} input:disabled + .slider{ opacity:0.5; cursor:not-allowed} .slider-row{ display:flex; flex-direction:column; gap:0.6rem} .slider-label{ display:flex; justify-content:space-between; font-size:0.85rem; color:#cbd5e6} input[type="range"]{ width:100%; height:5px; -webkit-appearance:none; background:#2d3a5e; border-radius:5px; outline:none} input[type="range"]:disabled{ opacity:0.5} input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#3b82f6; cursor:pointer; box-shadow:0 0 6px #3b82f6; border:none} input[type="range"]:disabled::-webkit-slider-thumb{ cursor:not-allowed} .temp-value{ font-size:1.8rem; font-weight:700; text-align:center; background:rgba(0,0,0,0.3); padding:0.5rem; border-radius:2rem; margin-top:0.3rem} .status-badge{ background:#1e2a44; border-radius:2rem; padding:0.2rem 0.8rem; font-size:0.75rem; font-weight:500; color:#90a9f0} .energy-stats{ display:flex; justify-content:space-between; margin:0.5rem 0} .stat{ text-align:center} .stat-number{ font-size:1.6rem; font-weight:700} .progress-bar{ background:#1e2a44; border-radius:20px; height:8px; overflow:hidden; margin:0.5rem 0} .progress-fill{ background:#3b82f6; width:65%; height:100%; border-radius:20px} .scenario-buttons{ display:flex; gap:1rem; margin-top:0.5rem} .scenario-btn{ background:rgba(59,130,246,0.2); border:1px solid rgba(59,130,246,0.5); border-radius:2rem; padding:0.6rem 1.2rem; font-weight:500; cursor:pointer; transition:0.2s; flex:1; text-align:center; backdrop-filter:blur(4px)} .scenario-btn.disabled{ opacity:0.5; cursor:not-allowed} .scenario-btn:not(.disabled):hover{ background:rgba(59,130,246,0.4); transform:scale(0.97)} .weather-info{ display:flex; align-items:center; justify-content:space-between} .weather-temp{ font-size:2rem; font-weight:700} hr{ border-color:rgba(59,130,246,0.2); margin:0.2rem 0} .flex-between{ display:flex; justify-content:space-between; align-items:center} .cam-placeholder{ background:#0a0f1c; border-radius:1rem; padding:1rem; text-align:center} .small-text{ font-size:0.7rem; color:#8e9fc3} .modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); align-items:center; justify-content:center; z-index:1000} .modal-content{ background:rgba(18,25,45,0.95); backdrop-filter:blur(14px); border-radius:2rem; border:1px solid #3b82f6; padding:2rem; width:90%; max-width:400px; text-align:center} .modal-content input{ width:100%; padding:0.8rem; margin:0.5rem 0; background:#111a2c; border:1px solid #2d3e6e; border-radius:1rem; color:white} .modal-content button{ width:100%; margin-top:1rem} .error-msg{ color:#ff7e7e; margin-top:0.5rem} @media (max-width:720px){ body{ padding:1rem} .dashboard-grid{ grid-template-columns:1fr} .header{ flex-direction:column; align-items:start; gap:0.8rem} }