@import url(https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap);.tab-btn.active,body{color:var(--text-main)}h2,header{border-bottom:1px solid rgba(255,255,255,.05);display:flex}.brand,.tabs,h2,header{display:flex}.led,.tab-btn{transition:.3s}.btn-action,.btn-stop,.device-card,body{box-sizing:border-box}.device-card .input-group span,.manual-hint,.product-sub,h2{text-transform:uppercase}.bordered-section .section-title::before,h2::before{width:3px;height:14px;margin-right:10px;box-shadow:0 0 8px var(--primary)}.temp-unit,.temp-value{font-family:Orbitron,'Courier New',monospace}:root{--primary:#00E6CC;--primary-dark:#00B3A1;--primary-glow:rgba(0, 230, 204, 0.4);--danger:#FF4D4D;--danger-glow:rgba(255, 77, 77, 0.4);--success:#00E6CC;--accent:#FFC107;--bg-base:#0a0e14;--card-bg:rgba(20, 25, 35, 0.7);--card-border:1px solid rgba(255, 255, 255, 0.08);--text-main:#E0E6ED;--text-sub:#7A8C99;--shadow:0 10px 40px rgba(0, 0, 0, 0.6);--knob-track:rgba(255, 255, 255, 0.05);--water-color:rgba(0, 230, 204, 0.6)}body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;margin:0;padding:20px;min-height:100vh;background-color:var(--bg-base);background-image:radial-gradient(rgba(0,230,204,.05) 1.5px,transparent 1.5px),radial-gradient(circle at 50% 0,#1c2533 0,var(--bg-base) 80%);background-size:24px 24px,100% 100%;background-attachment:fixed}.container{max-width:480px;margin:0 auto;padding-bottom:60px}header{justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:15px}.brand{align-items:center;gap:12px}.brand-logo{height:26px;width:auto;opacity:.9}.product-name{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:1px;color:#fff}.version,footer a{color:var(--primary)}.version{font-size:.7rem;background:rgba(0,230,204,.15);padding:2px 6px;border-radius:4px;border:1px solid rgba(0,230,204,.3);margin-left:5px;font-weight:600}.product-sub{font-size:.7rem;color:var(--text-sub);font-weight:500;letter-spacing:1.5px}.tab-btn,h2{font-weight:600;color:var(--text-sub)}.tabs{gap:10px;margin-bottom:30px;justify-content:center;background:rgba(0,0,0,.3);padding:6px;border-radius:16px;border:var(--card-border)}#error-banner,.card,h2{margin-bottom:20px}.tab-btn{background:0 0;border:none;padding:10px 25px;border-radius:12px;cursor:pointer;font-size:.95rem;letter-spacing:.5px}.tab-btn.active{background:rgba(255,255,255,.1);box-shadow:0 0 15px rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1)}.led.on,h2::before{background:var(--primary)}.card{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:25px;box-shadow:var(--shadow);border:var(--card-border)}h2{margin-top:0;font-size:1rem;letter-spacing:2px;padding-bottom:12px;align-items:center}h2::before{content:'';display:inline-block;border-radius:2px}#current-time{font-family:sans-serif;font-weight:700;font-size:3rem;letter-spacing:-1px;color:#fff}.btn-action,.btn-stop{display:block;width:100%;padding:16px;border:none;border-radius:14px;font-size:1rem;font-weight:700;letter-spacing:1px;cursor:pointer;transition:.3s;text-align:center;text-decoration:none;background:linear-gradient(90deg,#00e6cc,#00c2b8);color:#0b1015;box-shadow:0 4px 15px rgba(0,230,204,.25)}.led,.sun-div{border-radius:50%}.btn-action:active{transform:scale(.98);opacity:.9}.btn-stop{background:linear-gradient(90deg,#ff4d4d,#c00);color:#fff;box-shadow:0 4px 15px rgba(255,77,77,.3)}.btn-restore-idle{color:var(--text-sub)!important}.led{width:6px;height:6px;background:#2a3441;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}.led.on{box-shadow:0 0 8px var(--primary),0 0 16px var(--primary-glow)}.sun-widget{position:relative;text-align:center;height:auto;margin-bottom:10px;display:flex;flex-direction:column;padding-top:10px}.sun-graph{overflow:visible;margin-top:10px}.sun-div{position:absolute;width:24px;height:24px;background:#fff;box-shadow:0 0 15px var(--accent),0 0 30px var(--accent);transform:translate(-50%,-50%);z-index:4}.time-display{position:relative;top:auto;left:auto;transform:none;width:100%;font-size:3.5rem;font-weight:800;letter-spacing:2px;color:var(--text-main);text-shadow:0 0 20px var(--primary-glow);z-index:5;margin-bottom:-20px}.sun-info{display:flex;justify-content:space-between;color:var(--text-sub);font-size:.85rem;font-weight:500}.icon-sm{width:16px;height:16px;stroke:var(--text-sub);stroke-width:2;margin-right:5px}.knob-container{position:relative;width:140px;height:140px;margin:0 auto}#light-slider,.knob-text,.water{position:absolute}.knob-bg{fill:none;stroke:var(--knob-track);stroke-width:10;stroke-linecap:round}.knob-value{fill:none;stroke:var(--primary);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--primary))}.knob-text{top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.8rem;font-weight:700;color:var(--text-main)}.manual-hint,.tank-status-text{font-weight:600;letter-spacing:1px}#light-slider{top:0;left:0;width:100%;height:100%;opacity:0;cursor:grab}.manual-hint{text-align:center;font-size:.75rem;margin-top:10px}.tank-container{position:relative;height:160px;border:2px solid rgba(255,255,255,.1);border-top:none;border-radius:0 0 4px 4px;margin:15px 0;background:rgba(0,0,0,.2);overflow:hidden}.water{bottom:0;left:0;width:100%;height:50%;background:linear-gradient(to top,rgba(0,230,204,.2),rgba(0,230,204,.4));box-shadow:0 0 20px rgba(0,230,204,.15);transition:height 2s cubic-bezier(.4, 0, .2, 1);z-index:1}.tank-status-text,.tank-timer{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute}#btn-heater-auto,#btn-heater-manual,.sensor-mark{transition:.3s}.water::after,.water::before{content:"";position:absolute;top:-10px;left:0;width:200%;height:20px;background:inherit;border-radius:50%;opacity:.5}.water::before{animation:4s linear infinite wave}.water::after{animation:6s linear infinite wave;transform:translateX(-20%)}.tank-status-text{color:#fff;font-size:.9rem;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:10}.seg-btn,footer{color:var(--text-sub)}.sensor-mark{position:absolute;right:15px;width:12px;height:12px;border-radius:50%;background:#333;border:2px solid #666;z-index:30}.sensor-mark.high{top:20%}.sensor-mark.low{bottom:30%}.sensor-mark.active{background:#0f0;border-color:#fff;box-shadow:0 0 10px #0f0}.segmented-control{display:flex;gap:10px}.seg-btn{flex:1;border:1px solid transparent;padding:12px 0;font-size:.8rem;font-weight:700;cursor:pointer;border-radius:10px;transition:.2s;background:rgba(255,255,255,.05)}.seg-btn:active{transform:scale(.96)}.t-on:active{background:rgba(0,230,204,.2);color:var(--success);border-color:var(--success)}.t-off:active{background:rgba(255,77,77,.2);color:var(--danger);border-color:var(--danger)}.dev-module{background:rgba(0,0,0,.2);border-radius:16px;padding:15px;border:1px solid rgba(255,255,255,.05);text-align:center}.dev-header{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:12px}.dev-name{font-weight:600;font-size:.85rem;color:var(--text-main)}.btn-restore-light,.btn-restore-water{color:#fff!important;opacity:1!important}input[type=number],input[type=text],select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.3);color:var(--primary);text-align:center;font-size:1rem;box-sizing:border-box;max-width:100%}input:focus,select:focus{border-color:var(--primary);outline:0;box-shadow:0 0 10px var(--primary-glow)}#error-banner{background:rgba(255,77,77,.15);color:#fcc;border:1px solid var(--danger);padding:15px;border-radius:12px}footer{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.05);text-align:center;font-size:.75rem}footer a{text-decoration:none}#theme-toggle{display:none}.hidden{display:none!important}#heater-manual-section{animation:.3s ease-in-out fadeIn}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.device-grid-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;margin-bottom:15px}.btn-restore-light{background:linear-gradient(135deg,#f59e0b,#d97706)!important;box-shadow:0 0 20px rgba(245,158,11,.4)!important}.btn-restore-water{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;box-shadow:0 0 20px rgba(239,68,68,.4)!important;animation:2s infinite pulse-red}.btn-restore-idle{background:rgba(255,255,255,.05)!important;color:var(--text-sub)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.1)!important;opacity:.5}#offline-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,20,.85);backdrop-filter:blur(8px);z-index:10000;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:opacity .3s}.reconnect-box{text-align:center;background:var(--card-bg);padding:30px;border-radius:24px;border:1px solid var(--primary);box-shadow:0 0 50px rgba(0,229,255,.2)}.spinner{width:50px;height:50px;border:4px solid rgba(0,229,255,.1);border-top:4px solid var(--primary);border-radius:50%;animation:1s linear infinite spin;margin:0 auto 20px;box-shadow:0 0 15px var(--primary-glow)}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.tank-timer{width:80px;height:80px;z-index:20;display:flex;justify-content:center;align-items:center;pointer-events:none;background:rgba(0,0,0,.6);border-radius:50%;box-shadow:0 0 20px rgba(0,229,255,.3);border:1px solid rgba(255,255,255,.1)}.timer-svg{width:100%;height:100%;transform:rotateY(180deg) rotateZ(-90deg)}.timer-bg{fill:none;stroke:rgba(255,255,255,0.1);stroke-width:2.5}.timer-ring{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray 1s linear}.timer-text{position:absolute;color:#fff;font-weight:800;font-size:1.2rem;text-shadow:0 2px 5px rgba(0,0,0,.8)}.timer-text span{font-variant-numeric:tabular-nums}.tank-container.active-timer .tank-status-text{opacity:0;transition:opacity .3s}.fish{position:absolute;width:20px;height:auto;z-index:2;opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transform-origin:center}.tank-heater,.tank-temp-badge{z-index:20;pointer-events:none}.fish-1{top:20%;animation:30s linear infinite swim}.fish-2{top:60%;animation:20s linear -5s infinite swim}.fish-3{top:40%;animation:25s linear -10s infinite swim}@keyframes swim{0%,100%{left:10px;transform:scaleX(-1)}45%{left:calc(100% - 30px);transform:scaleX(-1)}50%{left:calc(100% - 40px);transform:scaleX(1)}95%{left:10px;transform:scaleX(1)}}.device-card{background:rgba(0,0,0,.2);border-radius:16px;border:1px solid rgba(255,255,255,.05);padding:15px;box-shadow:inset 0 1px 3px rgba(0,0,0,.2);margin-bottom:0;transition:transform .2s;text-align:left;color:var(--text-main)}.btn-mini,.device-card .device-name,.device-card .device-name:hover .edit-icon,.temp-unit,.temp-value,input[type=number]{color:var(--primary)}.device-card .device-name{font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center}.device-card .edit-icon{font-size:12px;color:rgba(0,230,204,.4);margin-left:8px;transition:color .3s}.device-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}.device-card .input-group input,.device-card input[type=time]{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--primary);font-weight:700;font-family:'Segoe UI',monospace;font-size:.9rem;padding:4px 8px;text-align:center;outline:0;width:auto}.device-card input:focus{border-color:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.device-card .input-group span{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.5px}.device-card .timer-area label{font-size:.8rem;color:var(--text-sub);display:flex;align-items:center;gap:6px;cursor:pointer}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}.device-card .timer-inputs{display:flex;flex-direction:column;gap:8px;margin-top:10px}.device-card .input-group{display:flex;justify-content:space-between;align-items:center}@media (max-width:768px){header{flex-direction:row;gap:10px}.product-name{font-size:1.1rem}.product-sub{font-size:.55rem;display:block;margin-top:2px;opacity:.8}.brand-logo{height:24px}.device-grid-wrapper{grid-template-columns:repeat(2,1fr)!important;gap:10px}.btn-action,.btn-stop,.tab-btn{padding:12px;font-size:.9rem}.card{padding:15px}footer{font-size:.65rem}.card-grid{grid-template-columns:1fr}}.toggle-switch{position:relative;display:inline-block;width:40px;height:22px}.slider,.slider:before,.tank-heater,.tank-temp-badge{position:absolute}.toggle-switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#374151;transition:.4s;border-radius:22px}.slider:before{content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translateX(18px)}input[type=number]{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px}.bordered-section{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--card-border);border-radius:20px;padding:25px;margin-bottom:20px;box-shadow:var(--shadow)}.bordered-section .section-title{font-size:1rem;font-weight:600;color:var(--text-sub);text-transform:uppercase;letter-spacing:2px;margin-top:0;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center}.bordered-section .section-title::before{content:"";display:inline-block;background-color:var(--primary);border-radius:2px}#btn-heater-auto.active,#btn-heater-manual.active,#btn-heater-off.active,#btn-heater-on.active{background:var(--primary)!important;color:#000!important;border-color:var(--primary)!important;box-shadow:0 0 15px var(--primary-glow);font-weight:700}#btn-heater-off:not(.active),#btn-heater-on:not(.active){background-color:transparent;color:var(--text-main);box-shadow:none}.btn-mini{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:8px 15px;border-radius:8px;cursor:pointer;font-weight:700;font-size:.85rem;transition:.2s}.btn-mini:active{background:var(--primary);color:#000}.tank-temp-badge{top:15px;left:5px;background:0 0;border:none;box-shadow:none;backdrop-filter:none;padding:0;line-height:.8}.temp-value{font-size:1.2rem;font-weight:100;letter-spacing:1px;text-shadow:0 0 10px var(--primary-glow),0 0 20px var(--primary-glow),0 2px 5px rgba(0,0,0,.8)}.temp-unit{font-size:1rem;opacity:.8;margin-left:4px;vertical-align:top;text-shadow:0 0 8px var(--primary-glow)}.tank-heater{bottom:0;left:10px;width:15px;height:90px}.heater-body{width:100%;height:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);border-radius:2px 2px 7.5px 7.5px;box-shadow:inset 0 0 10px rgba(0,0,0,.5);position:relative;overflow:hidden}.heater-coil{position:absolute;top:40px;left:4px;right:4px;bottom:20px;background:repeating-linear-gradient(0deg,transparent,transparent 5px,rgba(255,255,255,.2) 5px,rgba(255,255,255,.2) 7px);border-radius:0 0 5px 5px}.heater-led{position:absolute;top:15px;left:3.5px;width:8px;height:8px;border-radius:50%;background-color:#555;box-shadow:inset 0 0 2px #000;transition:.3s;border:1px solid rgba(0,0,0,.5)}.heater-led.heating{background-color:#0f0;box-shadow:0 0 8px #0f0;animation:1.5s infinite pulse-green;border-color:#0f0}.heater-led.standby{background-color:#1b5e20;box-shadow:none;border-color:#2e7d32}@keyframes pulse-red{0%,100%{opacity:.7;box-shadow:0 0 5px #0f0}50%{opacity:1;box-shadow:0 0 12px #0f0}}.seg-btn.manual-active{background-color:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important}.env-grid{display:flex;flex-direction:row;align-items:center;gap:20px}.env-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.time-display-large{font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 0 15px rgba(14,165,233,.5);font-family:Orbitron,sans-serif;margin-bottom:5px}.sun-graph-wrapper{position:relative;width:100%;height:60px;margin-bottom:5px}.knob-compact svg,.sun-graph{width:100%;height:100%}.sun-info-compact{display:flex;justify-content:space-between;width:100%;font-size:.8rem;color:rgba(255,255,255,.6);padding:0 10px}.env-divider{width:1px;height:120px;background:rgba(255,255,255,.1)}.knob-compact{position:relative;width:120px;height:120px;margin-bottom:10px}.knob-compact svg{transform:rotate(0);overflow:visible}.knob-text-compact{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3)}.compact-slider{width:90%;margin:8px 0;height:6px;cursor:pointer}.manual-hint.compact{font-size:.8rem;margin-top:5px;opacity:.8}@media (max-width:600px){.env-grid{flex-direction:column;gap:20px}.env-divider{width:100%;height:1px;margin:10px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.light-section{padding-bottom:10px}}.accent-arrow{color:var(--accent);font-weight:700;margin-right:2px;font-family:sans-serif}#toast-container{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.toast{background:rgba(15,23,42,.9);color:#fff;padding:10px 20px;border-radius:50px;box-shadow:0 5px 15px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(5px);display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;opacity:0;transform:translateY(20px) scale(.9);transition:.3s cubic-bezier(.68, -.55, .27, 1.55)}.toast.show{opacity:1;transform:translateY(0) scale(1)}.toast.success{border-left:4px solid var(--success)}.toast.error{border-left:4px solid var(--danger)}.toast.info{border-left:4px solid var(--primary)}.toast span:first-child{font-size:1.1rem}.btn-mode{padding:6px 15px;border:none;border-radius:20px;font-size:14px;cursor:pointer;font-weight:700;color:#fff;transition:.3s;margin-left:10px}.mode-heat{background-color:#ff9800;box-shadow:0 2px 5px rgba(255,152,0,.4)}.mode-cool{background-color:#2196f3;box-shadow:0 2px 5px rgba(33,150,243,.4)}.btn-mode:active{transform:scale(.95)}