:root {
  color-scheme: dark;
  --ink: #f7f4e9;
  --muted: #a9b4ac;
  --bg: #101c17;
  --panel: #192923;
  --lime: #d5fb70;
  --orange: #ff8a5b;
  --line: rgba(255,255,255,.1);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 90% 0, #263c31 0, transparent 30rem), var(--bg); color: var(--ink); padding: env(safe-area-inset-top) 0 calc(7rem + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
.screen { display:none; animation:screen-in .22s ease-out; touch-action:pan-y; }.screen.active{display:block}@keyframes screen-in{from{opacity:.2;transform:translateX(28px)}to{opacity:1;transform:none}}
button, input { font: inherit; }
button { color: inherit; }
.topbar { max-width: 900px; margin: auto; padding: 1.4rem 1.25rem .5rem; display: flex; align-items: center; justify-content: space-between; }
.team-logo { width:clamp(52px,10vw,76px); height:clamp(52px,10vw,76px); object-fit:contain; margin-inline:auto; flex:0 0 auto; }
.eyebrow { color: var(--lime); letter-spacing: .16em; font-size: .66rem; font-weight: 900; margin: 0 0 .1rem; }
h1 { font-size: clamp(2.2rem, 8vw, 3.7rem); margin: 0; line-height: .95; letter-spacing: -.06em; } h1 span { color: var(--orange); }
.header-actions { display:flex; gap:.45rem; }
.add-button, .organize-button { border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 999px; padding: .7rem 1rem; font-weight: 800; cursor: pointer; }
.organize-button { padding-inline:.8rem; }
main { max-width: 900px; margin: auto; padding: 1.6rem 1.25rem; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.intro h2 { margin: 0; font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -.035em; }
.intro p { margin: 0; color: var(--muted); font-size: .78rem; text-align: right; }
.page-link{border:0;background:transparent;color:var(--lime);padding:.35rem 0 0;font-weight:900;cursor:pointer}
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.product { position: relative; min-height: 145px; border: 1px solid var(--line); border-radius: 24px; padding: 1rem; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: pointer; overflow: hidden; touch-action: manipulation; user-select: none; transition: transform .12s, border-color .2s, background .2s; }
.product:active { transform: scale(.965); }
.product.active { border-color: rgba(213,251,112,.55); background: linear-gradient(145deg, rgba(213,251,112,.16), rgba(255,255,255,.035)); }
.product .emoji { font-size: 3.15rem; filter: drop-shadow(0 10px 12px rgba(0,0,0,.24)); line-height: 1; }
.product .name { font-size: .96rem; font-weight: 850; max-width: calc(100% - 2rem); }
.edit-card { position:absolute; right:.7rem; top:.7rem; width:2rem; height:2rem; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(10,20,15,.66); display:grid; place-items:center; font-size:.85rem; cursor:pointer; z-index:2; }
.badge { position: absolute; right: .75rem; bottom: .75rem; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 999px; background: var(--lime); color: #142015; display: grid; place-items: center; font-weight: 950; box-shadow: 0 8px 24px rgba(0,0,0,.25); transform: scale(0); transition: transform .18s cubic-bezier(.2,1.6,.4,1); }
.active .badge { transform: scale(1); }
.dock { position: fixed; z-index: 10; left: 50%; bottom: max(.8rem, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 1.5rem), 720px); height: 72px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(27,43,36,.9); backdrop-filter: blur(20px); box-shadow: 0 16px 50px rgba(0,0,0,.35); padding: .55rem; display: flex; align-items: center; gap: .55rem; }
.repeat-button, .reset-order-button { width: 54px; align-self: stretch; flex:0 0 auto; border: 0; border-radius: 17px; background: rgba(255,255,255,.08); display:grid; place-items:center; cursor:pointer; }
.repeat-button svg, .reset-order-button svg { width: 23px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.reset-order-button { color:#ff9e80; background:#ff8a5b16; }
.summary-button { border: 0; align-self: stretch; border-radius: 17px; background: var(--orange); color: #21130d; padding: 0 1rem; display:flex; gap:.7rem; align-items:center; font-weight:900; cursor:pointer; }
.summary-button strong { background:rgba(0,0,0,.15); min-width:1.8rem; height:1.8rem; border-radius:99px; display:grid; place-items:center; }
.signature { width:96px; height:auto; margin:0 .55rem 0 auto; filter:brightness(0) invert(1); opacity:.92; }
.people-list{display:grid;gap:.65rem}.person-row{display:grid;grid-template-columns:2.6rem minmax(4rem,1fr) 2rem 2.2rem 2.2rem 2.2rem 2.2rem;align-items:center;gap:.3rem;min-height:66px;border:1px solid var(--line);border-radius:18px;padding:.5rem;background:rgba(255,255,255,.045)}.person-row.paid{border-color:#d5fb7077;background:#d5fb7012}.paid-toggle{width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);font-size:1.1rem;cursor:pointer}.paid .paid-toggle{background:var(--lime);color:#142015}.person-name{font-weight:900;overflow:hidden;text-overflow:ellipsis}.person-action,.quantity-action{border:0;border-radius:10px;height:2.2rem;background:rgba(255,255,255,.07);cursor:pointer}.quantity-action{font-weight:950;font-size:1.15rem}.quantity-action:disabled{opacity:.25}.person-quantity{min-width:1.8rem;height:1.8rem;border-radius:99px;background:var(--lime);color:#142015;display:grid;place-items:center;font-weight:950;font-size:.8rem}.person-quantity.zero{background:rgba(255,255,255,.08);color:var(--muted)}.delete-person{color:#ff9e80}.pool-total{border:0;align-self:stretch;display:flex;align-items:center;gap:.55rem;padding:0 1rem;background:var(--lime);color:#142015;border-radius:17px;font-size:.78rem;font-weight:800;cursor:pointer}.pool-total strong{font-size:1.05rem}.pool-intro{margin-bottom:.8rem}.balance-status{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:15px;padding:.75rem .9rem;margin-bottom:.9rem;font-size:.8rem;color:var(--muted)}.balance-status strong{color:var(--ink)}.balance-status.balanced{border-color:#d5fb7055}.balance-status.unbalanced{border-color:#ff8a5b55}.order-balance{margin:1rem 0}.order-balance strong{display:block;margin-bottom:.2rem}
@media(max-width:520px){.person-row{grid-template-columns:2.35rem minmax(0,1fr) 1.7rem 1.9rem 1.9rem 1.9rem 1.9rem;gap:.15rem;padding:.4rem}.person-action,.quantity-action{height:2rem;min-width:0;padding:0}.person-name{font-size:.82rem;min-width:0}.pool-total{padding-inline:.65rem}.pool-total span{display:none}.dock .repeat-button,.dock .reset-order-button{width:44px}.dock .signature{width:72px;margin-inline:.15rem 0}.summary-button{padding-inline:.7rem}}
.modal { width: min(calc(100% - 2rem), 480px); border: 1px solid var(--line); border-radius: 28px; color:var(--ink); background:#1b2a24; padding:1.3rem; box-shadow:0 30px 80px #0009; }
.modal::backdrop { background:rgba(4,10,7,.75); backdrop-filter:blur(5px); }.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.4rem}.modal h2{margin:0;font-size:1.7rem}.close{border:0;border-radius:50%;background:rgba(255,255,255,.08);width:40px;height:40px;font-size:1.7rem;cursor:pointer}.modal label,.modal legend{display:grid;gap:.5rem;font-size:.8rem;font-weight:800;color:#c5cec8;margin:1rem 0}.modal input{width:100%;border:1px solid var(--line);border-radius:14px;background:#101c17;color:white;padding:.85rem;outline:none;font-size:16px}.modal input:focus{border-color:var(--lime)}fieldset{border:0;padding:0;margin:0}.emoji-picker{display:flex;flex-wrap:wrap;gap:.45rem}.emoji-choice{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);width:45px;height:45px;font-size:1.45rem;cursor:pointer}.emoji-choice.selected{border-color:var(--lime);background:#d5fb7025}.primary{width:100%;border:0;border-radius:16px;background:var(--lime);color:#142015;font-weight:950;padding:1rem;cursor:pointer}.summary-list{list-style:none;padding:0;margin:0 0 1rem}.summary-list li{display:flex;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line)}.summary-list .mini{font-size:1.65rem;margin-right:.75rem}.summary-list strong{margin-left:auto;color:var(--lime)}.empty{text-align:center;color:var(--muted);padding:2rem 0}.summary-total{display:flex;justify-content:space-between;font-size:1.15rem;font-weight:900;margin:1.2rem 0}.toast{position:fixed;z-index:30;left:50%;bottom:7rem;transform:translate(-50%,20px);background:#f8f4e9;color:#142015;padding:.7rem 1rem;border-radius:99px;font-weight:800;font-size:.85rem;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.danger-button{width:100%;border:1px solid #ff8a5b66;border-radius:16px;background:#ff8a5b12;color:#ffad8d;font-weight:900;padding:.85rem;margin-top:.65rem;cursor:pointer}.danger-button[hidden]{display:none}
.organize-modal { height:min(82dvh,720px); display:none; grid-template-rows:auto auto auto 1fr; }
.organize-modal[open] { display:grid; }
.alpha-button { width:100%; border:1px solid #d5fb7066; border-radius:14px; background:#d5fb7015; color:var(--lime); padding:.8rem; font-weight:900; cursor:pointer; }
.drag-help { color:var(--muted); font-size:.75rem; margin:.8rem 0; }
.organize-list { overflow:auto; display:grid; gap:.4rem; padding-right:.2rem; }
.organize-row { display:grid; grid-template-columns:2rem 2.2rem 1fr 2.2rem 2.2rem; align-items:center; gap:.25rem; border:1px solid var(--line); border-radius:14px; background:#22342c; padding:.4rem; }
.organize-row.dragging { opacity:.45; border-color:var(--lime); }
.organize-row.drop-target { border-color:var(--lime); }
.drag-handle { color:var(--muted); font-size:1.2rem; text-align:center; cursor:grab; touch-action:none; }.row-emoji{font-size:1.35rem}.row-name{font-weight:800;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.move-button{border:0;background:rgba(255,255,255,.07);border-radius:9px;height:2.2rem;cursor:pointer}.move-button:disabled{opacity:.25}
@media(max-width:420px){.topbar{align-items:center;gap:.35rem}.header-actions{flex-direction:column-reverse}.add-button,.organize-button{padding:.55rem .75rem;font-size:.78rem}.team-logo{width:52px;height:52px;margin-inline:.15rem}.topbar h1{font-size:2rem}.topbar .eyebrow{font-size:.55rem}}
@media (min-width: 600px){.products{grid-template-columns:repeat(4,1fr)}.product{min-height:170px}.product .emoji{font-size:3.7rem}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}