@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap";#root{min-height:100vh}.home-shell{position:relative;min-height:100vh;padding:clamp(1rem,3vw,2.6rem);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:1rem;overflow:hidden}.home-glow{position:absolute;border-radius:999px;filter:blur(26px);pointer-events:none}.home-glow-one{width:340px;height:340px;background:#0d766e38;top:-70px;left:-80px;animation:floatGlow 7s ease-in-out infinite}.home-glow-two{width:290px;height:290px;background:#f9a82538;bottom:-80px;right:-80px;animation:floatGlow 9s ease-in-out infinite reverse}.home-main-card,.home-side-card{position:relative;z-index:2;border:1px solid rgba(18,58,54,.18);background:var(--surface-elevated);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft)}.home-main-card{border-radius:24px;padding:clamp(1.1rem,2.8vw,2rem);display:flex;flex-direction:column;gap:1.1rem}.home-intro{display:flex;flex-direction:column;gap:.85rem}.welcome-container{width:fit-content;display:inline-flex;align-items:center;gap:.5rem;padding:.46rem .74rem;border-radius:999px;color:var(--text-on-dark);background:linear-gradient(120deg,#184846,#0f8c84);font-size:.82rem;font-weight:600}.welcome-text{letter-spacing:.02em}.home-brand-mark{display:flex;align-items:center;gap:.8rem;color:#0f6a63}.home-title{font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.05;text-wrap:balance}.home-subtitle{color:var(--text-secondary);max-width:66ch;font-size:.96rem}.home-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.78rem}.feature-card{display:flex;flex-direction:column;gap:.42rem;border-radius:16px;padding:.84rem;border:1px solid var(--border-soft);background:var(--surface-strong)}.feature-card h2{font-size:1rem;line-height:1.2}.feature-card p{color:var(--text-secondary);font-size:.83rem}.feature-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#0f6a63;background:#0f8c8421}.home-button{border:none;width:fit-content;display:inline-flex;align-items:center;gap:.56rem;cursor:pointer;border-radius:12px;padding:.7rem 1rem;font-weight:700;color:#f3fffd;background:linear-gradient(120deg,#0f8c84,#0c5f59);box-shadow:0 14px 28px #0c5f5959;transition:transform .24s ease,box-shadow .24s ease}.home-button:hover{transform:translateY(-1px);box-shadow:0 18px 34px #0c5f5966}.home-connection-pill{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;color:#0f6a63;background:#0f8c841f;border:1px solid rgba(15,140,132,.24);border-radius:999px;padding:.4rem .75rem;font-size:.8rem;font-weight:600}.home-side-card{border-radius:18px;background:linear-gradient(145deg,#184846,#102f2d);color:#e5f8f5;display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:clamp(1.1rem,2.8vw,1.8rem)}.clock-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:#e5f8f5bd}.clock-time{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);line-height:1}.clock-date{color:#e5f8f5d1;text-transform:capitalize}@keyframes floatGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@media (max-width: 960px){.home-shell,.home-features{grid-template-columns:1fr}.home-side-card{order:-1;padding:1rem}}@media (max-width: 480px){.home-shell{padding:.8rem}.home-main-card,.home-side-card{border-radius:16px}.home-brand-mark{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion: reduce){.home-glow,.home-button{animation:none;transition:none}}.diagnostic-button{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:999px;border:1px solid rgba(8,91,84,.45);background:linear-gradient(135deg,#0f8c84,#0d766e);color:#effffb;cursor:pointer;box-shadow:0 16px 34px #093f3f4d;display:grid;place-items:center;z-index:999;transition:transform .24s ease,box-shadow .24s ease}.diagnostic-button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 20px 40px #093f3f61}.diagnostic-panel{position:fixed;right:24px;bottom:92px;width:min(390px,calc(100vw - 2rem));max-height:min(560px,calc(100vh - 8rem));background:linear-gradient(180deg,#fcfffe,#f2fdfb);border:1px solid rgba(13,86,82,.22);border-radius:18px;box-shadow:var(--shadow-strong);display:flex;flex-direction:column;z-index:1000;overflow:hidden;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.diagnostic-header{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(125deg,#154543,#1f6863);color:#e9fff8;padding:14px 16px}.diagnostic-header h3{margin:0;font-size:.95rem;font-weight:600}.close-button{background:none;border:none;color:#e9fff8;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:999px;transition:background-color .2s}.close-button:hover{background-color:#f4ffff33}.diagnostic-content{flex:1;padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.diagnostic-empty{padding:14px;border-radius:12px;border:1px dashed rgba(19,83,77,.28);color:var(--text-secondary)}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background-color:#f4fdfc;border:1px solid rgba(17,50,48,.12);border-radius:10px;font-size:14px}.stat-item label{font-weight:600;color:#555}.stat-value{font-weight:700;padding:4px 10px;border-radius:999px;background-color:#ddf6f2;color:#0f766e}.stat-value.error{background-color:#fee2e2;color:#b91c1c}.stat-value.ok{background-color:#ddf6f2;color:#0f766e}.recent-errors{background-color:#fff8e8;padding:12px;border-radius:10px;border-left:4px solid #d97706}.recent-errors h4{margin:0 0 8px;font-size:.82rem;color:#8a4c04}.error-list{display:flex;flex-direction:column;gap:6px}.error-item{display:flex;gap:8px;font-size:.74rem;padding:6px;background-color:#ffffffd1;border-radius:6px}.error-time{font-weight:600;color:#8a4c04;min-width:70px}.error-value{background-color:#fee2e2;color:#b91c1c;padding:2px 6px;border-radius:3px;font-weight:600}.error-msg{color:#8a4c04;flex:1}.diagnostic-tips{background-color:#e9f9f6;padding:10px 12px;border-radius:10px;border-left:4px solid #0f8c84}.diagnostic-tips h4{margin:0 0 8px;font-size:.82rem;color:#0b5d58}.diagnostic-tips ul{margin:0;padding-left:20px;font-size:.74rem;color:#0b5d58}.diagnostic-tips li{margin:4px 0}@media (max-width: 480px){.diagnostic-panel{width:calc(100vw - 20px);max-height:min(470px,calc(100vh - 7rem));right:10px;bottom:84px}.diagnostic-button{right:14px;bottom:14px;width:52px;height:52px}}@media (prefers-reduced-motion: reduce){.diagnostic-button,.diagnostic-panel{animation:none;transition:none}}.utility-container{min-height:100vh;padding:clamp(.8rem,2.4vw,1.3rem);display:flex;flex-direction:column;gap:1rem}.utility-header,.control-container,.distance-container,.utility-footer{border:1px solid var(--border-soft);border-radius:18px;box-shadow:var(--shadow-soft)}.utility-header{width:min(1100px,100%);margin:0 auto;padding:.95rem 1rem;background:linear-gradient(130deg,#153f3d,#0f6a63);color:var(--text-on-dark);display:flex;justify-content:space-between;align-items:center;gap:.8rem}.utility-header-main{display:flex;align-items:center;gap:.72rem}.utility-header h1{margin:0;font-size:clamp(1.2rem,3vw,1.6rem)}.utility-header p{margin-top:.16rem;color:#f0fffcc7;font-size:.84rem}.back-button{width:36px;height:36px;border-radius:10px;border:1px solid rgba(232,255,252,.28);background:#eafff924;color:#e8fffc;cursor:pointer;display:grid;place-items:center;transition:transform .2s ease,background-color .2s ease}.back-button:hover{transform:translate(-1px);background:#eafff93d}.connection-pill{display:inline-flex;align-items:center;padding:.33rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.01em}.connection-pill.online{background:#22c55e3b;border:1px solid rgba(134,239,172,.42);color:#ecfdf3}.connection-pill.offline{background:#fbbf2433;border:1px solid rgba(253,230,138,.42);color:#fff8db}.utility-content{width:min(1100px,100%);margin:0 auto;flex:1}.utility-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.utility-stack{display:flex;flex-direction:column;gap:1rem}.distance-container,.control-container{background:var(--surface-elevated);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1rem}.distance-container{display:flex;align-items:center;gap:.95rem}.distance-visual{width:148px;height:148px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,#d9f5f1,#effffb);border:1px solid rgba(17,50,48,.14)}.distance-info{display:flex;flex-direction:column;gap:.5rem}.distance-label{color:var(--text-secondary);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.distance-value{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.25rem);line-height:1;color:#0e6d66}.control-container{display:flex;flex-direction:column;gap:.8rem}.control-headline{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.control-header{margin:0;font-size:1.08rem;color:#113f3d}.control-row{display:flex;align-items:center;flex-wrap:wrap;gap:.62rem}.control-row-split{justify-content:space-between}.control-label{font-size:.92rem;color:var(--text-secondary);font-weight:600}.control-hint{font-size:.8rem;color:var(--text-secondary)}.control-error{padding:.55rem .62rem;border-radius:10px;border:1px solid rgba(185,28,28,.24);background:#fee2e2b8;color:#991b1b;font-size:.82rem;font-weight:600}.toggle-switch{width:52px;height:30px;position:relative}.toggle-checkbox{position:absolute;width:100%;height:100%;opacity:0;margin:0;z-index:2;cursor:pointer}.toggle-label{display:block;width:100%;height:100%;border-radius:999px;background:#b8ccca;border:1px solid rgba(17,50,48,.2);transition:background-color .25s ease;position:relative}.toggle-label:before{content:"";width:22px;height:22px;border-radius:999px;background:#fff;position:absolute;top:3px;left:3px;box-shadow:0 3px 6px #08222342;transition:transform .25s ease}.toggle-checkbox:checked+.toggle-label{background:#0f8c84}.toggle-checkbox:checked+.toggle-label:before{transform:translate(22px)}.toggle-checkbox:disabled+.toggle-label{opacity:.56;cursor:not-allowed}.pump-icon-button{width:54px;height:54px;border-radius:14px;border:1px solid rgba(15,106,99,.26);background:#0f8c8414;color:#0f766e;cursor:pointer;display:grid;place-items:center;transition:transform .2s ease,background-color .2s ease}.pump-icon-button.active{background:#f973162e;border-color:#f9731666;color:#c2410c}.pump-icon-button:hover:not(:disabled){transform:translateY(-1px)}.pump-icon-button:disabled{opacity:.5;cursor:not-allowed}.on-off-button{border:none;border-radius:12px;padding:.72rem 1rem;font-size:.9rem;font-weight:700;cursor:pointer;color:#f3fffd;background:linear-gradient(130deg,#0f8c84,#0c5f59);box-shadow:0 10px 22px #0c5f594d;transition:transform .2s ease,box-shadow .2s ease}.on-off-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 26px #0c5f595c}.on-off-button:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed}.status-badge,.sensor-status,.auto-mode-status,.chip{width:fit-content;border-radius:999px;font-size:.76rem;font-weight:700;padding:.34rem .66rem;letter-spacing:.02em}.status-badge.running{background:#f973162e;color:#9a3412}.status-badge.stopped,.sensor-status.ok{background:#10b9812e;color:#065f46}.sensor-status.warning{background:#f59e0b33;color:#9a3412}.sensor-status.error{background:#ef444433;color:#991b1b}.sensor-status.neutral{background:#94a3b838;color:#334155}.auto-mode-status.enabled,.chip-success{background:#10b9812e;color:#065f46}.auto-mode-status.disabled,.chip-neutral{background:#94a3b838;color:#334155}.chip-warning{background:#f59e0b33;color:#9a3412}.timeout-warning,.auto-error-warning,.pump-runtime,.last-updated{font-size:.82rem;border-radius:10px;padding:.6rem .68rem}.timeout-warning{border:1px solid rgba(217,119,6,.28);background:#fef08a59;color:#8a4c04}.auto-error-warning{border:1px solid rgba(185,28,28,.3);background:#fee2e2cc;color:#991b1b}.pump-runtime{border:1px solid rgba(14,116,144,.2);background:#bae6fd66;color:#075985}.last-updated{background:#94a3b82b;color:#475569}.utility-footer{width:min(1100px,100%);margin:0 auto;padding:.72rem 1rem;background:#ffffff9e}.utility-footer p{text-align:center;color:#527173;font-size:.76rem}@media (max-width: 980px){.utility-grid{grid-template-columns:1fr}}@media (max-width: 720px){.utility-header,.distance-container{flex-direction:column;align-items:flex-start}.distance-visual{width:100%}.control-row-split{justify-content:flex-start}.on-off-button{width:100%}}@media (prefers-reduced-motion: reduce){.back-button,.pump-icon-button,.on-off-button{transition:none}}:root{--font-display: "Chakra Petch", sans-serif;--font-body: "Manrope", sans-serif;--bg-page: #e8f7f6;--bg-gradient-a: rgba(8, 126, 119, .2);--bg-gradient-b: rgba(250, 190, 88, .16);--surface: #ffffff;--surface-elevated: rgba(255, 255, 255, .8);--surface-strong: #f6fffe;--surface-dark: #113230;--text-primary: #183032;--text-secondary: #4d6667;--text-on-dark: #ecfffc;--accent: #0f8c84;--accent-strong: #0a6d66;--accent-soft: rgba(15, 140, 132, .14);--warn: #d97706;--danger: #b91c1c;--success: #0f766e;--border-soft: rgba(17, 50, 48, .12);--shadow-soft: 0 10px 30px rgba(11, 35, 37, .12);--shadow-strong: 0 26px 60px rgba(11, 35, 37, .2)}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{font-family:var(--font-body);color:var(--text-primary);background:radial-gradient(circle at 9% 11%,var(--bg-gradient-a),transparent 35%),radial-gradient(circle at 88% 0%,var(--bg-gradient-b),transparent 41%),var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);letter-spacing:.02em}p{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}:focus-visible{outline:3px solid rgba(15,140,132,.35);outline-offset:2px}