:root{--ink:#171714;--paper:#f3efe7;--wine:#8d3441;--gold:#d0a76b;--muted:#9b978e;--serif:"DM Serif Display",serif;--sans:"DM Sans",sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#cbc6bc;color:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}.phone{position:relative;width:100%;height:100dvh;max-width:520px;margin:auto;background:var(--ink);overflow:hidden;box-shadow:0 0 80px #0003}.app-header{position:absolute;z-index:10;top:0;left:0;right:0;height:calc(82px + env(safe-area-inset-top));padding:calc(16px + env(safe-area-inset-top)) 20px 10px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#111c,transparent)}.wordmark{font:32px/1 var(--serif);letter-spacing:-2px}.wordmark span{color:var(--gold);font-style:italic}.round{width:41px;height:41px;border-radius:50%;border:1px solid #fff4;background:#16161366;color:#fff;font:20px var(--sans);backdrop-filter:blur(12px)}.deck{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.deck::-webkit-scrollbar{display:none}.wine-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#26231f}.wine-slide>img{width:100%;height:100%;object-fit:cover;display:block}.wine-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0005 0%,transparent 30%,transparent 46%,#000e 87%,#111 100%);pointer-events:none}.card-content{position:absolute;z-index:2;left:24px;right:24px;bottom:calc(126px + env(safe-area-inset-bottom))}.vintage{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #fff5;border-radius:99px;background:#1117;backdrop-filter:blur(10px);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.card-content h1{font:50px/.92 var(--serif);letter-spacing:-1px;margin:16px 0 9px;max-width:350px;text-shadow:0 2px 20px #0008}.place{font-size:13px;color:#e1ddd5;margin:0}.place span{color:var(--gold);margin-right:7px}.memory-line{margin:17px 0 0;padding-top:16px;border-top:1px solid #fff3;font:italic 17px/1.35 var(--serif);color:#eee9df;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-actions{position:absolute;z-index:3;right:18px;bottom:calc(270px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.card-actions button{width:48px;height:48px;border-radius:50%;border:1px solid #fff4;background:#15151299;color:#fff;font-size:21px;backdrop-filter:blur(12px);box-shadow:0 5px 18px #0004}.card-actions button.loved{background:var(--wine);border-color:var(--wine)}.card-actions small{display:block;font-size:8px;letter-spacing:.5px;margin-top:5px}.counter{position:absolute;z-index:2;right:24px;top:calc(90px + env(safe-area-inset-top));font:12px var(--sans);color:#fff9}.swipe-hint{position:absolute;z-index:4;bottom:calc(94px + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;align-items:center;gap:9px;color:#ffffff9c;font-size:9px;text-transform:uppercase;letter-spacing:1.6px;pointer-events:none;transition:.3s}.swipe-hint i{width:15px;height:1px;background:#fff5}.tabbar{position:absolute;z-index:9;bottom:0;left:0;right:0;height:calc(76px + env(safe-area-inset-bottom));padding:8px 54px env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-between;background:#171714e8;border-top:1px solid #fff2;backdrop-filter:blur(22px)}.tabbar button{width:58px;border:0;background:none;color:#77736d;font:9px var(--sans);text-transform:uppercase;letter-spacing:1px}.tabbar button span{display:block;font-size:21px;margin-bottom:5px}.tabbar button.active{color:#fff}.tabbar .add-tab{width:56px;height:56px;border-radius:50%;background:var(--paper);color:var(--ink);transform:translateY(-12px);box-shadow:0 8px 25px #0007}.tabbar .add-tab span{margin:0;font-size:29px}.search-panel{position:absolute;z-index:20;top:0;left:0;right:0;padding:calc(20px + env(safe-area-inset-top)) 16px 16px;background:#171714e8;backdrop-filter:blur(20px);display:flex;gap:10px;transform:translateY(-110%);transition:.25s}.search-panel.open{transform:none}.search-panel input{flex:1;border:0;border-radius:12px;background:#ffffff17;color:white;padding:12px 15px;font:15px var(--sans);outline:0}.search-panel button{border:0;background:transparent;color:var(--gold)}.empty{flex:0 0 100%;height:100%;display:grid;place-items:center;text-align:center;padding:40px}.empty b{font:33px var(--serif)}.empty p{color:var(--muted)}dialog.sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(520px,100%);max-height:92dvh;border:0;border-radius:24px 24px 0 0;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 -30px 80px #0006;overflow:auto;animation:up .3s ease}dialog.sheet::backdrop{background:#0009;backdrop-filter:blur(4px)}.grabber{position:sticky;z-index:4;top:0;width:42px;height:5px;border-radius:5px;background:#aaa399;margin:10px auto}.sheet-close{position:absolute;z-index:4;right:18px;top:18px;width:36px;height:36px;border:0;border-radius:50%;background:#f4f0e9dd;font-size:25px}.detail-hero{position:relative;height:39vh;min-height:300px;margin-top:-25px}.detail-hero img{width:100%;height:100%;object-fit:cover}.detail-hero:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,var(--paper))}.detail-body{position:relative;margin-top:-48px;padding:0 25px 40px}.detail-body small,.sheet-head small{color:var(--wine);font-size:10px;font-weight:700;letter-spacing:2px}.detail-body h2,.sheet-head h2{font:42px/.95 var(--serif);margin:8px 0}.meta{color:#777168;font-size:13px}.score{margin:20px 0;color:#ad7838}.score b{font:27px var(--serif);color:var(--ink);margin-right:8px}.story{padding:20px 0;border-top:1px solid #d6cfc4}.story h3{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:var(--wine)}.story p{font:17px/1.55 var(--serif);margin-bottom:0}.where{display:flex;gap:13px;align-items:center}.pin{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:#fff}.delete{border:0;background:none;color:#9a6c6c;text-decoration:underline}.sheet-head{display:flex;justify-content:space-between;align-items:start;padding:12px 22px}.sheet-close.static{position:static}.add-sheet form{padding:0 22px 35px}.camera{height:190px;border-radius:18px;background:#ded7cc;display:grid;place-items:center;text-align:center;overflow:hidden;margin:15px 0 23px;color:#4f4b44}.camera input{display:none}.camera span,.camera small{display:block}.camera b{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 9px;border-radius:50%;background:var(--wine);color:#fff;font-size:25px}.camera small{margin-top:5px;color:#858077}.camera img{display:none;width:100%;height:100%;object-fit:cover}.camera.has img{display:block}.camera.has span{display:none}.fields{display:grid;gap:15px}.fields label{display:grid;gap:6px;color:#6d685f;text-transform:uppercase;letter-spacing:1px;font-size:9px;font-weight:700}.fields input,.fields select,.fields textarea{width:100%;border:1px solid #d3ccc1;border-radius:11px;background:#fffdf8;padding:12px;font:14px var(--sans);color:var(--ink);outline:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.loc{display:flex}.loc input{border-radius:11px 0 0 11px}.loc button{width:48px;border:0;border-radius:0 11px 11px 0;background:#ddd5ca;color:var(--wine);font-size:18px}.rate{display:flex;height:42px;align-items:center}.rate button{border:0;background:none;color:#c7bfb3;font-size:20px;padding:2px}.rate button.on{color:#b57f3c}.save{position:sticky;bottom:10px;width:100%;border:0;border-radius:14px;margin-top:22px;padding:15px;background:var(--wine);color:white;font-weight:700;box-shadow:0 8px 25px #8d344144}.toast{position:fixed;z-index:50;left:50%;bottom:100px;transform:translate(-50%,20px);padding:11px 17px;border-radius:30px;background:#f3efe7;color:#171714;box-shadow:0 8px 30px #0006;font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes up{from{transform:translateY(100%)}to{transform:none}}@media(min-width:521px){.phone{height:min(900px,96dvh);margin-top:2dvh;border-radius:42px;border:8px solid #292824}.tabbar{border-radius:0 0 34px 34px}dialog.sheet{bottom:2dvh}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
