:root {
  --brown-950: #2f1c14;
  --brown-800: #5a3424;
  --brown-700: #754631;
  --brown-500: #a5704d;
  --cream-50: #fffdf9;
  --cream-100: #faf5ed;
  --cream-200: #f1e7d9;
  --cream-300: #e4d4c1;
  --ink: #342820;
  --muted: #876f60;
  --red: #a53b2b;
  --red-soft: #f8e8e3;
  --green: #42745c;
  --shadow: 0 18px 48px rgba(71, 40, 24, .10);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--cream-100);
}

* { box-sizing: border-box; }
html { background: var(--cream-100); }
body { margin: 0; min-width: 320px; background: var(--cream-100); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.customer-page { background: radial-gradient(circle at top right, #fff 0, transparent 27rem), var(--cream-100); }
.app-shell { width: min(100%, 760px); margin: 0 auto; }
.customer-shell { padding-bottom: 1.5rem; }
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.2rem 1rem; color: var(--cream-50); background: var(--brown-800); }
.brand-name { color: inherit; text-decoration: none; font-size: 1.25rem; font-weight: 700; letter-spacing: -.04em; }
.event-name { margin: .25rem 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .22em; color: #f6dfc8; }
.ticket-pill { min-width: 5.7rem; padding: .5rem .7rem .55rem; text-align: center; border: 1px solid rgba(255,255,255,.24); border-radius: .75rem; background: rgba(255,255,255,.09); }
.ticket-pill span { display: block; font-size: .7rem; color: #f0ddcb; }
.ticket-pill strong { display: block; margin-top: .05rem; font-size: 1.35rem; letter-spacing: .03em; }
.customer-main, .confirmation-view, .complete-view { padding: 1rem 1rem 0; }
.festival-banner-wrap { width: min(100%, 520px); margin: 1rem auto 0; overflow: hidden; border: 1px solid var(--cream-300); border-radius: 1.1rem; background: var(--cream-50); box-shadow: var(--shadow); }
.festival-banner { display: block; width: 100%; height: auto; }
.eyebrow, .section-kicker, .group-label { margin: 0; color: var(--brown-500); font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.step-card { margin-top: .9rem; padding: 1.2rem; border: 1px solid var(--cream-300); border-radius: 1.1rem; background: rgba(255,253,249,.9); }
.step-heading { display: flex; align-items: center; gap: .75rem; }
.step-index { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; background: var(--brown-800); color: #fff; font-size: .85rem; }
.step-heading h2 { margin: .2rem 0 0; color: var(--brown-950); font-size: 1.2rem; letter-spacing: -.04em; }
.choice-grid { display: grid; gap: .7rem; margin: 1.1rem 0 0; padding: 0; border: 0; }
.choice-card { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 5.2rem; padding: .85rem .9rem; border: 1px solid var(--cream-300); border-radius: .85rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.choice-card:has(input:checked) { border-color: var(--brown-500); background: #fffaf4; box-shadow: 0 0 0 2px rgba(165,112,77,.13); }
.choice-card input, .line-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-check { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; flex: 0 0 auto; border: 1px solid var(--cream-300); border-radius: 50%; background: #fff; }
.choice-card:has(input:checked) .choice-check { border: .4rem solid var(--brown-700); }
.choice-body { display: flex; flex: 1; flex-direction: column; gap: .3rem; }
.choice-body strong { font-size: .96rem; line-height: 1.35; }
.price { color: var(--brown-700); font-size: 1.1rem; font-weight: 700; }
.choice-note { align-self: flex-start; padding: .25rem .4rem; border-radius: .35rem; background: #f8ead5; color: var(--brown-700); font-size: .66rem; font-weight: 700; }
.choice-note.quiet { color: var(--muted); background: var(--cream-100); font-weight: 600; }
.section-help { margin: .85rem 0 .6rem; color: var(--muted); font-size: .82rem; }
.stacked-choices { display: grid; gap: .45rem; margin: .75rem 0 0; padding: 0; border: 0; }
.line-choice { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 3rem; padding: .55rem .8rem; border: 1px solid var(--cream-300); border-radius: .7rem; background: #fff; }
.line-choice:has(input:checked) { border-color: var(--brown-500); background: #fffaf4; }
.line-choice::before { content: ""; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border: 1px solid var(--cream-300); border-radius: 50%; background: #fff; }
.line-choice:has(input:checked)::before { border: .35rem solid var(--brown-700); }
.line-choice span { flex: 1; font-size: .94rem; }
.line-choice strong { color: var(--muted); font-size: .92rem; }
.temperature-badge { display: inline-flex; align-items: center; padding: .14rem .38rem; margin-left: .22rem; border: 1px solid transparent; border-radius: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2; vertical-align: .08em; }
.temperature-ice { border-color: #a9d5f3; color: #155f98; background: #e8f5ff; }
.temperature-hot { border-color: #efb1a5; color: #a33a2d; background: #fff0ed; }
.discount-note { margin: 1rem 0 .35rem; padding: .7rem .8rem; border-left: .25rem solid var(--brown-500); color: var(--brown-700); background: #fff7ea; font-size: .88rem; line-height: 1.45; }
.discount-note strong { font-size: 1rem; }
.drink-groups { display: grid; gap: 1rem; margin-top: .9rem; }
.compact { margin-top: .45rem; }
.no-drink-choice { margin-top: .1rem; }
.form-error, .page-error { margin-top: .9rem; padding: .85rem .95rem; border: 1px solid #e1b0a6; border-radius: .7rem; color: #813425; background: var(--red-soft); font-size: .9rem; line-height: 1.5; }
.page-error { margin: 0 0 1rem; }
.submit-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem -1rem 0; padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--cream-300); background: rgba(250,245,237,.94); backdrop-filter: blur(12px); }
.total-label { display: block; color: var(--muted); font-size: .73rem; font-weight: 700; }
.total-price { display: block; margin-top: .1rem; color: var(--brown-950); font-size: 1.55rem; }
.primary-button { min-height: 3.25rem; padding: .7rem 1.1rem; border: 0; border-radius: .75rem; color: #fff; background: var(--brown-800); box-shadow: 0 7px 0 var(--brown-950); font-size: .93rem; font-weight: 800; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.primary-button:disabled { color: #a19083; background: #e1d7cc; box-shadow: 0 5px 0 #cdbdad; opacity: 1; }
.primary-button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 4px 0 var(--brown-950); }
.full-width { width: 100%; margin-top: 1.2rem; }
.text-button { display: block; margin: 1.1rem auto 0; padding: .35rem; border: 0; color: var(--brown-700); background: transparent; text-decoration: underline; text-underline-offset: .2rem; font-size: .9rem; }
.confirmation-view, .complete-view { max-width: 32rem; margin: 0 auto; text-align: center; }
.status-mark { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: 1.3rem auto .8rem; border: 1px solid var(--cream-300); border-radius: 50%; color: #fff; background: var(--brown-700); font-size: 1.7rem; }
.complete-mark { background: var(--green); border-color: var(--green); }
.confirmation-view h1, .complete-view h1 { margin: .45rem 0; color: var(--brown-950); font-size: 1.75rem; letter-spacing: -.06em; }
.confirm-lead { margin: .65rem 0 1.2rem; color: var(--muted); font-size: .9rem; }
.summary-card { margin-top: 1.1rem; padding: .55rem 1rem; border: 1px solid var(--cream-300); border-radius: .9rem; text-align: left; background: #fff; }
.summary-row, .summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--cream-200); font-size: .9rem; }
.summary-row strong { color: var(--brown-700); white-space: nowrap; }
.summary-ticket { color: var(--muted); }
.summary-ticket strong { color: var(--brown-950); font-size: 1.35rem; }
.summary-total { padding-top: .9rem; border-bottom: 0; color: var(--brown-700); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.summary-total strong { color: var(--brown-950); font-size: 1.55rem; letter-spacing: 0; }
.complete-number-label { margin-top: 1.5rem; color: var(--muted); font-size: .86rem; }
.complete-number { margin-top: .05rem; color: var(--brown-950); font-size: 3.8rem; font-weight: 700; letter-spacing: .02em; }
.complete-view .summary-card { margin-top: 1.4rem; }
.progress-card { margin-top: 1.25rem; padding: 1rem .85rem; border: 1px solid var(--cream-300); border-radius: .9rem; background: #fff; }
.order-progress { display: grid; grid-template-columns: 1fr .55fr 1fr .55fr 1fr; align-items: start; gap: .3rem; }
.progress-step { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: .45rem; color: var(--muted); text-align: center; font-size: .75rem; font-weight: 700; }
.progress-dot { width: 1rem; height: 1rem; border: .22rem solid var(--cream-300); border-radius: 50%; background: var(--cream-50); }
.progress-step.is-done { color: var(--brown-700); }
.progress-step.is-done .progress-dot { border-color: var(--brown-700); background: var(--brown-700); }
.progress-step.is-current .progress-dot { width: 1.25rem; height: 1.25rem; margin-top: -.125rem; box-shadow: 0 0 0 .28rem rgba(117,70,49,.14); }
.progress-step[data-progress-stage="ready"].is-done { color: var(--green); }
.progress-step[data-progress-stage="ready"].is-done .progress-dot { border-color: var(--green); background: var(--green); }
.progress-step[data-progress-stage="ready"].is-current .progress-dot { box-shadow: 0 0 0 .28rem rgba(66,116,92,.14); }
.progress-connector { height: .2rem; margin-top: .42rem; border-radius: 99px; background: var(--cream-300); }
.progress-connector.is-done { background: var(--brown-700); }
.progress-connector[data-progress-connector="ready"].is-done { background: var(--green); }
.progress-message { margin: 1rem 0 0; padding: .75rem .65rem; border-radius: .65rem; color: var(--brown-800); background: #fff7ea; font-size: .84rem; font-weight: 700; line-height: 1.55; }
.payment-note { margin-top: .7rem; padding: .75rem .65rem; border: 1px solid #a9d7bd; border-radius: .65rem; color: #286044; background: #effaf3; font-size: .86rem; line-height: 1.55; }
.payment-note small { display: block; margin-top: .45rem; color: var(--muted); font-size: .68rem; }
.customer-footer { padding: 1.2rem 1rem .5rem; color: var(--muted); text-align: center; font-size: .7rem; letter-spacing: .06em; }

/* Staff screen */
.admin-page { min-height: 100vh; background: var(--cream-100); }
.admin-shell { width: min(100%, 1080px); margin: 0 auto; padding: 0 1rem 2rem; }
.admin-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.6rem .2rem 1.35rem; border-bottom: 1px solid var(--cream-300); }
.admin-brand { margin: 0; color: var(--brown-700); font-size: 1.35rem; font-weight: 700; }
.admin-header h1 { margin: .35rem 0 0; color: var(--brown-950); font-size: 1rem; letter-spacing: .14em; }
.admin-header h1 span { margin-left: .55rem; color: var(--muted); font-size: .8rem; font-weight: 500; letter-spacing: .06em; }
.admin-meta { display: flex; flex-direction: column; align-items: end; gap: .25rem; color: var(--muted); font-size: .78rem; }
.admin-meta span:first-child { color: var(--brown-700); font-size: .92rem; font-weight: 800; }
.operator-state { padding: .25rem .5rem; border: 1px solid var(--cream-300); border-radius: 999px; color: var(--muted); background: #fff; font-size: .68rem; font-weight: 800; }
.operator-state.is-operator { border-color: #a9d7bd; color: #286044; background: #effaf3; }
.admin-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.75rem .2rem 1rem; }
.admin-intro h2 { margin: .25rem 0 0; color: var(--brown-950); font-size: 1.65rem; letter-spacing: -.06em; }
.polling-note { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: .78rem; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(66,116,92,.12); }
.admin-tabs { display: flex; gap: .35rem; margin: 0 .2rem 1rem; padding: .3rem; border: 1px solid var(--cream-300); border-radius: .75rem; background: #f8efe4; }
.admin-tab { flex: 1; padding: .7rem .8rem; border-radius: .55rem; color: var(--muted); text-align: center; font-size: .88rem; font-weight: 800; text-decoration: none; }
.admin-tab:hover, .admin-tab:focus-visible { color: var(--brown-800); background: #fffaf4; }
.admin-tab.is-selected { color: #fff; background: var(--brown-700); box-shadow: 0 3px 0 var(--brown-950); }
.admin-tab span { display: inline-block; min-width: 1.4rem; margin-left: .25rem; padding: .08rem .3rem; border-radius: 999px; color: inherit; background: rgba(255,255,255,.22); font-size: .72rem; }
.operator-panel { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 .2rem 1rem; padding: 1rem; border: 1px solid var(--cream-300); border-radius: .75rem; background: #fffdf9; }
.operator-panel-copy { flex: 1; }
.operator-panel h3 { margin: 0; color: var(--brown-800); font-size: .9rem; }
.operator-panel p { margin: .25rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.operator-login-form { display: grid; gap: .3rem; min-width: min(100%, 23rem); }
.operator-login-form label { color: var(--muted); font-size: .72rem; font-weight: 800; }
.operator-login-row { display: flex; gap: .4rem; }
.operator-login-row input { min-width: 0; flex: 1; padding: .62rem .7rem; border: 1px solid var(--cream-300); border-radius: .5rem; color: var(--brown-950); background: #fff; font: inherit; }
.operator-login-row input:focus-visible { outline: .2rem solid rgba(117,70,49,.18); border-color: var(--brown-500); }
.secondary-button { min-height: 2.55rem; padding: .5rem .8rem; border: 1px solid var(--brown-500); border-radius: .5rem; color: var(--brown-700); background: #fffaf4; font-size: .78rem; font-weight: 800; }
.secondary-button:hover, .secondary-button:focus-visible { background: #f7eadb; }
.orders-list { display: block; }
.orders-table-wrap { overflow-x: auto; border: 1px solid var(--cream-300); border-radius: .75rem; background: #fffdf9; box-shadow: 0 7px 20px rgba(71, 40, 24, .05); }
.orders-table { width: 100%; border-collapse: collapse; min-width: 790px; }
.orders-table th, .orders-table td { padding: .85rem .9rem; border-bottom: 1px solid var(--cream-200); text-align: left; vertical-align: middle; }
.orders-table th { color: var(--muted); background: var(--cream-100); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.orders-table tbody tr:last-child td { border-bottom: 0; }
.orders-table td { color: var(--brown-950); font-size: .92rem; font-weight: 700; }
.order-row.status-received td:first-child { border-left: .35rem solid #75c6e8; }
.order-row.status-completed td:first-child { border-left: .35rem solid #e7b83f; }
.order-row.status-handed-over td:first-child { border-left: .35rem solid #e58ba8; }
.order-number-cell { width: 7rem; }
.order-time-cell { width: 6.5rem; white-space: nowrap; }
.order-number { display: block; font-size: 1.6rem; line-height: 1; }
.order-time { color: var(--muted); font-size: .86rem; font-weight: 700; }
.option-cheese, .option-spicy, .option-chili { font-weight: 800 !important; }
.option-cheese { color: #765a00 !important; background: #fff4b8; }
.option-spicy { color: #a33225 !important; background: #ffd9d4; }
.option-chili { color: #a14b08 !important; background: #ffe0bc; }
.option-cheese, .option-spicy, .option-chili { padding: .25rem .45rem !important; border: 1px solid currentColor; border-radius: .35rem; }
.status-cell { width: 9rem; text-align: center !important; }
.status-button { width: 100%; min-height: 2.65rem; padding: .55rem .7rem; border: 1px solid transparent; border-radius: .55rem; font-size: .84rem; font-weight: 800; transition: filter .15s ease, transform .12s ease; }
.status-button:not(:disabled):hover { filter: brightness(.96); }
.status-button:not(:disabled):active { transform: translateY(1px); }
.status-button.status-received { border-color: #75c6e8; color: #145b7d; background: #dff4fc; }
.status-button.status-preparing, .status-badge.status-preparing { border-color: #75c6e8; color: #145b7d; background: #dff4fc; }
.status-button.status-completed { border-color: #e7b83f; color: #765400; background: #fff1bd; }
.status-button.status-handed-over { border-color: #e58ba8; color: #8b3150; background: #ffe1ea; }
.status-button:disabled { cursor: default; opacity: 1; }
.status-badge { display: inline-flex; min-width: 7rem; min-height: 2.65rem; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .7rem; border: 1px solid transparent; border-radius: .55rem; font-size: .84rem; font-weight: 800; }
.status-badge.status-received { border-color: #75c6e8; color: #145b7d; background: #dff4fc; }
.status-badge.status-completed { border-color: #e7b83f; color: #765400; background: #fff1bd; }
.status-badge.status-handed-over { border-color: #e58ba8; color: #8b3150; background: #ffe1ea; }
.status-badge small { display: block; font-size: .62rem; font-weight: 600; }
.empty-orders { padding: 4rem 1rem; border: 1px dashed var(--cream-300); border-radius: .9rem; text-align: center; background: rgba(255,255,255,.4); }
.empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%; color: #fff; background: var(--green); font-size: 1.4rem; }
.empty-orders h3 { margin: 0; color: var(--brown-800); font-size: 1rem; }
.empty-orders p { margin: .5rem 0 0; color: var(--muted); font-size: .84rem; }
.admin-footer { margin-top: 1.2rem; color: var(--muted); font-size: .78rem; text-align: center; }

@media (min-width: 560px) {
  .customer-main, .confirmation-view, .complete-view { padding-left: 1.4rem; padding-right: 1.4rem; }
  .brand-header { padding-left: 1.6rem; padding-right: 1.6rem; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .drink-groups { grid-template-columns: 1fr 1fr; }
  .no-drink-choice { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .admin-shell { padding: 0 .7rem 1.5rem; }
  .admin-header { align-items: start; }
  .operator-panel { align-items: stretch; flex-direction: column; }
  .operator-login-form { min-width: 0; }
  .orders-table-wrap { border: 0; overflow: visible; background: transparent; box-shadow: none; }
  .orders-table { display: block; min-width: 0; }
  .orders-table thead { display: none; }
  .orders-table tbody, .orders-table tr, .orders-table td { display: block; width: 100%; }
  .orders-table tbody { display: grid; gap: .65rem; }
  .orders-table tr { padding: .7rem .8rem .8rem; border: 1px solid var(--cream-300); border-left-width: .35rem; border-radius: .7rem; background: #fffdf9; box-shadow: 0 7px 20px rgba(71, 40, 24, .05); }
  .orders-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 0; text-align: right; }
  .orders-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 800; }
  .orders-table .order-number-cell { display: block; width: auto; padding-top: 0; text-align: left; }
  .orders-table .order-number-cell::before { display: none; }
  .orders-table .order-time-cell { width: 100%; }
  .orders-table .status-cell { display: block; width: auto; padding-bottom: 0; text-align: right !important; }
  .orders-table .status-cell::before { display: none; }
  .status-button { max-width: 9rem; }
}

@media (max-width: 410px) {
  .submit-bar { align-items: end; }
  .primary-button { padding-left: .75rem; padding-right: .75rem; font-size: .82rem; }
  .admin-header h1 { letter-spacing: .07em; }
  .admin-header h1 span { display: block; margin: .35rem 0 0; }
}