:root{--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--accent-rgb: 0, 122, 255;--bg-color: #f0f2f5;--surface-color: rgba(255, 255, 255, .7);--text-primary: #1a1a1b;--text-secondary: #65676b;--accent-color: #007aff;--header-height: 60px;--nav-height: 70px;--glass-blur: 15px;--shadow: 0 8px 32px 0 rgba(31, 38, 135, .1)}[data-theme=dark]{--bg-color: #121212;--surface-color: rgba(30, 30, 30, .7);--text-primary: #f5f5f7;--text-secondary: #a1a1a6;--accent-color: #0a84ff;--shadow: 0 8px 32px 0 rgba(0, 0, 0, .3)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);transition:background-color .3s ease,color .3s ease;overflow-x:hidden;height:100vh}#app{display:flex;flex-direction:column;height:100%}.glass{background:var(--surface-color);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow)}header{position:fixed;top:0;left:0;right:0;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1000}.logo{height:32px;display:flex;align-items:center}.header-right{display:flex;align-items:center;gap:8px}.icon-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:all .2s ease;border-radius:50%}.icon-btn:hover{background:#0000000d}[data-theme=dark] .icon-btn:hover{background:#ffffff1a}.icon-btn:active{transform:scale(.9)}.icon-btn svg{width:24px;height:24px;display:block}.theme-switch{position:relative;width:50px;height:24px}.theme-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--accent-color)}input:checked+.slider:before{transform:translate(26px)}nav.bottom-nav{position:fixed;bottom:16px;left:16px;right:16px;height:var(--nav-height);border-radius:24px;display:flex;justify-content:space-around;align-items:center;z-index:1000}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);text-decoration:none;font-size:10px;transition:color .2s ease,transform .2s ease;flex:1}.nav-item.active{color:var(--accent-color)}.nav-item:active{transform:scale(.9)}.nav-icon{width:24px;height:24px;margin-bottom:4px}main{margin-top:var(--header-height);margin-bottom:calc(var(--nav-height) + 32px);padding:16px;flex:1;overflow-y:auto}.card{border-radius:20px;padding:20px;margin-bottom:16px}h1{font-size:24px;font-weight:700;margin-bottom:24px}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:16px}.device-card{display:flex;flex-direction:column;justify-content:space-between;padding:16px;min-height:120px;border-radius:20px;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.device-card:active{transform:scale(.95)}.device-card.on{background:var(--accent-color);color:#fff}.device-icon{width:32px;height:32px;margin-bottom:12px}.device-info h4{margin:0;font-size:14px;font-weight:600}.device-info p{margin:4px 0 0;font-size:12px;opacity:.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease forwards}@keyframes pulseUpdate{0%{transform:scale(1);box-shadow:0 4px 15px #0000001a}50%{transform:scale(1.03);box-shadow:0 0 15px 4px #4caf5066}to{transform:scale(1);box-shadow:0 4px 15px #0000001a}}.pulse-trigger{animation:pulseUpdate .4s ease-out}@keyframes slideInRight{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slide-in{animation:slideInRight .4s ease forwards}.toast-container{position:fixed;top:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:12px;z-index:9999;pointer-events:none}.toast{background:var(--surface-color);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow);color:var(--text-primary);padding:12px 24px;border-radius:16px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:12px;animation:toastFadeIn .3s cubic-bezier(.18,.89,.32,1.28) forwards;pointer-events:auto}.toast.success{border-left:4px solid #34c759}.toast.error{border-left:4px solid #ff3b30}.mini-btn{padding:4px 10px;font-size:11px;font-weight:600;border-radius:8px;border:none;color:var(--text-primary);cursor:pointer;white-space:nowrap}.color-presets{background:#ffffff0d;padding:4px;border-radius:10px}.color-preset{width:14px;height:14px;border-radius:50%;cursor:pointer;transition:transform .2s ease;border:1px solid rgba(255,255,255,.1)}.color-preset:hover{transform:scale(1.3)}.device-card[draggable=true]{cursor:grab;-webkit-user-select:none;user-select:none}.device-card.dragging{opacity:.5;cursor:grabbing!important;transform:scale(.95);box-shadow:0 8px 32px #0000004d!important}.zone-section{transition:all .2s ease;padding:12px;border-radius:20px}.zone-section.drag-over{background:#007aff1a;outline:2px dashed #007aff;outline-offset:4px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:all .3s ease}.modal-overlay.active{opacity:1;visibility:visible}.control-modal{width:90%;max-width:400px;padding:32px;border-radius:32px;display:flex;flex-direction:column;align-items:center;gap:24px;transform:scale(.9);transition:transform .3s cubic-bezier(.18,.89,.32,1.28)}.modal-overlay.active .control-modal{transform:scale(1)}.modal-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.modal-header h2{margin:0;font-size:20px}.close-modal{padding:8px;cursor:pointer;opacity:.6}.temp-slider-container{width:100%;margin-top:16px}.temp-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,#fc0,#fff,#007aff);outline:none;margin:16px 0}.temp-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px #0003;border:2px solid var(--accent-color)}.dim-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,#333,#fff);outline:none;margin:16px 0}.dim-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px #0003;border:2px solid var(--accent-color)}.icon-btn.spinning svg{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast.fade-out{animation:toastFadeOut .3s ease forwards}@keyframes toastFadeIn{0%{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastFadeOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.9)}}.hidden{display:none!important}.favorite-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;color:var(--text-secondary);transition:all .2s;display:flex;align-items:center;justify-content:center}.favorite-btn:hover{background:#ffffff1a;transform:scale(1.1)}.favorite-btn.active{color:gold}.favorite-btn.active svg{fill:gold}.collapsible-content{overflow:hidden;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;max-height:10000px;opacity:1}.collapsible-content.collapsed{max-height:0;opacity:0;margin-top:0!important;margin-bottom:0!important;pointer-events:none}.group-chevron{transition:background .2s ease}.group-chevron svg{transition:transform .3s ease}.group-chevron:hover{background:#ffffff1a}.group-chevron.collapsed svg{transform:rotate(-90deg)}