/* app-version: 20 */
:root {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f5f2ed;
  background:#151720;
  font-synthesis:none;
  touch-action:manipulation
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:0;
  background:#151720
}

button,input,select,textarea {
  font:inherit;
  touch-action:manipulation
}

button {
  cursor:pointer
}

.page {
  max-width:1180px;
  margin:auto;
  padding:0 36px
}

.topbar {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.topbar-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  min-width:0
}

.brand-wordmark {
  display:flex;
  flex-direction:column;
  line-height:1
}

.brand-wordmark small {
  font-size:8px;
  letter-spacing:.32em;
  margin-top:5px;
  font-weight:700
}

.profile-button {
  display:flex;
  align-items:center;
  gap:9px;
  max-width:190px;
  min-height:39px;
  padding:4px 11px 4px 5px;
  background:#22242a;
  border:1px solid #3b3e44;
  border-radius:10px;
  color:#f5f2ed;
  font-size:12px;
  font-weight:700
}

.profile-button #active-profile-name {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.profile-avatar,.profile-option-avatar {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:7px;
  background:#dce98c;
  color:#14161a;
  font-size:13px;
  font-weight:800
}

.profile-chevron {
  margin-left:auto;
  color:#aeb0b4;
  font-size:19px;
  line-height:1
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  font-size:20px;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap
}

.brand-mark {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:11px;
  background:#ff765e;
  color:#151720;
  font-size:26px;
  font-weight:400;
  line-height:1
}

.brand-dot {
  color:#ff8269
}

.connection-status {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#b8b9c1;
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f4b85d;
  box-shadow:0 0 0 4px #f4b85d20
}

.connection-status.ready .status-dot {
  background:#8bc7a4;
  box-shadow:0 0 0 4px #8bc7a420
}

.connection-status.offline .status-dot {
  background:#ff8269;
  box-shadow:0 0 0 4px #ff826920
}

.hero {
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden
}

.hero-copy {
  position:relative;
  z-index:1;
  padding:34px 0 65px
}

.eyebrow {
  font-size:11px;
  letter-spacing:.2em;
  font-weight:800;
  color:#ff927b;
  margin:0 0 24px
}

.hero h1 {
  font-size:clamp(48px,6vw,78px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0;
  font-weight:800
}

.hero h1 em {
  font-style:normal;
  color:#ff8269
}

.hero-description {
  max-width:425px;
  color:#aaadb8;
  line-height:1.7;
  font-size:14px;
  margin:23px 0 0
}

.hero-art {
  height:365px;
  width:430px;
  flex:0 0 430px;
  position:relative;
  display:grid;
  place-items:center
}

.art-orbit {
  position:absolute;
  border-radius:50%;
  border:1px solid #ffffff13
}

.art-orbit-one {
  width:352px;
  height:352px
}

.art-orbit-two {
  width:255px;
  height:255px
}

.art-glass {
  height:220px;
  width:158px;
  border:8px solid #f8e6d0;
  border-top:0;
  border-radius:0 0 38px 38px;
  transform:rotate(-12deg);
  position:relative;
  overflow:hidden;
  box-shadow:10px 14px 28px #0004
}

.art-glass:before {
  content:"";
  position:absolute;
  top:0;
  left:-9px;
  right:-9px;
  height:9px;
  background:#f8e6d0;
  border-radius:9px
}

.art-glass:after {
  content:"";
  position:absolute;
  width:110px;
  height:12px;
  background:#f8e6d0;
  bottom:-35px;
  left:15px;
  border-radius:10px;
  box-shadow:0 -12px 0 -3px #f8e6d0
}

.art-liquid {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:115px;
  background:linear-gradient(145deg,#fbaf68,#f56b5c 75%);
  border-radius:45% 35% 0 0 / 12% 12% 0 0
}

.art-liquid:before,.art-liquid:after {
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#ffd7a0;
  opacity:.65
}

.art-liquid:before {
  top:40px;
  left:38px
}

.art-liquid:after {
  top:68px;
  right:30px;
  width:8px;
  height:8px
}

.art-spark {
  position:absolute;
  color:#ff8269
}

.art-spark-one {
  font-size:48px;
  top:34px;
  right:42px
}

.art-spark-two {
  font-size:29px;
  bottom:43px;
  left:41px;
  color:#f7c58d
}

.tracker {
  background:#f6f3ee;
  color:#252833;
  border-radius:24px 24px 0 0;
  padding:44px 54px 34px;
  min-height:430px;
  box-shadow:0 16px 50px #0002
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center
}

.eyebrow-muted {
  color:#d48372;
  margin-bottom:9px
}

.section-heading h2 {
  font-size:38px;
  letter-spacing:-.035em;
  line-height:1.1;
  margin:0 0 7px
}

.today-date {
  color:#8f929b;
  font-size:13px;
  margin:0
}

.day-totals {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.total-pill {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  background:#eae7e2;
  border-radius:15px;
  padding:12px 16px;
  min-width:100px
}

.total-money {
  background:#ffe5da;
  min-width:155px
}

.total-label {
  color:#767a84;
  font-size:12px;
  font-weight:700
}

.total-pill strong {
  font-size:25px;
  line-height:1;
  letter-spacing:-.06em
}

.total-money strong {
  color:#d4634c;
  white-space:nowrap
}

.add-form {
  margin:35px 0 32px;
  background:#fff;
  border:1px solid #e8e5e1;
  border-radius:16px;
  padding:21px 22px 20px
}

.add-form label {
  display:block;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px
}

.form-row {
  display:flex;
  gap:10px;
  align-items:flex-end
}

.consumer-field {
  width:180px;
  flex:0 0 180px
}

.drink-field {
  flex:1;
  min-width:0
}

.price-field {
  width:170px;
  flex:0 0 170px
}

.select-wrap {
  position:relative;
  flex:1
}

.select-wrap select,.price-field input,.custom-field input {
  width:100%;
  height:48px;
  border:1px solid #dfdfe0;
  border-radius:9px;
  background:#fff;
  color:#282b36;
  padding:0 15px;
  font-size:13px;
  outline:none
}

.select-wrap select {
  appearance:none;
  padding-right:36px
}

.select-wrap select:invalid {
  color:#9da0a7
}

.select-wrap select:focus,.price-field input:focus,.custom-field input:focus {
  border-color:#ee8d78;
  box-shadow:0 0 0 3px #ee8d7825
}

.select-arrow {
  position:absolute;
  right:16px;
  top:8px;
  font-size:24px;
  line-height:1;
  color:#8c8e96;
  pointer-events:none
}

.add-button {
  min-width:148px;
  height:48px;
  border:0;
  border-radius:9px;
  background:#f4765e;
  color:#fff;
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  transition:background .15s,transform .15s
}

.add-button:hover {
  background:#e76149;
  transform:translateY(-1px)
}

.add-button span {
  font-size:19px;
  font-weight:400
}

.custom-field {
  margin-top:16px
}

.custom-field[hidden],.form-message[hidden],.empty-state[hidden] {
  display:none
}

.form-message {
  color:#bd4f3e;
  font-size:12px;
  margin:10px 0 0
}

.list-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:15px
}

.list-heading h3 {
  font-size:18px;
  letter-spacing:-.045em;
  margin:0
}

.list-heading span {
  font-size:12px;
  color:#9699a0
}

.drink-list {
  display:flex;
  flex-direction:column;
  gap:24px
}

.person-group {
  min-width:0
}

.person-group-head {
  padding-bottom:12px
}

.person-toggle {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 20px;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border:1px solid #343740;
  border-radius:10px;
  background:#1d2026;
  color:#f5f2ed;
  text-align:left
}

.person-toggle:hover {
  background:#292d34;
  border-color:#6b7450
}

.person-chevron {
  display:grid;
  place-items:center;
  color:#dce98c;
  font-size:22px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .15s ease
}

.person-toggle[aria-expanded="false"] .person-chevron {
  transform:rotate(-90deg)
}

.person-identity {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}

.person-identity h4 {
  margin:0;
  overflow-wrap:anywhere;
  font-size:15px;
  font-weight:750
}

.person-total {
  color:#c4c6cb;
  font-size:13px;
  font-weight:750;
  white-space:nowrap
}

.drink-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px
}

.drink-grid[hidden] {
  display:none
}

.drink-card {
  background:#fff;
  border:1px solid #e8e5e1;
  border-radius:14px;
  min-height:126px;
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px
}

.drink-card-head {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.drink-symbol {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  flex:0 0 35px;
  border-radius:10px;
  background:#ffe8dc;
  color:#e46f55;
  font-size:20px
}

.drink-name {
  font-size:14px;
  font-weight:800;
  overflow-wrap:anywhere;
  line-height:1.25
}

.drink-card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}

.drink-count {
  font-size:28px;
  letter-spacing:-.07em;
  line-height:1;
  font-weight:800
}

.counter-controls {
  display:flex;
  gap:6px
}

.counter-button {
  height:34px;
  width:34px;
  border:1px solid #e4e2e1;
  border-radius:9px;
  background:#f8f7f5;
  color:#5e626c;
  font-size:21px;
  line-height:1;
  display:grid;
  place-items:center
}

.counter-button:hover {
  background:#ece9e4
}

.counter-button.plus {
  background:#252833;
  border-color:#252833;
  color:white
}

.counter-button.plus:hover {
  background:#414551
}

.drink-pricing {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  border-top:1px solid #efeeec
}

.card-price-field,.card-subtotal {
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#858892;
  font-size:11px;
  font-weight:700
}

.card-price-input-wrap {
  display:flex;
  align-items:center;
  gap:3px;
  width:145px;
  height:38px;
  padding:0 8px;
  border:1px solid #e4e2e1;
  border-radius:8px;
  background:#f8f7f5;
  color:#252833;
  font-size:13px
}

.card-price-input-wrap:focus-within {
  border-color:#ee8d78;
  box-shadow:0 0 0 3px #ee8d7825
}

.card-price-input-wrap input {
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#252833;
  font-size:13px;
  font-weight:800
}

.card-price-input-wrap input[aria-invalid="true"] {
  color:#bd4f3e
}

.save-price-button {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:0;
  border-radius:6px;
  background:#dce98c;
  color:#14161a;
  font-size:15px;
  font-weight:800
}

.card-subtotal {
  text-align:right;
  min-width:0
}

.card-subtotal strong {
  color:#252833;
  font-size:15px;
  white-space:nowrap
}

.card-price-error {
  color:#bd4f3e;
  font-size:11px;
  line-height:1.35
}

.card-price-error[hidden] {
  display:none
}

.empty-state {
  border:1px dashed #d8d4ce;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px 15px 30px;
  color:#9a9da4
}

.empty-icon {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  background:#fce7dc;
  border-radius:14px;
  color:#e87b61;
  font-size:27px;
  margin-bottom:11px
}

.empty-state p {
  margin:0 0 3px;
  color:#41444d;
  font-weight:800;
  font-size:14px
}

.empty-state>span:last-child {
  font-size:12px
}

.storage-note {
  font-size:11px;
  color:#999ba1;
  margin:25px 0 0
}

.footer {
  height:96px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#858994;
  font-size:12px
}

.footer>span:first-child {
  color:#e1e0e1;
  font-weight:800;
  font-size:17px;
  letter-spacing:.01em
}

.remove-dialog {
  width:min(390px,calc(100% - 32px));
  border:0;
  border-radius:18px;
  padding:26px;
  background:#f8f5f0;
  color:#252833;
  box-shadow:0 24px 80px #0007
}

.remove-dialog::backdrop {
  background:#0c0d13a8
}

.dialog-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:#ffe4dd;
  color:#d05a48;
  font-size:28px
}

.remove-dialog h2 {
  font-size:22px;
  letter-spacing:-.05em;
  margin:17px 0 7px
}

.remove-dialog p {
  color:#747781;
  font-size:13px;
  line-height:1.55;
  margin:0
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:25px
}

.dialog-actions button {
  padding:10px 14px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  border:1px solid #dad9d7;
  background:#fff;
  color:#31343e
}

.dialog-actions .dialog-remove {
  border-color:#ef755e;
  background:#ef755e;
  color:#fff
}

.dialog-actions button:hover {
  filter:brightness(.95)
}

.profile-dialog {
  width:min(440px,calc(100% - 28px));
  max-height:calc(100vh - 32px);
  overflow:auto;
  border:1px solid #3a3d43;
  border-radius:20px;
  padding:26px;
  background:#1b1d23;
  color:#f5f2ed;
  box-shadow:0 24px 80px #0009
}

.profile-dialog::backdrop {
  background:#050609cf
}

.profile-dialog h2 {
  font-size:24px;
  letter-spacing:-.05em;
  margin:17px 0 8px
}

.profile-dialog-content>p {
  color:#a4a7b0;
  font-size:13px;
  line-height:1.55;
  margin:0 0 20px
}

.profile-list {
  display:grid;
  gap:8px;
  max-height:210px;
  overflow:auto
}

.profile-list:empty {
  display:none
}

.profile-option {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:1px solid #353840;
  border-radius:10px;
  background:#252830;
  color:#f5f2ed;
  text-align:left;
  font-size:13px;
  font-weight:700
}

.profile-option[aria-current="true"] {
  border-color:#dce98c
}

.profile-option>span:nth-child(2) {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1
}

.profile-option>span:last-child {
  color:#dce98c;
  font-size:18px
}

.profile-form {
  margin-top:22px;
  padding-top:19px;
  border-top:1px solid #363940
}

.profile-form label {
  display:block;
  font-size:12px;
  font-weight:800;
  margin-bottom:9px
}

.profile-form-row {
  display:flex;
  gap:8px
}

.profile-form input {
  min-width:0;
  flex:1;
  height:42px;
  padding:0 12px;
  border:1px solid #44474d;
  border-radius:8px;
  outline:none;
  background:#111318;
  color:#fff;
  font-size:13px
}

.profile-form button {
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:#dce98c;
  color:#14161a;
  font-size:12px;
  font-weight:800
}

.profile-message {
  color:#ff9d88;
  font-size:11px;
  margin:9px 0 0
}

.profile-message[hidden],.profile-close[hidden] {
  display:none
}

.profile-close {
  display:block;
  margin:17px 0 0 auto;
  padding:7px 0;
  border:0;
  background:transparent;
  color:#bfc1c7;
  font-size:12px;
  font-weight:700
}

:root,body {
  background:#08090d
}

.brand-mark {
  background:#f4f4f0;
  color:#08090d
}

.brand-dot,.hero h1 em,.art-spark {
  color:#dce98c
}

.eyebrow,.eyebrow-muted {
  color:#dce98c
}

.hero-description {
  color:#a8abb4
}

.art-liquid {
  background:linear-gradient(145deg,#dce98c,#a5bd61 75%)
}

.tracker {
  background:#14161b;
  color:#f5f2ed;
  border:1px solid #30333a
}

.today-date,.list-heading span,.storage-note {
  color:#a6a9b0
}

.total-pill {
  background:#24272e
}

.total-label {
  color:#afb1b8
}

.total-money {
  background:#dce98c
}

.total-money .total-label,.total-money strong {
  color:#14161a
}

.add-form,.drink-card {
  background:#1d2026;
  border-color:#343740
}

.select-wrap select,.price-field input,.custom-field input {
  background:#121419;
  border-color:#42454d;
  color:#f5f2ed
}

.select-wrap select:invalid,.price-field input::placeholder,.custom-field input::placeholder {
  color:#8e919a
}

.select-arrow {
  color:#b9bbc1
}

.add-button,.counter-button.plus,.dialog-actions .dialog-remove {
  background:#dce98c;
  border-color:#dce98c;
  color:#14161a
}

.add-button:hover,.counter-button.plus:hover {
  background:#edfaa0
}

.drink-symbol,.empty-icon {
  background:#323c29;
  color:#dce98c
}

.counter-button {
  background:#2b2e35;
  border-color:#45484f;
  color:#f5f2ed
}

.counter-button:hover {
  background:#3b3f47
}

.drink-pricing {
  border-color:#343740
}

.card-price-field,.card-subtotal {
  color:#a5a8b1
}

.card-price-input-wrap {
  background:#121419;
  border-color:#42454d;
  color:#f5f2ed
}

.card-price-input-wrap input,.card-subtotal strong {
  color:#f5f2ed
}

.empty-state {
  border-color:#3a3d44;
  color:#a7aab2
}

.empty-state p {
  color:#f5f2ed
}

.remove-dialog {
  background:#1b1d23;
  color:#f5f2ed;
  border:1px solid #3a3d43
}

.remove-dialog p {
  color:#a4a7b0
}

.dialog-icon {
  background:#333d2a;
  color:#dce98c
}

.dialog-actions button {
  background:#292c33;
  border-color:#44474e;
  color:#f5f2ed
}

.footer {
  color:#8d909a
}

.session-toolbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px
}

.session-button {
  min-height:42px;
  padding:0 16px;
  border:1px solid #dce98c;
  border-radius:10px;
  background:#dce98c;
  color:#14161a;
  font-size:13px;
  font-weight:800
}

.session-button:hover,.history-item button:hover {
  background:#edfaa0
}

.report-button {
  background:transparent;
  color:#dce98c
}

.report-button:hover {
  background:#2e3523
}

.report-dialog {
  width:min(620px,calc(100% - 32px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:26px;
  border:1px solid #3a3d43;
  border-radius:20px;
  background:#1b1d23;
  color:#f5f2ed;
  box-shadow:0 24px 80px #0009
}

.report-dialog::backdrop {
  background:#050609cf
}

.report-dialog h2 {
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:-.04em
}

.report-dialog>p {
  margin:0 0 20px;
  color:#a4a7b0;
  font-size:13px;
  line-height:1.55
}

.report-dialog label {
  display:block;
  margin-bottom:9px;
  font-size:12px;
  font-weight:800
}

.report-dialog textarea {
  display:block;
  width:100%;
  height:300px;
  max-height:40vh;
  max-height:40dvh;
  min-height:96px;
  resize:vertical;
  overflow:auto;
  padding:14px;
  border:1px solid #44474d;
  border-radius:10px;
  background:#111318;
  color:#f5f2ed;
  font-size:14px;
  line-height:1.6
}

.report-dialog .report-text-hint {
  margin:10px 0 0;
  font-size:12px
}

.report-dialog .report-message {
  margin:12px 0 0;
  color:#dce98c;
  overflow-wrap:anywhere
}

.report-message:empty {
  display:none
}

.report-actions {
  flex-wrap:wrap
}

.report-actions .report-copy {
  border-color:#dce98c;
  background:#dce98c;
  color:#14161a
}

.repeat-order {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0 12px
}

.repeat-order-button {
  min-height:44px;
  margin-top:16px;
  padding:8px 14px;
  border:1px solid #5b6540;
  border-radius:9px;
  background:#293020;
  color:#dce98c;
  font-size:13px;
  font-weight:800
}

.repeat-order-button:hover {
  background:#354029
}

.repeat-order p {
  min-width:0;
  margin:16px 0 0;
  color:#a6a9b0;
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.repeat-order-button[hidden],.repeat-order p[hidden] {
  display:none
}

.template-list {
  display:grid;
  gap:10px
}

.template-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:14px 16px;
  border:1px solid #343740;
  border-radius:12px;
  background:#1d2026
}

.template-details {
  display:grid;
  flex:1 1 180px;
  min-width:0;
  gap:5px;
  overflow-wrap:anywhere
}

.template-details strong {
  font-size:14px
}

.template-details span {
  color:#a6a9b0;
  font-size:12px;
  line-height:1.5
}

.template-item button {
  min-height:44px;
  padding:8px 14px;
  border:0;
  border-radius:8px;
  background:#dce98c;
  color:#14161a;
  font-size:12px;
  font-weight:800
}

.template-item button:hover {
  background:#edfaa0
}

.template-form input {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #44474d;
  border-radius:9px;
  background:#111318;
  color:#f5f2ed;
  font-size:14px
}

.template-message {
  margin:12px 0 0;
  color:#dce98c;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.template-message:empty {
  display:none
}

.session-message {
  margin:0;
  color:#ff9d88;
  font-size:12px
}

.history {
  margin-top:22px;
  padding:30px 36px 34px;
  border:1px solid #30333a;
  border-radius:20px;
  background:#14161b
}

.history-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  margin-bottom:20px
}

.history-heading h2 {
  margin:0;
  font-size:28px;
  letter-spacing:-.04em
}

.history-heading>p {
  margin:0;
  color:#a6a9b0;
  font-size:12px
}

.history-list {
  display:grid;
  gap:10px
}

.history-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid #343740;
  border-radius:12px;
  background:#1d2026
}

.history-item>div {
  display:grid;
  gap:4px
}

.history-item strong {
  font-size:14px
}

.history-item span {
  color:#a6a9b0;
  font-size:12px
}

.history-item button {
  flex:0 0 auto;
  min-height:38px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:#dce98c;
  color:#14161a;
  font-size:12px;
  font-weight:800
}

.history-item button:disabled {
  opacity:.6;
  cursor:default
}

.maintenance {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:22px;
  padding:22px 28px;
  border:1px solid #30333a;
  border-radius:18px;
  background:#14161b
}

.update-note {
  padding:14px 18px;
  border:1px solid #42472d;
  border-radius:12px;
  background:#20251a;
  color:#dce98c;
  font-size:13px;
  line-height:1.5
}
.update-note[hidden] { display:none }

.maintenance h2 {
  margin:0 0 5px;
  font-size:17px
}

.maintenance p {
  margin:0;
  color:#a6a9b0;
  font-size:12px;
  line-height:1.5
}

.reset-button {
  min-height:40px;
  padding:0 14px;
  border:1px solid #aa655b;
  border-radius:9px;
  background:transparent;
  color:#ffab9b;
  font-size:12px;
  font-weight:800
}

.reset-button:hover { background:#3d2828 }
.reset-button:disabled { opacity:.5;cursor:wait }
.maintenance .reset-message { flex-basis:100%;color:#ffab9b }

.history[hidden],.add-form[hidden],.session-button[hidden],.session-message[hidden],.reset-message[hidden] {
  display:none
}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid #dce98c;
  outline-offset:2px
}

@media(max-width:800px) {
  .consumer-field {
    width:130px;
    flex-basis:130px
  }
  .price-field {
    width:135px;
    flex-basis:135px
  }
  .add-button {
    min-width:120px
  }
  .hero-art {
    width:270px;
    flex-basis:270px;
    transform:scale(.78);
    transform-origin:center
  }
  .hero h1 {
    font-size:clamp(48px,7vw,64px)
  }
  .drink-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .tracker {
    padding:36px 32px 30px
  }
}

@media(max-width:600px) {
  .template-details {
    flex-basis:100%
  }
  .template-item button,.repeat-order-button {
    width:100%
  }
  .template-form input {
    font-size:16px
  }
  .person-toggle {
    grid-template-columns:minmax(0,1fr) 20px;
    column-gap:9px;
    row-gap:7px
  }
  .person-total {
    grid-column:1;
    grid-row:2;
    padding-left:37px;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.5
  }
  .person-chevron {
    grid-column:2;
    grid-row:1 / 3
  }
  .report-dialog {
    padding:20px
  }
  .report-dialog textarea {
    font-size:16px
  }
  .report-actions {
    flex-direction:column
  }
  .report-actions button {
    width:100%;
    min-height:44px
  }
  .maintenance { padding:20px 18px }
  .reset-button { width:100% }
  .history {
    padding:25px 18px
  }
  .history-heading {
    align-items:start;
    flex-direction:column
  }
  .history-item {
    align-items:start;
    flex-direction:column
  }
  .history-item button {
    width:100%
  }
  .session-button {
    width:100%;
    min-height:44px
  }
  .select-wrap select,.price-field input,.custom-field input,.card-price-input-wrap input,.profile-form input {
    font-size:16px
  }
  .page {
    padding:0 16px
  }
  .topbar {
    height:75px;
    gap:8px
  }
  .topbar-actions {
    gap:10px
  }
  .brand {
    font-size:16px;
    gap:7px
  }
  .brand-mark {
    width:29px;
    height:29px;
    border-radius:8px;
    font-size:20px
  }
  .brand-wordmark small {
    font-size:6px;
    letter-spacing:.22em
  }
  .profile-button {
    max-width:128px;
    min-height:36px;
    gap:6px;
    padding:3px 7px 3px 4px;
    font-size:11px
  }
  .profile-avatar {
    width:25px;
    height:25px;
    flex-basis:25px
  }
  .connection-status {
    font-size:0;
    gap:0
  }
  .status-dot {
    width:9px;
    height:9px
  }
  .hero {
    min-height:310px
  }
  .hero-copy {
    padding:22px 0 30px
  }
  .hero h1 {
    font-size:clamp(38px,10vw,48px)
  }
  .hero-description {
    font-size:13px;
    max-width:310px
  }
  .hero-art {
    display:none
  }
  .tracker {
    padding:28px 19px 29px;
    border-radius:18px 18px 0 0
  }
  .section-heading h2 {
    font-size:32px
  }
  .day-totals {
    flex-direction:column;
    gap:6px
  }
  .total-pill {
    padding:8px 10px;
    gap:5px;
    min-width:0
  }
  .total-money {
    min-width:0
  }
  .total-label {
    font-size:10px
  }
  .total-pill strong {
    font-size:24px
  }
  .add-form {
    margin:26px 0;
    padding:17px
  }
  .form-row {
    flex-direction:column
  }
  .consumer-field,.drink-field,.price-field {
    width:100%;
    flex:0 0 auto
  }
  .add-button {
    height:46px;
    width:100%
  }
  .drink-grid {
    grid-template-columns:1fr
  }
  .drink-card {
    min-height:154px
  }
  .counter-button {
    width:42px;
    height:42px
  }
  .footer {
    height:82px
  }
  .footer>span:last-child {
    font-size:10px;
    text-align:right;
    max-width:130px
  }
}

@media(prefers-reduced-motion:reduce) {
  .person-chevron {
    transition:none
  }
}

@media(max-width:390px) {
  .section-heading {
    align-items:flex-start;
    flex-direction:column
  }
  .day-totals {
    flex-direction:row;
    justify-content:flex-start;
    width:100%
  }
  .total-pill {
    flex:1
  }
}

.shared-entry {margin:0 0 24px}
.shared-entry p,#shared-status,.shared-setup p {color:#a5a7b2;font-size:14px;line-height:1.5}
.shared-mode .tracker:not(.shared-panel),.shared-mode #history,.shared-mode #templates,.shared-mode #profile-button,.shared-mode .shared-entry {display:none!important}
.shared-panel[hidden] {display:none!important}
.shared-setup {display:grid;gap:12px;margin:24px 0;padding:20px;border:1px solid #343640;border-radius:18px}
.shared-setup input,.shared-setup select {width:100%;min-width:0;background:#111218;border:1px solid #41434e;border-radius:12px;color:#f5f2ed;padding:14px;font-size:16px}
.shared-setup label {font-weight:650}
.shared-setup[hidden] {display:none}
.shared-person-group {border:1px solid #343640;border-radius:14px;margin:12px 0;padding:16px}
.shared-person-group summary {cursor:pointer;font-weight:700;min-height:32px;overflow-wrap:anywhere}
.shared-person-group p {color:#a5a7b2}
.shared-drink {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #343640}
.shared-drink span {white-space:pre-line;overflow-wrap:anywhere;line-height:1.7}
.shared-counter {display:flex;gap:8px;flex-shrink:0}
.shared-counter button {min-height:44px;min-width:44px;padding:8px;font-size:22px}
#shared-receipt {display:block;width:100%;min-height:220px;margin:12px 0;padding:12px;background:#111218;color:#f5f2ed;border:1px solid #41434e;border-radius:10px;font-size:16px}
#shared-title,#shared-person,#shared-error {overflow-wrap:anywhere}
@media(max-width:600px) {.shared-setup {padding:14px}.shared-person-group {padding:12px}.shared-panel .session-toolbar button {width:100%}.shared-panel .total-pill {max-width:100%}}
#shared-invite-link {width:100%;padding:12px;background:#111218;color:#f5f2ed;border:1px solid #41434e;border-radius:10px;font-size:16px}
.shared-panel button:disabled {opacity:.5;cursor:default}

.shared-references {margin:24px 0}.shared-references[hidden] {display:none}#shared-reference-list {display:flex;flex-wrap:wrap;gap:10px}#shared-reference-list button {overflow-wrap:anywhere;max-width:100%}

.transfer-entry {padding:18px 20px;margin:0 0 24px;border:1px solid #343640;border-radius:18px;background:#15161c}
.transfer-entry p {margin:0 0 12px;color:#c0c2cb;line-height:1.5}
.transfer-entry-actions {display:flex;gap:10px;flex-wrap:wrap}
.transfer-entry-actions button {min-height:44px}
.transfer-dialog {max-height:85dvh;overflow-y:auto;overflow-x:hidden}
.transfer-dialog [hidden] {display:none!important}
.transfer-dialog p {overflow-wrap:anywhere;line-height:1.5}
.transfer-dialog input {display:block;box-sizing:border-box;width:100%;min-width:0;margin:10px 0 14px;background:#111218;border:1px solid #41434e;border-radius:12px;color:#f5f2ed;padding:14px;font-size:16px}
.transfer-dialog button,.transfer-destination {min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.transfer-dialog button {margin:8px 0}
.transfer-dialog button:disabled {opacity:.5;cursor:wait}
.transfer-destination {display:flex;align-items:center;justify-content:center;padding:12px;border-radius:12px;background:#ddeb8b;color:#111218;font-weight:700;text-decoration:none;margin:12px 0}
#transfer-export-code {font-family:monospace;font-size:16px}
@media(max-width:600px) {.transfer-entry {padding:16px}.transfer-entry-actions button {width:100%}.transfer-dialog button {width:100%}}