@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root { --ink:#18392d; --cream:#f3eddf; --paper:#fffaf0; --lime:#cce84b; --orange:#e5652d; --muted:#6f796f; --line:#d8d2c4; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:'DM Sans',sans-serif; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
main { width:min(1020px, calc(100% - 32px)); margin:0 auto; padding:56px 0 80px; position:relative; }
.hero { display:flex; align-items:center; gap:24px; margin-bottom:36px; }
.brand-mark { width:88px; height:88px; border-radius:50%; background:var(--ink); display:grid; place-items:center; box-shadow:8px 8px 0 var(--lime); transform:rotate(-4deg); }
.brand-mark span { font-size:42px; transform:rotate(4deg); }
.eyebrow,.step { margin:0 0 5px; color:var(--orange); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
h1,h2 { font-family:'Oswald',sans-serif; text-transform:uppercase; margin:0; line-height:.95; }
h1 { font-size:clamp(48px,8vw,82px); letter-spacing:-.035em; }
h2 { font-size:30px; letter-spacing:-.02em; }
.intro { color:var(--muted); margin:10px 0 0; font-size:16px; }
.card { background:rgba(255,250,240,.88); border:1px solid var(--line); box-shadow:0 18px 50px rgba(24,57,45,.08); }
.form-card { padding:34px; border-radius:6px 30px 6px 6px; }
.card-heading,.list-heading,.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.badge { background:var(--lime); font-size:12px; font-weight:700; padding:8px 12px; border-radius:999px; transform:rotate(2deg); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; }
.field { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; }
.field small { font-weight:500; color:var(--muted); }
input,.select-button { width:100%; height:56px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--ink); padding:0 16px; font:600 16px 'DM Sans',sans-serif; outline:none; }
input:focus,.select-button:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(204,232,75,.55); }
.select-button { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.select-button span:last-child { font-size:24px; }
.number-wrap { display:grid; grid-template-columns:54px 1fr 54px; }
.number-wrap input { border-radius:0; text-align:center; border-left:0; border-right:0; -moz-appearance:textfield; }
.number-wrap input::-webkit-inner-spin-button { display:none; }
.number-button { border:1px solid var(--line); background:white; color:var(--ink); font-size:24px; cursor:pointer; }
.number-button:first-child { border-radius:5px 0 0 5px; }.number-button:last-child { border-radius:0 5px 5px 0; }
.number-button:hover { background:var(--lime); }
.message { min-height:20px; margin:15px 0 5px; color:#a43b22; font-size:14px; font-weight:600; }
.message.success { color:var(--ink); }
.submit-button { border:0; border-radius:5px; min-height:58px; width:100%; padding:0 20px; display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:white; font:700 16px 'DM Sans',sans-serif; cursor:pointer; transition:.2s; }
.submit-button:hover { background:#23523f; transform:translateY(-1px); }
.submit-button span:last-child { color:var(--lime); font-size:25px; }
.list-card { margin-top:20px; padding:28px 34px; border-radius:6px; }
.beer-table{min-width: 0px!important;}
.total { display:flex; align-items:center; gap:9px; }.total strong { font:700 34px 'Oswald'; color:var(--orange); }.total span { font-size:11px; line-height:1.1; width:32px; text-transform:uppercase; font-weight:700; }
.entries { margin-top:22px; }.entry { display:grid; grid-template-columns:70px 1fr auto; gap:16px; align-items:center; border-top:1px solid var(--line); padding:16px 0; }
.entry-date { font-size:12px; color:var(--muted); }.entry-name { font-weight:700; }.entry-amount { background:var(--lime); padding:7px 11px; border-radius:999px; font-size:13px; font-weight:700; }
.empty-state { border-top:1px solid var(--line); margin-top:22px; padding:30px 0 12px; text-align:center; color:var(--muted); }.empty-state span { font-size:34px; }.empty-state p { margin:8px 0 0; font-size:14px; }
dialog { width:min(460px,calc(100% - 30px)); border:0; border-radius:8px 28px 8px 8px; padding:28px; background:var(--paper); color:var(--ink); box-shadow:0 25px 90px rgba(0,0,0,.3); }
dialog::backdrop { background:rgba(14,39,30,.72); backdrop-filter:blur(3px); }.close-button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--ink); font-size:25px; cursor:pointer; }
.player-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }.player-option { border:1px solid var(--line); padding:16px; border-radius:5px; background:white; color:var(--ink); text-align:left; font:600 15px 'DM Sans'; cursor:pointer; }.player-option:hover { border-color:var(--ink); background:var(--lime); }
.toast { position:fixed; right:24px; bottom:24px; background:var(--ink); color:white; padding:14px 18px; border-radius:5px; font-weight:700; transform:translateY(100px); opacity:0; transition:.3s; }.toast.show { transform:translateY(0); opacity:1; }
@media(max-width:650px) { main{padding-top:32px}.hero{align-items:flex-start}.brand-mark{width:64px;height:64px;flex:0 0 64px}.brand-mark span{font-size:31px}h1{font-size:46px}.intro{font-size:14px}.form-card,.list-card{padding:24px 20px}.field-grid{grid-template-columns:1fr}.badge{display:none}.player-list{grid-template-columns:1fr}.entry{grid-template-columns:58px 1fr auto} }