:root{--bg: #f6f3ee;--surface: #ffffff;--surface-2: #f1ece4;--border: #e3dbcf;--text: #2a241d;--muted: #7a6f62;--accent: #c7761a;--accent-ink: #ffffff;--accent-soft: #f7e6cf;--ok: #3f8f4f;--warn: #c2512f;--nav: #1f1a14;--nav-text: #d9cfc1;--radius: 12px;--shadow: 0 1px 2px rgb(40 30 20 / 6%), 0 4px 16px rgb(40 30 20 / 5%);color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #15120e;--surface: #1f1b16;--surface-2: #29231d;--border: #3a3229;--text: #efe7dc;--muted: #a3978a;--accent: #e8973a;--accent-ink: #1b140c;--accent-soft: #3b2b18;--ok: #6cbf7b;--warn: #ef7a58;--nav: #0f0d0a;--shadow: none;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}a{color:inherit}h1,h2,h3{margin:0;line-height:1.2}h1{font-size:1.6rem}h2{font-size:1.05rem}.muted{color:var(--muted);margin:0}.small{font-size:.85rem}.center{text-align:center}.grow{flex:1 1 auto}.shell{display:grid;grid-template-columns:220px 1fr;min-height:100%}.nav{background:var(--nav);color:var(--nav-text);padding:20px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;color:#fff;padding:0 10px 18px}.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--nav-text);font-weight:500}.nav-link:hover{background:#ffffff0f}.nav-link.active{background:#e8973a2e;color:#f6b46a}.main{min-width:0}.page{max-width:1100px;margin:0 auto;padding:28px 28px 80px;display:flex;flex-direction:column;gap:18px}@media (max-width: 760px){.shell{grid-template-columns:1fr}.nav{position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;z-index:10;flex-direction:row;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}.brand{display:none}.nav-link{flex-direction:column;gap:2px;font-size:.7rem;padding:6px 8px}.page{padding:18px 16px 100px}h1{font-size:1.35rem}}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.row-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 14px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.55;cursor:default;border-color:var(--border)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover{filter:brightness(1.06)}.btn.danger{color:var(--warn)}.btn.danger:hover{border-color:var(--warn)}.btn.picker{padding-right:10px}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);border-radius:8px;width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;align-self:end}.icon-btn:hover{background:var(--surface-2);color:var(--warn)}input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 9px;min-width:0;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}.search{max-width:420px;padding:10px 12px}.notes{resize:vertical}.field{display:flex;flex-direction:column;gap:4px;min-width:0}.field>span{font-size:.75rem;color:var(--muted);font-weight:500}.num{position:relative;display:flex;align-items:center}.num input{padding-right:2.6em;font-variant-numeric:tabular-nums}.num .suffix{position:absolute;right:9px;font-size:.75rem;color:var(--muted);pointer-events:none}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.grid-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.kv{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:.9rem}.kv b{color:var(--text);font-variant-numeric:tabular-nums}.empty{text-align:center;padding:48px 16px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);display:grid;gap:10px;justify-items:center}.empty h3{color:var(--text)}.notice{background:var(--accent-soft);border-radius:10px;padding:10px 14px;font-size:.9rem}.notice ul{margin:6px 0 0;padding-left:18px}.swatch{display:inline-block;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px #00000026;vertical-align:middle}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.recipe-card{display:flex;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}.recipe-card:hover{border-color:var(--accent);transform:translateY(-1px)}.recipe-card-body{display:flex;flex-direction:column;gap:4px;min-width:0}.recipe-card h3{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chips span{background:var(--surface-2);border-radius:999px;padding:2px 9px;font-size:.78rem;font-variant-numeric:tabular-nums}.title-edit{display:flex;align-items:center;gap:12px;flex:1 1 320px;min-width:0}.title-input{font-size:1.5rem;font-weight:700;border-color:transparent;background:transparent;padding:4px 6px}.title-input:hover{border-color:var(--border)}.meta-row{display:grid;grid-template-columns:minmax(200px,360px) minmax(160px,260px);gap:12px}@media (max-width: 560px){.meta-row{grid-template-columns:1fr}}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:4px}.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}.stat-value{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}.stat-value small{font-size:.75rem;color:var(--muted);font-weight:500}.range{position:relative;height:6px;background:var(--surface-2);border-radius:3px}.range-band{position:absolute;left:25%;right:25%;top:0;bottom:0;background:color-mix(in srgb,var(--ok) 35%,transparent);border-radius:3px}.range-mark{position:absolute;top:-3px;width:4px;height:12px;margin-left:-2px;border-radius:2px;background:var(--text)}.stat-range{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.stat.ok .stat-value{color:var(--ok)}.stat.low .range-mark,.stat.high .range-mark{background:var(--warn)}.stat.low .stat-value,.stat.high .stat-value{color:var(--warn)}@media (max-width: 760px){.stats{position:static;grid-template-columns:repeat(3,1fr)}.stat-value{font-size:1.1rem}}.rows{display:flex;flex-direction:column;gap:8px}.row{display:grid;gap:10px;align-items:end;padding:8px 0;border-bottom:1px solid var(--border)}.row:last-child{border-bottom:none}.row.ferm{grid-template-columns:minmax(160px,1fr) 110px 100px 100px 100px 60px 34px}.row.hop{grid-template-columns:minmax(160px,1fr) 90px 90px 120px 100px 60px 34px}.row.yeast{grid-template-columns:minmax(160px,1fr) 120px 34px}.row.mash{grid-template-columns:minmax(160px,1fr) 100px 100px 34px}.row.inv{grid-template-columns:minmax(160px,1fr) 140px 34px}.row.inv.out input{color:var(--warn)}.row.inv-form{grid-template-columns:150px minmax(160px,1fr) 120px 90px auto;border:none}.row.reading-form{grid-template-columns:150px 110px 100px minmax(140px,1fr) auto;border:none}.cell-info{display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums;padding-bottom:7px}.cell-info span{font-size:.75rem;color:var(--muted)}@media (max-width: 900px){.row.ferm,.row.hop{grid-template-columns:repeat(3,minmax(0,1fr))}.row.ferm>.grow,.row.hop>.grow{grid-column:1 / -1}.row.ferm>.icon-btn,.row.hop>.icon-btn{justify-self:end}.row.inv-form,.row.reading-form{grid-template-columns:1fr 1fr}.row.inv-form>.grow,.row.reading-form>.grow{grid-column:1 / -1}}@media (max-width: 560px){.row.mash{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}.row.mash>.grow{grid-column:1 / -1}}.filter-chips{display:flex;gap:6px;flex-wrap:wrap}.filter-chips button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;cursor:pointer}.filter-chips button small{color:var(--muted);margin-left:4px}.filter-chips button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.filter-chips button.active small{color:inherit}.list{display:flex;flex-direction:column;gap:8px}.list-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none}.list-item:hover{border-color:var(--accent)}.badge{font-size:.75rem;padding:3px 10px;border-radius:999px;background:var(--surface-2);white-space:nowrap;font-weight:600}.badge.s-fermenting{background:var(--accent-soft);color:var(--accent)}.badge.s-completed{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.stepper button{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:9px 6px;border-radius:10px;font:inherit;font-size:.85rem;cursor:pointer}.stepper li.done button{color:var(--text);background:var(--surface-2)}.stepper li.current button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}@media (max-width: 560px){.stepper{grid-template-columns:repeat(3,1fr)}}.chart{width:100%;height:auto}.chart .grid{stroke:var(--border);stroke-dasharray:3 4}.chart .axis{fill:var(--muted);font-size:11px}.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}.chart .dot{fill:var(--surface);stroke:var(--accent);stroke-width:2}.table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}.table th{text-align:left;color:var(--muted);font-weight:500;font-size:.78rem;padding:6px 8px;border-bottom:1px solid var(--border)}.table td{padding:6px 8px;border-bottom:1px solid var(--border)}.ingredients{margin:0;padding-left:18px;display:grid;gap:4px}.nav-foot{margin-top:auto;padding:8px 4px 0}.sync-badge{display:flex;align-items:center;gap:8px;width:100%;border:none;background:#ffffff0d;color:var(--nav-text);font:inherit;font-size:.78rem;padding:7px 10px;border-radius:8px;cursor:pointer;text-align:left}.sync-badge.local{cursor:default}.sync-badge i{width:8px;height:8px;border-radius:50%;background:#7fbf86;flex:none}.sync-badge.local i{background:#9b8f80}.sync-badge.saving i,.sync-badge.pending i{background:#e8b13a}.sync-badge.offline i{background:#9b8f80}.sync-badge.error i{background:#ef7a58}@media (max-width: 760px){.nav-foot{display:none}}.banner{background:var(--accent-soft);color:var(--text);padding:10px 28px;font-size:.9rem}.banner.error{background:color-mix(in srgb,var(--warn) 18%,var(--surface))}.splash{height:100%;display:grid;place-items:center}.splash img{opacity:.7;animation:pulse 1.2s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.25}}.login{min-height:100%;display:grid;place-items:center;padding:16px}.login-card{width:min(360px,100%);align-items:center;text-align:center;gap:12px}.login-card .field{width:100%;text-align:left}.login-card .btn{width:100%;justify-content:center;padding:10px}.error-text{color:var(--warn);margin:0;font-size:.9rem}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}.dot.live{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}.dot.stale{background:var(--muted)}.device-title{display:flex;align-items:center;gap:10px;flex:1 1 260px}.device-title input{font-weight:600;font-size:1.05rem}.device-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.device-stats>div{background:var(--surface-2);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column}.device-stats span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}.device-stats b{font-size:1.1rem;font-variant-numeric:tabular-nums}.device-stats small{color:var(--muted)}.setup{background:var(--surface-2);border-radius:10px;padding:10px 14px}.setup summary{cursor:pointer;font-weight:600}.setup ol{padding-left:18px}.setup-grid{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 8px}.setup-grid dt{color:var(--muted)}.setup-grid dd{margin:0;word-break:break-all}.setup code{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 6px;-webkit-user-select:all;user-select:all}.linked-device{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.linked-device .btn{margin-left:auto}h3.sub{font-size:.95rem;margin-top:4px}.chart .line.temp{stroke:#4a8fd8;stroke-width:1.6;stroke-dasharray:5 3}.chart .axis.temp{fill:#4a8fd8}.chart .og-line{stroke:var(--muted);stroke-dasharray:2 4}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}.legend span:before{content:"";display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle;background:var(--accent)}.legend .lg-temp:before{background:#4a8fd8}.legend .lg-og:before{background:var(--muted)}.legend .lg-manual:before{width:8px;height:8px;border-radius:50%;border:2px solid var(--accent);background:var(--surface)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}.tool .grid-fields{grid-template-columns:repeat(2,1fr)}.tool .result{display:flex;flex-wrap:wrap;gap:6px 18px;background:var(--surface-2);border-radius:10px;padding:10px 14px}.tool .result b{font-size:1.1rem;font-variant-numeric:tabular-nums}@media (max-width: 400px){.tools-grid{grid-template-columns:1fr}}.row.add-device{grid-template-columns:minmax(0,1fr) auto;border:none}.water-block{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--border)}.water-block h3{font-size:.98rem}.water-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.ion-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}@media (max-width: 760px){.ion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.check{display:inline-flex;align-items:center;gap:8px;font-size:.9rem}.check input,.salt-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.salt-table,.ion-table{display:flex;flex-direction:column}.salt-row{display:grid;grid-template-columns:44px minmax(0,1fr) 120px 90px 90px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}.salt-row.head,.ion-row.head{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}.salt-row:not(.used){color:var(--muted)}.salt-row.used>span:nth-child(2){font-weight:600;color:var(--text)}.num-cell{font-variant-numeric:tabular-nums;text-align:right}.ion-row{display:grid;grid-template-columns:80px repeat(auto-fit,minmax(70px,1fr));gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}.ion-name{font-weight:600}.ion-val.ok{color:var(--ok);font-weight:600}.ion-val.low,.ion-val.high{color:var(--warn);font-weight:600}.warn-text{color:var(--warn)}@media (max-width: 560px){.salt-row{grid-template-columns:30px minmax(0,1fr) 100px}.salt-row>:nth-child(4),.salt-row>:nth-child(5){display:none}}.misc-auto{display:flex;flex-direction:column}.misc-auto-row{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.row.misc{grid-template-columns:minmax(150px,1fr) 130px 115px 115px 100px 70px 90px 34px}.row.misc .recommended input{background:color-mix(in srgb,#8a5cc7 10%,var(--surface))}.row.misc .amount input,.amount-auto{background:color-mix(in srgb,var(--ok) 10%,var(--surface))}.amount-auto{border-radius:8px;padding:0 9px 7px}.amount-auto b{padding-top:2px}.row.profile-row{grid-template-columns:minmax(0,1fr) 34px}@media (max-width: 1100px){.row.misc{grid-template-columns:repeat(4,minmax(0,1fr))}.row.misc>.grow{grid-column:1 / -1}.row.misc>.icon-btn{justify-self:end}}@media (max-width: 560px){.row.misc{grid-template-columns:repeat(2,minmax(0,1fr))}}.water-block-head .row-actions{align-items:center}.water-block-head .picker{width:auto;min-width:240px;max-width:100%}@media (max-width: 560px){.water-block-head .picker{min-width:0;flex:1 1 100%}}