:root {
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-blue: #eaf3ff;
  --text: #10213b;
  --muted: #6f7d91;
  --blue: #0759cf;
  --blue-dark: #003c97;
  --red: #ed1b2f;
  --green: #149962;
  --border: #e1e9f4;
  --shadow: 0 15px 40px rgba(22, 56, 105, .10);
  --radius: 21px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
.hidden { display: none !important; }

.state-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 30px; text-align: center; background: var(--bg); }
.state-screen h1 { margin: 4px 0 0; font-size: 26px; }
.state-screen p { max-width: 320px; margin: 0; color: var(--muted); line-height: 1.55; }
.state-mascot-ring { width: 150px; height: 150px; display: grid; place-items: center; overflow: hidden; border: 7px solid white; border-radius: 50%; background: linear-gradient(145deg, #e6f1ff, #fff); box-shadow: 0 0 0 3px var(--blue), var(--shadow); }
.state-mascot-ring.error-ring { box-shadow: 0 0 0 3px var(--red), var(--shadow); }
.state-mascot-ring img { width: 135px; height: 135px; object-fit: contain; }
.web-login { min-height: 100vh; }
.web-login-card { width: min(100%, 390px); margin-top: 2px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.web-login-card .button.wide { margin: 8px 0 12px; }
.web-login-card p { max-width: none; min-height: 20px; font-size: 12px; }
.spinner { width: 28px; height: 28px; border: 3px solid #d8e3f2; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.app-shell { max-width: 760px; margin: 0 auto; min-height: 100vh; padding-bottom: 94px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: rgba(244,247,252,.93); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.brand-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-row strong { display: block; font-size: 13px; letter-spacing: .08em; }
.brand-row > div:last-child { min-width: 0; }
.brand-row > div:last-child span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.header-avatar { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: var(--surface-blue); box-shadow: 0 0 0 2px var(--blue); }
.header-avatar img { width: 42px; height: 42px; object-fit: contain; }
.live-pill { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--green); background: #fff; font-size: 10px; font-weight: 800; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #22bb70; box-shadow: 0 0 0 4px rgba(34,187,112,.12); }
.live-pill.offline { color: var(--red); }
.live-pill.offline i { background: var(--red); box-shadow: 0 0 0 4px rgba(237,27,47,.12); }

.network-state { position: sticky; z-index: 19; top: 68px; margin: 8px 12px 0; padding: 10px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; border: 1px solid #ffd1d7; border-radius: 17px; background: #fff1f3; box-shadow: var(--shadow); }
.network-state img { width: 44px; height: 44px; object-fit: contain; }
.network-state b { display: block; font-size: 12px; }
.network-state p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }

main { padding: 16px; }
.view { display: none; animation: rise .22s ease-out; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
h1 { margin: 2px 0 0; font-size: 27px; letter-spacing: -.03em; }
h2 { margin: 22px 2px 11px; font-size: 17px; }
.eyebrow { display: inline-block; color: var(--blue); font-size: 10px; line-height: 1.4; letter-spacing: .12em; font-weight: 900; }
.muted, .empty { color: var(--muted); font-size: 12px; line-height: 1.55; }
.empty { padding: 12px 0; text-align: center; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.home-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-card, .balance-first { min-height: 155px; padding: 17px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 25px; box-shadow: var(--shadow); }
.price-card { position: relative; color: #fff; background: radial-gradient(circle at 100% 0, rgba(255,255,255,.22), transparent 36%), linear-gradient(145deg, #0867eb, var(--blue-dark)); }
.price-card::after { content: "O"; position: absolute; right: -11px; top: -25px; color: rgba(255,255,255,.09); font-size: 115px; font-weight: 900; }
.balance-first { border: 1px solid #dbe8fa; color: var(--text); background: linear-gradient(150deg, #fff, #edf5ff); }
.price-card span, .balance-first span { position: relative; z-index: 1; margin-bottom: auto; color: rgba(255,255,255,.76); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.balance-first span { color: var(--blue); }
.price-card strong, .balance-first strong { position: relative; z-index: 1; display: block; font-size: clamp(27px, 8vw, 39px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.balance-first strong { color: var(--blue); }
.balance-first strong.locked-home { font-size: clamp(20px, 6vw, 28px); line-height: 1.05; white-space: normal; }
.price-card small, .balance-first small { position: relative; z-index: 1; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 10px; }
.balance-first small { color: var(--muted); }

.role-tools { display: flex; gap: 9px; margin-top: 11px; }
.role-button { flex: 1; min-height: 48px; padding: 9px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #cfe0f7; border-radius: 15px; color: var(--blue); background: #fff; cursor: pointer; }
.role-button span { font-size: 20px; }
.role-button b { font-size: 12px; }

.status-progress-card { margin-top: 13px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 24px rgba(22,56,105,.05); }
.status-main { display: flex; align-items: center; gap: 11px; }
.status-icon { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--surface-blue); font-size: 23px; }
.status-copy { min-width: 0; }
.status-copy span { display: block; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.status-copy b { display: block; margin-top: 2px; font-size: 14px; }
.status-copy p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.visits-left { margin-left: auto; color: var(--blue); font-size: 25px; text-align: center; }
.visits-left small { display: block; color: var(--muted); font-size: 8px; font-weight: 700; }
.progress-label { display: flex; justify-content: space-between; margin-top: 13px; color: var(--muted); font-size: 9px; }
.progress { height: 8px; margin: 6px 0 2px; overflow: hidden; border-radius: 999px; background: #e7eef8; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #4c95ff); }

.friday-banner { position: relative; min-height: 120px; margin-top: 13px; padding: 16px 105px 16px 17px; overflow: hidden; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #ef2438, #b90719); box-shadow: 0 13px 30px rgba(210,17,38,.2); }
.friday-banner h2 { margin: 8px 0 4px; font-size: 19px; }
.friday-banner p { margin: 0; color: rgba(255,255,255,.8); font-size: 11px; line-height: 1.4; }
.friday-banner img { position: absolute; right: 2px; bottom: -4px; width: 108px; height: 108px; object-fit: contain; }
.friday-tag { padding: 4px 7px; border-radius: 7px; color: var(--red); background: #fff; font-size: 9px; font-weight: 900; letter-spacing: .08em; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-card { min-height: 82px; padding: 9px 4px; display: grid; justify-items: center; align-content: center; gap: 7px; border: 1px solid var(--border); border-radius: 17px; color: var(--text); background: #fff; cursor: pointer; }
.quick-card span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--surface-blue); font-size: 18px; }
.quick-card:nth-child(2) span { color: var(--red); background: #fff0f2; }
.quick-card b { font-size: 10px; }

.panel { margin-top: 13px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 24px rgba(22,56,105,.04); }
.panel summary { cursor: pointer; font-weight: 850; list-style: none; }
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: "+"; float: right; color: var(--muted); font-size: 20px; }
.panel[open] summary::after { content: "−"; }
#info-panel p { white-space: pre-line; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 16px; }
.heading-actions { display: flex; gap: 7px; }
.role-badge { display: inline-flex; margin-top: 7px; padding: 5px 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 14px; color: var(--blue); background: #fff; font-size: 21px; cursor: pointer; }
.stats-row, .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.stat { padding: 13px; border: 1px solid var(--border); border-radius: 17px; background: #fff; }
.stat span { display: block; color: var(--muted); font-size: 9px; }
.stat b { display: block; margin-top: 5px; color: var(--blue); font-size: 18px; }

label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }
input, textarea, select { width: 100%; min-height: 48px; padding: 12px 13px; outline: none; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--bg); }
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,89,207,.1); }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.form-stack { display: grid; gap: 9px; margin-top: 14px; }
.form-top { margin-top: 14px; }
.button { min-height: 48px; padding: 0 17px; border: 0; border-radius: 13px; font-weight: 850; cursor: pointer; }
.button.primary { color: #fff; background: var(--blue); }
.button.secondary { border: 1px solid #cfe0f7; color: var(--blue-dark); background: var(--surface-blue); }
.button.danger { color: #fff; background: var(--red); }
.button.wide { width: 100%; margin-top: 9px; }
.button.compact { min-height: 36px; padding: 0 10px; font-size: 10px; }
.button:disabled { opacity: .55; cursor: wait; }
.staff-card { border-left: 3px solid var(--blue); }
.role-chip { padding: 5px 8px; border-radius: 999px; color: var(--blue-dark); background: var(--surface-blue); font-size: 9px; font-weight: 900; }
.role-chip.pro-admin { color: #fff; background: linear-gradient(135deg, #0759cf, #ed1b2f); }
.role-chip.super-admin { color: #fff; background: var(--blue-dark); }
.role-chip.cashier { color: #fff; background: var(--green); }
.protected-note { align-self: center; color: var(--muted); font-size: 10px; font-weight: 750; }

.loyalty-flip-wrap { width: min(100%, 350px); aspect-ratio: .74; margin: 0 auto; perspective: 1400px; }
.loyalty-flip { position: relative; width: 100%; height: 100%; padding: 0; border: 0; appearance: none; background: transparent; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; cursor: pointer; }
.loyalty-face { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 20px 44px rgba(0,60,151,.22); text-align: left; transform-origin: center; transition: transform .65s cubic-bezier(.2,.75,.25,1), opacity .16s ease; }
.loyalty-front { color: #fff; background: radial-gradient(circle at 93% 8%, rgba(255,255,255,.24), transparent 28%), linear-gradient(140deg, #0868ed, #003c97); transform: rotateY(0deg); opacity: 1; visibility: visible; }
.loyalty-front::after { content: ""; position: absolute; right: -76px; bottom: -68px; width: 230px; height: 230px; border: 30px solid rgba(237,27,47,.84); border-radius: 50%; }
.portrait-brand, .loyalty-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.portrait-brand b { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .08em; }
.portrait-brand b i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--red); background: #fff; font-size: 17px; font-style: normal; font-weight: 950; }
.portrait-brand > small { color: rgba(255,255,255,.72); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.portrait-status { position: relative; z-index: 1; width: max-content; margin-top: 22px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.11); font-size: 10px; font-weight: 800; }
.loyalty-balance-label { position: relative; z-index: 1; margin-top: 48px; color: rgba(255,255,255,.72); font-size: 11px; }
.loyalty-balance { position: relative; z-index: 1; margin-top: 4px; font-size: clamp(38px, 12vw, 48px); line-height: 1; font-weight: 900; letter-spacing: -.05em; }
.loyalty-balance small { font-size: 12px; font-weight: 700; letter-spacing: 0; }
.portrait-owner { position: relative; z-index: 1; margin-top: 34px; }
.portrait-owner small, .portrait-owner b { display: block; }
.portrait-owner small { color: rgba(255,255,255,.65); font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.portrait-owner b { max-width: 88%; margin-top: 4px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.loyalty-bottom { margin-top: auto; font-size: 10px; }
.loyalty-bottom b { letter-spacing: .12em; }
.loyalty-bottom i { max-width: 45%; color: rgba(255,255,255,.72); font-size: 9px; font-style: normal; line-height: 1.35; text-align: right; }
.loyalty-back { align-items: center; border: 2px solid #d8e8fb; color: var(--text); background: linear-gradient(155deg, #fff, #eaf3ff); transform: rotateY(-180deg); opacity: 0; visibility: hidden; pointer-events: none; text-align: center; }
.loyalty-flip.flipped .loyalty-front { transform: rotateY(180deg); opacity: 0; visibility: hidden; pointer-events: none; }
.loyalty-flip.flipped .loyalty-back { transform: rotateY(0deg); opacity: 1; visibility: visible; pointer-events: auto; }
.qr-card-heading b, .qr-card-heading small { display: block; }
.qr-card-heading b { color: var(--blue); font-size: 20px; }
.qr-card-heading small { max-width: 245px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
#qr-image { width: min(230px, 74vw); height: min(230px, 74vw); margin-top: 15px; padding: 8px; display: grid; place-items: center; overflow: hidden; border: 1px solid #d7e5f6; border-radius: 22px; background: #fff; box-shadow: 0 10px 25px rgba(7,89,207,.1); }
#qr-image img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-card-details { margin-top: 13px; }
.qr-card-details small, .qr-card-details b, .qr-card-details i { display: block; }
.qr-card-details small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qr-card-details b { margin-top: 3px; color: var(--blue-dark); font-size: 17px; letter-spacing: .12em; }
.qr-card-details i { max-width: 260px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.qr-flip-back { margin-top: auto; color: var(--blue); font-size: 9px; font-weight: 800; }
.qr-error { color: var(--red); font-size: 9px; }
.qr-retry { min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 850; cursor: pointer; }
.card-status-panel { margin-top: 14px; }
.receipt-head, .member-head, .history-head { display: flex; justify-content: space-between; gap: 10px; }
.badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; color: var(--blue); background: var(--surface-blue); font-size: 9px; font-weight: 850; }

.receipt-list { display: grid; gap: 12px; }
.electronic-receipt { overflow: hidden; border: 1px solid #cfe0f7; border-radius: 21px; background: #fff; box-shadow: 0 10px 28px rgba(7,89,207,.08); }
.receipt-brand { padding: 13px 14px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; color: #fff; background: linear-gradient(120deg, var(--blue), var(--blue-dark)); }
.receipt-brand > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--red); background: #fff; font-size: 18px; font-weight: 900; }
.receipt-brand b, .receipt-brand small { display: block; }
.receipt-brand b { font-size: 11px; letter-spacing: .08em; }
.receipt-brand small { margin-top: 2px; color: rgba(255,255,255,.7); font-size: 9px; }
.receipt-brand i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #fff; font-style: normal; font-weight: 900; }
.receipt-number { padding: 12px 14px 8px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.receipt-number b { color: var(--text); font-family: ui-monospace, monospace; }
.receipt-lines { padding: 0 14px 8px; }
.receipt-lines p { margin: 0; padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #dbe5f2; font-size: 11px; }
.receipt-lines span { color: var(--muted); }
.receipt-lines b { text-align: right; }
.receipt-lines .receipt-coins b { color: var(--green); font-size: 13px; }
.receipt-lines .receipt-locked b { color: var(--blue); }
.receipt-foot { padding: 10px 14px; color: var(--blue); background: var(--surface-blue); font-size: 9px; font-weight: 800; text-align: center; }
.locked-balance { max-width: 100%; font-size: clamp(25px, 8vw, 38px) !important; }
.reward-lock-note { margin-top: 12px; padding: 10px 12px; border: 1px solid #cfe0f7; border-radius: 13px; color: var(--blue-dark); background: var(--surface-blue); font-size: 10px; line-height: 1.45; }
.activity-summary { margin-bottom: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.activity-summary > div { padding: 13px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.activity-summary span, .activity-summary b { display: block; }
.activity-summary span { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.activity-summary b { margin-top: 5px; color: var(--blue-dark); font-size: 17px; }

.empty-state { min-height: 350px; padding: 34px 20px; display: grid; place-content: center; justify-items: center; text-align: center; }
.empty-state img { width: 170px; height: 170px; object-fit: contain; }
.empty-state h2 { margin: 12px 0 5px; }
.empty-state p { max-width: 290px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.contact-card { width: 100%; margin-top: 10px; padding: 14px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 18px; color: var(--text); background: #fff; text-align: left; }
.contact-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--blue); background: var(--surface-blue); font-size: 21px; }
.contact-card b { font-size: 13px; }
.contact-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; white-space: pre-line; }
.contact-card i { color: var(--blue); font-size: 22px; font-style: normal; }
button.contact-card { cursor: pointer; }
.navigator-list { display: grid; gap: 8px; margin-top: 14px; }
.navigator-option { min-height: 53px; padding: 10px 12px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; }
.navigator-option span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--surface-blue); font-weight: 900; }
.navigator-option i { color: var(--blue); font-style: normal; font-size: 20px; }

.customer-identity { margin: 12px 0 14px; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 11px; }
.customer-photo { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: var(--surface-blue); box-shadow: 0 0 0 2px var(--blue); }
.customer-photo img { width: 60px; height: 60px; object-fit: contain; }
.customer-identity h2 { margin: 0 0 3px; font-size: 17px; }
.customer-identity p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.customer-confirm-note { margin: 0 0 14px; padding: 9px 11px; border-radius: 12px; color: #655319; background: #fff8da; font-size: 10px; line-height: 1.45; }
.summary-lines { margin-top: 11px; }
.summary-lines p { margin: 0; padding: 10px 0; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); font-size: 12px; }
.summary-lines span { color: var(--muted); }
#scanner-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 17px; background: #081425; }
#scanner-panel p { color: var(--muted); font-size: 11px; text-align: center; }

.member-list, .history-list { display: grid; gap: 8px; margin-top: 13px; }
.member, .history-item { padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg); }
.member p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.member-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.member-actions .button { min-height: 36px; padding: 0 11px; font-size: 10px; }
.history-head span { color: var(--muted); font-size: 9px; }
.history-item p { margin: 7px 0; color: var(--blue); font-size: 12px; }
.history-item small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.pagination { margin-top: 13px; display: flex; justify-content: center; align-items: center; gap: 9px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.setting-row p { margin: 4px 0 0; }
.analytics-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.analytics-toolbar p { margin: 4px 0 0; }
.analytics-toolbar select { width: auto; min-width: 112px; }
.analytics-summary { margin-top: 13px; }
.analytics-subheading { margin-top: 17px; padding-top: 14px; display: flex; align-items: end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); }
.analytics-subheading span { color: var(--muted); font-size: 8px; }
.cashier-analytics-list { display: grid; gap: 8px; margin-top: 10px; }
.cashier-analytics-card { padding: 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg); }
.analytics-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 12px; margin-top: 8px; }
.analytics-lines p { margin: 0; padding-top: 6px; border-top: 1px dashed #dbe5f2; font-size: 9px; }
.analytics-lines span, .analytics-lines b { display: block; }
.analytics-lines span { color: var(--muted); }
.analytics-lines b { margin-top: 3px; color: var(--blue-dark); }
.toggle { position: relative; width: 52px; height: 30px; flex: 0 0 auto; margin: 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: #cfd8e6; transition: .2s; cursor: pointer; }
.toggle span::after { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.18); transition: .2s; }
.toggle input:checked + span { background: var(--blue); }
.toggle input:checked + span::after { transform: translateX(22px); }

.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: max(9px, env(safe-area-inset-bottom)); width: min(calc(100% - 18px), 720px); padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 17px 48px rgba(15,48,94,.18); backdrop-filter: blur(18px); transform: translateX(-50%); }
.nav-button { min-height: 56px; padding: 4px 2px; border: 0; border-radius: 16px; color: #8491a4; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.nav-button span { display: block; margin-bottom: 3px; font-size: 19px; }
.nav-button.active { color: var(--blue); background: var(--surface-blue); }

.modal { position: fixed; inset: 0; z-index: 100; padding: 14px; display: flex; align-items: flex-end; background: rgba(4,18,40,.56); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(100%, 720px); max-height: 90vh; margin: 0 auto; padding: 23px; overflow: auto; border-radius: 26px; background: #fff; animation: sheet .2s ease-out; }
@keyframes sheet { from { opacity: 0; transform: translateY(30px); } }
.modal-close { position: absolute; z-index: 2; top: 11px; right: 13px; width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--bg); font-size: 23px; cursor: pointer; }
.divider { margin: 17px 0 8px; display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 10px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.success-popup { text-align: center; }
.success-popup > img { width: 145px; height: 145px; object-fit: contain; }
.success-popup h1 { margin-top: 0; }
.success-popup > p { color: var(--muted); font-size: 12px; }
.success-popup > p b { color: var(--green); font-size: 18px; }
.success-popup .electronic-receipt { margin-top: 16px; text-align: left; }
.delivery-note { margin-bottom: 0; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 92px; width: max-content; max-width: calc(100% - 30px); padding: 11px 15px; border-radius: 13px; color: #fff; background: var(--blue-dark); box-shadow: var(--shadow); font-size: 11px; text-align: center; transform: translateX(-50%); }
.toast.error { background: var(--red); }

@media (max-width: 390px) {
  main { padding: 13px; }
  .price-card, .balance-first { min-height: 142px; padding: 14px; }
  .quick-grid { gap: 6px; }
  .quick-card { min-height: 78px; }
  .customer-identity { grid-template-columns: 58px 1fr; }
  .customer-identity .badge { grid-column: 1 / -1; width: max-content; }
  .customer-photo { width: 58px; height: 58px; }
  .customer-photo img { width: 54px; height: 54px; }
}

@media (min-width: 620px) {
  main { padding: 22px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

/* Customer milestones, profile and safe presentation controls. */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.header-avatar { padding: 0; cursor: pointer; }
.header-avatar img, #profile-avatar { object-fit: cover; }
.loyalty-flip-wrap { position: relative; }
.qr-copy-row { position: absolute; z-index: 2; bottom: 65px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.qr-copy-row small, .qr-copy-row b { display: block; }
.qr-copy-row small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.qr-copy-row b { color: var(--blue-dark); font-size: 18px; letter-spacing: .08em; }
.qr-copy-row .icon-button { width: 44px; height: 44px; }
.qr-card-details { margin-top: 0; margin-bottom: 70px; }
.achievement-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; padding: 20px; margin: 16px 0; border: 1px solid #c9e0fe; border-radius: 25px; background: linear-gradient(140deg, #eff7ff, #fff8e4); overflow: hidden; }
.achievement-hero-copy { min-width: 0; }
.achievement-hero h2 { margin: 8px 0; color: var(--blue-dark); font-size: 23px; line-height: 1.2; }
.achievement-hero p { font-size: 12px; line-height: 1.5; margin: 7px 0; }
.achievement-hero-copy > strong { display: block; margin-top: 14px; color: var(--blue); font-size: 21px; }
.achievement-hero-copy > strong small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.achievement-hero > img { width: 110px; height: 145px; align-self: center; object-fit: contain; }
.monthly-progress, .achievement-hero > .button, .achievement-rule-note, .gift-ready { grid-column: 1 / -1; }
.milestone-dots { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.milestone-dots span { padding: 6px 7px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.8); font-size: 10px; font-weight: 800; }
.milestone-dots .earned { color: #147844; background: #dcf7e7; }
.achievement-rule-note { color: var(--muted); }
.gift-ready { color: #147844; font-weight: 800; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.achievement-card { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: #fff; }
.achievement-card.earned { border-color: #b1dfc0; background: #f5fff8; }
.achievement-card-head { display: flex; gap: 8px; align-items: center; }
.achievement-icon { flex: 0 0 32px; font-size: 25px; }
.achievement-card h3 { margin: 0 0 4px; font-size: 13px; }
.achievement-card p, .achievement-card small { font-size: 10px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.achievement-card .progress { margin-top: 13px; }
.achievement-gift { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.achievement-gift small { display: block; margin-top: 6px; }
.profile-card { text-align: center; }
#profile-avatar { width: 92px; height: 92px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--blue); background: var(--surface-blue); }
.profile-card > p { color: var(--muted); font-size: 12px; }
.profile-details { margin: 20px 0; text-align: left; }
.profile-details p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.profile-details span { color: var(--muted); flex: 1; }
.profile-details b { overflow-wrap: anywhere; }
.profile-details .icon-button { width: 40px; height: 40px; }
.profile-missing { padding: 12px; border-radius: 12px; background: #fff6db; }
.demo-toolbar { margin: 8px 14px 0; padding: 14px; border: 1px solid #f0c761; border-radius: 16px; background: #fff5d6; }
.demo-toolbar b, .demo-toolbar small { display: block; }
.demo-toolbar b { color: #70500a; font-size: 12px; letter-spacing: .05em; }
.demo-toolbar small { margin-top: 5px; font-size: 11px; color: #70500a; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.demo-controls select { flex: 1 1 125px; min-width: 0; font-size: 11px; background: #fff; }
.demo-controls .button { flex: 1 1 100%; }
#start-demo { margin-top: 12px; }
.achievement-setting { margin: 12px 0; padding: 13px; border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
.achievement-setting legend { color: var(--blue); font-size: 15px; font-weight: 850; }
.achievement-setting label { margin-top: 10px; }
.achievement-setting input, .achievement-setting select { margin-top: 6px; }
.gift-enable { display: flex; gap: 10px; align-items: center; }
.gift-enable input { width: 22px; min-height: 22px; accent-color: var(--blue); }
.animated-mascot, .state-mascot-ring img, .friday-banner img { animation: omad-float 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.progress i { transition: width .65s ease; }
@keyframes omad-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@media (max-width: 359px) {
  .achievement-hero { grid-template-columns: minmax(0, 1fr) 80px; padding: 15px; gap: 8px; }
  .achievement-hero > img { width: 80px; height: 120px; }
  .achievement-hero h2 { font-size: 20px; }
  .achievement-card { padding: 11px; }
  .achievement-card-head { flex-direction: column; align-items: flex-start; }
  .qr-copy-row { bottom: 45px; }
  .nav-button { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-mascot, .state-mascot-ring img, .friday-banner img { animation: none; }
  .progress i { transition: none; }
}
/* Keep the complete QR square visible instead of allowing flex shrink to clip it. */
#qr-image { width: min(230px, calc(100vw - 140px)); height: min(230px, calc(100vw - 140px)); flex: 0 0 auto; }
.qr-card-details { margin-bottom: 52px; }

.support-messages { height: min(40vh, 340px); min-height: 170px; padding: 12px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 17px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.support-bubble { flex-shrink: 0; max-width: 91%; padding: 11px 13px; border-radius: 17px; font-size: 12px; overflow-wrap: anywhere; }
.support-bubble.outgoing { align-self: flex-end; color: #fff; background: var(--blue); border-bottom-right-radius: 5px; }
.support-bubble.incoming { align-self: flex-start; color: var(--text); background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.support-bubble b { display: block; font-size: 10px; opacity: .8; }
.support-bubble p { margin: 6px 0 8px; white-space: pre-wrap; line-height: 1.5; }
.support-bubble small { display: block; opacity: .7; font-size: 9px; line-height: 1.45; }
.support-empty { margin: auto; text-align: center; color: var(--muted); font-size: 12px; }
.support-empty img { width: 75px; height: 75px; object-fit: contain; }
.support-error { min-height: 16px; color: var(--red); font-size: 11px; }
.support-composer textarea { min-height: 70px; max-height: 110px; margin-bottom: 10px; }

/* Admin page navigation keeps each task on its own page. */
.admin-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}.admin-menu button{min-width:0;border:1px solid var(--border,#e5e7eb);border-radius:16px;background:var(--surface,#fff);padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:7px;font:inherit;font-size:12px;color:inherit}.admin-menu button span{font-size:24px;color:#15803d}.admin-menu button.selected{background:#e8f7ed;border-color:#26a269;color:#166534}.admin-menu button.selected span{color:#166534}[data-admin-page]:not(.admin-page-visible){display:none!important}.broadcast-preview{white-space:pre-wrap;overflow-wrap:anywhere}#broadcast-text{width:100%;margin:12px 0;box-sizing:border-box}#admin-page-title{font-size:21px;margin:20px 0 12px}@media(min-width:800px){.admin-menu{grid-template-columns:repeat(6,minmax(0,1fr))}.admin-menu button{font-size:14px}}

.admin-menu svg{width:26px;height:26px;display:block}.admin-menu .hidden{display:none!important}

.admin-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-menu button{padding:18px 8px;min-height:92px;font-size:13px}.admin-subpage .admin-menu{display:none}.admin-subpage{min-height:calc(100dvh - 100px)}.staff-fullscreen .main-content{padding-bottom:24px}.broadcast-audience{border:1px solid var(--border);border-radius:16px;padding:12px;margin:14px 0}.audience-choice{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:14px}.audience-choice input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--green)}.audience-choice span{min-width:0;overflow-wrap:anywhere}.audience-choice small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.target-add{margin:12px 0 18px}.target-add summary{cursor:pointer;font-size:14px;color:var(--blue)}@media(min-width:800px){.admin-menu{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-menu button{min-height:112px}}

.admin-menu button span{color:var(--blue)}.admin-menu button.selected{background:var(--surface-blue);border-color:var(--blue);color:var(--blue)}.admin-menu button.selected span{color:var(--blue)}.admin-subpage #admin-page-title{display:none}.admin-subpage #admin-pages-back{margin-bottom:18px}

/* Customer management: compact, readable cards on small screens. */
.admin-user-card{border:1px solid #dce7f8;background:#fff;border-radius:20px;padding:18px;margin:12px 0;box-shadow:0 4px 18px #13458b05}
.admin-user-card .member-head{gap:10px;align-items:flex-start}.admin-user-card .member-head>div{min-width:0}.admin-user-card .member-head b{display:block;overflow-wrap:anywhere}.admin-user-card .member-head p{font-size:12px;color:#637792;margin:5px 0}.admin-user-card .badge{font-size:10px;white-space:nowrap}
.customer-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.customer-metrics>div{padding:12px;background:#f4f8ff;border-radius:13px;min-width:0}.customer-metrics small{display:block;color:#617793;font-size:10px;letter-spacing:.03em}.customer-metrics strong{display:block;color:#0759cf;font-size:19px;margin-top:5px;overflow-wrap:anywhere}.customer-metrics strong small{display:inline;font-size:11px;font-weight:500}
.last-purchase{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #edf1f8;padding:12px 0;font-size:12px}.last-purchase>span{color:#607491}.last-purchase>strong{color:#0759cf}.customer-action-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.customer-action-tabs .button{flex:1;min-width:85px;padding:12px 8px;font-size:13px}.customer-action-tabs .selected{background:#0759cf;color:white}.customer-detail h1{font-size:24px;overflow-wrap:anywhere}.customer-detail h3{margin-top:22px}.customer-detail .member p,.gift-conditions{white-space:pre-wrap;overflow-wrap:anywhere}.program-controls{background:#f5f8ff;border:1px solid #dce7f8;padding:16px;border-radius:16px;margin:16px 0}.program-controls h3{margin-top:0}.customer-history{display:grid;gap:10px}.customer-detail input,.customer-detail textarea,.program-controls input,.program-controls select,.achievement-setting input,.achievement-setting select,.achievement-setting textarea{max-width:100%;min-width:0;font-size:16px}.achievement-setting textarea{resize:vertical}.admin-user-card .button{margin-top:8px}

.analytics-customer-sections{display:grid;gap:20px;margin-top:24px}.analytics-customer-section{border-top:1px solid #e6edf8;padding-top:16px;min-width:0}.analytics-list-heading h3{font-size:17px;margin:0 0 5px}.analytics-list-heading>span{font-size:11px;color:#647994;display:block;margin-bottom:12px}.analytics-user-row{display:flex;align-items:center;width:100%;gap:10px;border:1px solid #e6edf8;border-radius:14px;background:#f8faff;padding:12px 10px;margin:8px 0;text-align:left;color:#142d4f;cursor:pointer;font:inherit}.analytics-rank{width:28px;height:28px;flex-shrink:0;border-radius:9px;background:#e6efff;color:#0759cf;display:grid;place-items:center;font-size:12px;font-weight:700}.analytics-user-copy{min-width:0;flex:1}.analytics-user-copy>b{display:block;font-size:13px;overflow-wrap:anywhere}.analytics-user-copy small{display:block;color:#667d98;font-size:10px;margin-top:4px;overflow-wrap:anywhere}.analytics-user-value{min-width:0;max-width:44%;text-align:right}.analytics-user-value strong{color:#0759cf;font-size:12px;overflow-wrap:anywhere;display:block}.analytics-user-value small{color:#667d98;font-size:9px;display:block;margin-top:4px}.birthday-user{background:#fffaf0;border-color:#f5e9cf}.birthday-user .analytics-rank{background:#fff0cc}.birthday-user .analytics-user-value strong{color:#926317}@media(min-width:900px){.analytics-customer-sections{grid-template-columns:repeat(2,minmax(0,1fr))}}

.referral-card { background: linear-gradient(145deg,#fff,#eef5ff); }
.referral-card details { margin-top: 14px; }
.referral-card .input-action { margin: 14px 0; }
.referral-card input { min-width: 0; font-size: 16px; }
#referral-rules fieldset { border: 1px solid #dce7f8; border-radius: 16px; padding: 16px; margin: 8px 0; min-width: 0; display: grid; gap: 8px; background: #f5f8ff; }
#referral-rules legend { font-weight: 750; padding: 0 8px; color: #0759cf; }
#referral-rules input { min-width: 0; width: 100%; font-size: 16px; }
#referral-members .member { text-align: left; }
#referral-members .member b, .referral-card .member b { overflow-wrap: anywhere; }
.toggle input:focus-visible + span { outline: 3px solid #83b3ff; outline-offset: 3px; }
.toggle input:disabled + span { opacity: .55; cursor: wait; }

.account-controls,.user-referral-summary { background:#f5f8ff;border:1px solid #dce7f8;border-radius:16px;padding:14px;margin:14px 0; }
.account-controls>summary { font-weight:750;color:#0759cf;cursor:pointer; }
.account-controls label { display:block;margin:12px 0 6px; }
.account-controls .button { margin-top:10px; }
.account-controls>details { margin-top:16px; }
.account-preview { background:white;border-radius:10px;padding:12px;overflow-wrap:anywhere;color:#0759cf;font-weight:700; }
.user-referral-summary { display:grid;gap:8px;overflow-wrap:anywhere; }
.customer-referrals { scroll-margin-top:80px; }

.account-controls input,.account-controls select,.account-controls textarea { font-size:16px;max-width:100%;min-width:0; }

.visit-journey { margin-top:14px;border:1px solid #dce9f7;border-radius:24px;overflow:hidden;background:white;box-shadow:0 12px 28px #1640770e; }
.journey-sky { position:relative;isolation:isolate;overflow:hidden;height:228px;background:linear-gradient(115deg,#81e2e4 0%,#58b4d3 42%,#356ac1 100%); }
.journey-count { position:relative;z-index:2;padding:21px 22px;max-width:76%; }
.journey-count-label { display:block;font-size:9px;font-weight:850;letter-spacing:.12em;color:#ecfcff; }
.journey-count>strong { display:block;font-size:clamp(54px,17vw,88px);font-weight:950;letter-spacing:-.075em;line-height:1.1;color:white;-webkit-text-stroke:1px white;text-shadow:0 0 18px #ffffff88,0 3px 0 #29699c22;font-variant-numeric:tabular-nums; }
.journey-count>strong>span { font-size:.58em;letter-spacing:-.06em; }
.journey-cashback { position:absolute;z-index:3;top:18px;right:18px;width:104px;padding:10px 11px 11px;border:1px solid #ffffffc9;border-radius:17px;background:#f4fbfff2;box-shadow:0 7px 22px #174b8b1a;color:#0759cf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.journey-cashback>span { display:block;color:#557ca2;font-size:8px;line-height:1.3;font-weight:800;letter-spacing:.055em;white-space:nowrap; }
.journey-cashback>strong { display:flex;align-items:baseline;gap:3px;margin-top:6px;font-size:32px;font-weight:850;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums; }
.journey-cashback small { color:#5987b6;font-size:15px;font-weight:750;letter-spacing:0; }
.journey-road-scene { position:absolute;bottom:0;left:0;width:100%;height:100%;overflow:visible; }
.journey-cloud { position:absolute;border-radius:50%;height:14px;width:70px;background:#ffffff13;filter:blur(2px);animation:journey-cloud-drift 12s ease-in-out infinite alternate; }.cloud-one { top:48%;left:7%; }.cloud-two { top:38%;left:54%;width:44px;animation-delay:-5s; }
.journey-car-bounce { animation:journey-car-idle 2.4s ease-in-out infinite;transform-origin:center; }
.journey-caption { padding:15px 18px 17px; }.journey-status { color:#31608b;font-size:10px;font-weight:800; }.journey-caption p { margin:6px 0 0;color:#174f94;font-size:15px;line-height:1.5;font-weight:650; }.journey-caption p strong { font-weight:900; }.journey-caption>small { display:block;margin-top:6px;color:#62799a;font-size:11px; }
.journey-start-note { position:absolute;left:20px;bottom:25px;z-index:2;max-width:65%;font-size:11px;line-height:1.4;color:#effcff;font-weight:700; }
@keyframes journey-car-idle { 0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)} }
@keyframes journey-cloud-drift { from{transform:translateX(0)}to{transform:translateX(22px)} }
@media(min-width:600px) { .journey-sky { height:275px; }.journey-count>strong { font-size:96px; } }
@media(prefers-reduced-motion:reduce) { .journey-car-bounce,.journey-cloud { animation:none!important; } }

@media(min-width:600px) { .journey-road-scene { width:92%; } }

/* Omad program v2: readable reward blocks at narrow mobile widths. */
.v2-program-card{display:block;padding:20px;border:1px solid #c8dcff;border-radius:22px;background:linear-gradient(145deg,#f0f7ff,#fff9e7);margin:16px 0;overflow-wrap:anywhere}.v2-program-card h2{font-size:24px;margin:0 0 10px}.v2-program-card h3{font-size:18px;margin:22px 0 12px}.v2-program-card p{line-height:1.5}.v2-tank{height:84px;border:3px solid #1764c5;border-radius:44px;position:relative;overflow:hidden;background:#e0edff}.v2-tank i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#71cbff,#2687db);transition:width .5s}.v2-tank b{position:absolute;inset:0;display:grid;place-items:center;color:#123759}#program-v2-statistics{min-width:0;width:100%;box-sizing:border-box;padding:16px;margin:16px 0;border:1px solid #dce6f7;border-radius:18px;overflow-wrap:anywhere;background:#f7faff}#program-v2-statistics p{line-height:1.6}#program-v2-statistics small{display:block;line-height:1.5}#broadcast-template{width:100%;min-width:0;font-size:16px;margin:10px 0;padding:10px}#broadcast-text{font-size:16px}

.support-media{display:block;max-width:100%;width:100%;max-height:320px;object-fit:contain;border-radius:12px;margin:8px 0}.support-media.round-video{width:220px;height:220px;border-radius:50%;object-fit:cover}.support-camera{width:160px;height:160px;border-radius:50%;object-fit:cover}.support-record-controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.support-record-controls button{flex:1;min-width:110px}#feedback-file,#feedback-text{font-size:16px;max-width:100%}

/* Independent reward achievements: compact, clear progress and earned states. */
.reward-achievements{display:grid;gap:14px;margin:18px 0;color:#142d4d}.reward-goal{min-width:0;background:#fff;border:1px solid #e2eaf5;border-radius:22px;padding:20px;box-shadow:0 4px 18px #183c6b05}.reward-goal-heading{display:flex;align-items:center;gap:12px}.reward-goal-heading>div:nth-child(2){min-width:0;flex:1}.reward-symbol{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}.reward-symbol svg{width:26px;height:26px}.gift-symbol{background:#edf5ff;color:#146bd7}.trophy-symbol{background:#fff5dd;color:#ae7613}.reward-eyebrow{display:block;font-size:9px;line-height:1.5;font-weight:750;letter-spacing:1.1px;color:#8392a6}.reward-goal h2{font-size:20px;line-height:1.3;font-weight:750;margin:3px 0 0;letter-spacing:-.5px}.reward-goal-target{font-size:23px;font-weight:750;letter-spacing:-.8px;text-align:right;color:#146bd7;line-height:1}.reward-goal-target small{display:block;font-size:11px;font-weight:550;color:#8392a6;letter-spacing:0;margin-top:5px}.reward-description{font-size:12px;color:#718197;line-height:1.6;margin:15px 0 19px}.reward-progress-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;font-variant-numeric:tabular-nums}.reward-progress-label strong{font-size:22px;letter-spacing:-.6px;font-weight:750}.reward-progress-label strong span{font-size:12px;font-weight:500;letter-spacing:0;color:#91a0b2}.reward-progress-label>span{font-size:10px;color:#7e8fa6;text-align:right}.reward-progress-track{height:7px;background:#edf2f9;border-radius:20px;overflow:hidden}.reward-progress-track i{height:100%;display:block;border-radius:20px;background:#2576dc;transition:width .5s ease}.reward-goal-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px;font-size:10px;line-height:1.6;color:#7e8fa6}.reward-goal-footer b{color:#3b526f;font-weight:650}.reward-goal-footer>span:first-child{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.reward-goal-footer svg{width:14px;height:14px;color:#168869}.reward-footnote{font-size:9px;color:#98a5b7;text-align:right;flex-shrink:0}.reward-month-badge{font-size:9px;font-weight:750;color:#ab7e2f;border:1px solid #f4e8cd;border-radius:6px;padding:5px 7px;letter-spacing:.8px}.reward-prize{display:flex;align-items:center;gap:11px;border:1px solid #f3e9d2;background:#fffcf5;border-radius:13px;padding:12px 14px;margin:0 0 18px}.reward-coin{border:1.5px solid #d6a548;color:#b4852d;width:30px;height:30px;display:grid;place-items:center;font-size:18px;border-radius:50%;font-weight:800;box-shadow:inset 0 0 0 3px #fff4d7;flex-shrink:0}.reward-prize strong{display:block;color:#9a701d;font-size:23px;letter-spacing:-.6px;font-weight:750;line-height:1.2}.reward-prize strong small{font-size:12px;letter-spacing:0;font-weight:550}.reward-prize div>span{display:block;font-size:10px;color:#a3906e;margin-top:5px;line-height:1.4}.monthly-goal .reward-progress-track i{background:#c69a45}.reward-prize-check{margin-left:auto;width:23px;height:23px;display:grid;place-items:center;color:#138263;background:#e8f6f0;border-radius:50%;flex-shrink:0}.reward-prize-check svg{width:14px;height:14px}.reward-unlocked{display:flex;align-items:center;gap:6px;font-size:11px;padding:10px 11px;background:#ecf8f2;border-radius:10px;margin:-4px 0 17px;color:#168263}.reward-unlocked svg{width:14px;height:14px}.reward-unlocked b{margin-left:auto;font-size:11px}.reward-ready{border-color:#cfe7dc}.reward-ready .reward-goal-footer>span:first-child b{color:#168263}@media(max-width:350px){.reward-goal{padding:16px}.reward-goal-heading{gap:9px}.reward-symbol{width:38px;height:38px;border-radius:12px}.reward-goal h2{font-size:18px}.reward-eyebrow{font-size:8px;letter-spacing:.7px}.reward-goal-target{font-size:21px}.reward-description{font-size:11px}.reward-progress-label strong{font-size:20px}.reward-goal-footer{font-size:9px}.reward-footnote{font-size:8px}}@media(prefers-reduced-motion:reduce){.reward-progress-track i{transition:none}}

/* Telegram-style support composer: attachment, message, record or send. */
.support-chat-heading{display:flex;align-items:center;gap:11px;margin:3px 24px 17px 0}.support-chat-heading h1{font-size:20px;letter-spacing:-.4px;margin:0}.support-chat-heading p{font-size:11px;color:#8b9aaf;margin:4px 0 0}.support-operator-avatar{width:40px;height:40px;border-radius:50%;background:#eaf3ff;color:#2b7bd9;display:grid;place-items:center;flex-shrink:0}.support-operator-avatar svg{width:21px;height:21px}.telegram-composer{position:relative;margin-top:3px;background:#f5f7fa;border:1px solid #e5eaf0;border-radius:24px;padding:3px}.support-compose-row{display:flex;align-items:flex-end;gap:2px;min-height:44px}.chat-icon-button,.chat-send-button,.chat-stop-button{appearance:none;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:10px;border:0;border-radius:50%;background:transparent;color:#8d9aaa;cursor:pointer;touch-action:manipulation}.chat-icon-button svg,.chat-send-button svg,.chat-stop-button svg{width:22px;height:22px;pointer-events:none}.chat-icon-button:focus-visible,.chat-send-button:focus-visible,.chat-stop-button:focus-visible{outline:2px solid #2d84df;outline-offset:2px}.chat-icon-button:hover{color:#3289df;background:#e9f1fa}.telegram-composer #feedback-text{display:block;flex:1;min-width:0;width:0;min-height:40px;height:40px;max-height:104px;padding:10px 5px;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;font-size:16px;line-height:20px;resize:none;outline:none;color:#263b55}.telegram-composer #feedback-text::placeholder{color:#9ba6b5;font-size:14px}.chat-send-button{background:#2d87df;color:#fff;margin:2px 2px 2px 0;width:38px;height:38px;flex-basis:38px}.chat-send-button svg{width:21px;height:21px;transform:translate(-1px,1px)}.chat-send-button:disabled{opacity:.65}.chat-mic-button{color:#93a1b3}.chat-send-button.is-sending svg{opacity:0}.chat-send-button.is-sending{position:relative}.chat-send-button.is-sending:after{content:"";position:absolute;width:17px;height:17px;border:2px solid #ffffff60;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.support-attach-menu{position:absolute;z-index:8;left:0;bottom:calc(100% + 8px);width:min(280px,100%);padding:6px;border:1px solid #e6ebf3;border-radius:17px;background:#fff;box-shadow:0 10px 35px #213e6920}.support-attach-menu button{display:flex;align-items:center;gap:12px;padding:12px 10px;width:100%;text-align:left;border:0;background:transparent;border-radius:11px;font:inherit;color:#304967;cursor:pointer}.support-attach-menu button:hover{background:#f2f7ff}.support-attach-menu button>svg{width:23px;height:23px;flex-shrink:0;color:#438fdf}.support-attach-menu button span{font-size:13px;font-weight:650}.support-attach-menu small{display:block;font-size:10px;font-weight:400;color:#98a4b4;margin-top:4px}.support-attachment-preview{display:flex;align-items:center;gap:5px;margin:4px 4px 1px;padding:9px 7px 9px 10px;border-radius:17px 17px 8px 8px;border-left:3px solid #4197e5;background:#eaf2fc}.support-attachment-content{display:flex;flex-wrap:wrap;align-items:center;gap:9px;min-width:0;flex:1}.support-attachment-content>img{width:37px;height:37px;border-radius:7px;object-fit:cover}.support-attachment-content>svg{width:26px;height:26px;color:#4284c5;flex-shrink:0}.support-attachment-content>span{min-width:0;flex:1}.support-attachment-content b{display:block;font-size:12px;font-weight:650;color:#356490;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.support-attachment-content small{display:block;font-size:10px;color:#86a0bc;margin-top:4px}.support-attachment-content audio{width:100%;height:32px;order:2}.support-attachment-preview .chat-icon-button{width:29px;height:29px;flex-basis:29px;padding:7px;align-self:flex-start}.support-attachment-preview .chat-icon-button svg{width:17px;height:17px}.support-recording-bar{display:flex;align-items:center;gap:7px;padding:2px 3px 2px 12px;min-height:44px}.support-record-dot{width:7px;height:7px;border-radius:50%;background:#ed5e65;flex-shrink:0;animation:chatRecordPulse 1.4s ease-in-out infinite}.support-recording-bar #support-record-status{font-size:12px;font-weight:500;color:#df6870;flex:1;line-height:1.4}.support-recording-bar time{font-size:12px;color:#8799ae;font-variant-numeric:tabular-nums}.support-recording-bar .chat-icon-button{flex-basis:28px;width:28px;height:32px;padding:6px}.chat-stop-button{color:#fff;background:#ed6b73;flex-basis:36px;width:36px;height:36px;padding:10px}.chat-stop-button svg{width:17px;height:17px;fill:currentColor}.telegram-composer .support-camera{display:block;margin:10px auto;border:3px solid #fff;box-shadow:0 3px 12px #223c6120}.support-chat-heading~.support-error{min-height:0;margin:6px 0;font-size:11px}.support-chat-heading~.support-messages{border-color:#e7edf5;border-radius:18px;background:#f6f8fc;height:min(45dvh,380px)}@keyframes chatRecordPulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.support-record-dot{animation:none}}@media(max-width:350px){.support-chat-heading h1{font-size:18px}.chat-icon-button{flex-basis:35px;width:35px;padding:8px}.support-recording-bar{gap:5px;padding-left:8px}.support-recording-bar #support-record-status{font-size:11px}.support-recording-bar time{font-size:11px}}