:root{--ink:#2f2924;--muted:#83766a;--cream:#f6f1e9;--paper:#fffdf9;--coffee:#6e4936;--accent:#c9784a;--line:#e9dfd4}*{box-sizing:border-box}body{margin:0;background:#ddd6cc;color:var(--ink);font-family:'DM Sans',sans-serif}.app-shell{max-width:480px;min-height:100vh;margin:auto;background:var(--cream);padding:26px 20px 94px;position:relative}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:700;margin:0 0 7px}.topbar h1{font:600 25px 'Playfair Display',serif;margin:0}.icon-btn{border:1px solid var(--line);background:var(--paper);border-radius:50%;width:36px;height:36px;font-size:18px;color:var(--coffee)}.view{display:none}.view.active{display:block}.hero{background:var(--coffee);color:#fff7ef;border-radius:8px;padding:24px 20px 22px;display:flex;justify-content:space-between;overflow:hidden;min-height:220px}.hero h2{font:700 30px/1.03 'Playfair Display',serif;margin:14px 0 12px}.hero h2 em{color:#e8b18d;font-style:normal}.hero p{font-size:13px;line-height:1.5;color:#ead8ca;margin:0 0 18px}.hero-cup{font-size:86px;opacity:.18;align-self:center;transform:rotate(-12deg);margin-right:-8px}.pill{font-size:9px;letter-spacing:1.3px;font-weight:700}.pill.light{color:#f0b18b}.primary{border:0;background:var(--accent);color:#fff;border-radius:5px;padding:13px 15px;font:600 12px 'DM Sans';cursor:pointer}.primary span,.text-btn span{font-size:16px;margin-left:10px}.section-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 13px}.section-head h3{font:600 21px 'Playfair Display';margin:0}.text-btn{background:transparent;border:0;color:var(--coffee);font-size:12px;font-weight:600}.chips{display:flex;gap:8px;overflow:auto;padding-bottom:3px}.chip{white-space:nowrap;border:1px solid var(--line);background:transparent;border-radius:18px;padding:9px 13px;color:var(--muted);font-size:11px}.chip.selected{background:var(--ink);border-color:var(--ink);color:#fff}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:17px}.menu-item{background:var(--paper);padding:10px;border-radius:7px;position:relative;min-height:208px}.item-art{height:106px;border-radius:5px;margin-bottom:11px;display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff8ef}.espresso{background:#a56b4a}.latte{background:#d6ad89}.raf{background:#bc8461}.cocoa{background:#87947e}.menu-item h4,.history-row h4{margin:0 0 4px;font-size:13px}.menu-item p,.history-row p{margin:0;color:var(--muted);font-size:10px}.menu-item strong{display:block;margin-top:9px;font-size:13px}.add-btn{position:absolute;right:10px;bottom:10px;border:0;border-radius:50%;width:27px;height:27px;background:#f0e5da;color:var(--coffee);font-size:20px;line-height:20px}.page-heading{font:600 28px 'Playfair Display';margin:0}.status{font-size:9px;letter-spacing:1px;color:#508163;background:#dceadd;padding:7px 9px;border-radius:4px;font-weight:700}.pass-card{background:var(--coffee);color:#fff7ef;border-radius:8px;padding:18px 18px 16px;margin:23px 0 14px}.pass-top,.pass-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#e6cfc0}.pass-count{display:flex;align-items:center;gap:12px;margin:25px 0 17px}.pass-count strong{font:700 58px 'Playfair Display';line-height:1}.pass-count span{font-size:12px;line-height:1.35;color:#ead8ca}.progress{height:6px;background:#8d6652;border-radius:5px;overflow:hidden}.progress span{display:block;height:100%;width:75%;background:#e3a47e}.pass-bottom{margin-top:17px;letter-spacing:0;font-size:10px}.full{width:100%;padding:15px}.hint{text-align:center;color:var(--muted);font-size:10px;margin:11px 0 30px}.recent-head{margin-top:0}.history-row{display:flex;align-items:center;gap:12px;background:var(--paper);border-bottom:1px solid var(--line);padding:14px 0}.history-icon{width:35px;height:35px;border-radius:50%;background:#eee3d8;display:flex;align-items:center;justify-content:center;font-size:17px}.history-row strong{margin-left:auto;font-size:13px;color:var(--coffee)}.history-list{margin-top:16px}.history-list .history-row{padding:16px 8px}.history-list .history-row:first-child{border-radius:7px 7px 0 0;padding-top:18px}.history-list .history-row:last-child{border-radius:0 0 7px 7px;border:0}.muted{opacity:.7}.counter{font-size:11px;color:var(--muted)}.empty-note{text-align:center;color:var(--muted);font:italic 15px 'Playfair Display';margin-top:44px}.empty-note span{display:block;color:var(--accent);font-style:normal;font-size:24px;margin-bottom:8px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;background:rgba(255,253,249,.96);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:10px 18px max(10px,env(safe-area-inset-bottom));z-index:4}.nav-item{position:relative;border:0;background:transparent;color:#a09286;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:78px}.nav-item span{font-size:20px;line-height:18px}.nav-item.active{color:var(--coffee);font-weight:700}.nav-item sup{position:absolute;top:-2px;right:17px;background:var(--accent);color:#fff;border-radius:10px;padding:2px 5px;font-size:8px}.toast{position:fixed;left:50%;bottom:82px;transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:12px 16px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}