:root {
  --green: #46a468;
  --green-bright: #00a862;
  --green-dark: #1b3a30;
  --gold: #c9a45c;
  --ink: #222222;
  --text: #1c1c1c;
  --muted: #8a8a8a;
  --line: #dcdcdc;
  --paper: #f7f7f7;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bar-height: 58px;
  --tab-height: 70px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }

html {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: none;
}

html, body { min-height: 100%; background: #ececec; color: var(--text); font: 16px/1.4 var(--font); }
html:has(body.is-loading), html:has(body.modal-open) { overflow: hidden !important; }

button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.logo-mark { display: block; fill: currentColor; fill-rule: evenodd; }

/* Splash */
#splash { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; background: var(--green-bright); transition: opacity .4s; }
#splash.is-hidden { opacity: 0; pointer-events: none; }
.splash-logo { width: 180px; height: 180px; fill: #fff; fill-rule: evenodd; }
.spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: spin .9s linear infinite; }
.spinner-dark { border-color: rgba(0, 0, 0, .12); border-top-color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }

/* App bar */
#appBar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; max-width: 480px; height: calc(var(--bar-height) + var(--safe-top)); margin: 0 auto; padding: var(--safe-top) 12px 0 20px; display: flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; }
#appBar h1 { flex: 1; min-width: 0; font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#appBar.has-back { padding-left: 8px; }
.bar-actions { display: flex; align-items: center; }
.bar-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; }
#backButton { display: none; }
#appBar.has-back #backButton { display: grid; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cart-count:empty { display: none; }

/* Layout */
#view { max-width: 480px; min-height: 100vh; margin: 0 auto; padding: calc(var(--bar-height) + var(--safe-top)) 0 calc(var(--tab-height) + 28px + var(--safe-bottom)); background: #fff; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.pad { padding: 0 20px; }

h2.section-title { margin: 28px 0 16px; color: var(--gold); font-size: 24px; font-weight: 700; line-height: 1.15; }
.section-row { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 16px; }
.section-row h2 { color: var(--gold); font-size: 24px; font-weight: 700; }
.section-row a { display: flex; align-items: center; gap: 4px; color: var(--green); font-weight: 700; }
.section-row .icon { width: 18px; height: 18px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 17px 20px; border-radius: 999px; background: var(--green); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; transition: opacity .15s, transform .15s; }
.btn:active { opacity: .8; transform: scale(.98); }
.btn:disabled { opacity: .5; }
.btn-dark { background: var(--ink); }
.btn-outline { width: auto; margin: 0 auto; padding: 10px 24px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.btn[hidden] { display: none; }
.btn + .btn { margin-top: 12px; }

.dots { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #dcdcdc; transition: background .2s; }
.dots i.is-active { background: var(--gold); }

/* Home */
.home-top { position: relative; overflow: hidden; padding: 28px 20px 48px; background: var(--ink); color: #fff; }
.home-top::before { content: ""; position: absolute; right: -90px; top: -40px; width: 340px; height: 340px; background: url("assets/watermark.svg") center / contain no-repeat; opacity: .06; }
.balance { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.balance small { display: block; color: var(--gold); font-size: 16px; }
.balance strong { display: block; margin: 4px 0 8px; font-size: 64px; font-weight: 700; line-height: 1; }
.balance p { max-width: 190px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ring { position: relative; flex: none; width: 150px; height: 150px; }
.ring svg.ring-arc { width: 100%; height: 100%; }
.ring-label { position: absolute; left: 0; right: 0; bottom: 14px; color: #bdbdbd; font-size: 16px; font-weight: 600; text-align: center; }
.sheet { position: relative; margin-top: -22px; padding: 4px 20px 8px; border-radius: 26px 26px 0 0; background: var(--paper); }

.carousel::-webkit-scrollbar { display: none; }
.video-caption { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); pointer-events: none; }

.banner { position: relative; flex: none; width: 100%; height: 170px; border-radius: 18px; overflow: hidden; background: #333; color: #fff; text-align: left; scroll-snap-align: start; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .1)); }
.banner div { position: absolute; z-index: 1; left: 20px; right: 40%; top: 50%; transform: translateY(-50%); }
.banner b { display: block; margin-bottom: 6px; font-size: 22px; line-height: 1.15; }
.banner span { font-size: 14px; opacity: .9; }

.circles::-webkit-scrollbar { display: none; }
.circle-item { flex: none; width: 112px; text-align: center; }

/* Tab bar */
#tabBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-width: 480px; margin: 0 auto; height: calc(var(--tab-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); display: flex; align-items: center; background: #fff; border-top: 1px solid var(--line); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; color: #8e8e8e; font-size: 12px; font-weight: 500; }
.tab .icon { width: 28px; height: 28px; }
.tab.is-active { color: var(--green-bright); }

/* Menu */
.chips { display: flex; gap: 10px; padding: 16px 20px 4px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 9px 20px; border: 2px solid var(--green); border-radius: 999px; background: #fff; font-weight: 700; }
.chip.is-active { background: var(--green); color: #fff; }
.search { position: relative; display: block; margin: 16px 20px 0; }
.search .icon { position: absolute; left: 16px; top: 17px; color: #777; }
.search input { width: 100%; padding: 16px 16px 16px 50px; border: 0; border-radius: 16px; background: #f1f1f1; outline: 0; }
.search input::placeholder { color: #9a9a9a; }
.list-title { margin: 28px 20px 4px; color: var(--gold); font-size: 24px; font-weight: 700; }
.item-row { display: flex; align-items: center; gap: 16px; margin: 0 20px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.item-row img { width: 84px; height: 84px; flex: none; border-radius: 50%; object-fit: cover; }
.item-info { flex: 1; min-width: 0; }
.item-info b { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
.item-info small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.item-price { display: block; margin-top: 4px; font-weight: 700; }
.badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.add-button { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; }
.add-button .icon { width: 22px; height: 22px; stroke-width: 2.3; }
.empty-note { padding: 40px 20px; color: var(--muted); text-align: center; }

/* Product */
.product-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.product-body { padding: 22px 20px 0; }
.product-body h2 { font-size: 28px; font-weight: 700; line-height: 1.15; }
.product-body > p { margin-top: 8px; color: #666; }
.option-title { margin: 26px 0 12px; color: var(--gold); font-size: 18px; font-weight: 700; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.option { padding: 10px 18px; border: 2px solid var(--green); border-radius: 999px; background: #fff; font-weight: 600; }
.option.is-active { background: var(--green); color: #fff; }
.buy-bar { position: sticky; bottom: calc(var(--tab-height) + 16px + var(--safe-bottom)); margin: 28px 20px 0; }

/* Cart */
.cart-row { display: flex; align-items: center; gap: 14px; margin: 0 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; }
.cart-row .item-info b { font-size: 16px; }
.stepper { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.stepper button { width: 30px; height: 30px; border: 2px solid var(--green); border-radius: 50%; color: var(--green); font-weight: 700; line-height: 1; }
.stepper span { min-width: 16px; text-align: center; font-weight: 700; }
.cart-sum { font-weight: 700; white-space: nowrap; }
.total-row { display: flex; justify-content: space-between; margin: 22px 20px; font-size: 22px; font-weight: 700; }
.link-button { display: block; margin: 18px auto 0; color: var(--muted); font-weight: 600; }
.empty-state { padding: 70px 30px; text-align: center; color: var(--muted); }
.empty-state h2 { margin-bottom: 8px; color: var(--text); font-size: 24px; }
.empty-state .btn { margin-top: 24px; }

/* Cafes */
.cafe-row { display: flex; gap: 14px; margin: 0 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cafe-info { flex: 1; min-width: 0; }
.cafe-info h3 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.cafe-info .address { font-size: 17px; }
.cafe-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.round-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); }
.round-icon .icon { width: 36px; height: 36px; stroke-width: 1.5; }

/* QR */
.qr-wait { text-align: center; color: #555; }
.qr-wait .spinner { margin: 0 auto 16px; }
.qr-wait b { color: var(--green); }
.cups-panel { margin: 28px 20px 0; padding: 20px 14px 18px; border: 1px solid var(--line); border-radius: 18px; }
.cups-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 16px; }
.cups-head h3 { color: var(--gold); font-size: 22px; font-weight: 700; }
.cups-head span { font-size: 18px; font-weight: 700; }
.stamps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.stamp { text-align: center; font-size: 11px; color: var(--muted); }
.stamp svg { display: block; width: 100%; max-width: 46px; margin: 0 auto 4px; }
.stamp svg path { fill: none; stroke: #b5b5b5; stroke-width: 2; stroke-linejoin: round; transition: fill .6s, stroke .6s; }
.stamp svg rect { fill: #f1f1f1; stroke: #b5b5b5; stroke-width: 2; transition: fill .6s, stroke .6s; }
.stamp svg .tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .4s .5s; }
.stamp.is-filled { color: var(--text); }
.stamp.is-filled svg path { fill: var(--green); stroke: var(--green); }
.stamp.is-filled svg rect { fill: #2f7f4d; stroke: #2f7f4d; }
.stamp.is-filled svg .tick { opacity: 1; stroke: #fff; }
.cups-caption { margin-top: 18px; font-size: 17px; font-weight: 600; text-align: center; }
.cups-caption b { color: var(--green); }
.rules { margin: 24px 20px 0; }
.rule-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rule-row span { color: var(--muted); }
.rule-row b { text-align: right; }

/* Profile */
.profile-head { display: flex; align-items: center; gap: 18px; padding: 24px 20px 6px; }
.avatar { display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 50%; background: #dcdcdc; color: #fff; overflow: hidden; }
.avatar svg { width: 54px; height: 54px; fill: #fff; stroke: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head h2 { color: var(--gold); font-size: 28px; font-weight: 700; }
.profile-head p { margin-top: 2px; font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 20px 0; }
.stat { padding: 16px 8px; border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.stat b { display: block; color: var(--gold); font-size: 32px; font-weight: 700; line-height: 1.1; }
.stat span { display: block; margin-top: 4px; color: #666; font-size: 12.5px; line-height: 1.25; }
.menu-row { display: flex; align-items: center; gap: 14px; margin: 0 20px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 19px; text-align: left; width: calc(100% - 40px); }
.menu-row > span { flex: 1; }
.menu-row .icon:last-child { width: 22px; height: 22px; }

/* Modal */
#modal.is-open { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }
.dialog { width: 100%; max-width: 380px; max-height: 88vh; overflow-y: auto; border-radius: 20px; background: #fff; transform: scale(.94); transition: transform .2s; }
#modal.is-open .dialog { transform: none; }
.dialog-cover { display: block; width: 100%; height: 180px; object-fit: cover; }
.dialog-body { padding: 22px 20px 20px; }
.dialog-body h3 { margin-bottom: 8px; font-size: 24px; line-height: 1.2; }
.dialog-body > p { margin-bottom: 18px; color: #555; }
.dialog-center { text-align: center; }
.detail { margin-bottom: 14px; }
.detail small { display: block; color: var(--gold); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.detail b { display: block; font-size: 17px; }
.week { margin: 6px 0 18px; border-top: 1px solid var(--line); }
.week div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); color: #555; }
.week div.is-today { color: var(--text); font-weight: 700; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.dialog-actions .btn { margin: 0; padding: 14px 8px; font-size: 14px; }
.coupon { margin: 4px 0 20px; padding: 20px 14px; border: 2px dashed var(--green); border-radius: 16px; background: #f4faf6; }
.coupon small { display: block; color: #555; font-weight: 600; }
.coupon strong { display: block; margin-top: 6px; color: var(--green-dark); font-size: 26px; }
.coupon span { display: block; color: var(--green); font-size: 60px; font-weight: 800; line-height: 1.1; }
.history-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.history-row span { color: var(--muted); }

#toast { position: fixed; left: 50%; bottom: calc(var(--tab-height) + 24px + var(--safe-bottom)); z-index: 250; max-width: 90vw; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .25s, transform .25s; }
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Bottom tab: QR button */
.tab-center { flex: none; width: 92px; height: 92px; margin: -38px 4px 0; padding: 0; justify-content: center; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 6px #fff; animation: qrGlow 2.6s ease-in-out infinite; }
.tab-center .icon { width: 44px; height: 44px; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .85)); }
.tab-center.is-active { background: var(--green-bright); }
@keyframes qrGlow {
  0%, 100% { box-shadow: 0 0 0 6px #fff, 0 0 10px 2px rgba(70, 164, 104, .35); }
  50% { box-shadow: 0 0 0 6px #fff, 0 0 28px 10px rgba(70, 164, 104, .6); }
}
.menu-row-qr .icon:first-child { color: var(--green); filter: drop-shadow(0 0 5px rgba(70, 164, 104, .8)); animation: iconGlow 2.6s ease-in-out infinite; }
@keyframes iconGlow { 50% { filter: drop-shadow(0 0 10px rgba(70, 164, 104, 1)); } }

/* Map */
.map { position: relative; height: 300px; overflow: hidden; background: #e5e3df; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.map.is-dragging { cursor: grabbing; }
.map-tiles, .map-markers { position: absolute; inset: 0; }
.map-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; will-change: transform; -webkit-user-drag: none; }
.map-marker { position: absolute; left: 0; top: 0; z-index: 2; }
.marker-cafe .pin { display: block; width: 34px; height: 44px; margin: -44px 0 0 -17px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); cursor: pointer; }
.marker-user { z-index: 3; }
.user-dot { display: block; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid #fff; border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 0 rgba(26, 115, 232, .5); animation: userPulse 2s infinite; }
@keyframes userPulse { 70% { box-shadow: 0 0 0 16px rgba(26, 115, 232, 0); } 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); } }
.map-controls { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.map-controls button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-size: 24px; font-weight: 500; line-height: 1; }
.map-controls .icon { width: 22px; height: 22px; color: #1a73e8; }
.map-credit { position: absolute; left: 8px; bottom: 6px; z-index: 5; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .8); color: #555; font-size: 10px; }

.cafe-info h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.distance { color: var(--muted); font-size: 15px; font-weight: 600; }
.status { margin: 6px 0 4px; font-size: 16px; font-weight: 700; }
.status.is-open { color: #1c9b52; }
.status.is-closed { color: #d6453d; }

/* QR page */
.rise { opacity: 0; animation: rise .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pass { position: relative; display: flex; align-items: center; min-height: 190px; margin: 20px 20px 0; padding: 22px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #17352b, #0e2720); color: #fff; box-shadow: 0 14px 28px -14px rgba(14, 39, 32, .8); }
.pass-glow { position: absolute; inset: -40%; background: radial-gradient(circle at 70% 30%, rgba(70, 164, 104, .45), transparent 45%); animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-12%, 10%) scale(1.15); } }
.pass-logo { position: absolute; right: -52px; top: 50%; width: 230px; height: 230px; margin-top: -115px; color: #f4f1ea; opacity: .95; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(2deg); } }
.pass-info { position: relative; max-width: 55%; }
.pass-info small { display: block; color: #bcd9c9; font-size: 14px; }
.pass-info b { display: block; margin: 2px 0 12px; font-size: 52px; font-weight: 700; line-height: 1; }
.pass-info b span { color: #9fc4b0; font-size: 22px; font-weight: 600; }
.pass-progress { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.pass-progress i { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #46a468, #8be0a8); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.pass-info p { margin-top: 10px; font-size: 15px; font-weight: 600; }

.gift-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 20px 0; padding: 13px 18px; border-radius: 14px; background: #f1f8f3; color: #1b6b3f; font-weight: 700; }
.gift-note .icon { width: 22px; height: 22px; }

.scan-card { margin: 16px 20px 0; padding: 22px 0 22px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .35); }
.scan-card .pad { padding: 0 20px; }
.scan-frame { position: relative; width: 260px; height: 260px; margin: 0 auto 20px; display: grid; place-items: center; }
.corner { position: absolute; width: 34px; height: 34px; border: 0 solid var(--green); animation: cornerPulse 2s ease-in-out infinite; }
.corner.top-left { left: 0; top: 0; border-width: 4px 0 0 4px; border-top-left-radius: 14px; }
.corner.top-right { right: 0; top: 0; border-width: 4px 4px 0 0; border-top-right-radius: 14px; }
.corner.bottom-left { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 14px; }
.corner.bottom-right { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 14px; }
@keyframes cornerPulse { 50% { opacity: .45; transform: scale(.94); } }
.qr-area { width: 224px; height: 224px; display: grid; place-items: center; }
.qr-area svg { display: block; width: 100%; height: 100%; animation: qrIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes qrIn { from { opacity: 0; transform: scale(.92); } }
.scan-line { position: absolute; left: 14px; right: 14px; top: 14px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #46a468, transparent); box-shadow: 0 0 12px 2px rgba(70, 164, 104, .55); opacity: 0; }
.scan-frame.has-code .scan-line { opacity: 1; animation: sweep 2.8s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { top: 14px; } 50% { top: calc(100% - 17px); } }

.btn-scan { margin-top: 14px; animation: scanPulse 2.2s ease-in-out infinite; }
.btn-scan:disabled { animation: none; }
@keyframes scanPulse { 50% { box-shadow: 0 0 0 6px rgba(70, 164, 104, .2), 0 6px 20px rgba(70, 164, 104, .45); } }
.btn-outline { display: flex; width: 100%; padding: 13px 20px; }
.btn-outline .icon { width: 20px; height: 20px; }
.stamp.is-fresh svg { animation: stampPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stampPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* Loading screen and page bottom */
#splash { bottom: auto; height: 100vh; height: 100lvh; }
#splash::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 400px; background: var(--green-bright); }
html:has(body.is-loading) { background: var(--green-bright); }
#tabBar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 300px; background: #fff; }
@media (max-width: 520px) {
  html, body { background: #fff; }
}

/* Home */
.video-card { position: relative; flex: none; width: 72%; height: 400px; padding: 0; border-radius: 26px; overflow: hidden; background: #000; scroll-snap-align: start; text-align: left; }
.video-card video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ring-progress { transition: stroke-dasharray 1.4s cubic-bezier(.3, .7, .2, 1); }
.ring-dot { fill: #222; stroke: #777; stroke-width: 2; transition: fill .3s, stroke .3s; }
.ring-dot.is-done { fill: #46a468; stroke: #fff; }

.circle-item { display: block; }
.story { position: relative; display: block; width: 118px; height: 118px; margin: 0 auto; border-radius: 50%; }
.story-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#46a468, #c9a45c, #e8d38b, #46a468); animation: storySpin 3s linear infinite; }
@keyframes storySpin { to { transform: rotate(360deg); } }
.story img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 3px solid var(--paper); border-radius: 50%; object-fit: cover; }
.circle-name { display: block; margin-top: 10px; font-size: 15px; line-height: 1.25; text-align: center; }

/* Dialogs and overlays */
#modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .25s; }
#modal.is-open { opacity: 1; visibility: visible; }
#modal.is-dark { background: rgba(0, 0, 0, .8); }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: shineSweep 1s linear infinite; pointer-events: none; }
@keyframes shineSweep { 0% { left: -60%; } 60%, 100% { left: 130%; } }

#videoViewer { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; background: #000; }
#videoViewer.is-open { display: flex; }
#videoViewer video { width: 100%; height: 100%; object-fit: contain; }
.viewer-back { position: absolute; left: 50%; bottom: calc(24px + var(--safe-bottom)); display: flex; align-items: center; gap: 8px; padding: 14px 30px 14px 22px; border-radius: 999px; background: #fff; color: #222; font-size: 16px; font-weight: 700; transform: translateX(-50%); }
.viewer-back .icon { width: 20px; height: 20px; }

/* Loyalty card and about pages */
.card-hero { position: relative; margin: 20px 20px 0; padding: 28px 22px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #17352b, #0e2720); color: #fff; }
.card-hero h2 { position: relative; font-size: 30px; line-height: 1.15; }
.card-hero p { position: relative; margin-top: 10px; color: #cfe3d9; font-weight: 600; }
.card-hero-logo { position: absolute; right: -40px; top: 50%; width: 190px; height: 190px; margin-top: -95px; color: #f4f1ea; opacity: .9; }
.faq { margin: 0 20px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 12px; padding: 20px 0; list-style: none; font-size: 18px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 1; }
.faq summary .icon { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(90deg); }
.faq details p { padding: 0 0 20px; color: #555; line-height: 1.5; }
.about-head { padding: 40px 20px 20px; text-align: center; }
.about-logo { display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto 16px; border-radius: 50%; background: var(--green-dark); color: #f4f1ea; }
.about-logo .logo-mark { width: 84px; height: 84px; }
.about-head h2 { font-size: 26px; }
.about-head p { margin-top: 4px; color: var(--muted); font-weight: 600; }
.about-block { padding: 20px 0; border-bottom: 1px solid var(--line); }
.about-block h3 { margin-bottom: 6px; color: var(--gold); font-size: 20px; }
.about-block p { color: #555; line-height: 1.5; }
.version { display: block; margin: 26px 20px 0; color: #555; font-size: 15px; text-decoration: underline; }

/* QR tab stays readable when active */
.tab-center.is-active { color: #fff; background: var(--green-bright); }

/* Home: 3D cup and scrollable rows */
.ring-cup { position: absolute; left: 50%; top: 50%; width: 72px; height: 90px; margin: -50px 0 0 -36px; }
.scroller { position: relative; margin: 0 -20px; }
.carousel { display: flex; gap: 14px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.circles { display: flex; gap: 18px; padding: 0 20px 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.carousel::-webkit-scrollbar, .circles::-webkit-scrollbar { display: none; }
.carousel.is-dragging, .circles.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.scroller-arrow { position: absolute; top: 50%; z-index: 3; display: none; place-items: center; width: 40px; height: 40px; margin-top: -26px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); color: var(--text); }
.scroller-arrow .icon { width: 20px; height: 20px; }
.scroller-prev { left: 8px; }
.scroller-next { right: 8px; }
@media (hover: hover) { .scroller-arrow { display: grid; } }

/* Language button, theme chooser, shared effects */
#languageButton { display: flex; align-items: center; justify-content: center; width: auto; gap: 4px; padding: 0 10px; }
.lang-code { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ring-cup { cursor: pointer; }
.theme-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.theme-option { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 18px; background: #fff; text-align: left; overflow: hidden; transition: border-color .2s, transform .15s; }
.theme-option:active { transform: scale(.98); }
.theme-option.is-selected { border-color: var(--green); }
.theme-text { flex: 1; min-width: 0; }
.theme-text b { display: block; font-size: 17px; }
.theme-text small { color: var(--muted); font-size: 13px; }
.theme-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; opacity: 0; transform: scale(.6); transition: .2s; }
.theme-check .icon { width: 16px; height: 16px; stroke-width: 3; }
.theme-option.is-selected .theme-check { opacity: 1; transform: none; }
.language-code { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; }
.theme-preview { position: relative; display: block; width: 62px; height: 62px; flex: none; border-radius: 14px; overflow: hidden; }
.theme-preview i { position: absolute; left: 8px; right: 8px; height: 10px; border-radius: 5px; }
.theme-preview i:nth-child(1) { top: 8px; }
.theme-preview i:nth-child(2) { top: 24px; }
.theme-preview i:nth-child(3) { top: 40px; right: 24px; }
.theme-preview-original { background: #f7f7f7; border: 1px solid #ddd; }
.theme-preview-original i:nth-child(1) { background: #222; }
.theme-preview-original i:nth-child(2) { background: #ddd; }
.theme-preview-original i:nth-child(3) { background: #46a468; }
.theme-preview-glass { background: linear-gradient(135deg, #bfe8d1, #f3e3b4 55%, #bfdff2); }
.theme-preview-glass i { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.theme-preview-extended { background: radial-gradient(circle at 20% 15%, rgba(49, 224, 161, .55), transparent 55%), radial-gradient(circle at 85% 85%, rgba(123, 97, 255, .6), transparent 55%), #070a10; }
.theme-preview-extended i { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(49, 224, 161, .5); }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .4); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
#curtain { position: fixed; inset: 0; z-index: 260; display: none; overflow: hidden; pointer-events: none; }

/* ============ Glass theme ============ */
html[data-theme="glass"] { --glass: rgba(255, 255, 255, .42); --glass-strong: rgba(255, 255, 255, .66); --glass-line: rgba(255, 255, 255, .8); --glass-ink: #143a2d; background: #e3f3ea; }
html[data-theme="glass"] body { background: transparent; color: var(--glass-ink); }
html[data-theme="glass"] body::before { content: ""; position: fixed; inset: -25%; z-index: -1; background: radial-gradient(38% 38% at 22% 22%, rgba(70, 164, 104, .6), transparent 70%), radial-gradient(34% 34% at 80% 28%, rgba(233, 196, 106, .6), transparent 70%), radial-gradient(42% 42% at 62% 85%, rgba(90, 180, 230, .5), transparent 70%), linear-gradient(135deg, #e6f5ec, #f8f1de); animation: glassDrift 18s ease-in-out infinite alternate; }
@keyframes glassDrift { to { transform: translate(5%, -4%) scale(1.15) rotate(5deg); } }
html[data-theme="glass"] #view { background: transparent; animation: glassIn .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes glassIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } }
html[data-theme="glass"] #appBar { background: rgba(255, 255, 255, .38); color: var(--glass-ink); border-bottom: 1px solid var(--glass-line); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); }
html[data-theme="glass"] .bar-button { color: var(--glass-ink); }
html[data-theme="glass"] .cart-count { background: linear-gradient(135deg, #46a468, #00a862); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
html[data-theme="glass"] .home-top { margin: 12px 14px 0; padding: 22px 20px 26px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 28px; background: linear-gradient(135deg, rgba(23, 53, 43, .84), rgba(15, 42, 34, .66)); backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(20, 70, 50, .28), inset 0 1px 0 rgba(255, 255, 255, .25); }
html[data-theme="glass"] .sheet { margin-top: 14px; border: 1px solid var(--glass-line); border-radius: 28px 28px 0 0; background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
html[data-theme="glass"] .item-row, html[data-theme="glass"] .cafe-row, html[data-theme="glass"] .cart-row, html[data-theme="glass"] .menu-row { margin: 10px 16px; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: 24px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(24, 70, 52, .14), inset 0 1px 0 rgba(255, 255, 255, .7); }
html[data-theme="glass"] .menu-row { width: calc(100% - 32px); }
html[data-theme="glass"] :is(.stat, .cups-panel, .scan-card, .gift-note, .faq details, .about-block) { border: 1px solid var(--glass-line); border-radius: 22px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(24, 70, 52, .12); }
html[data-theme="glass"] .faq details { margin-bottom: 10px; padding: 0 16px; }
html[data-theme="glass"] .about-block { margin-bottom: 12px; padding: 16px; }
html[data-theme="glass"] .list-title, html[data-theme="glass"] .section-row h2, html[data-theme="glass"] h2.section-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
html[data-theme="glass"] .rule-row, html[data-theme="glass"] .total-row { border-color: rgba(20, 58, 45, .12); }
html[data-theme="glass"] .item-info small, html[data-theme="glass"] .stat span, html[data-theme="glass"] .cafe-info .address, html[data-theme="glass"] .rule-row span { color: #4a6b5e; }
html[data-theme="glass"] :is(.btn, .add-button) { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .6); background: linear-gradient(135deg, rgba(70, 164, 104, .88), rgba(0, 168, 98, .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 26px rgba(0, 168, 98, .32); backdrop-filter: blur(10px); }
html[data-theme="glass"] :is(.btn, .add-button)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%; border-radius: inherit; background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); pointer-events: none; }
html[data-theme="glass"] .btn-dark { background: linear-gradient(135deg, rgba(23, 53, 43, .9), rgba(15, 42, 34, .8)); }
html[data-theme="glass"] .btn-outline { background: var(--glass); color: var(--glass-ink); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
html[data-theme="glass"] .btn-outline::before { display: none; }
html[data-theme="glass"] :is(.chip, .option, .theme-option) { border: 1px solid var(--glass-line); background: var(--glass); color: var(--glass-ink); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
html[data-theme="glass"] :is(.chip.is-active, .option.is-active) { border-color: rgba(255, 255, 255, .7); background: linear-gradient(135deg, rgba(70, 164, 104, .9), rgba(0, 168, 98, .8)); color: #fff; box-shadow: 0 8px 22px rgba(0, 168, 98, .35); }
html[data-theme="glass"] .search input { border: 1px solid var(--glass-line); background: var(--glass); color: var(--glass-ink); backdrop-filter: blur(12px); }
html[data-theme="glass"] #tabBar { left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); max-width: 456px; height: 70px; padding: 0 6px; border: 1px solid var(--glass-line); border-radius: 30px; background: rgba(255, 255, 255, .42); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 18px 40px rgba(20, 70, 50, .26), inset 0 1px 0 rgba(255, 255, 255, .9); }
html[data-theme="glass"] #tabBar::after { display: none; }
html[data-theme="glass"] .tab { color: #4a6b5e; }
html[data-theme="glass"] .tab.is-active { color: #0a7d47; }
html[data-theme="glass"] .tab-center { margin-top: -32px; border: 1px solid rgba(255, 255, 255, .85); background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .8), rgba(70, 164, 104, .85) 48%, rgba(0, 150, 90, .95)); color: #fff; box-shadow: 0 14px 30px rgba(0, 168, 98, .45), inset 0 2px 6px rgba(255, 255, 255, .7); animation: glassGlow 2.6s ease-in-out infinite; }
@keyframes glassGlow { 50% { box-shadow: 0 14px 40px rgba(0, 168, 98, .75), 0 0 0 8px rgba(255, 255, 255, .35), inset 0 2px 6px rgba(255, 255, 255, .7); } }
html[data-theme="glass"] #modal { background: rgba(20, 58, 45, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="glass"] #modal.is-dark { background: rgba(10, 30, 24, .8); }
html[data-theme="glass"] .dialog { border: 1px solid var(--glass-line); background: var(--glass-strong); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); box-shadow: 0 24px 60px rgba(20, 70, 50, .35); }
html[data-theme="glass"] .coupon { background: rgba(255, 255, 255, .5); }
html[data-theme="glass"] #toast { background: rgba(23, 53, 43, .82); backdrop-filter: blur(14px); }
html[data-theme="glass"] .ripple { background: rgba(255, 255, 255, .55); }

/* ============ Extended theme ============ */
html[data-theme="extended"] { --paper: #0b1016; --text: #eaf1ee; --muted: #8da39a; --line: rgba(255, 255, 255, .1); --gold: #f1c76a; --green: #31e0a1; --green-bright: #31e0a1; --neon: #31e0a1; --violet: #7b61ff; color-scheme: dark; background: #06080c; }
html[data-theme="extended"] body { background: #06080c; color: var(--text); }
html[data-theme="extended"] body::before { content: ""; position: fixed; inset: -20%; z-index: -2; background: radial-gradient(36% 32% at 14% 12%, rgba(49, 224, 161, .38), transparent 70%), radial-gradient(34% 30% at 88% 24%, rgba(123, 97, 255, .42), transparent 70%), radial-gradient(40% 34% at 68% 92%, rgba(22, 212, 224, .3), transparent 70%); filter: blur(28px); animation: aurora 14s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: translate(6%, -5%) scale(1.18) rotate(-6deg); } }
html[data-theme="extended"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); }
html[data-theme="extended"] #view { background: transparent; animation: extPage .65s cubic-bezier(.2, .8, .2, 1); }
html[data-theme="extended"] #view[data-direction="back"] { animation-name: extPageBack; }
@keyframes extPage { from { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(12px); clip-path: inset(0 0 100% 0 round 24px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes extPageBack { from { opacity: 0; transform: translateX(-34px) scale(.98); filter: blur(12px); } }
html[data-theme="extended"] #curtain { display: block; }
html[data-theme="extended"] #curtain i { position: absolute; top: 0; bottom: 0; left: 0; width: 70%; transform: translateX(-110%) skewX(-14deg); background: linear-gradient(90deg, rgba(6, 8, 12, 0), rgba(6, 8, 12, .96) 30%, rgba(6, 8, 12, .96)); border-right: 2px solid var(--neon); box-shadow: 0 0 40px 6px rgba(49, 224, 161, .7); }
html[data-theme="extended"] #curtain.play i { animation: curtainSweep .75s cubic-bezier(.7, 0, .2, 1); }
@keyframes curtainSweep { to { transform: translateX(190%) skewX(-14deg); } }

html[data-theme="extended"] #appBar { background: rgba(6, 8, 12, .6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
html[data-theme="extended"] #appBar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon), var(--violet), transparent) 0 0 / 200% 100%; animation: neonLine 4s linear infinite; }
@keyframes neonLine { to { background-position: -200% 0; } }
html[data-theme="extended"] #pageTitle { background: linear-gradient(90deg, #fff, #9ff5d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="extended"] #cartButton { display: none; }
html[data-theme="extended"] .cart-count { background: var(--neon); color: #04140e; box-shadow: 0 0 12px var(--neon); }
html[data-theme="extended"] :is(h2.section-title, .section-row h2, .list-title, .cups-head h3, .about-block h3) { background: linear-gradient(90deg, #31e0a1, #f1c76a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="extended"] .home-top { background: linear-gradient(135deg, rgba(16, 52, 42, .85), rgba(10, 16, 26, .9) 55%, rgba(40, 22, 84, .7)); }
html[data-theme="extended"] .home-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(49, 224, 161, .14) 50%, transparent 65%); transform: translateX(-100%); animation: extSheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes extSheen { 60%, 100% { transform: translateX(120%); } }
html[data-theme="extended"] .sheet { background: rgba(255, 255, 255, .035); border-top: 1px solid rgba(49, 224, 161, .35); box-shadow: 0 -20px 60px rgba(49, 224, 161, .08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
html[data-theme="extended"] .story img { border-color: #0b1016; }
html[data-theme="extended"] .story-ring { background: conic-gradient(#31e0a1, #7b61ff, #16d4e0, #f1c76a, #31e0a1); }
html[data-theme="extended"] .dots i { background: rgba(255, 255, 255, .2); }
html[data-theme="extended"] .dots i.is-active { background: var(--neon); box-shadow: 0 0 10px var(--neon); }

html[data-theme="extended"] :is(.item-row, .cafe-row, .cart-row, .menu-row, .stat, .about-block, .faq details, .cups-panel, .scan-card, .gift-note) { position: relative; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), rgba(49, 224, 161, .16), transparent 70%), rgba(255, 255, 255, .045); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); animation: extRise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .25s, border-color .25s, box-shadow .25s; }
html[data-theme="extended"] :is(.item-row, .cafe-row, .cart-row, .menu-row) { margin: 10px 16px; padding: 12px 14px; }
html[data-theme="extended"] .menu-row { width: calc(100% - 32px); }
html[data-theme="extended"] :is(.item-row, .cafe-row, .menu-row, .stat):hover { transform: translateY(-3px); border-color: rgba(49, 224, 161, .5); box-shadow: 0 16px 38px rgba(0, 0, 0, .5), 0 0 22px rgba(49, 224, 161, .18); }
html[data-theme="extended"] .faq details { margin-bottom: 10px; padding: 0 16px; }
html[data-theme="extended"] .about-block { margin-bottom: 12px; padding: 16px; }
@keyframes extRise { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(6px); } }
html[data-theme="extended"] :is(.item-info small, .stat span, .cafe-info .address, .rule-row span, .dialog-body > p, .faq details p, .about-block p, .product-body > p, .pass-info small) { color: #9fb3aa; }
html[data-theme="extended"] :is(.rule-row, .total-row, .week div, .history-row, .about-block) { border-color: rgba(255, 255, 255, .1); }

html[data-theme="extended"] .btn { position: relative; overflow: hidden; border: 0; background: linear-gradient(135deg, #31e0a1, #16b5d8 60%, #7b61ff); background-size: 160% 160%; color: #04140e; box-shadow: 0 0 26px rgba(49, 224, 161, .4), 0 10px 26px rgba(0, 0, 0, .4); animation: neonShift 6s ease-in-out infinite; }
@keyframes neonShift { 50% { background-position: 100% 50%; } }
html[data-theme="extended"] .btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: shineSweep 3.2s ease-in-out infinite; pointer-events: none; }
html[data-theme="extended"] .btn-dark { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); animation: none; }
html[data-theme="extended"] .btn-outline { background: transparent; color: var(--neon); box-shadow: inset 0 0 0 2px var(--neon), 0 0 18px rgba(49, 224, 161, .25); animation: none; }
html[data-theme="extended"] .btn-outline::before { display: none; }
html[data-theme="extended"] .add-button { background: linear-gradient(135deg, #31e0a1, #16b5d8); color: #04140e; box-shadow: 0 0 18px rgba(49, 224, 161, .5); position: relative; overflow: hidden; }
html[data-theme="extended"] :is(.chip, .option, .theme-option) { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--text); }
html[data-theme="extended"] :is(.chip.is-active, .option.is-active, .theme-option.is-selected) { border-color: var(--neon); background: rgba(49, 224, 161, .16); color: #fff; box-shadow: 0 0 18px rgba(49, 224, 161, .45), inset 0 0 14px rgba(49, 224, 161, .15); }
html[data-theme="extended"] .search input { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--text); }
html[data-theme="extended"] .search input:focus { border-color: var(--neon); box-shadow: 0 0 18px rgba(49, 224, 161, .3); }
html[data-theme="extended"] .buy-bar { z-index: 5; }
html[data-theme="extended"] .pass { background: linear-gradient(135deg, #0f3b2f, #0a1018 60%, #2a1a5a); border: 1px solid rgba(49, 224, 161, .3); box-shadow: 0 0 40px rgba(49, 224, 161, .15); }
html[data-theme="extended"] .scan-card, html[data-theme="extended"] .cups-panel { background: rgba(255, 255, 255, .045); }
html[data-theme="extended"] .qr-area svg { background: #fff; padding: 10px; border-radius: 16px; box-shadow: 0 0 32px rgba(49, 224, 161, .45); }
html[data-theme="extended"] .qr-wait { color: #9fb3aa; }
html[data-theme="extended"] .stamp svg rect { fill: #14202a; }
html[data-theme="extended"] .stamp.is-filled svg path { fill: var(--neon); stroke: var(--neon); filter: drop-shadow(0 0 6px var(--neon)); }
html[data-theme="extended"] .stamp.is-filled svg rect { fill: #14a876; stroke: #14a876; }
html[data-theme="extended"] .stamp.is-filled svg .tick { stroke: #04140e; }
html[data-theme="extended"] .stamp.is-filled { color: #fff; }
html[data-theme="extended"] .avatar { background: rgba(255, 255, 255, .1); }
html[data-theme="extended"] .status.is-open { color: #31e0a1; }
html[data-theme="extended"] .map-controls button { background: rgba(10, 14, 20, .85); color: #fff; }
html[data-theme="extended"] .map { filter: invert(.92) hue-rotate(160deg) saturate(.7) brightness(.85); }
html[data-theme="extended"] .map-marker, html[data-theme="extended"] .map-controls, html[data-theme="extended"] .map-credit { filter: none; }
html[data-theme="extended"] .dialog { border: 1px solid rgba(49, 224, 161, .3); background: rgba(12, 16, 24, .92); color: var(--text); box-shadow: 0 0 50px rgba(49, 224, 161, .2), 0 30px 70px rgba(0, 0, 0, .7); backdrop-filter: blur(24px); }
html[data-theme="extended"] .coupon { border-color: var(--neon); background: rgba(49, 224, 161, .08); }
html[data-theme="extended"] .coupon strong { color: #fff; }
html[data-theme="extended"] .coupon span { color: var(--neon); text-shadow: 0 0 20px rgba(49, 224, 161, .6); }
html[data-theme="extended"] .link-button { color: #9fb3aa; }
html[data-theme="extended"] #toast { background: rgba(12, 16, 24, .92); border: 1px solid var(--neon); box-shadow: 0 0 22px rgba(49, 224, 161, .35); }
html[data-theme="extended"] .ripple { background: rgba(49, 224, 161, .45); }

html[data-theme="extended"] #tabBar { left: 50%; right: auto; width: min(calc(100% - 24px), 456px); max-width: none; height: 68px; bottom: calc(12px + var(--safe-bottom)); padding: 0 6px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; background: rgba(10, 14, 20, .74); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(49, 224, 161, .1), inset 0 1px 0 rgba(255, 255, 255, .08); }
html[data-theme="extended"] #tabBar::after { display: none; }
html[data-theme="extended"] .dock-indicator { position: absolute; left: 6px; top: 6px; bottom: 6px; width: calc((100% - 12px) / 6); border: 1px solid rgba(49, 224, 161, .5); border-radius: 20px; background: linear-gradient(135deg, rgba(49, 224, 161, .26), rgba(123, 97, 255, .26)); box-shadow: 0 0 26px rgba(49, 224, 161, .35), inset 0 0 14px rgba(49, 224, 161, .15); transform: translateX(calc(var(--active, 0) * 100%)); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
html[data-theme="extended"] .tab { position: relative; z-index: 1; overflow: hidden; border-radius: 20px; color: #8da39a; font-size: 10.5px; }
html[data-theme="extended"] .tab .icon { width: 25px; height: 25px; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), filter .3s; }
html[data-theme="extended"] .tab.is-active { color: var(--neon); }
html[data-theme="extended"] .tab.is-active::after { display: none; }
html[data-theme="extended"] .tab.is-active .icon { transform: translateY(-2px) scale(1.14); filter: drop-shadow(0 0 8px var(--neon)); }
html[data-theme="extended"] .tab:active .icon { transform: scale(.82); }
html[data-theme="extended"] .tab-center { flex: 1; width: auto; height: auto; margin: 0; padding: 8px 0; border-radius: 20px; background: none; color: #8da39a; box-shadow: none; animation: none; justify-content: flex-start; }
html[data-theme="extended"] .tab-center .icon { width: 25px; height: 25px; filter: drop-shadow(0 0 6px rgba(49, 224, 161, .6)); animation: neonIcon 2.4s ease-in-out infinite; }
html[data-theme="extended"] .tab-center.is-active { color: var(--neon); background: none; }
@keyframes neonIcon { 50% { filter: drop-shadow(0 0 12px var(--neon)); } }
html[data-theme="extended"] .tab .cart-count { top: 2px; right: calc(50% - 22px); }

.search .icon { z-index: 1; }
html[data-theme="glass"] .rise, html[data-theme="extended"] .rise { opacity: 1; }