* { 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} }