@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f7f5ee;--ink:#18372b;--orange:#df6035;--line:#dcded3}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:4px}button{cursor:pointer}header{height:100px;margin:0 6%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-size:26px;font-weight:700;letter-spacing:-1.5px}.logo{font-size:35px;color:var(--paper);background:var(--ink);border-radius:50%;width:43px;height:43px;line-height:39px;text-align:center}.brand-dot{font-size:12px;align-self:flex-start;letter-spacing:0}.header-note,.private,.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700}.private{letter-spacing:0;color:#637665}.private:first-letter{color:var(--orange)}main{max-width:1280px;margin:auto;padding:0 6%}.hero{display:grid;grid-template-columns:1.2fr 1fr;padding:62px 0 45px;min-height:480px}.eyebrow{color:#7b826e}h1{font-family:'Space Grotesk',sans-serif;font-size:66px;letter-spacing:-4px;line-height:1.03;font-weight:500;margin:24px 0}h1 em{font-family:Georgia,serif;color:var(--orange);font-weight:400}p{font-size:14px;color:#737b6f;line-height:1.7}.primary,.secondary,.danger{border:0;border-radius:5px;padding:14px 22px;font-weight:600;font-size:13px}.primary{background:var(--ink);color:white}.hero .primary{margin-top:18px}.secondary{border:1px solid #cbd0c3;background:transparent;color:var(--ink)}.danger{background:#ae3828;color:white}.hero-art{position:relative;display:flex;align-items:center;justify-content:center}.orb{position:absolute;width:310px;height:310px;border-radius:50%;background:#e8e9d9}.can{width:143px;height:260px;transform:rotate(14deg);filter:drop-shadow(16px 20px 8px #263b2520);position:relative;background:linear-gradient(90deg,#b94420,#ef7949 30%,#dc5c31 72%,#ad3e1f);border-radius:23px 23px 26px 26px;overflow:hidden}.can-top{height:18px;border-radius:50%;background:linear-gradient(#a3a89c,#e1e2d8,#9b9e92);border:3px solid #c6c7b9}.can-label{padding:22px 16px;color:#fcf1d8}.can-label small{font-size:8px;letter-spacing:2px;line-height:1.5;display:block}.can-label strong{font-family:'Space Grotesk',sans-serif;display:block;font-size:31px;line-height:1;margin:15px 0 10px;letter-spacing:-1px}.can-label span{font-size:5px;letter-spacing:1px}.can-wave{font-size:60px;line-height:1.1;color:#f0b56c}.can-base{position:absolute;bottom:0;height:9px;width:100%;background:#bdbfb2;border-radius:50%}.star{position:absolute;top:22px;right:26px;color:var(--orange);font-size:68px;font-weight:400}.art-note{position:absolute;bottom:10px;right:0;font-family:Georgia,serif;font-style:italic;transform:rotate(-8deg);color:#6f7b64;font-size:16px}.stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0}.stats>div{border-right:1px solid var(--line);padding-left:35px}.stats>div:first-child{padding-left:0}.stats strong{display:block;font:500 34px 'Space Grotesk',sans-serif}.stats span{font-size:12px;color:#7b8273;display:block;margin-top:5px}.stats .stat-quote{border:0;font:22px Georgia,serif;line-height:1.35;padding-left:45px}.stat-quote em{color:var(--orange)}.collection{padding:48px 0 60px}.collection h2{font:500 32px 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:12px 0 28px}.collection h2 span{background:#e8eadf;font:500 12px 'DM Sans',sans-serif;vertical-align:middle;padding:5px 9px;border-radius:20px;margin-left:5px}.toolbar{display:flex;gap:16px;margin-bottom:25px}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px;flex:1;padding:0 15px;gap:10px;background:#faf9f4}.search span{font-size:24px}.search input{border:0;background:transparent;width:100%;padding:14px 0;font-size:12px;color:var(--ink)}select{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink);padding:12px;font-size:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fffdf7;border:1px solid var(--line);border-radius:8px;overflow:hidden}.card-art{height:100px;background:#e7ebdf;display:flex;align-items:center;justify-content:space-between;padding:20px}.card:nth-child(3n+2) .card-art{background:#f0dfcd}.card:nth-child(3n) .card-art{background:#e4e5db}.beer-mark{font-size:30px;color:#708263}.score{font:500 26px 'Space Grotesk',sans-serif}.score small{font:12px 'DM Sans',sans-serif;color:#76826d}.card-body{padding:22px}.card h3{font:600 20px 'Space Grotesk',sans-serif;margin:0 0 12px;overflow-wrap:anywhere}.card p{white-space:pre-wrap;overflow-wrap:anywhere;min-height:48px;margin:0;font-size:13px}.card-bottom{border-top:1px solid var(--line);margin-top:22px;padding-top:15px;display:flex;gap:15px;align-items:center}.card-bottom span{font-size:10px;color:#838b79;flex:1}.text-btn{border:0;background:none;color:var(--ink);font-size:11px;padding:5px}.text-btn.delete{color:#a55d48}.empty{text-align:center;border:1px dashed #cfd4c5;border-radius:8px;padding:38px 20px}.empty-icon{font-size:40px;color:#97a38a}.empty h3{font:500 22px 'Space Grotesk',sans-serif;margin:12px 0}.empty p{margin:0 0 24px}.empty[hidden]{display:none}footer{border-top:1px solid var(--line);padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}footer>span{font-weight:700;font-size:18px;letter-spacing:-1px}footer p,footer small{font-size:10px}footer small{letter-spacing:1.5px;color:#85907a}dialog{border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:30px;width:min(500px,92vw);max-height:90vh}dialog::backdrop{background:#15322688;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.close:not(.secondary){background:none;border:0;font-size:27px;color:var(--ink)}dialog h2{font:500 28px 'Space Grotesk',sans-serif;margin:10px 0 25px}form>label{display:block;font-size:12px;font-weight:600;margin:20px 0 0}form input:not([type=range]),textarea{display:block;width:100%;border:1px solid #cdd2c5;border-radius:5px;background:#fffdf8;color:var(--ink);padding:12px;margin-top:9px;resize:vertical}input[type=range]{display:block;width:100%;margin-top:18px;accent-color:var(--orange)}output{float:right;color:var(--orange);font-size:17px}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#7c8572;margin-top:8px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:28px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:13px 22px;border-radius:6px;font-size:13px;display:none;z-index:10}@media(min-width:1500px){main{padding:0 40px}header{margin:0 auto;max-width:1200px}}@media(max-width:700px){header{height:76px}.header-note{display:none}.private{font-size:9px}.brand{font-size:22px}.hero{padding-top:36px;grid-template-columns:1fr}.hero h1{font-size:53px}.hero-art{height:290px;margin-top:25px}.orb{width:245px;height:245px}.can{width:120px;height:225px}.can-label{padding:18px 12px}.can-label strong{font-size:27px}.star{top:15px;right:15%}.art-note{bottom:5px;font-size:14px}.stats{grid-template-columns:repeat(3,1fr);padding:22px 0}.stats>div{padding-left:18px}.stats>div:nth-child(3){border:0}.stats .stat-quote{display:none}.stats strong{font-size:28px}.stats span{font-size:10px}.cards{grid-template-columns:1fr}.toolbar{gap:8px}.search{padding:0 10px}select{max-width:130px;font-size:11px}.collection{padding-top:32px}footer{flex-wrap:wrap}footer small{display:none}footer p{font-size:9px}.empty h3{font-size:20px}}

.photo-field{margin-top:22px}.photo-field>label{font-size:12px;font-weight:600}.photo-field label span{font-weight:400;color:#7c8572}.photo-field input{display:block;margin-top:10px;max-width:100%;font-size:12px}.photo-help,#photo-status{font-size:11px;margin:8px 0}.photo-field input::file-selector-button{border:1px solid #cbd0c3;border-radius:5px;padding:9px 12px;background:#fffdf8;color:var(--ink);cursor:pointer;margin-right:10px}#photo-preview{display:flex;gap:16px;align-items:center;margin-top:12px}#photo-preview[hidden]{display:none}#photo-image{width:110px;height:110px;object-fit:contain;background:#e8eadf;border-radius:6px}.card-art.has-photo{height:200px;position:relative;padding:0;overflow:hidden}.beer-photo{width:100%;height:100%;object-fit:contain}.has-photo .score{position:absolute;right:12px;bottom:12px;background:#fffdf7ed;padding:7px 12px;border-radius:6px}.has-photo .beer-mark{display:none}button:disabled{opacity:.5;cursor:wait}

.backup-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#e8eadf;padding:18px 20px;border-radius:6px;margin-bottom:22px}.backup-bar strong{font-size:13px}.backup-bar p{font-size:12px;margin:5px 0 0}.backup-bar button{flex-shrink:0}@media(max-width:700px){.backup-bar{align-items:flex-start;flex-direction:column}}

[hidden]{display:none!important}.session{display:flex;gap:12px;align-items:center;font-size:12px}.session button{padding:8px 12px}.auth-panel{max-width:430px;margin:50px auto 80px;padding:0 24px}.auth-panel h1{font-size:54px}.auth-panel form label{display:block;margin:20px 0;font-size:13px}.auth-panel input{width:100%;padding:12px;margin-top:8px;background:#fffdf7;border:1px solid var(--line);border-radius:5px}.auth-panel .primary{width:100%;margin-top:8px}.sync-status{font-size:12px;color:#64775d;border-left:3px solid #8da583;padding:8px 12px;margin-bottom:18px}.sync-status.error{color:#a44430;border-color:#b65b3d}.backup-actions{display:flex;flex-wrap:wrap;gap:8px}.card-bottom{flex-wrap:wrap}.card-bottom span{flex-basis:100%}#auth-message{white-space:pre-line}.photo-field{padding-top:4px}@media(max-width:700px){.session{max-width:55%;font-size:10px;overflow-wrap:anywhere}.backup-actions{width:100%}}

.auth-toggle{display:block;margin:16px auto;text-decoration:underline;font-size:12px}