.app{max-width:960px;margin:0 auto;padding:24px 20px 48px}.header{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:20px}.header__icon{font-size:44px;line-height:1}.header__text{flex:1;min-width:0}.header__title{margin:0;font-size:26px;font-weight:800;color:var(--primary);letter-spacing:-.02em}.header__sub{margin:4px 0 0;font-size:13px;color:var(--muted);font-style:italic}.gear-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .2s,border-color .15s}.gear-btn:hover{background:var(--surface);border-color:var(--primary)}.gear-btn--open{background:var(--primary);color:#fff;border-color:var(--primary);transform:rotate(45deg)}.settings-panel{background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px 16px;margin-bottom:20px;box-shadow:var(--shadow)}.settings-panel__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--border-soft)}.settings-panel__title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}.settings-panel__close{width:36px;height:36px;border:none;background:none;color:var(--muted);font-size:26px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center}.settings-panel__close:hover{color:var(--primary);background:var(--surface)}.settings-panel__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft)}.settings-panel__row:last-of-type{border-bottom:none}.settings-panel__row--stack{flex-direction:column;align-items:stretch;gap:8px}.settings-panel__info{flex:1;min-width:0}.settings-panel__label{font-size:14px;font-weight:700;color:var(--primary)}.settings-panel__hint{font-size:12px;color:var(--muted);margin-top:2px}.settings-panel__select{width:100%;padding:10px 12px;min-height:44px;font-size:15px;font-weight:600;color:var(--primary);background:#fff;border:1px solid var(--primary);border-radius:8px;outline:none}.settings-panel__select:focus{box-shadow:0 0 0 3px #7f3e2a33}.settings-panel__actions{margin-top:10px}.btn-test{width:100%;min-height:44px;padding:10px 16px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);background:transparent;border:1.5px solid var(--primary);border-radius:8px;transition:background .15s}.btn-test:hover:not(:disabled){background:#7f3e2a0f}.btn-test:disabled{opacity:.35;cursor:not-allowed}.toggle{flex:0 0 auto;width:48px;height:28px;border-radius:999px;border:none;background:#7f3e2a40;position:relative;padding:0;transition:background .2s}.toggle--on{background:var(--primary)}.toggle:disabled{opacity:.35;cursor:not-allowed}.toggle__knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transition:transform .2s}.toggle--on .toggle__knob{transform:translate(20px)}.grind-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;vertical-align:middle}.grind-chip small{opacity:.75;font-weight:500;font-size:10px;margin-left:3px}.method-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:24px}.method-tab{flex:1;padding:14px 0;min-height:48px;background:none;border:none;font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.method-tab:hover{color:var(--primary)}.method-tab--active{color:var(--primary);border-bottom-color:var(--primary)}.layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(380px,1.1fr);gap:24px;align-items:start}@media (max-width: 820px){.layout{grid-template-columns:1fr}}.panel{background:#fff;border-radius:14px;padding:24px;border:1px solid var(--border-soft);box-shadow:var(--shadow)}.setting{margin-bottom:22px}.setting:last-child{margin-bottom:0}.setting__question{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--primary)}.setting__question b{font-weight:700}.radio-group{display:flex;width:100%;border-radius:8px;overflow:hidden;border:1px solid var(--primary)}.radio-btn{flex:1 1 0;min-height:44px;padding:10px 8px;background:#fff;border:none;border-right:1px solid var(--primary);color:var(--primary);font-size:13px;font-weight:600;transition:background .15s,color .15s;text-align:center}.radio-btn:last-child{border-right:none}.radio-btn:hover:not(.radio-btn--active){background:#7f3e2a0f}.radio-btn--active{background:var(--primary);color:#fff}.radio-btn--active:hover{background:var(--primary-hover)}.stepper{display:flex;width:100%;align-items:stretch;border-radius:8px;overflow:hidden;border:1px solid var(--primary)}.stepper__btn{flex:0 0 auto;width:52px;min-height:48px;background:var(--primary);color:#fff;border:none;font-size:22px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:background .15s}.stepper__btn:hover:not(:disabled){background:var(--primary-hover)}.stepper__btn:active:not(:disabled){background:var(--primary-active)}.stepper__btn--lg{width:56px;min-height:52px;font-size:24px}.stepper__body{flex:1 1 auto;display:flex;align-items:stretch;background:#fff;min-width:0}.stepper__addon{flex:0 0 auto;display:flex;align-items:center;padding:0 12px;font-size:15px;font-weight:600;color:var(--primary);background:#7f3e2a0a;border-right:1px solid var(--border)}.stepper__addon--right{border-right:none;border-left:1px solid var(--border)}.stepper__input{flex:1 1 auto;width:100%;min-width:0;border:none;background:transparent;text-align:center;font-size:18px;font-weight:700;color:var(--primary);outline:none;padding:0 8px;-moz-appearance:textfield}.stepper__input::-webkit-inner-spin-button,.stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.recipe-meta{margin:-8px 0 22px;padding:14px 16px;border:1px solid var(--border-soft);border-left:3px solid var(--primary);border-radius:8px;background:#7f3e2a0a}.recipe-meta__title{font-weight:800;font-size:15px;color:var(--primary);margin-bottom:2px}.recipe-meta__blurb{font-size:13px;font-style:italic;color:var(--muted);margin-bottom:10px;line-height:1.4}.recipe-meta__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0}.recipe-meta__grid>div{display:flex;flex-direction:column;min-width:0}.recipe-meta__grid dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:1px}.recipe-meta__grid dd{margin:0;font-size:13px;font-weight:600;color:var(--primary)}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.stat{padding:16px 14px;border-radius:12px;text-align:center;border:1px solid var(--border-soft);background:linear-gradient(135deg,#7f3e2a0f,#7f3e2a1f);display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}.stat__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.stat__label abbr{text-transform:none;letter-spacing:0;font-weight:500;font-size:10px;text-decoration:dotted underline;cursor:help}.stat__value{font-size:30px;font-weight:800;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums}.stat__value small{font-size:14px;font-weight:600;font-style:italic;margin-left:2px}.stat__note{font-size:12px;color:var(--muted);font-style:italic;line-height:1.3}.stat__note--warn{color:#b0413e;font-weight:700;font-style:normal}.timer-section{text-align:center;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border-soft)}.timer{font-size:clamp(40px,9vw,64px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--primary);margin-bottom:14px;font-family:DM Mono,SF Mono,Consolas,monospace;line-height:1}.timer--running{color:var(--accent)}.timer-btns{display:flex;justify-content:center;gap:12px}.timer-btn{padding:0 24px;min-height:44px;background:none;border:none;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--primary);cursor:pointer;transition:color .15s,opacity .15s}.timer-btn:hover:not(:disabled){color:var(--primary-hover)}.timer-btn:active:not(:disabled){color:var(--primary-active)}.timer-btn:disabled{opacity:.3;cursor:not-allowed}.pour-bar{display:flex;width:100%;height:36px;border-radius:8px;overflow:hidden;margin-bottom:16px;background:#7f3e2a14}.pour-bar__seg{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:width .25s}.pour-bar__fill{position:absolute;left:0;top:0;height:100%;background:#ffffff40}.pour-bar__label{position:relative;z-index:1;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.pour-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.pour-row{display:flex;align-items:stretch;gap:12px;padding:12px;border-radius:10px;background:var(--surface);border:2px solid transparent;position:relative;transition:background .2s,border-color .2s,opacity .2s}.pour-row--active{border-color:var(--accent);background:#fff;box-shadow:0 3px 14px #d17a362e}.pour-row--done{opacity:.5}.pour-row__dot{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;align-self:center}.pour-row__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}.pour-row__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.pour-row__label{font-weight:700;font-size:14px;color:var(--primary)}.pour-row__time{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}.pour-row__bottom{display:flex;justify-content:flex-end}.pour-row__total{font-size:15px;color:var(--primary)}.pour-row__total b{font-weight:800;font-size:18px;color:var(--accent)}.pour-row__total small{margin-left:6px;font-size:12px;color:var(--muted)}.pour-row__instruction{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}.pour-row--wait,.pour-row--action{background:#7f3e2a0a}.pour-row--wait .pour-row__label,.pour-row--action .pour-row__label{font-weight:600}.pour-row__progress{position:absolute;bottom:0;left:0;height:3px;border-radius:0 3px 3px 0;background:var(--accent)}.pour-row__progress[data-state=future]{background:transparent}.pour-row__progress[data-state=active]{background:var(--accent)}.pour-row__progress[data-state=done]{background:#7f3e2a66}.empty-msg{text-align:center;color:var(--muted);font-style:italic;padding:24px 0}.footer{text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--border-soft);font-size:13px;color:var(--muted)}.footer a{color:var(--primary);text-decoration:underline}@media (max-width: 820px){.app{padding:16px 14px 40px}.header{padding-bottom:14px;margin-bottom:14px}.header__icon{font-size:36px}.header__title{font-size:22px}.header__sub{font-size:12px}.method-bar{margin-bottom:16px}.method-tab{min-height:50px}.panel{padding:18px 14px;border-radius:12px}.panel--brew{padding:0;background:none;border:none;box-shadow:none}.timer-section{position:sticky;top:0;z-index:10;background:#fff;padding:16px 14px 14px;border:1px solid var(--border-soft);border-radius:12px;box-shadow:0 4px 16px #7f3e2a1f;margin-bottom:12px}.timer{font-size:clamp(38px,12vw,56px);margin-bottom:10px}.timer-btn{padding:0 16px;min-height:48px;font-size:15px;flex:1}.timer-btns{gap:6px}.radio-btn{font-size:12px;padding:10px 4px;min-height:52px}.stepper__btn{width:56px;min-height:52px;font-size:24px}.stepper__btn--lg{width:60px;min-height:56px}.stepper__input{font-size:20px}.stepper__addon{font-size:16px;padding:0 10px}.stat-row{gap:8px}.stat{padding:14px 10px}.stat__value{font-size:24px}.stat__value small{font-size:12px}.stat__label{font-size:10px}.stat__note{font-size:11px}.pour-bar{height:32px}.pour-row{padding:10px 12px;gap:10px}.pour-row__dot{width:30px;height:30px;font-size:13px}.pour-row__top{flex-wrap:wrap;gap:4px 10px}.pour-row__label{font-size:15px}.pour-row__time{font-size:13px}.pour-row__total b{font-size:17px}.footer{margin-top:28px;padding-top:16px;font-size:12px}.recipe-meta{margin:-4px 0 18px;padding:12px 14px}.recipe-meta__grid{grid-template-columns:1fr 1fr;gap:8px 12px}.pour-row__instruction{font-size:13px;line-height:1.45;margin-top:6px}}@media (max-width: 380px){.app{padding:12px 10px 32px}.panel{padding:16px 12px}.radio-btn{font-size:11px;padding:8px 2px}.stepper__btn{width:48px;min-height:48px}.stepper__btn--lg{width:52px;min-height:52px}.timer-btn{padding:0 8px;font-size:14px}.pour-bar__label{font-size:10px}}:root{--primary: #7f3e2a;--primary-hover: #8c5845;--primary-active: #592619;--bg: #f2eadd;--surface: #faf3e7;--border: rgba(127, 62, 42, .22);--border-soft: rgba(127, 62, 42, .12);--muted: rgba(127, 62, 42, .65);--accent: #d17a36;--shadow: 0 10px 30px rgba(127, 62, 42, .15);font-family:DM Sans,Helvetica Neue,Segoe UI,system-ui,sans-serif;color:var(--primary);-webkit-text-size-adjust:100%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;min-height:100%;background:var(--bg)}body{min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button{font-family:inherit;cursor:pointer}input,select{font-family:inherit;font-size:16px}