:root {
  --paper: #f8f0e3;
  --paper-2: #fffaf1;
  --ink: #25170f;
  --muted: #786858;
  --espresso: #24160e;
  --espresso-2: #3a2418;
  --caramel: #b86f1c;
  --caramel-2: #d7953d;
  --cream: #ead4b6;
  --line: #d8bea0;
  --green: #1ca35b;
  --danger: #a83b35;
  --shadow: 0 14px 34px rgba(51, 30, 16, .12);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #eee7dd; }
body {
  min-height: 100%; margin: 0; color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 5%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(135deg, #f4eee5 0%, #ebe1d4 100%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

a { color: var(--caramel); }
button, input, summary { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: sticky; top: 0; z-index: 40; min-height: 70px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px max(18px, env(safe-area-inset-left)); color: white;
  background: linear-gradient(135deg, #1d120c, #352117);
  box-shadow: 0 8px 22px rgba(30,18,10,.2);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: white; text-decoration: none; }
.brand-seal, .public-seal, .login-mark {
  display: grid; place-items: center; border: 1px dashed #eadac4; border-radius: 50%;
  width: 43px; height: 43px; font-family: Georgia, serif; font-size: 25px; line-height: 1;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.05);
}
.brand strong { display: block; letter-spacing: .08em; font-size: 14px; }
.brand small { display: block; color: #d9b98f; font-family: Georgia, serif; font-style: italic; }
.small-link { color: #f5e6d5; text-decoration: none; font-size: 14px; }

.container { position: relative; width: min(1100px, calc(100% - 24px)); margin: 24px auto 70px; }
.public-container { width: min(610px, calc(100% - 20px)); }
.login-container { width: min(520px, calc(100% - 20px)); }
.page-head, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head { margin-bottom: 18px; }
.customer-head { align-items: flex-end; }
h1 { margin: 3px 0; font-size: clamp(29px, 5vw, 43px); line-height: 1.05; letter-spacing: -.03em; }
h2 { margin: 2px 0 16px; font-size: 22px; }
.eyebrow, .section-kicker { margin: 0 0 4px; color: var(--caramel); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.muted { margin: 5px 0 0; color: var(--muted); }
.back { display: inline-block; margin-bottom: 12px; text-decoration: none; font-weight: 750; font-size: 13px; }

.paper-card {
  position: relative; margin-bottom: 18px; padding: 21px; border: 1px solid #dac5aa;
  border-radius: 24px; background: rgba(255,250,241,.94); box-shadow: var(--shadow);
  overflow: hidden;
}
.paper-card::before {
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(164,108,53,.28);
  border-radius: 17px; pointer-events: none;
}
.paper-card > * { position: relative; }
.stitched { isolation: isolate; }
.narrow { max-width: 610px; }
.form-card { padding: 28px; }

.button, button.button {
  border: 0; border-radius: 14px; padding: 13px 17px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 850; font-size: 15px; transition: transform .15s, filter .15s;
}
.button:active { transform: scale(.985); }
.button.dark { color: white; background: linear-gradient(135deg, #1f130c, #392318); box-shadow: 0 7px 15px rgba(37,22,12,.17); }
.button.caramel { color: white; background: linear-gradient(135deg, #9c5817, #c67c24); }
.button.outline { color: var(--espresso); background: rgba(255,255,255,.5); border: 1px solid var(--line); }
.button.whatsapp { color: white; background: var(--green); }
.button.reward-button { color: white; background: linear-gradient(135deg, #a45c13, #d28a29); }
.full { width: 100%; }
.big { min-height: 56px; font-size: 17px; }

label { display: block; margin: 16px 0 8px; font-weight: 820; }
label small { color: var(--muted); font-weight: 600; }
input {
  width: 100%; min-height: 51px; padding: 11px 13px; color: var(--ink); background: #fffdf8;
  border: 1px solid #d9c4a8; border-radius: 13px; font-size: 16px;
}
input:focus { outline: 3px solid rgba(183,105,24,.14); border-color: var(--caramel); }

.flash { position: relative; z-index: 50; padding: 13px 15px; margin-bottom: 14px; border-radius: 14px; font-weight: 760; }
.flash.success { color: #155d3b; background: #ddf4e7; }
.flash.error { color: #852a27; background: #fde1df; }
.empty { padding: 20px; border-radius: 14px; color: var(--muted); text-align: center; background: rgba(246,238,226,.7); }

/* Login */
.login-wrap { min-height: 78vh; display: grid; place-items: center; }
.login-panel { width: 100%; padding: 34px 28px; text-align: center; }
.login-mark { margin: 0 auto 15px; color: #fff; background: var(--espresso); }
.display-title { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(35px, 9vw, 54px); letter-spacing: .035em; }
.script-title { margin: -3px 0 21px; font-family: Georgia, serif; font-style: italic; font-size: 25px; color: var(--espresso-2); }
.login-box { margin: 0 auto; padding: 20px; border: 1px solid #dec9ad; border-radius: 18px; background: rgba(255,255,255,.65); }
.login-box h1 { font-size: 23px; }
.login-box p { margin: 4px 0 12px; color: var(--muted); }
.pin-input { text-align: center; letter-spacing: .55em; font-size: 24px; }
.bean-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 5px; }
.bean-divider::before, .bean-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bean-divider span { width: 17px; height: 11px; border-radius: 70% 30% 70% 30%; transform: rotate(-30deg); background: var(--espresso); }
.micro-copy { color: var(--muted); font-size: 13px; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
.stat { padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #24160e, #42291b); box-shadow: var(--shadow); }
.stat strong { display: block; font-size: 31px; line-height: 1; }
.stat span { display: block; margin-top: 7px; color: #e5d0b6; font-size: 13px; }
.reward-stat { background: linear-gradient(145deg, #9b5715, #c87a21); }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.result-head { margin-top: 20px; }
.customer-list, .transaction-list, .history-list { display: grid; gap: 9px; }
.customer-row, .transaction-row {
  display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e3d2bd;
  border-radius: 15px; color: var(--ink); text-decoration: none; background: rgba(255,255,255,.55);
}
.customer-avatar { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--espresso); font-weight: 900; }
.customer-main, .transaction-main { min-width: 0; flex: 1; }
.customer-main strong, .transaction-main strong { display: block; }
.customer-main small, .transaction-main small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; font-weight: 850; font-size: 12px; background: #eee1d2; }
.badge.gift { color: #fff; background: var(--caramel); }
.drink-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px dashed #cda97d; border-radius: 50%; font-size: 22px; }
.transaction-meta { flex: 0 0 auto; text-align: right; }
.transaction-meta time { display: block; color: var(--muted); font-size: 12px; }
.transaction-meta b { display: inline-block; margin-top: 5px; padding: 3px 8px; border: 1px solid #cda97d; border-radius: 999px; font-size: 12px; }

/* Loyalty card shared */
.customer-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; align-items: start; }
.loyalty-summary { text-align: center; background: linear-gradient(150deg, #fff9ed, #f4e7d2); }
.loyalty-title { font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.loyalty-title strong { display: block; margin-top: 4px; color: #d8b58c; }
.stamp-board { margin: 17px auto; padding: 16px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #24160e, #3b261a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.stamp-board > .stamp:not(.stamp-grid .stamp) { display: inline-flex; }
.stamp-grid, .loyalty-summary .stamp-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.loyalty-summary .loyalty-title { grid-column: 1 / -1; }
.stamp {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 90px; margin: auto;
  display: grid; place-items: center; border: 2px dashed rgba(255,244,225,.68); border-radius: 50%;
  color: rgba(255,255,255,.48); background: rgba(255,255,255,.06);
}
.stamp b { position: absolute; top: 9px; font-size: 14px; }
.bean { width: 29px; height: 20px; border-radius: 65% 35% 65% 35%; transform: rotate(-28deg); background: rgba(255,255,255,.18); }
.bean::after { content: ""; display: block; width: 2px; height: 17px; margin: 2px auto; border-radius: 2px; background: rgba(255,255,255,.45); transform: rotate(24deg); }
.stamp.filled { color: #fff; background: #faf0df; border-color: #c39867; box-shadow: 0 5px 13px rgba(0,0,0,.17); }
.stamp.filled b { color: var(--espresso); }
.stamp.filled .bean { background: linear-gradient(135deg, #8d4c12, #c27622); }
.stamp.filled .bean::after { background: #e9bc7c; }
.progress-copy { margin: 14px 0; }
.progress-copy strong { font-size: 22px; }
.progress-copy small { display: block; color: var(--muted); margin-top: 7px; }
.progress-track { height: 8px; margin: 10px 0 0; overflow: hidden; border-radius: 999px; background: #ddd0bd; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #885016, #c47a25); }
.reward-ticket {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 15px;
  border: 2px dashed #b89971; border-radius: 18px; color: #8c755d; background: #eee4d4;
}
.reward-ticket strong { display: block; font-size: 18px; }
.reward-ticket small { display: inline-block; margin-top: 4px; font-weight: 900; letter-spacing: .07em; }
.reward-cup { font-size: 35px; filter: grayscale(1); }
.reward-ticket.unlocked {
  color: #fff; border-color: #ffe0a0; background: linear-gradient(135deg, #a85f13, #d48928);
  box-shadow: 0 0 0 5px rgba(211,134,38,.12), 0 12px 24px rgba(167,91,16,.25);
  animation: rewardGlow 2.2s ease-in-out infinite;
}
.reward-ticket.unlocked .reward-cup { filter: none; }
.reward-ticket.unlocked small { padding: 4px 11px; color: #7c440c; border-radius: 999px; background: #ffe5b6; }
@keyframes rewardGlow { 0%,100% { transform: translateY(0); box-shadow: 0 0 0 5px rgba(211,134,38,.10), 0 12px 24px rgba(167,91,16,.22); } 50% { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(211,134,38,.16), 0 16px 30px rgba(167,91,16,.3); } }
.mini-stats { display: flex; justify-content: center; gap: 13px; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: 12px; }
.mini-stats span { padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.6); }
.qr-box { margin-top: 17px; padding: 14px; border: 1px dashed #c9a77c; border-radius: 17px; background: rgba(255,255,255,.55); }
.qr-box p { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.qr { display: block; width: 165px; max-width: 70%; margin: 11px auto; border-radius: 8px; }
.qr-box small { color: var(--muted); }

/* Product picker */
.transaction-panel { overflow: visible; }
.drink-picker { position: relative; border: 1px solid #cda679; border-radius: 14px; background: #fffdf8; }
.drink-picker summary { min-height: 53px; padding: 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; list-style: none; }
.drink-picker summary::-webkit-details-marker { display: none; }
.drink-picker[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform .2s; }
.picker-panel { position: relative; z-index: 10; max-height: 430px; overflow: auto; padding: 10px; border-top: 1px solid #e2cfb7; background: #fffaf1; }
.picker-search { position: sticky; top: 0; z-index: 2; margin-bottom: 9px; background: #fff; }
.picker-group-title { padding: 9px 6px 5px; color: var(--caramel); font-weight: 900; font-size: 11px; letter-spacing: .15em; }
.product-option { width: 100%; display: grid; grid-template-columns: 33px 1fr auto; align-items: center; gap: 8px; padding: 10px; color: var(--ink); text-align: left; border: 0; border-bottom: 1px solid #eadbc8; background: transparent; cursor: pointer; }
.product-option:last-child { border-bottom: 0; }
.product-option em { color: var(--muted); font-size: 12px; font-style: normal; }
.product-option.selected { color: #fff; border-radius: 10px; background: linear-gradient(135deg, #9c5818, #c77c25); }
.product-option.selected em { color: #fff4e7; }
.dynamic-field { margin-top: 16px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.choice-placeholder { grid-column: 1 / -1; margin: 0; padding: 13px; border-radius: 12px; color: var(--muted); text-align: center; background: #f2e9dc; }
.size-choice { margin: 0; }
.size-choice input { position: absolute; opacity: 0; pointer-events: none; }
.size-choice { min-height: 62px; padding: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #d6bea0; border-radius: 13px; background: #fffdf8; cursor: pointer; }
.size-choice:has(input:checked) { color: #fff; border-color: var(--caramel); background: linear-gradient(135deg, #9b5717, #c67a24); box-shadow: 0 7px 14px rgba(153,82,17,.2); }
.extra-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 18px; }
.extra-choice { min-height: 49px; margin: 0; padding: 9px; display: flex; align-items: center; gap: 7px; border: 1px solid #dac5aa; border-radius: 12px; background: #fffdf8; cursor: pointer; font-size: 13px; }
.extra-choice input { position: absolute; opacity: 0; pointer-events: none; }
.extra-choice span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #eee0ce; }
.extra-choice:has(input:checked) { color: #fff; border-color: var(--espresso); background: var(--espresso); }
.extra-choice:has(input:checked) span { color: var(--espresso); background: #f5d9ad; }
.gift-panel { border: 2px solid #d18a32; overflow: visible; }
.gift-title { display: flex; align-items: center; gap: 12px; }
.gift-title > span { font-size: 35px; }

/* Message and history */
.message-panel { border: 2px solid #7cc99a; }
.whatsapp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #53645a; font-size: 12px; }
.whatsapp-head span { color: var(--green); font-size: 20px; }
.whatsapp-head small { margin-left: auto; }
.message-preview { margin: 0 0 14px; padding: 16px; border-radius: 16px; white-space: pre-wrap; font-family: inherit; line-height: 1.55; background: #fff; border: 1px solid #d8eadf; }
.history-item { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e3d2bd; border-radius: 15px; background: rgba(255,255,255,.55); }
.history-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border: 1px dashed #cda77a; border-radius: 50%; }
.history-content { min-width: 0; flex: 1; }
.history-content strong, .history-content small { display: block; }
.history-content small { margin-top: 3px; color: var(--muted); }
.history-content .extras-line { color: #9c5a18; font-weight: 760; }
.history-actions { flex: 0 0 auto; font-size: 12px; }
.history-mark { padding: 5px 8px; color: #fff; border-radius: 999px; background: var(--caramel); }
.voided { opacity: .42; text-decoration: line-through; }
.danger-link { padding: 0; border: 0; color: var(--danger); background: transparent; cursor: pointer; font-weight: 750; }

/* Public card */
.public-card { max-width: 590px; margin: auto; }
.public-loyalty { padding: 25px; text-align: center; background: linear-gradient(155deg, #fff9ee, #f1dfc6); }
.public-card-head { display: flex; align-items: center; justify-content: space-between; margin: -25px -25px 18px; padding: 12px 19px; color: #fff; background: var(--espresso); }
.public-card-head p { margin: 0; font-weight: 900; letter-spacing: .07em; }
.public-seal { width: 38px; height: 38px; }
.public-name { display: flex; align-items: center; justify-content: center; gap: 10px; }
.public-name h1 { font-family: Georgia, serif; font-style: italic; font-weight: 500; }
.public-name span { color: var(--caramel); }
.public-stamps { display: block; }
.public-stamps .stamp-grid { margin-top: 13px; }
.public-history { margin-top: 18px; }
.extra-gifts { padding: 9px; color: #7b4b13; border-radius: 12px; background: #ffedc7; font-weight: 800; }
.public-note { margin: 14px auto; color: var(--muted); text-align: center; font-size: 12px; }

@media (max-width: 800px) {
  .container { margin-top: 15px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head .button { width: 100%; }
  .customer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .container { width: min(100% - 14px, 1100px); }
  .topbar { min-height: 62px; }
  .paper-card { padding: 17px; border-radius: 20px; }
  .stats-grid { gap: 7px; }
  .stat { padding: 13px 10px; }
  .stat strong { font-size: 25px; }
  .stat span { font-size: 11px; }
  .search-form { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: repeat(3,1fr); }
  .extra-grid { grid-template-columns: 1fr; }
  .stamp-board { padding: 13px; gap: 8px; }
  .stamp { max-width: 77px; }
  .customer-row { align-items: center; }
  .badge { max-width: 110px; text-align: center; }
  .section-head { align-items: flex-start; }
  .public-card-head { margin: -17px -17px 17px; }
}

@media (max-width: 390px) {
  .brand strong { font-size: 12px; }
  .brand-seal { width: 37px; height: 37px; }
  .choice-grid { grid-template-columns: 1fr; }
  .size-choice { min-height: 49px; flex-direction: row; }
  .stamp { max-width: 69px; }
}

/* ===== V3 visual refresh: loyalty card look ===== */
.bean {
  position: relative;
  width: 32px;
  height: 42px;
  border-radius: 58% 42% 58% 42% / 58% 42% 58% 42%;
  transform: rotate(18deg);
  background: linear-gradient(135deg, #8d5317 0%, #bf7423 48%, #e3ab63 100%);
  box-shadow: inset -5px -5px 10px rgba(83, 42, 10, .28), inset 5px 5px 9px rgba(255, 228, 190, .30), 0 4px 8px rgba(0,0,0,.12);
}
.bean::before {
  content: "";
  position: absolute;
  left: 50%; top: 10%;
  width: 3px; height: 80%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,244,224,.95), rgba(243,201,143,.65));
  transform: translateX(-50%) rotate(10deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.bean::after {
  content: "";
  position: absolute;
  right: -8px; top: 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border-top: 2px solid rgba(234, 197, 141, .9);
  border-right: 2px solid rgba(234, 197, 141, .9);
  border-left: 0; border-bottom: 0;
  transform: rotate(25deg);
  opacity: .95;
}
.stamp { background: rgba(255,255,255,.08); border-color: rgba(255,241,220,.75); }
.stamp b { top: 11px; font-size: 17px; font-weight: 900; color: rgba(255,255,255,.78); }
.stamp .bean { filter: grayscale(.82) brightness(.82); opacity: .55; box-shadow: none; }
.stamp.filled {
  background: #fbf4e9;
  border-color: #cfa369;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 10px 18px rgba(0,0,0,.14);
}
.stamp.filled b { color: #1f130c; }
.stamp.filled .bean { filter: none; opacity: 1; }

.reward-ticket {
  gap: 16px;
  justify-content: flex-start;
  padding: 19px 20px;
  border: 2px dashed #c9a374;
  border-radius: 22px;
  color: #9b753f;
  background: rgba(255, 251, 244, .72);
}
.reward-ticket strong { font-size: 20px; letter-spacing: .03em; }
.reward-ticket small { margin-top: 6px; font-size: 15px; letter-spacing: .08em; }
.reward-ticket.unlocked {
  color: #fff8ed;
  border-color: #f7d79b;
  background: linear-gradient(135deg, #a65f14, #d58b2b);
  box-shadow: 0 0 0 5px rgba(211,134,38,.12), 0 15px 28px rgba(167,91,16,.23);
}
.reward-ticket.unlocked small {
  color: #7c440c;
  background: #ffe6bb;
}
.reward-cup.svg-cup {
  display: inline-block;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23804c13' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 17h26l-1.8 7v22c0 6-4.6 11-10.2 11h-2c-5.6 0-10.2-5-10.2-11V24L23 17Z'/%3E%3Cpath d='M48 24h5.5c3.6 0 6.5 2.9 6.5 6.5S57.1 37 53.5 37H48'/%3E%3Cpath d='M29 17v-3h14v3'/%3E%3Cpath d='M36 34c-3 0-5.5 2.5-5.5 5.5S33 45 36 45s5.5-2.5 5.5-5.5S39 34 36 34Z'/%3E%3Cpath d='M30.5 39.5c1.8.7 3.4 1.9 5.5 1.9 2.2 0 3.8-1.2 5.5-1.9'/%3E%3C/g%3E%3C/svg%3E");
}
.reward-ticket.unlocked .reward-cup.svg-cup {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff8ed' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 17h26l-1.8 7v22c0 6-4.6 11-10.2 11h-2c-5.6 0-10.2-5-10.2-11V24L23 17Z'/%3E%3Cpath d='M48 24h5.5c3.6 0 6.5 2.9 6.5 6.5S57.1 37 53.5 37H48'/%3E%3Cpath d='M29 17v-3h14v3'/%3E%3Cpath d='M36 34c-3 0-5.5 2.5-5.5 5.5S33 45 36 45s5.5-2.5 5.5-5.5S39 34 36 34Z'/%3E%3Cpath d='M30.5 39.5c1.8.7 3.4 1.9 5.5 1.9 2.2 0 3.8-1.2 5.5-1.9'/%3E%3C/g%3E%3C/svg%3E");
}

.public-design {
  padding: 26px 22px 22px;
  text-align: center;
  background: linear-gradient(180deg, #fbf5ea 0%, #f2e4cf 100%);
}
.public-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 28px;
  margin-bottom: 6px;
}
.public-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  color: #2e1a0f;
  text-decoration: none;
  font-size: 38px;
  line-height: 1;
}
.public-name-single { margin-top: 0; }
.public-name-single h1 {
  font-size: clamp(42px, 9vw, 64px);
  line-height: 1;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
.public-script {
  margin: 0 0 18px;
  font-size: clamp(26px, 5vw, 34px);
  color: #4b2b1c;
}
.public-board {
  margin-top: 8px;
  padding: 28px 20px 24px;
  border-radius: 30px;
  background: linear-gradient(180deg, #2a170f 0%, #47281a 100%);
  box-shadow: inset 0 0 0 2px rgba(188, 141, 88, .22);
}
.public-board-title {
  font-size: 17px;
  letter-spacing: .06em;
  font-weight: 900;
}
.public-board-title strong {
  display: block;
  margin-top: 8px;
  color: #e2bf93;
  font-size: 17px;
}
.board-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
  color: #d9b98f;
}
.board-divider::before, .board-divider::after {
  content: "";
  width: 56px;
  height: 1px;
  background: rgba(227, 199, 158, .6);
}
.public-stamps .stamp-grid {
  margin-top: 10px;
  gap: 18px 14px;
}
.public-progress-copy { margin: 20px 0 18px; }
.public-progress-copy strong { font-size: clamp(28px, 5vw, 32px); }
.public-progress-copy small { font-size: 16px; }
.public-progress-copy .progress-track {
  height: 12px;
  margin-top: 14px;
  background: #dfd2be;
}
.public-progress-copy .progress-track span {
  background: linear-gradient(90deg, #9f5d16 0%, #c98024 55%, #da9f58 100%);
}
.public-reward { margin-top: 8px; }
.public-history h2 { margin-bottom: 14px; }
.public-history .history-item {
  align-items: center;
  padding: 14px 0;
}
.public-history .history-icon {
  width: 46px; height: 46px;
  font-size: 20px;
  background: rgba(255,255,255,.6);
}
.public-history .history-mark {
  min-width: 39px;
  text-align: center;
}

@media (max-width: 600px) {
  .public-design { padding: 18px 14px 16px; }
  .public-name-single h1 { font-size: 52px; }
  .public-script { font-size: 28px; }
  .public-board { padding: 22px 14px 18px; border-radius: 24px; }
  .public-board-title, .public-board-title strong { font-size: 15px; }
  .public-stamps .stamp-grid { gap: 14px 10px; }
  .reward-ticket { padding: 16px; }
  .reward-ticket strong { font-size: 18px; }
  .reward-ticket small { font-size: 13px; }
}

/* ===== V4 exact loyalty-card visual corrections ===== */
.stamp-grid {
  align-items: center;
}
.customer-board-v4,
.public-board {
  border: 2px solid rgba(188, 141, 88, .25);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.025), transparent 28%),
    linear-gradient(180deg, #2a170f 0%, #412417 100%);
}
.customer-board-v4 {
  display: block !important;
  padding: 28px 22px 26px;
  border-radius: 28px;
}
.customer-board-v4 .stamp-grid {
  margin-top: 10px;
}
.loyalty-summary-v4 {
  background: linear-gradient(180deg, #fbf5ea 0%, #f2e4cf 100%);
}

.stamp {
  width: 100%;
  max-width: 108px;
  aspect-ratio: 1;
  border-width: 2px;
  overflow: visible;
}
.stamp b {
  z-index: 3;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1;
}
.bean,
.stamp.filled .bean,
.stamp .bean {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 48px;
  height: 58px;
  margin: 0;
  border-radius: 0;
  transform: translate(-50%, -50%);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  opacity: .42;
  filter: grayscale(1) brightness(1.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23834a12'/%3E%3Cstop offset='.48' stop-color='%23bd7020'/%3E%3Cstop offset='1' stop-color='%23e1a354'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0d6'/%3E%3Cstop offset='1' stop-color='%23eabf82'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M68 8C91 25 92 68 68 94 48 116 17 110 8 84-3 51 15 18 40 7c10-4 19-4 28 1Z' fill='url(%23g)'/%3E%3Cpath d='M55 10c-13 17-18 37-15 56 2 14 8 26 16 37' fill='none' stroke='url(%23h)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M60 13c-8 17-10 34-7 49 3 15 9 27 15 34' fill='none' stroke='%236b360c' stroke-opacity='.4' stroke-width='2.5' stroke-linecap='round'/%3E%3Cellipse cx='34' cy='29' rx='9' ry='15' fill='%23fff' opacity='.13' transform='rotate(22 34 29)'/%3E%3C/svg%3E");
}
.bean::before,
.bean::after {
  content: none !important;
  display: none !important;
}
.stamp.filled .bean {
  opacity: 1;
  filter: none;
}
.stamp.filled {
  background: linear-gradient(180deg, #fffaf1 0%, #f6ead8 100%);
  border-color: #d3a464;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 8px 18px rgba(0,0,0,.15);
}
.stamp:not(.filled) {
  color: #b8aaa0;
  background: rgba(255,255,255,.055);
  border-color: rgba(241,222,198,.75);
}
.stamp:not(.filled) b {
  color: #c2b5ac;
}

.customer-board-v4 .stamp-grid,
.public-board .stamp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
}
.public-board-title,
.customer-board-v4 .public-board-title {
  color: #fffaf2;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: .06em;
}
.public-board-title strong,
.customer-board-v4 .public-board-title strong {
  color: #e3bd89;
  font-size: 17px;
}

.public-reward,
.loyalty-summary-v4 .reward-ticket {
  background: rgba(255,251,244,.65);
  border-color: #c79b66;
  color: #9d7138;
}
.public-reward strong,
.loyalty-summary-v4 .reward-ticket strong {
  color: #a76c27;
}
.public-reward.unlocked,
.loyalty-summary-v4 .reward-ticket.unlocked {
  background: linear-gradient(135deg, #a55d12, #d79131);
  color: #fff8ee;
}
.public-reward.unlocked strong,
.loyalty-summary-v4 .reward-ticket.unlocked strong {
  color: #fff8ee;
}

@media (max-width: 600px) {
  .stamp { max-width: 92px; }
  .stamp b { top: 10px; font-size: 16px; }
  .bean, .stamp.filled .bean, .stamp .bean { width: 40px; height: 50px; }
  .customer-board-v4, .public-board { padding: 22px 14px 20px; }
  .customer-board-v4 .stamp-grid, .public-board .stamp-grid { gap: 16px 10px; }
}

@media (max-width: 390px) {
  .stamp { max-width: 78px; }
  .bean, .stamp.filled .bean, .stamp .bean { width: 35px; height: 44px; }
  .stamp b { top: 8px; font-size: 15px; }
}


/* ===== V4 stronger card-like redesign ===== */
.exact-card, .exact-summary {
  background: linear-gradient(180deg, #fbf5ea 0%, #f4e7d3 100%);
}
.exact-board {
  margin-top: 18px;
  padding: 18px 18px 22px;
  border-radius: 30px;
  background: linear-gradient(180deg, #2d170f 0%, #4b2818 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), 0 12px 24px rgba(51,24,9,.12);
}
.compact-board { padding-bottom: 16px; }
.exact-board-title {
  text-align: center;
  color: #fff7eb;
  font-size: 16px;
  letter-spacing: .08em;
}
.exact-board-title strong {
  display: block;
  margin-top: 8px;
  color: #e1b67c;
  font-size: 15px;
}
.exact-stamp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 16px;
  margin-top: 18px;
}
.exact-stamp {
  position: relative;
  width: min(138px, 100%);
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px dashed rgba(244,227,201,.84);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exact-stamp b {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.82);
  z-index: 2;
}
.exact-stamp.filled {
  background: #f8f1e3;
  border-color: #c79756;
}
.exact-stamp.filled b { color: #21120c; }
.exact-bean {
  position: relative;
  width: 38px;
  height: 54px;
  border-radius: 58% 42% 58% 42% / 58% 42% 58% 42%;
  transform: rotate(17deg);
  background: linear-gradient(135deg, #9f5f18 0%, #c57a23 54%, #e6ba77 100%);
  box-shadow: inset -4px -5px 10px rgba(95, 52, 12, .28), inset 4px 4px 8px rgba(255, 234, 198, .22);
}
.exact-bean::before {
  content: "";
  position: absolute;
  left: 50%; top: 9%;
  width: 3px; height: 82%;
  transform: translateX(-50%) rotate(12deg);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4df, #f2c986);
}
.exact-bean::after {
  content: "";
  position: absolute;
  right: -10px; bottom: 10px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #e4b66d;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}
.exact-stamp:not(.filled) .exact-bean {
  filter: grayscale(1) brightness(.8);
  opacity: .48;
}
.exact-divider {
  height: 1px;
  margin: 16px 4px 14px;
  border-top: 2px dashed rgba(245,224,196,.45);
}
.reward-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.mini-cup {
  font-size: 32px;
  opacity: .9;
  color: #f5eee3;
}
.reward-badge-round {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #b46d20 0%, #d38a2e 100%);
  color: #fff7ed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px dashed rgba(255,241,223,.78);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.08);
}
.reward-badge-round small { font-size: 28px; font-weight: 900; line-height: 1; }
.reward-badge-round strong { font-size: 25px; line-height: 1; letter-spacing: .04em; }
.reward-badge-round em { font-style: italic; font-size: 24px; line-height: 1.05; }
.reward-badge-round.unlocked {
  background: radial-gradient(circle at 35% 30%, #ffd78e, #d27a22 65%, #ab6018 100%);
  transform: scale(1.04);
  box-shadow: 0 0 0 5px rgba(255,220,162,.18), 0 18px 30px rgba(146,80,13,.26);
}
.compact-badge { width: 118px; height: 118px; }
.compact-badge small { font-size: 23px; }
.compact-badge strong { font-size: 20px; }
.compact-badge em { font-size: 19px; }
.compact-reward-row { gap: 14px; }
.exact-progress-copy strong { font-size: clamp(28px, 5vw, 34px); }
.exact-progress-copy .progress-track {
  height: 12px;
  background: #dccfb9;
}
.exact-progress-copy .progress-track span {
  background: linear-gradient(90deg, #8f5617 0%, #c57822 50%, #e0ab62 100%);
}
.exact-ticket {
  margin-top: 18px;
  border: 2px dashed #cba16e;
  background: rgba(255, 249, 239, .7);
}
.exact-ticket.unlocked {
  background: linear-gradient(135deg, #a76118, #d18628);
}

/* make admin loyalty card more clearly different */
.loyalty-summary.exact-summary .mini-stats { margin-top: 18px; }
.loyalty-summary.exact-summary .qr-box { margin-top: 18px; }
.public-loyalty.exact-card .public-script { color: #543122; }
.public-loyalty.exact-card .public-name-single h1 { font-style: italic; }

@media (max-width: 900px) {
  .exact-stamp { width: min(112px, 100%); }
  .reward-badge-round { width: 126px; height: 126px; }
  .reward-badge-round small { font-size: 24px; }
  .reward-badge-round strong { font-size: 22px; }
  .reward-badge-round em { font-size: 20px; }
}
@media (max-width: 600px) {
  .exact-board { padding: 14px 12px 18px; border-radius: 26px; }
  .exact-board-title { font-size: 14px; }
  .exact-board-title strong { font-size: 14px; }
  .exact-stamp-grid { gap: 14px 10px; }
  .exact-stamp { width: min(98px, 100%); border-width: 2px; }
  .exact-stamp b { top: 9px; font-size: 16px; }
  .exact-bean { width: 32px; height: 46px; }
  .reward-badge-round { width: 108px; height: 108px; }
  .reward-badge-round small { font-size: 20px; }
  .reward-badge-round strong { font-size: 18px; }
  .reward-badge-round em { font-size: 17px; }
  .mini-cup { font-size: 24px; }
}

/* ===== V5 compact loyalty-card board ===== */
.compact-public-card,
.compact-summary-card {
  background: linear-gradient(180deg, #fbf5ea 0%, #f2e4cf 100%);
}

.compact-board-shell {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 18px 18px 24px;
  border-radius: 26px;
  border: 2px solid rgba(188, 141, 88, .18);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(180deg, #2b160e 0%, #4a281a 100%);
  box-shadow: inset 0 0 0 1px rgba(223, 186, 132, .12);
}
.compact-board-shell-admin {
  max-width: none;
}
.compact-board-title {
  text-align: center;
  font-weight: 900;
  color: #fffaf2;
  letter-spacing: .05em;
  font-size: 16px;
}
.compact-board-subline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 7px;
  color: #dfb47a;
}
.compact-board-subline strong {
  font-size: 15px;
  letter-spacing: .08em;
  color: #e1b77d;
}
.sprig {
  font-size: 14px;
  line-height: 1;
  color: #e1b77d;
}
.sprig.mirror { transform: scaleX(-1); }
.compact-stamp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 18px;
  justify-items: center;
  margin: 18px auto 0;
}
.compact-stamp {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 2px dashed rgba(247, 233, 214, .75);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.compact-stamp.filled {
  background: #fbf4e9;
  border-color: #d7b07b;
  box-shadow: 0 8px 18px rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.4);
}
.compact-stamp b {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  color: #24150e;
  z-index: 2;
}
.compact-stamp:not(.filled) b { color: rgba(255,255,255,.82); }
.bean-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -38%);
  width: 54px;
  height: 54px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .98;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%239c5a18'/%3E%3Cstop offset='0.5' stop-color='%23ba7427'/%3E%3Cstop offset='1' stop-color='%23df9a43'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M33 7c12 0 21 11 21 25S45 57 33 57c-10 0-19-11-19-25S23 7 33 7Z' fill='url(%23g1)'/%3E%3Cpath d='M32 8c-10 4-15 14-15 24 0 10 5 18 15 24-3-8-4-16-4-24 0-8 1-16 4-24Z' fill='%23b4671f' opacity='.7'/%3E%3Cpath d='M37 11c-3 6-5 13-5 21 0 9 2 17 5 23 3-5 6-13 6-23 0-9-3-17-6-21Z' fill='%23f0be73' opacity='.9'/%3E%3Cpath d='M34 10c-7 8-10 16-10 24 0 8 3 16 10 23' fill='none' stroke='%23fff4df' stroke-width='3' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");
}
.compact-stamp:not(.filled) .bean-svg {
  filter: grayscale(1) brightness(.95) opacity(.58);
}
.compact-progress-copy {
  margin: 18px auto 14px;
  max-width: 560px;
}
.compact-progress-copy strong {
  font-size: clamp(24px, 4.5vw, 32px);
}
.compact-progress-copy small {
  display: block;
  margin-top: 10px;
  color: #8f7d69;
  font-size: 16px;
}
.compact-progress-copy .progress-track {
  height: 10px;
  margin-top: 13px;
  border-radius: 999px;
  background: #d9cfbe;
}
.compact-progress-copy .progress-track span {
  background: linear-gradient(90deg, #9b5e18, #c97f24 60%, #d9a15c 100%);
}
.compact-reward-ticket {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 22px;
}
.compact-summary-card .compact-board-shell {
  padding: 16px 16px 20px;
}
.compact-summary-card .compact-stamp {
  width: 108px;
  height: 108px;
}
.compact-summary-card .bean-svg {
  width: 46px;
  height: 46px;
}
.compact-summary-card .compact-progress-copy strong {
  font-size: 28px;
}
.admin-progress-copy {
  margin-top: 18px;
}

@media (max-width: 760px) {
  .compact-board-shell {
    padding: 16px 14px 18px;
    border-radius: 22px;
  }
  .compact-stamp-grid {
    gap: 14px 12px;
  }
  .compact-stamp {
    width: 100px;
    height: 100px;
  }
  .compact-stamp b {
    top: 11px;
    font-size: 14px;
  }
  .bean-svg {
    width: 42px;
    height: 42px;
  }
  .compact-board-title { font-size: 15px; }
  .compact-board-subline strong { font-size: 14px; }
}
@media (max-width: 420px) {
  .compact-stamp {
    width: 84px;
    height: 84px;
  }
  .bean-svg {
    width: 34px;
    height: 34px;
  }
  .compact-stamp-grid {
    gap: 12px 10px;
  }
}


/* ===== V6 consent + WhatsApp automation preparation ===== */
.consent-panel { margin-top: 18px; }
.consent-form { display: grid; gap: 14px; }
.consent-choice {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d9c2a4;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
}
.consent-choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: #6a3b1d; }
.consent-choice strong, .consent-choice small { display: block; }
.consent-choice small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.consent-choice a { color: #7a431d; font-weight: 800; }
.required-choice { border-color: #b78a55; background: #fff8ec; }
.marketing-choice { border-style: dashed; }
.legal-box { margin-top: 4px; }
.form-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.consent-badge { padding: 7px 10px; border-radius: 999px; background: #eadbc6; color: #5b321c; font-size: 12px; font-weight: 900; }
.consent-note { margin-top: -4px; }
.auto-message-ok, .auto-message-warn { margin: 12px 0; padding: 12px 14px; border-radius: 14px; font-weight: 800; }
.auto-message-ok { color: #165b35; background: #e4f5e9; border: 1px solid #b9dfc4; }
.auto-message-warn { color: #79500f; background: #fff1cf; border: 1px solid #e9cd89; }
.legal-document { max-width: 760px; margin: 24px auto; line-height: 1.7; }
.legal-document h1 { margin-bottom: 18px; }
.legal-warning { padding: 14px; border-radius: 14px; color: #6b4711; background: #fff0c9; border: 1px solid #e6c77d; }
@media (max-width:600px) {
  .consent-choice { padding: 12px; }
  .legal-document { margin-top: 10px; }
}


/* V8 — Meta WhatsApp Embedded Signup */
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.button.whatsapp-mini,
.button.whatsapp-connect {
  background: #176b49;
  color: #fff;
  border-color: #176b49;
}
.button.whatsapp-mini:hover,
.button.whatsapp-connect:hover {
  background: #10583b;
  border-color: #10583b;
}
.button.whatsapp-connect {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  font-size: 1rem;
}
.button.whatsapp-connect:disabled {
  cursor: wait;
  opacity: .65;
}
.whatsapp-setup-card {
  max-width: 760px;
  margin-inline: auto;
}
.connection-state {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(83, 55, 38, .07);
}
.connection-state.connected {
  background: rgba(23, 107, 73, .10);
}
.connection-state strong,
.connection-state small {
  display: block;
}
.connection-state small {
  margin-top: 3px;
  color: var(--muted, #725f52);
}
.connection-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: #aa8d78;
  box-shadow: 0 0 0 5px rgba(170, 141, 120, .14);
}
.connection-state.connected .connection-dot {
  background: #176b49;
  box-shadow: 0 0 0 5px rgba(23, 107, 73, .14);
}
.setup-steps {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.setup-steps > div {
  display: flex;
  gap: 12px;
  align-items: center;
}
.setup-steps b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  color: #fff;
  background: #6a422e;
}
.setup-message {
  min-height: 24px;
  margin: 12px 0 0;
  text-align: center;
  font-weight: 700;
}
.setup-message.working { color: #76522e; }
.setup-message.success { color: #176b49; }
.setup-message.error { color: #a33a31; }
.connection-details {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}
.connection-details > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(83, 55, 38, .12);
}
.connection-details dt {
  color: var(--muted, #725f52);
}
.connection-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.setup-note {
  margin: 18px 0 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(196, 132, 63, .12);
}
@media (max-width: 620px) {
  .head-actions { width: 100%; }
  .head-actions .button { flex: 1 1 auto; text-align: center; }
  .connection-details > div { grid-template-columns: 1fr; gap: 3px; }
}