*,:after,:before{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--navy:#C94A3A;--navyD:#A8382A;--sage:#4A6B3A;--sageL:#86A87A;--red:#C94A3A;--gold:#C68A2E;--goldD:#A57522;--ink:#1F1A14;--inkM:#3A3228;--gray:#6B6055;--border:#E8DFD2;--cream:#F5F0E8;--white:#FFFFFF;--surf:#FFFBF5;--grayL:#EFE9DD;--purple:#7C6D99;--serif:"DM Serif Display","Source Serif Pro",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-family:Inter,-apple-system,system-ui,sans-serif}body,html{height:100%;overflow-x:hidden;overflow-y:hidden}#app,body,html{background:var(--cream)}#app{width:100%;max-width:430px;height:100dvh;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden}@media (min-width:601px){body,html{background:#1a1a1a}#app{width:390px;box-shadow:0 30px 70px rgba(0,0,0,.35)}}h1,h2{font-family:var(--serif);font-weight:500!important;letter-spacing:-.3px}.screen{flex:1 1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.screen::-webkit-scrollbar{display:none}#bottom-nav{display:flex;background:var(--white);border-top:1px solid var(--border);padding:6px 0 max(8px,env(safe-area-inset-bottom));flex-shrink:0}.nav-btn{flex:1 1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px 0;color:#9CA3AF;font-family:inherit;transition:color .2s}.nav-btn.active{color:var(--navy)}.nav-btn .nav-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background .2s}.nav-btn.active .nav-icon{background:#EFF6FF}.nav-btn span{font-size:9px;font-weight:800}#status-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 22px 5px;font-size:11px;font-weight:800;flex-shrink:0;transition:background .3s,color .3s}#status-bar.dark{background:var(--navy)!important;color:#fff!important}.notch{width:100px;height:26px;background:#18181B;border-radius:16px}@media (max-width:600px){#status-bar,.notch{display:none!important}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes drop-bounce{0%{opacity:0;transform:translateY(-90px) rotate(-8deg)}55%{opacity:1;transform:translateY(8px) rotate(2deg)}72%{transform:translateY(-5px) rotate(-1.5deg)}88%{transform:translateY(2px) rotate(.5deg)}to{opacity:1;transform:translateY(0) rotate(0deg)}}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes fadeInDelay{0%,55%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes cfFall{0%{opacity:1;transform:translateY(-10px) rotate(0deg)}to{opacity:0;transform:translateY(600px) rotate(900deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulseRed{0%,to{opacity:1}50%{opacity:.3}}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.card{background:var(--white);border-radius:16px;border:1px solid var(--border);padding:14px}.btn-primary{background:var(--navy);color:#fff;border:none;border-radius:14px;padding:13px 20px;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;transition:opacity .15s}.btn-primary:active{opacity:.8}.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700}.pill-red{background:#FEE2E2;color:#B91C1C}.pill-green{background:#DCFCE7;color:#15803D}.pill-amber{background:#FEF9C3;color:#92400E}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);z-index:100;display:flex;align-items:flex-end;animation:fadeIn .18s}.modal-sheet{background:var(--white);border-radius:26px 26px 0 0;width:100%;max-height:90%;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s}.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:16px auto 0}.modal-body{overflow-y:auto;flex:1 1}.modal-body::-webkit-scrollbar{display:none}.swipe-row{position:relative;margin-bottom:8px;border-radius:14px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:pan-y}.swipe-bg{position:absolute;inset:0;justify-content:space-between;padding:0 18px;background:#F0F2F5}.swipe-bg,.swipe-card{display:flex;align-items:center;border-radius:14px}.swipe-card{gap:12px;background:var(--white);padding:12px 13px;border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:-webkit-grab;cursor:grab;position:relative;will-change:transform}.shimmer-card{background:linear-gradient(90deg,#F3F4F6 25%,#E5E7EB 50%,#F3F4F6 75%);background-size:400px 100%;animation:shimmer 1.4s infinite;border-radius:18px;margin-bottom:14px}.ob-screen{position:absolute;inset:0;background:var(--cream);display:flex;flex-direction:column;z-index:200;overflow-y:auto}.ob-screen::-webkit-scrollbar{display:none}.progress-bar{height:3px;background:var(--grayL);border-radius:2px;margin:0 20px 20px}.progress-fill{height:3px;background:var(--navy);border-radius:2px;transition:width .4s}.cook-overlay{position:absolute;inset:0;background:var(--cream);z-index:150;display:flex;flex-direction:column;overflow:hidden}.period-tabs{display:flex;gap:8px;padding:12px 14px;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0}.period-tab{flex:1 1;background:var(--grayL);border-radius:12px;border:1.5px solid var(--border);padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:all .2s}.period-tab.active{border-width:2px}#confetti-layer{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:hidden}input[type=text],input[type=time]{font-family:Plus Jakarta Sans,sans-serif;background:var(--grayL);border:none;outline:none;color:var(--ink);border-radius:12px;padding:10px 14px;font-size:13px}input:focus{box-shadow:0 0 0 2px #BFDBFE}