:root{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:#0c4a6e;background-color:#f0f9ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}.brita-demo-banner{position:absolute;top:.75rem;right:.75rem;margin:0;font-size:.75rem;color:var(--brita-gray);background:#ffffffe6;padding:.25rem .5rem;border-radius:6px;border:1px solid rgba(14,165,233,.3)}.brita-dashboard{--brita-blue: #00a3e0;--brita-blue-dark: #0082b3;--brita-water: #7dd3fc;--brita-water-deep: #0ea5e9;--brita-white: #f0f9ff;--brita-green: #22c55e;--brita-gray: #64748b;--pitcher-bg: #e0f2fe;--pitcher-border: #0ea5e9;position:relative;min-height:100vh;padding:2rem 1.5rem;font-family:system-ui,-apple-system,sans-serif;background:linear-gradient(180deg,#f0f9ff,#e0f2fe,#bae6fd);color:#0c4a6e}.app-shell{max-width:1120px;margin:0 auto;padding-bottom:3rem}.app-shell__header{text-align:center;margin-bottom:2rem;padding:0 .25rem}.app-shell__title{margin:0 0 .5rem;font-size:clamp(1.5rem,4vw,2rem);font-weight:800;letter-spacing:-.03em;color:#0c4a6e}.app-shell__subtitle{margin:0 auto;max-width:36rem;font-size:.95rem;line-height:1.55;color:var(--brita-gray)}.app-shell__main{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}@media(min-width:960px){.app-shell__main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.75rem}}.app-shell__panel{background:#ffffffeb;border:1px solid rgba(14,165,233,.18);border-radius:16px;box-shadow:0 4px 6px -1px #0ea5e914,0 12px 24px -8px #0c4a6e1f;overflow:hidden}.app-shell__panel-heading{margin:0;padding:1rem 1.25rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0369a1;background:linear-gradient(180deg,#e0f2fee6,#fff9);border-bottom:1px solid rgba(14,165,233,.12)}.app-shell__panel-body{padding:0}.app-shell__panel-body--flush .settings-page,.app-shell__panel-body--flush .guide-page{max-width:none;margin:0;padding:1rem 1.25rem 1.25rem;box-shadow:none;border:none;background:transparent}.brita-header{text-align:center;margin-bottom:2rem}.brita-header h1{font-size:1.75rem;font-weight:700;color:#0c4a6e;margin:0 0 .5rem;letter-spacing:-.02em}.status-row{display:flex;align-items:center;justify-content:center;gap:.5rem}.status-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;transition:box-shadow .2s,background-color .2s}.status-dot--full{background-color:var(--brita-green);box-shadow:0 0 0 2px #22c55e66}.status-dot--empty{background-color:var(--brita-gray);box-shadow:0 0 0 2px #64748b4d}.status-label{font-size:.875rem;color:var(--brita-gray);font-weight:500}.brita-empty-state{text-align:center;padding:3rem;color:var(--brita-gray)}.brita-pitcher-wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem;margin-bottom:1.5rem}.brita-pitcher{position:relative;width:140px;height:200px}.brita-pitcher__body{position:absolute;left:20px;top:0;width:100px;height:100%;border:3px solid var(--pitcher-border);border-radius:0 0 24px 24px;background:var(--pitcher-bg);overflow:hidden;box-shadow:inset 0 -4px 12px #0ea5e926}.brita-pitcher__water{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,var(--brita-water) 0%,var(--brita-water-deep) 100%);border-radius:0 0 21px 21px;box-shadow:inset 0 2px 8px #fff6}.brita-pitcher__water--animate{transition:height .8s cubic-bezier(.33,1,.68,1)}.brita-pitcher__spout{position:absolute;top:8px;right:-8px;width:24px;height:32px;border:3px solid var(--pitcher-border);border-left:none;border-radius:0 12px 12px 0;background:var(--pitcher-bg)}.brita-pitcher__handle{position:absolute;top:24px;left:-16px;width:20px;height:100px;border:3px solid var(--pitcher-border);border-right:none;border-radius:12px 0 0 12px;background:var(--pitcher-bg)}.brita-percent{margin:0;font-size:2.5rem;font-weight:700;color:#0c4a6e;line-height:1}.brita-percent__unit{font-size:1.25rem;font-weight:600;color:var(--brita-blue-dark);margin-left:2px}.brita-meta{text-align:center;padding:1rem 1.5rem;background:#ffffffb3;border-radius:12px;max-width:360px;margin:0 auto;border:1px solid rgba(14,165,233,.2)}.brita-meta__updated{margin:0 0 .25rem;font-size:.9rem;font-weight:600;color:#0c4a6e}.brita-meta__updated time{font-weight:500;color:var(--brita-gray)}.brita-meta__detail{margin:0;font-size:.8rem;color:var(--brita-gray)}@media(min-width:480px){.brita-pitcher{width:160px;height:240px}.brita-pitcher__body{left:24px;width:112px;border-radius:0 0 28px 28px}.brita-pitcher__water{border-radius:0 0 25px 25px}.brita-percent{font-size:3rem}}.brita-nav{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid #e2e8f0;margin-bottom:16px}.brita-nav__item{background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 14px;font-size:.95rem;cursor:pointer;color:#475569}.brita-nav__item--active{background:#0ea5e9;color:#fff}.settings-page{max-width:560px;margin:0 auto;padding:16px;text-align:left}.settings-section{margin-top:16px;padding:16px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}.settings-hint{color:#64748b;font-size:.9rem;line-height:1.4}.settings-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}.settings-form label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:#334155}.settings-form input{padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:1rem}.settings-button{padding:8px 14px;border:none;border-radius:8px;font-size:.95rem;cursor:pointer}.settings-button--danger{background:#dc2626;color:#fff}.settings-button--primary{background:#0ea5e9;color:#fff}.settings-button:disabled{opacity:.6;cursor:not-allowed}.settings-link{background:transparent;border:none;color:#0ea5e9;cursor:pointer;font-size:inherit;padding:0}.settings-error{color:#dc2626;margin-top:12px}.status-active{color:#16a34a}.status-inactive{color:#dc2626}.guide-page{max-width:720px;margin:0 auto;padding:16px;text-align:left}.guide-intro{color:#475569;font-size:.95rem;line-height:1.5}.guide-steps{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:12px}.guide-step{display:flex;gap:14px;padding:14px 16px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;align-items:flex-start}.guide-step__num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#0ea5e9;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}.guide-step__body h3{margin:0 0 4px;font-size:1rem;color:#0f172a}.guide-step__body p{margin:0;color:#475569;font-size:.9rem;line-height:1.45}.guide-footer{margin-top:16px;color:#64748b;font-size:.85rem;line-height:1.5}