/* AI-MARK[QAI-UI:luckybest-vietlott-rebuild] 2026-09-25 (GMT+7) — replace the former dark canvas layout with the supplied LuckyBest-like mobile composition: red/orange full-screen background, white rounded product cards, compact header and three-item bottom navigation | rel: QAI-UI:luckybest-vietlott-rebuild */
:root {
  --lb-red: #df3515;
  --lb-red-dark: #a91708;
  --lb-orange: #ff8a00;
  --lb-orange-soft: #ffb12c;
  --lb-white: #fff;
  --lb-muted: #a9abb0;
  --lb-ink: #35170f;
  --lb-green: #31ae31;
  --phone-width: min(390px, calc(100vw - 24px));
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { overflow-x: hidden; background: #f4f4f4; color: var(--lb-ink); }
button { border: 0; font: inherit; cursor: pointer; text-align: center; }
button:focus-visible { outline: 3px solid #ffbb42; outline-offset: 2px; }
.ui-icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* AI-MARK[QAI-UI:quiklott-royalty-tier-theme] 2026-09-25 (GMT+7) — expose four visual royalty themes without changing the shared phone shell or lottery interaction patterns | rel: QAI-FEAT:quiklott-royalty-tier-theme */
.prototype-stage { display: grid; justify-items: center; min-height: 100vh; padding: 22px 12px 34px; background: #f4f4f4; --tier-primary: #df3515; --tier-deep: #a91708; --tier-soft: #fff0e7; }
.surface-switcher { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; width: min(420px, calc(100vw - 24px)); gap: 6px; margin-bottom: 16px; }
.surface-tabs { display: flex; width: 100%; gap: 5px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 8px 22px rgba(50, 32, 25, .11); }
.surface-tab { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 999px; color: #9a8b87; background: transparent; font-size: 13px; font-weight: 800; }
.surface-tab.is-active { color: #fff; background: linear-gradient(135deg, #e84b1f, #b51b0d); box-shadow: 0 5px 12px rgba(182, 35, 15, .25); }
.tab-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: rgba(255,255,255,.62); color: var(--lb-red); }
.surface-tab.is-active .tab-icon { color: #c43116; }
.tab-icon .ui-icon { width: 16px; height: 16px; }
.tier-switch { display: flex; align-items: center; gap: 5px; min-width: 92px; padding: 5px 7px; border: 1px solid rgba(226, 103, 46, .22); border-radius: 16px; color: #7f3a22; background: #fff; box-shadow: 0 8px 22px rgba(50, 32, 25, .11); text-align: left; }
.tier-switch-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: #e65a1b; background: var(--tier-soft); }
.tier-switch-icon .ui-icon { width: 16px; height: 16px; }
.tier-switch > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.tier-switch small { color: #a5877b; font-size: 7px; line-height: 1; }
.tier-switch strong { overflow: hidden; color: var(--tier-primary); font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.tier-switch > b { margin-left: auto; color: #cf541b; font-size: 9px; }
.prototype-stage[data-tier="silver"] { --tier-primary: #63788d; --tier-deep: #2d4053; --tier-soft: #edf3f8; }
.prototype-stage[data-tier="gold"] { --tier-primary: #c27a0a; --tier-deep: #75400a; --tier-soft: #fff4d9; }
.prototype-stage[data-tier="diamond"] { --tier-primary: #6c4cc2; --tier-deep: #2a1d67; --tier-soft: #f0ecff; }
.prototype-stage[data-tier="silver"] .surface-tab.is-active, .prototype-stage[data-tier="silver"] .app-topbar, .prototype-stage[data-tier="silver"] .webview-host-bar { background: linear-gradient(135deg, #7890a5, #344a60); }
.prototype-stage[data-tier="gold"] .surface-tab.is-active, .prototype-stage[data-tier="gold"] .app-topbar, .prototype-stage[data-tier="gold"] .webview-host-bar { background: linear-gradient(135deg, #d89b2d, #8d4c08); }
.prototype-stage[data-tier="diamond"] .surface-tab.is-active, .prototype-stage[data-tier="diamond"] .app-topbar, .prototype-stage[data-tier="diamond"] .webview-host-bar { background: linear-gradient(135deg, #8d71df, #37257b); }
.prototype-stage[data-tier="silver"] .home-screen, .prototype-stage[data-tier="silver"] .inner-screen { background: linear-gradient(160deg, #6f879d 0%, #3d5368 58%, #26394d 100%); }
.prototype-stage[data-tier="gold"] .home-screen, .prototype-stage[data-tier="gold"] .inner-screen { background: linear-gradient(160deg, #dc9e2f 0%, #a9630d 58%, #6f3907 100%); }
.prototype-stage[data-tier="diamond"] .home-screen, .prototype-stage[data-tier="diamond"] .inner-screen { background: linear-gradient(160deg, #8871d8 0%, #5140a3 58%, #2d246d 100%); }
.prototype-stage[data-tier="silver"] .lb-hero { background: linear-gradient(135deg, #26394d, #54728c 56%, #a9c4d8); }
.prototype-stage[data-tier="gold"] .lb-hero { background: linear-gradient(135deg, #794209, #d5850b 56%, #ffd36a); }
.prototype-stage[data-tier="diamond"] .lb-hero { background: linear-gradient(135deg, #2b1e69, #6549c0 56%, #c7b5ff); }
.prototype-stage[data-tier="silver"] .lb-primary-button, .prototype-stage[data-tier="silver"] .keno-submit-button { background: linear-gradient(135deg, #7895ad, #3b556d); }
.prototype-stage[data-tier="gold"] .lb-primary-button, .prototype-stage[data-tier="gold"] .keno-submit-button { background: linear-gradient(135deg, #e5a331, #a65b08); }
.prototype-stage[data-tier="diamond"] .lb-primary-button, .prototype-stage[data-tier="diamond"] .keno-submit-button { background: linear-gradient(135deg, #9274e9, #4c36a6); }
.surface-view { width: var(--phone-width); }
.surface-view[hidden] { display: none; }

/* AI-MARK[QAI-UI:mobile-frame-safe-layout] 2026-09-25 (GMT+7) — keep the physical phone frame clean, remove the artificial notch and reserve stable title/card space so native controls remain separated on small screens | rel: QAI-UI:luckybest-vietlott-rebuild */
.phone-frame { position: relative; width: 100%; padding: 12px; border: 2px solid #171d2b; border-radius: 53px; background: linear-gradient(145deg, #29334a, #070a13 72%); box-shadow: 0 28px 55px rgba(44, 22, 14, .22), inset 0 0 0 2px rgba(255,255,255,.16); }
.phone-screen { position: relative; height: min(820px, calc(100vh - 118px)); min-height: 600px; overflow: hidden; border: 1px solid #0d1422; border-radius: 41px; background: linear-gradient(160deg, var(--lb-red), var(--lb-red-dark)); }
.surface-canvas, .app-shell { height: 100%; min-height: 0; }
.app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.app-content { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: rgba(110, 20, 7, .35) transparent; }
.app-content { scrollbar-width: none; }
.app-content::-webkit-scrollbar { display: none; width: 0; height: 0; }

.app-topbar { z-index: 4; color: #fff; background: linear-gradient(180deg, #e9451b, #d42d10); }
.native-status { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 9px 17px 1px; font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.native-status span:last-child { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.native-status .status-mute { width: 18px; height: 18px; }
.native-header-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px; align-items: center; gap: 7px; padding: 6px 13px 13px; }
.native-title { justify-self: center; min-width: 0; max-width: 100%; overflow: hidden; font-size: 20px; letter-spacing: .2px; text-overflow: ellipsis; white-space: nowrap; }
.native-icon-button { display: grid; place-items: center; width: 37px; height: 37px; padding: 0; border-radius: 50%; color: #fff; background: transparent; }
.native-icon-button:hover { background: rgba(255,255,255,.14); }
.native-icon-button .ui-icon { width: 28px; height: 28px; }
.native-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; width: 96px; min-width: 0; }
.native-actions .native-icon-button { width: 31px; height: 31px; }
.native-actions .ui-icon { width: 22px; height: 22px; }

.home-screen, .inner-screen { min-height: 100%; padding: 0 14px 38px; background: linear-gradient(160deg, #ef4d20 0%, #d93413 58%, #ad1608 100%); }
.lb-brand-row { display: flex; align-items: center; gap: 8px; padding: 1px 3px 14px; color: #fff; }
.home-logo { display: grid; place-items: center; width: 45px; height: 30px; overflow: hidden; border-radius: 10px; background: #fff; }
.home-logo img { width: 40px; height: auto; }
.lb-brand-row > div { display: grid; gap: 1px; }
.lb-brand-row strong { font-size: 14px; }
.lb-brand-row small { color: rgba(255,255,255,.72); font-size: 9px; }
.lb-brand-row > button { display: flex; align-items: center; gap: 4px; min-height: 29px; margin-left: auto; padding: 0 8px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: 9px; font-weight: 800; }
.lb-brand-row > button .ui-icon { width: 15px; height: 15px; }

.lb-hero { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 210px; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #a60000 0%, #ef1010 56%, #ffcf45 100%); box-shadow: 0 9px 18px rgba(92, 15, 4, .26); }
.lb-hero-copy { padding: 18px 8px 16px 17px; color: #fff; }
.lb-hero-kicker { display: block; color: #ffe8a2; font-size: 8px; font-weight: 900; letter-spacing: .5px; }
.lb-hero h1 { margin: 13px 0 8px; font-size: 26px; line-height: .96; letter-spacing: -.8px; }
.lb-hero p { margin: 0 0 15px; color: rgba(255,255,255,.75); font-size: 10px; line-height: 1.3; }
.lb-hero-copy button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; color: #bc1c0c; background: #fff; font-size: 10px; font-weight: 900; }
.lb-hero-copy button .ui-icon { width: 15px; height: 15px; }
.lb-hero-art { position: relative; display: grid; align-content: center; justify-items: center; padding: 8px; color: #ffe59a; }
.lb-hero-art > span { position: absolute; top: 21px; right: -8px; transform: rotate(13deg); color: #ffe064; font-size: 16px; font-weight: 1000; letter-spacing: 1px; text-shadow: 2px 2px 0 #a80000; }
.hero-product-art { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 9px 9px rgba(86,0,0,.35)); }
.lb-hero-art i { margin-top: -3px; color: #fff; font-size: 19px; font-style: normal; font-weight: 1000; text-shadow: 1px 2px 0 #9b0500; }
.lb-dots { display: flex; justify-content: center; gap: 7px; padding: 11px 0 15px; }
.lb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); }
.lb-dots i.active { background: #fff; }

.lb-section-title { display: flex; align-items: end; justify-content: space-between; gap: 9px; padding: 0 2px 12px; color: #fff; }
.lb-section-title h2 { margin: 0; font-size: 17px; line-height: 1.05; letter-spacing: .2px; }
.lb-section-title button { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: #ffddb8; background: none; font-size: 9px; font-weight: 900; white-space: nowrap; }
.lb-section-title .ui-icon { width: 14px; height: 14px; }
.lb-product-feed { display: grid; gap: 9px; }
.lb-product-card { display: grid; grid-template-columns: 106px minmax(0, 1fr) 24px; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 5px 8px; width: 100%; min-height: 118px; padding: 12px 9px 11px 12px; overflow: hidden; border-radius: 16px; text-align: left; color: var(--lb-ink); background: #fff; box-shadow: 0 7px 14px rgba(112, 12, 1, .2); }
.lb-product-card:hover { transform: translateY(-1px); box-shadow: 0 9px 17px rgba(112, 12, 1, .26); }
/* AI-MARK[QAI-UI:quiklott-profile-smart-pick] 2026-09-25 (GMT+7) — make the profile recommendation and one-tap product entries legible in a compact mobile viewport | rel: QAI-FEAT:quiklott-product-quick-buy */
.smart-pick-card { display: grid; gap: 7px; width: 100%; margin: 12px 0 10px; padding: 13px; border: 1px solid rgba(255,255,255,.36); border-radius: 16px; color: #fff; background: rgba(94, 5, 0, .25); box-shadow: 0 8px 16px rgba(90, 10, 0, .18); text-align: left; }
.smart-pick-card > strong { font-size: 16px; line-height: 1.05; }
.smart-pick-kicker { color: #ffe2a7; font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.smart-pick-profile { color: rgba(255,255,255,.76); font-size: 9px; }
.smart-number-row, .payment-pick-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.smart-number-row i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #c84213; background: #fff; font-size: 9px; font-style: normal; font-weight: 900; }
.smart-pick-cta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.22); color: #fff1ca; font-size: 10px; font-weight: 900; }
.smart-pick-cta .ui-icon { width: 15px; height: 15px; }
.lb-product-card.quick-entry { position: relative; }
.lb-quick-label { display: inline-flex; grid-column: 2; grid-row: 2; align-items: center; justify-self: start; gap: 3px; min-height: 22px; max-width: 100%; overflow: hidden; padding: 0 8px; border: 1px solid #ff9b24; border-radius: 999px; color: #f26a15; background: #fff7ed; font-size: 8px; font-weight: 900; white-space: nowrap; }
.lb-quick-label .ui-icon { width: 12px; height: 12px; flex: 0 0 auto; }
.lb-card-product { display: grid; grid-column: 1; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr) 42px; grid-template-rows: auto 1fr; align-items: center; column-gap: 3px; min-width: 0; }
.lb-product-type { grid-column: 1 / -1; overflow: hidden; color: var(--lb-muted); font-size: 9px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.lb-product-logo { display: grid; place-items: center; width: 42px; height: 42px; grid-row: 2; grid-column: 2; }
.lb-product-logo img { width: 42px; height: 42px; object-fit: contain; }
.product-wordmark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #425274, #14213f); font-size: 8px; font-weight: 1000; letter-spacing: -.3px; text-align: center; }
.keno-wordmark { color: #fff; background: linear-gradient(145deg, #f4a300, #f26300); }
.lb-card-product > strong { grid-row: 2; grid-column: 1; align-self: center; min-width: 0; overflow: hidden; color: #df3b19; font-size: 15px; line-height: 1; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.lb-product-card.lotto .lb-card-product > strong { color: #2db331; }
.lb-product-card.power .lb-card-product > strong { color: #e49b03; }
.lb-product-card.maxpro .lb-card-product > strong { color: #70284f; }
.lb-product-card.mega .lb-card-product > strong { color: #d71925; }
.lb-card-content { display: grid; grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0; gap: 5px; }
.lb-card-meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px 5px; min-width: 0; color: #b1b1b3; font-size: 9px; line-height: 1.1; }
.lb-card-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-card-meta b { flex: 0 0 auto; padding: 4px 6px; border: 2px solid var(--lb-orange); border-radius: 999px; color: #f26a15; font-size: 8px; white-space: nowrap; }
.lb-card-content > strong { display: -webkit-box; overflow: hidden; color: #e84a24; font-size: 15px; line-height: 1.08; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lb-product-card.lotto .lb-card-content > strong { color: #2da52d; }
.lb-product-card.power .lb-card-content > strong { color: #e09a00; }
.lb-product-card.maxpro .lb-card-content > strong { color: #6f2d54; }
.lb-product-card.mega .lb-card-content > strong { color: #d71925; }
.lb-card-content > span { overflow: hidden; color: #a5a5a6; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lb-card-arrow { display: grid; grid-column: 3; grid-row: 1 / span 2; place-items: center; color: #ec5d19; }
.lb-card-arrow .ui-icon { width: 25px; height: 25px; stroke-width: 2.3; }
.lb-trust-strip { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 13px; color: #fff; background: rgba(90, 5, 0, .2); }
.lb-trust-strip > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(255,255,255,.18); }
.lb-trust-strip .ui-icon { width: 17px; height: 17px; }
.lb-trust-strip div { display: grid; gap: 2px; }
.lb-trust-strip strong { font-size: 10px; }
.lb-trust-strip small { color: rgba(255,255,255,.74); font-size: 8px; }

.inner-screen { padding-top: 18px; }
.lb-page-intro { padding: 2px 4px 15px; color: #fff; }
.lb-page-intro > span { color: #ffd88a; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.lb-page-intro h1 { margin: 7px 0 4px; font-size: 24px; line-height: 1.08; letter-spacing: -.5px; }
.lb-page-intro p { margin: 0; color: rgba(255,255,255,.75); font-size: 11px; line-height: 1.35; }
.lb-filter-row, .ticket-tabs { display: flex; gap: 7px; margin-bottom: 13px; overflow-x: auto; scrollbar-width: none; }
.lb-filter-row::-webkit-scrollbar, .ticket-tabs::-webkit-scrollbar { display: none; }
.lb-filter-row button, .ticket-tabs button { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.17); font-size: 9px; font-weight: 800; }
.lb-filter-row button.active, .ticket-tabs button.active { color: var(--lb-red); background: #fff; }

.lb-ticket-summary, .lb-ticket-card, .lb-result-card, .lb-auto-card { border-radius: 16px; background: #fff; box-shadow: 0 7px 15px rgba(112, 12, 1, .2); }
.lb-ticket-summary { margin-bottom: 11px; padding: 14px; }
.lb-ticket-summary > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-ticket-summary span { font-size: 11px; font-weight: 800; }
.lb-ticket-summary strong { color: var(--lb-red); font-size: 10px; }
.selected-number-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.selected-number-row i, .ticket-number-row i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #b22b14; background: #fff0ea; font-size: 10px; font-style: normal; font-weight: 900; }
.selected-number-row em { color: #aaa; font-size: 10px; font-style: normal; }
.picker-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.picker-quick-row button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 37px; border-radius: 10px; color: var(--lb-red); background: #fff; font-size: 10px; font-weight: 800; }
.picker-quick-row .ui-icon { width: 16px; height: 16px; }
.number-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px; border-radius: 16px; background: rgba(105, 10, 0, .23); }
.number-grid button { aspect-ratio: 1; border-radius: 50%; color: #fff; background: rgba(255,255,255,.17); font-size: 10px; font-weight: 900; }
.number-grid button.selected { color: var(--lb-red); background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.26); }
.picker-summary-group { display: grid; gap: 2px; margin-top: 8px; }
.picker-summary-group small, .picker-section-title small { color: #9a9a9a; font-size: 8px; font-weight: 800; }
.picker-summary-group .selected-number-row { margin-top: 0; }
.picker-number-section { margin-bottom: 11px; }
.picker-section-title { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 0 2px 6px; color: #fff; }
.picker-section-title strong { font-size: 10px; }
.picker-section-title small { color: rgba(255,255,255,.75); }
.special-number-section { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.2); }
.special-number-grid { grid-template-columns: repeat(6, 1fr); background: rgba(255,255,255,.13); }
.lb-purchase-bar { position: sticky; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding: 10px; border-radius: 15px; background: #fff; box-shadow: 0 8px 18px rgba(78, 6, 0, .26); }
.lb-purchase-bar div { display: grid; gap: 2px; }
.lb-purchase-bar small { color: #999; font-size: 9px; }
.lb-purchase-bar strong { color: var(--lb-red); font-size: 17px; }
.lb-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 0 13px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #ed5a1d, #c9200e); font-size: 10px; font-weight: 900; box-shadow: 0 5px 10px rgba(195, 39, 13, .22); }
.lb-primary-button:disabled { opacity: .45; cursor: default; }
.lb-primary-button .ui-icon { width: 15px; height: 15px; }
.full { width: 100%; }

.lb-scan-banner { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 12px; padding: 11px; border-radius: 13px; text-align: left; color: #9b310f; background: #fff; box-shadow: 0 7px 13px rgba(112, 12, 1, .17); }
.lb-scan-banner > .ui-icon { width: 25px; height: 25px; }
.lb-scan-banner span { display: grid; flex: 1; gap: 2px; }
.lb-scan-banner strong { font-size: 11px; }
.lb-scan-banner small { color: #9c9c9c; font-size: 9px; }
.lb-result-card { padding: 12px; }
.result-list { display: grid; gap: 9px; }
.result-head { display: flex; align-items: center; gap: 8px; }
.result-head > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff2e9; }
.result-product-art { width: 33px; height: 33px; object-fit: contain; }
.result-head div { display: grid; flex: 1; gap: 3px; }
.result-head strong { font-size: 12px; }
.result-head small, .result-head b { color: #999; font-size: 9px; }
.result-head b { color: var(--lb-red); }
.result-balls { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-bottom: 1px solid #eee; }
.result-balls i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #f3b7a1; border-radius: 50%; color: var(--lb-red); font-size: 9px; font-style: normal; font-weight: 900; }
.result-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; color: #aaa; font-size: 9px; }
.result-foot button, .ticket-card-foot button { display: inline-flex; align-items: center; gap: 3px; padding: 0; color: var(--lb-red); background: transparent; font-size: 9px; font-weight: 900; }
.result-foot .ui-icon, .ticket-card-foot .ui-icon { width: 14px; height: 14px; }
/* AI-MARK[QAI-UI:luckybest-product-flows] 2026-09-25 (GMT+7) — reserve stable mobile layouts for Keno, quick draw, Max 3D digit picking and the result-tab surface so text and controls never overlap | rel: QAI-FEAT:vietlott-product-flows */
.results-screen { color: #3d3d3d; background: #fff; }
.results-heading { margin: -18px -14px 0; padding: 17px 14px 13px; color: #fff; background: linear-gradient(145deg, #ffae00, #f35a18); border-radius: 0 0 28px 28px; }
.results-heading > span { color: rgba(255,255,255,.8); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.results-heading h1 { margin: 8px 0 4px; font-size: 25px; }
.results-heading p { margin: 0; color: rgba(255,255,255,.8); font-size: 10px; }
.result-game-tabs { display: flex; gap: 19px; padding: 0 0 11px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #eee; background: linear-gradient(145deg, #ffae00, #f35a18); }
.result-game-tabs::-webkit-scrollbar { display: none; }
.result-game-tabs button { flex: 0 0 auto; padding: 0 0 8px; color: rgba(255,255,255,.75); background: transparent; font-size: 12px; }
.result-game-tabs button.active { color: #fff; font-weight: 900; border-bottom: 2px solid #fff; }
.result-detail-card { margin-top: 13px; color: #3d3d3d; box-shadow: none; border: 1px solid #eee; }
.result-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 9px; }
.result-detail-meta strong { font-size: 12px; }
.result-detail-meta span { color: #777; text-align: right; }
.result-detail-name { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.result-detail-name strong { font-size: 16px; }
.result-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 11px 0; }
.result-stat-grid button { min-height: 28px; padding: 0 4px; border: 1px solid #666; border-radius: 999px; color: #666; background: #fff; font-size: 8px; white-space: nowrap; }
.result-stat-grid button.highlight { border-color: #ff6e14; color: #f55c11; }
.results-screen .result-foot { border-top: 1px solid #eee; }
.results-screen .lb-scan-banner { color: #9b310f; }

.quick-play-card { padding: 16px; border-radius: 18px; color: var(--lb-ink); background: #fff; box-shadow: 0 8px 18px rgba(112, 12, 1, .2); }
.quick-play-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 10px; border-radius: 17px; background: #fff1e7; }
.quick-play-icon .product-art { width: 52px; height: 52px; object-fit: contain; }
.quick-play-card strong { font-size: 17px; }
.quick-play-card p { margin: 6px 0 13px; color: #888; font-size: 10px; line-height: 1.4; }
.quick-count-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quick-count-row button { min-height: 32px; border: 1px solid #f1aa85; border-radius: 999px; color: var(--lb-red); background: #fff; font-size: 10px; font-weight: 800; }
.quick-count-row button.active { color: #fff; background: var(--lb-red); }
.quick-ticket-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; margin-top: 13px; padding-top: 11px; border-top: 1px dashed #ddd; }
.quick-ticket-preview em { color: #999; font-size: 10px; font-style: normal; }

.keno-picker-screen { color: #242424; background: #fff; }
.keno-picker-screen .picker-topline { color: #242424; }
.keno-picker-screen .picker-topline > span { color: #f26b0e; }
.keno-picker-screen .picker-topline h1 { text-align: center; }
.keno-picker-screen .picker-topline p { color: #555; font-size: 16px; }
.keno-picker-screen .picker-topline p strong { color: #ed2b2b; }
.keno-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 13px; }
.keno-selectors button { position: relative; display: grid; min-height: 61px; padding: 8px 27px 8px 12px; border: 1px solid #555; border-radius: 23px; text-align: left; color: #444; background: #fff; }
.keno-selectors button .ui-icon { position: absolute; right: 10px; bottom: 12px; width: 18px; height: 18px; }
.keno-selectors small { font-size: 8px; }
.keno-selectors strong { font-size: 12px; }
.keno-board { display: grid; gap: 4px; }
.keno-row { display: grid; grid-template-columns: 24px 1fr 1fr 34px 48px; align-items: center; gap: 6px; min-height: 54px; padding: 0 0 0 4px; color: #242424; background: #fff; text-align: left; }
.keno-row > strong { font-size: 19px; }
.keno-choice-circle { width: 38px; height: 38px; border: 1.5px solid #555; border-radius: 50%; }
.keno-row.selected .keno-choice-circle { border-color: #f26b0e; box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 20px #f26b0e; }
.keno-row-random { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #0878ce; }
.keno-row-random .ui-icon { width: 19px; height: 19px; }
.keno-row b { padding: 7px 7px; border: 1px solid #555; border-radius: 999px; color: #555; font-size: 11px; text-align: center; }
.keno-quick-button { display: block; width: 100%; min-height: 42px; margin: 13px 0; border: 2px solid #ff9300; border-radius: 999px; color: #f28a00; background: #fff; font-size: 17px; font-weight: 800; }
.keno-total { display: flex; justify-content: space-between; margin-top: auto; padding: 14px 0 7px; font-size: 16px; }
.keno-total b { font-size: 19px; }
.keno-submit-button { display: grid; width: 100%; min-height: 54px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #ffb000, #ff6400); font-size: 16px; font-weight: 900; }
.keno-submit-button span { font-size: 10px; font-weight: 500; }
.keno-submit-button:disabled { opacity: .42; }

.digit-rule { display: flex; align-items: start; gap: 8px; min-width: 0; margin-bottom: 12px; padding: 11px; border-radius: 13px; color: #fff; background: rgba(94, 4, 0, .24); }
.digit-rule > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.2); }
.digit-rule .ui-icon { width: 16px; height: 16px; }
.digit-rule p { min-width: 0; margin: 0; font-size: 10px; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
.digit-entry-list { display: grid; gap: 9px; }
.digit-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; min-height: 62px; padding: 0 14px; border-radius: 15px; color: var(--lb-ink); background: #fff; box-shadow: 0 7px 15px rgba(112, 12, 1, .18); text-align: left; }
.digit-entry span { overflow: hidden; color: #999; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.digit-entry strong { min-width: 68px; font-size: 25px; letter-spacing: 4px; text-align: right; white-space: nowrap; }
.digit-entry .ui-icon { width: 18px; color: var(--lb-red); }
.digit-entry.ready strong { color: var(--lb-red); }
.digit-entry.active { border: 2px solid #ffb13a; }
.digit-keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 12px; padding: 9px; border-radius: 15px; background: rgba(94, 4, 0, .24); }
.digit-keypad button { min-height: 32px; border-radius: 10px; color: #fff; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 900; }
.digit-keypad button:hover, .digit-keypad button:focus-visible { background: rgba(255,255,255,.3); }
.digit-keypad .digit-key-delete { grid-column: span 2; color: var(--lb-red); background: #fff; }
.bingo-picker-screen { color: #242424; background: #fff; }
.bingo-picker-screen .lb-page-intro { color: #242424; }
.bingo-picker-screen .lb-page-intro > span { color: #f26b0e; }
.bingo-picker-screen .lb-page-intro p { color: #666; }
.bingo-board-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.bingo-board-switch button { min-height: 35px; border: 1px solid #ff9a23; border-radius: 999px; color: #df5b12; background: #fff; font-size: 10px; font-weight: 900; }
.bingo-board-switch button.active { color: #fff; background: linear-gradient(135deg, #ff9f19, #e54616); }
.bingo-selection-note { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 9px 10px; border-radius: 12px; color: #fff; background: #e95318; }
.bingo-selection-note .ui-icon { width: 17px; height: 17px; }
.bingo-selection-note strong { font-size: 11px; }
.bingo-selection-note small { margin-left: auto; font-size: 8px; opacity: .8; }
.bingo-choice-groups { display: grid; gap: 11px; }
.bingo-choice-group h2 { margin: 0 0 6px; color: #444; font-size: 12px; }
.bingo-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bingo-choice { display: grid; gap: 3px; min-height: 42px; padding: 6px 4px; border: 1px solid #e7d8d0; border-radius: 11px; color: #4a332a; background: #fff; text-align: center; }
.bingo-choice strong { font-size: 9px; line-height: 1.1; }
.bingo-choice small { color: #a28a80; font-size: 7px; line-height: 1.1; }
.bingo-choice.selected { border-color: #ef5e17; color: #c63a13; background: #fff0e6; box-shadow: inset 0 0 0 1px #ef5e17; }
.lb-ticket-card { padding: 13px; }
.ticket-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.ticket-card-head div { display: grid; gap: 4px; }
.ticket-card-head strong { font-size: 12px; }
.ticket-card-head small { color: #999; font-size: 9px; }
.ticket-card-head > span { padding: 5px 7px; border-radius: 999px; color: #168f40; background: #e1f8e9; font-size: 8px; font-weight: 900; }
.ticket-number-row { display: flex; gap: 6px; padding: 14px 0; }
.ticket-card-foot { display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px dashed #ddd; color: #999; font-size: 9px; }
.lb-auto-card { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 12px; }
.lb-auto-card > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--lb-red); }
.lb-auto-card > span .ui-icon { width: 17px; height: 17px; }
.lb-auto-card div { display: grid; flex: 1; gap: 3px; }
.lb-auto-card strong { font-size: 10px; }
.lb-auto-card small { color: #999; font-size: 8px; }
.lb-auto-card button { padding: 5px 7px; border-radius: 999px; color: var(--lb-red); background: #fff0ea; font-size: 8px; font-weight: 900; }

/* AI-MARK[QAI-UI:quiklott-history-surface] 2026-09-25 (GMT+7) — create the history-first mobile surface with compact financial summary, status chips and ticket actions that never collide | rel: QAI-FEAT:quiklott-purchase-history */
.history-screen { color: #35170f; background: linear-gradient(180deg, #fff4ec 0%, #fff 42%); }
.history-heading { margin: -18px -14px 12px; padding: 20px 14px 16px; color: #fff; background: linear-gradient(145deg, #e8421c, #b7190b); border-radius: 0 0 24px 24px; }
.history-heading > span { color: #ffd99c; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.history-heading h1 { margin: 7px 0 4px; font-size: 25px; line-height: 1.05; }
.history-heading p { margin: 0; color: rgba(255,255,255,.76); font-size: 10px; line-height: 1.35; }
.history-metrics { display: grid; grid-template-columns: .8fr 1.2fr auto; align-items: center; gap: 8px; margin-bottom: 11px; padding: 11px; border: 1px solid #ffd8c0; border-radius: 15px; background: #fff; box-shadow: 0 6px 13px rgba(138, 41, 8, .08); }
.history-metrics > div { display: grid; gap: 3px; min-width: 0; }
.history-metrics strong { overflow: hidden; color: #bd3518; font-size: 15px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.history-metrics span { color: #9d8278; font-size: 8px; }
.history-metrics button { display: inline-flex; align-items: center; gap: 3px; min-height: 27px; padding: 0 7px; border-radius: 999px; color: #e2521a; background: #fff0e5; font-size: 8px; font-weight: 900; white-space: nowrap; }
.history-metrics button .ui-icon { width: 12px; height: 12px; }
.history-filter-row { display: flex; gap: 6px; margin-bottom: 11px; overflow-x: auto; scrollbar-width: none; }
.history-filter-row::-webkit-scrollbar { display: none; }
.history-filter-row button { flex: 0 0 auto; min-height: 31px; padding: 0 10px; border: 1px solid #f3c9b2; border-radius: 999px; color: #a06f5c; background: #fff; font-size: 9px; font-weight: 900; }
.history-filter-row button.active { border-color: #eb4b1d; color: #fff; background: linear-gradient(135deg, #ee5c23, #c82a12); box-shadow: 0 4px 9px rgba(212, 59, 17, .2); }
.history-list { display: grid; gap: 9px; }
.history-ticket-card { display: grid; gap: 9px; padding: 11px; border: 1px solid #f1e0d7; border-radius: 16px; background: #fff; box-shadow: 0 7px 15px rgba(112, 12, 1, .1); }
.history-ticket-head { display: flex; align-items: start; justify-content: space-between; gap: 7px; }
.history-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
.history-product-art { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; overflow: hidden; border-radius: 11px; background: #fff2e9; }
.history-product-image { width: 31px; height: 31px; object-fit: contain; }
.history-product > span:last-child { display: grid; gap: 3px; min-width: 0; }
.history-product strong { overflow: hidden; color: #4a2117; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-product small { overflow: hidden; color: #9c8880; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.history-status { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 5px 7px; border-radius: 999px; color: #b86a19; background: #fff1d8; font-size: 7px; font-weight: 900; white-space: nowrap; }
.history-status.completed { color: #7e6a62; background: #f1eeec; }
.history-status.rewarded { color: #168b5b; background: #e1f8ed; }
.history-ticket-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a18b83; font-size: 8px; }
.history-ticket-meta b { color: #d54716; font-size: 11px; }
.history-number-row, .history-detail-numbers { display: flex; flex-wrap: wrap; gap: 5px; }
.history-number-row i, .history-detail-numbers i { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid #f3cdbd; border-radius: 50%; color: #ba3718; background: #fff7f2; font-size: 9px; font-style: normal; font-weight: 900; }
.history-number-row .history-special-chip, .history-detail-numbers .history-special-chip { min-width: auto; border-radius: 999px; color: #d66b19; background: #fff4dc; font-size: 8px; }
.history-number-row .history-label-chip, .history-detail-numbers .history-label-chip { min-width: auto; border-radius: 999px; }
.history-ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-top: 8px; border-top: 1px dashed #eadcd4; color: #a18b83; font-size: 8px; }
.history-ticket-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-ticket-foot > div { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.history-ticket-foot button { display: inline-flex; align-items: center; gap: 3px; padding: 0; color: #d94719; background: transparent; font-size: 8px; font-weight: 900; }
.history-ticket-foot button .ui-icon { width: 13px; height: 13px; }
.history-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 14px; border: 1px dashed #e7cfc3; border-radius: 16px; color: #a27e70; background: rgba(255,255,255,.76); text-align: center; }
.history-empty .ui-icon { width: 26px; height: 26px; color: #e2521a; }
.history-empty strong { color: #5b2d20; font-size: 11px; }
.history-empty small { font-size: 8px; }
.history-tip { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 10px; border: 1px solid #d7eee9; border-radius: 13px; color: #2c776c; background: #effbf8; }
.history-tip > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #fff; background: #52bcae; }
.history-tip .ui-icon { width: 16px; height: 16px; }
.history-tip p { display: grid; gap: 2px; min-width: 0; margin: 0; }
.history-tip strong { font-size: 9px; }
.history-tip small { color: #548a82; font-size: 8px; line-height: 1.25; }
.history-detail-modal { max-height: 74%; color: #35170f; background: linear-gradient(180deg, #fff8f1, #fff); }
.history-detail-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 9px; border-radius: 15px; background: #fff0e7; }
.history-detail-art { width: 44px; height: 44px; object-fit: contain; }
.history-detail-code { display: grid; gap: 3px; margin: 10px 0; padding: 9px 10px; border-radius: 11px; background: #fff0e5; }
.history-detail-code small { color: #a98c80; font-size: 8px; }
.history-detail-code strong { color: #6a3020; font-size: 10px; letter-spacing: .4px; }
.history-detail-numbers { margin: 11px 0; }
.history-detail-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 9px 0; border-top: 1px dashed #e5d3c9; border-bottom: 1px dashed #e5d3c9; }
.history-detail-status > strong { color: #d54716; font-size: 15px; }

.bottom-nav { z-index: 5; background: #fff; box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
.bottom-items { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 72px; padding: 8px 5px calc(8px + env(safe-area-inset-bottom)); }
.bottom-item { display: grid; justify-items: center; align-content: center; gap: 4px; color: #b1b1b3; background: transparent; font-size: 9px; font-weight: 800; }
.bottom-item.active { color: var(--lb-red); }
.bottom-icon { display: grid; place-items: center; width: 30px; height: 30px; }
.bottom-item.active .bottom-icon { border-radius: 9px; background: #fff0ea; }
.bottom-icon .ui-icon { width: 22px; height: 22px; }
.bottom-item small { font-size: 9px; }
/* AI-MARK[QAI-UI:quiklott-collection-bottom-nav] 2026-09-25 (GMT+7) — add the collection destination while keeping the home action visually centered in the four-destination mobile navigation | rel: QAI-FEAT:quiklott-collectible-rewards */
.bottom-items-collection { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bottom-items-collection .bottom-item[data-view="tickets"] { grid-column: 1; }
.bottom-items-collection .bottom-item[data-view="collection"] { grid-column: 2; }
.bottom-items-collection .bottom-item[data-nav="account"] { grid-column: 4; }
.bottom-items-collection .bottom-item[data-view="results"] { grid-column: 5; }
.bottom-items-collection .bottom-item.nav-home { position: relative; z-index: 2; grid-column: 3; left: 0; bottom: auto; width: 70px; min-height: 61px; padding: 3px 0 2px; transform: none; border-radius: 16px; background: #fff; box-shadow: 0 -4px 13px rgba(120, 24, 4, .1); }
.bottom-items-collection .bottom-item.nav-home.active { color: var(--lb-red); }
.bottom-items-collection .bottom-item.nav-home .bottom-icon { width: 32px; height: 32px; }

.webview-host-shell { display: flex; height: 100%; flex-direction: column; overflow: hidden; background: #fff; }
/* AI-MARK[QAI-UI:vietlott-miniapp-webview-host] 2026-09-25 (GMT+7) — present the WebView as a partner-app mini-app surface: native back/menu host bar, Vietlott identity and responsive web content below | rel: QAI-UI:luckybest-vietlott-rebuild */
.webview-host-bar { z-index: 8; display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) 30px; align-items: center; gap: 6px; min-height: 52px; padding: 8px 10px; color: #fff; background: #9c170b; }
.host-back, .host-menu { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border-radius: 9px; color: #fff; background: rgba(255,255,255,.14); }
.host-back .ui-icon, .host-menu .ui-icon { width: 17px; height: 17px; }
.host-logo { display: grid; place-items: center; width: 33px; height: 27px; overflow: hidden; border-radius: 7px; background: #fff; }
.host-logo img { width: 31px; height: auto; }
.host-title { display: grid; min-width: 0; gap: 2px; }
.host-title strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.host-title span { overflow: hidden; color: rgba(255,255,255,.72); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.webview-body { min-height: 0; flex: 1; background: #fff; }
.webview-app-frame, .webview-app-shell { height: 100%; min-height: 0; }
.webview-app-shell .native-status { padding-top: 4px; }
.webview-app-shell .app-content { background: #fff; }
.webview-surface-canvas .webview-app-shell .app-topbar { border-radius: 0; }
/* AI-MARK[QAI-UI:quiklott-vietlott-miniapp-surface] 2026-09-25 (GMT+7) — give the WebView a wallet-mini-app visual language: neutral host chrome, white canvas, service shortcuts, compact ledger cards and a blue/red transactional hierarchy distinct from the native App | rel: QAI-FEAT:quiklott-vietlott-miniapp-surface */
.webview-surface-canvas .webview-host-bar { color: #17345e; background: #fff; border-bottom: 1px solid #e9eef5; }
.webview-surface-canvas .host-back, .webview-surface-canvas .host-menu { color: #17345e; background: #f1f5fa; }
.webview-surface-canvas .host-title strong { color: #17345e; }
.webview-surface-canvas .host-title span { color: #7890aa; }
.webview-surface-canvas .webview-app-shell .app-topbar { color: #17345e; background: #fff; border-bottom: 1px solid #edf1f6; }
.webview-surface-canvas .webview-app-shell .native-status { color: #17345e; }
.webview-surface-canvas .webview-app-shell .native-icon-button { color: #17345e; }
.webview-surface-canvas .webview-app-shell .native-icon-button:hover { background: #eef3f9; }
.webview-surface-canvas .webview-app-shell .bottom-nav { background: #fff; box-shadow: 0 -3px 12px rgba(30, 58, 92, .1); }
.webview-surface-canvas .webview-app-shell .bottom-item { color: #8494aa; }
.webview-surface-canvas .webview-app-shell .bottom-item.active { color: #d9391c; }
.webview-surface-canvas .webview-app-shell .bottom-item.nav-home { box-shadow: 0 -4px 13px rgba(30, 58, 92, .08); }
.webview-home-screen, .webview-buy-screen, .webview-history-screen, .webview-results-screen, .webview-collection-screen { min-height: 100%; padding: 13px 14px 34px; color: #17345e; background: #f5f8fc; }
.webview-wallet-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; padding: 11px 12px; border: 1px solid #dbe6f2; border-radius: 14px; background: #fff; box-shadow: 0 5px 12px rgba(22, 58, 96, .07); }
.webview-wallet-strip div { display: grid; gap: 2px; min-width: 0; }
.webview-wallet-strip small { color: #8395aa; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.webview-wallet-strip strong { overflow: hidden; color: #17345e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.webview-wallet-strip span { color: #3ca182; font-size: 8px; }
.webview-wallet-strip > b { flex: 0 0 auto; padding: 7px 8px; border-radius: 999px; color: #c94d1f; background: #fff2e9; font-size: 9px; }
.webview-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 11px; }
.webview-shortcuts button { display: grid; justify-items: center; gap: 5px; min-height: 54px; padding: 7px 3px; border: 1px solid #e0e8f1; border-radius: 12px; color: #496886; background: #fff; font-size: 8px; font-weight: 800; }
.webview-shortcuts button:first-child { color: #d94320; border-color: #ffd2c2; background: #fff8f4; }
.webview-shortcuts .ui-icon { width: 18px; height: 18px; }
.webview-live-card { display: grid; grid-template-columns: minmax(0, 1.25fr) .75fr; min-height: 179px; overflow: hidden; margin-bottom: 15px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #142f64, #245da9 62%, #ea5b25); box-shadow: 0 10px 18px rgba(22, 54, 105, .18); }
.webview-live-copy { min-width: 0; padding: 16px 9px 13px 14px; }
.webview-live-kicker { color: #c9ddff; font-size: 7px; font-weight: 900; letter-spacing: .8px; }
.webview-live-copy h1 { margin: 8px 0 4px; font-size: 20px; line-height: 1; }
.webview-live-copy p { margin: 0 0 11px; color: rgba(255,255,255,.74); font-size: 9px; line-height: 1.3; }
.webview-countdown { display: flex; gap: 12px; margin-bottom: 12px; }
.webview-countdown span { display: grid; gap: 2px; min-width: 0; }
.webview-countdown small { color: rgba(255,255,255,.68); font-size: 7px; }
.webview-countdown strong { font-size: 12px; white-space: nowrap; }
.webview-live-copy button, .webview-orange-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 0 10px; border-radius: 999px; color: #17345e; background: #fff; font-size: 8px; font-weight: 900; }
.webview-live-copy button .ui-icon, .webview-orange-button .ui-icon { width: 13px; height: 13px; }
.webview-live-art { position: relative; display: grid; place-items: center; min-width: 0; }
.webview-live-art span { position: absolute; top: 17px; right: -8px; transform: rotate(9deg); color: #ffdd6b; font-size: 10px; font-weight: 1000; }
.webview-live-product-art { width: 101px; height: 101px; object-fit: contain; filter: drop-shadow(0 10px 9px rgba(0,0,0,.24)); }
.webview-section-head { display: flex; align-items: end; justify-content: space-between; gap: 7px; margin-bottom: 8px; }
.webview-section-head > div { display: grid; gap: 3px; min-width: 0; }
.webview-section-head span, .webview-page-header > span { color: #d84b25; font-size: 7px; font-weight: 900; letter-spacing: .9px; }
.webview-section-head h2 { margin: 0; color: #17345e; font-size: 16px; line-height: 1.05; }
.webview-section-head button { display: inline-flex; align-items: center; gap: 3px; padding: 0; color: #d84b25; background: transparent; font-size: 8px; font-weight: 900; white-space: nowrap; }
.webview-section-head button .ui-icon { width: 13px; height: 13px; }
.webview-product-list { display: grid; gap: 7px; }
.webview-product-tile { display: grid; grid-template-columns: 49px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; min-height: 75px; padding: 8px 10px; border: 1px solid #e1eaf2; border-radius: 14px; color: #17345e; background: #fff; box-shadow: 0 5px 10px rgba(23, 52, 94, .06); text-align: left; }
.webview-product-tile:hover { border-color: #c3d8ef; transform: translateY(-1px); }
.webview-tile-art { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 13px; background: #f2f6fb; }
.webview-product-art { width: 40px; height: 40px; object-fit: contain; }
.webview-tile-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 6px; min-width: 0; }
.webview-tile-copy small { grid-column: 1 / -1; overflow: hidden; color: #94a3b5; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.webview-tile-copy strong { overflow: hidden; color: #17345e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.webview-tile-copy > span { overflow: hidden; color: #d84b25; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.webview-tile-copy em { display: inline-flex; align-items: center; justify-content: end; grid-column: 2; grid-row: 2; gap: 2px; color: #d84b25; font-size: 8px; font-style: normal; font-weight: 900; white-space: nowrap; }
.webview-tile-copy em .ui-icon { width: 12px; height: 12px; }
.webview-trust-row, .webview-payment-note { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 9px 10px; border: 1px solid #cde9e3; border-radius: 12px; background: #f1fbf8; }
.webview-trust-row > span, .webview-payment-note > .ui-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 8px; color: #fff; background: #51b4a4; }
.webview-trust-row .ui-icon { width: 15px; height: 15px; }
.webview-trust-row p, .webview-payment-note span { display: grid; gap: 2px; min-width: 0; margin: 0; }
.webview-trust-row strong, .webview-payment-note strong { color: #2a776e; font-size: 8px; }
.webview-trust-row small, .webview-payment-note small { color: #64948c; font-size: 7px; line-height: 1.25; }
.webview-page-header { padding: 4px 2px 13px; }
.webview-page-header h1 { margin: 7px 0 4px; color: #17345e; font-size: 23px; line-height: 1.05; }
.webview-page-header p { margin: 0; color: #7890aa; font-size: 9px; line-height: 1.35; }
.webview-buy-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 5px; margin-bottom: 12px; color: #91a2b5; font-size: 7px; font-weight: 800; }
.webview-buy-steps span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.webview-buy-steps span.active { color: #d84b25; }
.webview-buy-steps b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #a9b8c9; font-size: 8px; }
.webview-buy-steps span.active b { background: #d84b25; }
.webview-buy-steps i { height: 1px; background: #dce5ee; }
.webview-buy-list .webview-product-tile { min-height: 68px; }
.webview-buy-list .webview-tile-copy em { color: #17345e; }
.webview-payment-note { border-color: #d8e3f0; background: #f7faff; }
.webview-payment-note > .ui-icon { color: #fff; background: #456da8; }
.webview-payment-note strong { color: #456da8; }
.webview-payment-note small { color: #7f94ae; }
.webview-ledger-summary { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 8px; margin-bottom: 11px; padding: 11px; border: 1px solid #dce7f2; border-radius: 14px; background: #fff; }
.webview-ledger-summary div { display: grid; gap: 2px; min-width: 0; }
.webview-ledger-summary small { color: #91a1b2; font-size: 7px; }
.webview-ledger-summary strong { color: #17345e; font-size: 14px; }
.webview-ledger-summary button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #d84b25; background: #fff0e9; }
.webview-ledger-summary button .ui-icon { width: 14px; height: 14px; }
.webview-history-tabs, .webview-result-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.webview-history-tabs::-webkit-scrollbar, .webview-result-tabs::-webkit-scrollbar { display: none; }
.webview-history-tabs button, .webview-result-tabs button { flex: 0 0 auto; min-height: 29px; padding: 0 9px; border: 1px solid #d8e4ef; border-radius: 999px; color: #7690aa; background: #fff; font-size: 8px; font-weight: 900; }
.webview-history-tabs button.active, .webview-result-tabs button.active { border-color: #d84b25; color: #fff; background: #d84b25; }
.webview-history-list { display: grid; gap: 8px; }
.webview-history-screen .history-ticket-card { gap: 7px; padding: 10px; border: 1px solid #dfe8f1; border-radius: 14px; box-shadow: 0 5px 11px rgba(23, 52, 94, .06); }
.webview-history-screen .history-product strong, .webview-history-screen .history-ticket-meta b, .webview-history-screen .history-ticket-foot button { color: #d84b25; }
.webview-history-screen .history-product-art { background: #f2f6fb; }
.webview-history-screen .history-number-row i { border-color: #c8d9ec; color: #315b91; background: #f6faff; }
.webview-history-screen .history-ticket-foot { border-color: #e5edf4; }
.webview-result-tabs { margin-top: 2px; }
.webview-result-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #dce7f2; border-radius: 16px; background: #fff; box-shadow: 0 7px 14px rgba(23, 52, 94, .07); }
.webview-result-head { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.webview-result-head > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #f2f6fb; }
.webview-result-art { width: 31px; height: 31px; object-fit: contain; }
.webview-result-head div { display: grid; gap: 3px; min-width: 0; }
.webview-result-head strong { color: #17345e; font-size: 12px; }
.webview-result-head small { overflow: hidden; color: #91a1b2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.webview-result-head b { padding: 4px 5px; border-radius: 999px; color: #238b69; background: #e5f8f0; font-size: 6px; white-space: nowrap; }
.webview-result-number-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 0; border-top: 1px dashed #e0e8f0; border-bottom: 1px dashed #e0e8f0; }
.webview-result-number-row i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #bcd0e5; border-radius: 50%; color: #315b91; background: #f7faff; font-size: 9px; font-style: normal; font-weight: 900; }
.webview-result-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #91a1b2; font-size: 7px; }
.webview-result-foot button { display: inline-flex; align-items: center; gap: 2px; color: #d84b25; background: transparent; font-size: 8px; font-weight: 900; white-space: nowrap; }
.webview-result-foot .ui-icon { width: 12px; height: 12px; }
.webview-qr-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 39px; margin-top: 10px; border: 1px dashed #c8d9ec; border-radius: 12px; color: #315b91; background: #fff; font-size: 9px; font-weight: 900; }
.webview-qr-button .ui-icon { width: 16px; height: 16px; }
.webview-collection-progress { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 2px 6px; margin-bottom: 12px; padding: 11px; border: 1px solid #ddd5f5; border-radius: 14px; background: #fff; }
.webview-collection-progress strong { color: #7650b5; font-size: 19px; line-height: 1; }
.webview-collection-progress span { align-self: end; color: #9b8ab8; font-size: 8px; }
.webview-collection-progress i { display: block; grid-column: 1 / -1; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #efeafb; }
.webview-collection-progress b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a07be0, #6244a9); }
.webview-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.webview-collectible-card { display: grid; justify-items: center; gap: 4px; min-height: 97px; padding: 8px 4px; border: 1px solid #e1e7f0; border-radius: 13px; background: #fff; text-align: center; }
.webview-collectible-card > div { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: #f1f5fa; }
.webview-collectible-card .reward-mascot { width: 31px; height: 31px; font-size: 19px; }
.webview-collectible-card strong { max-width: 100%; overflow: hidden; color: #17345e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.webview-collectible-card small { color: #9aa9b9; font-size: 7px; }
.webview-collectible-card.is-secret { border-color: #d9ccef; background: #faf8ff; }
.webview-collectible-card.is-secret > div { background: #eee8fd; }
.webview-collectible-card.is-secret strong { color: #7650b5; }
.webview-orange-button { width: 100%; min-height: 40px; margin-top: 12px; color: #fff; background: #d84b25; }
.webview-picker-screen { color: #17345e; background: #f5f8fc; }
.webview-picker-screen .lb-page-intro { color: #17345e; }
.webview-picker-screen .lb-page-intro > span { color: #d84b25; }
.webview-picker-screen .lb-page-intro p { color: #7890aa; }
.webview-picker-screen .lb-ticket-summary, .webview-picker-screen .digit-entry, .webview-picker-screen .lb-purchase-bar { border: 1px solid #dce7f2; box-shadow: 0 5px 11px rgba(23, 52, 94, .06); }
.webview-picker-screen .lb-ticket-summary { color: #17345e; }
.webview-picker-screen .lb-ticket-summary strong, .webview-picker-screen .lb-purchase-bar strong { color: #d84b25; }
.webview-picker-screen .picker-section-title { color: #17345e; }
.webview-picker-screen .picker-section-title small { color: #7890aa; }
.webview-picker-screen .picker-quick-row button { border: 1px solid #d9e4ef; color: #d84b25; background: #fff; }
.webview-picker-screen .number-grid, .webview-picker-screen .digit-keypad { background: #17345e; }
.webview-picker-screen .number-grid button, .webview-picker-screen .digit-keypad button { color: #fff; background: rgba(255,255,255,.16); }
.webview-picker-screen .number-grid button.selected { color: #17345e; background: #fff; }
.webview-picker-screen .special-number-section { border-color: #d4dfeb; }
.webview-picker-screen .lb-primary-button { background: #d84b25; }
.webview-picker-screen .digit-rule, .webview-picker-screen .bingo-selection-note { color: #fff; background: #17345e; }
.webview-picker-screen .digit-entry { color: #17345e; background: #fff; }
.webview-picker-screen .digit-entry strong.ready { color: #d84b25; }
.webview-picker-screen .bingo-picker-screen { background: #f5f8fc; }

.in-phone-modal-root { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
/* AI-MARK[QAI-UI:quiklott-centered-modal] 2026-09-25 (GMT+7) — keep reward/payment/help surfaces centered inside the phone; only the account menu remains a left-to-right drawer | rel: QAI-FEAT:quiklott-collectible-lucky-envelope */
.modal-backdrop { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(16, 8, 5, .52); pointer-events: auto; }
.modal-backdrop > div { display: flex; width: 100%; height: auto; max-height: calc(100% - 28px); align-items: center; justify-content: center; }
.modal-sheet { width: min(100%, 340px); max-height: calc(100% - 12px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 18px 18px 20px; border-radius: 28px; color: var(--lb-ink); background: #fff; box-shadow: 0 18px 42px rgba(28, 11, 4, .3); animation: modal-pop .2s ease-out both; }
.modal-sheet::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal-grabber { width: 42px; height: 4px; margin: 0 auto 18px; border-radius: 999px; background: #ddd; }
.modal-sheet:not(.account-menu-sheet) > .modal-grabber { display: none; }
@keyframes modal-pop { from { transform: translateY(8px) scale(.97); opacity: .55; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-sheet h2 { margin: 0 0 7px; font-size: 20px; }
.modal-sheet p { margin: 0 0 14px; color: #888; font-size: 11px; line-height: 1.45; }
.modal-sheet > button:not(.lb-primary-button) { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 0 8px; border-top: 1px solid #f0f0f0; color: var(--lb-ink); background: transparent; text-align: left; font-size: 11px; font-weight: 800; }
.modal-sheet > button:not(.lb-primary-button) .ui-icon:first-child { color: var(--lb-red); }
.modal-sheet > button:not(.lb-primary-button) .ui-icon:last-child { margin-left: auto; width: 17px; }
.modal-big-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 15px; color: #fff; background: var(--lb-red); }
/* AI-MARK[QAI-UI:luckybest-account-sheet] 2026-09-25 (GMT+7) — render the LuckyBest-style account sidebar as an in-phone bottom sheet with real menu, balance and history affordances | rel: QAI-UI:luckybest-account-menu */
/* AI-MARK[QAI-UI:luckybest-account-compact] 2026-09-25 (GMT+7) — compact the in-phone account sheet and hide scrollbars without removing touch scrolling | rel: QAI-UI:luckybest-account-sheet */
.modal-sheet:not(.account-menu-sheet) { max-height: 70%; }
.account-menu-sheet { max-height: 96%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 14px 12px; border-radius: 28px 28px 0 0; color: #141414; }
.account-menu-sheet::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* AI-MARK[QAI-UI:luckybest-account-drawer] 2026-09-25 (GMT+7) — reveal the account navigation as a compact left-to-right in-phone drawer, without changing the app shell width | rel: QAI-UI:luckybest-account-compact */
.drawer-backdrop { align-items: stretch; justify-content: flex-start; padding: 0; }
.drawer-backdrop > div { width: min(84%, 306px); height: 100%; max-height: none; align-items: stretch; justify-content: flex-start; }
.drawer-backdrop .account-menu-sheet { width: 100%; max-height: none; height: 100%; overflow-y: auto; padding: 0 12px 12px; border-radius: 0 24px 24px 0; box-shadow: 12px 0 30px rgba(28, 11, 4, .24); animation: drawer-in .22s ease-out both; }
.drawer-backdrop .account-menu-head { margin: 0 -12px; padding: 12px 12px 16px; border-radius: 0 0 32px 18px; }
.drawer-backdrop .account-menu-head .modal-grabber { margin: 0 0 14px; }
.drawer-backdrop .account-menu-list { gap: 6px; }
.drawer-backdrop .account-menu-item { min-height: 46px; }
@keyframes drawer-in { from { transform: translateX(-100%); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.account-menu-head { margin: 0 -14px; padding: 7px 14px 14px; border-radius: 0 0 45% 22%; color: #fff; background: linear-gradient(145deg, #e8331f, #a8090b); }
.account-menu-head .modal-grabber { margin-bottom: 10px; background: rgba(255,255,255,.75); }
.account-profile { display: flex; align-items: center; gap: 9px; }
.account-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #c61e2c; background: #fff; }
.account-avatar .ui-icon { width: 26px; height: 26px; }
.account-phone { flex: 1; font-size: 15px; }
.account-profile > .ui-icon { width: 22px; }
.account-balance-list { display: grid; gap: 7px; padding: 13px 0 9px; }
.account-balance { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.account-balance-icon { display: grid; place-items: center; color: #ec3e1b; }
.account-balance-icon .ui-icon { width: 27px; height: 27px; }
.account-balance > span:nth-child(2) { display: grid; gap: 1px; }
.account-balance small { display: flex; align-items: center; gap: 5px; color: #777; font-size: 10px; }
.account-balance small .ui-icon { width: 14px; height: 14px; color: #343343; }
.account-balance strong { color: #444; font-size: 17px; }
.account-balance button { min-width: 68px; min-height: 32px; padding: 0 10px; border: 1.5px solid #ed451d; border-radius: 999px; color: #e63218; background: #fff; font-size: 11px; font-weight: 900; }
.account-menu-list { display: grid; gap: 7px; }
.account-menu-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 8px; min-height: 49px; padding: 6px 10px; border: 1px solid #eee; border-radius: 999px; color: #111; background: #fff; box-shadow: 0 5px 11px rgba(0,0,0,.09); text-align: left; }
.account-menu-item:first-child { border-color: #ff7116; box-shadow: 0 6px 14px rgba(247,91,18,.18); }
.account-menu-icon { display: grid; place-items: center; color: #ee431c; }
.account-menu-icon .ui-icon { width: 23px; height: 23px; }
.account-menu-item > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.account-menu-item strong { font-size: 12px; line-height: 1.1; }
.account-menu-item small { color: #444; font-size: 8px; font-style: italic; line-height: 1.1; }
.account-menu-item > .ui-icon { width: 18px; color: #333; }
.account-logout { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin: 12px 0 4px; color: #111; background: transparent; font-size: 13px; font-weight: 700; }
.account-logout .ui-icon { width: 18px; height: 18px; }
.account-version { display: block; color: #555; font-size: 9px; font-style: italic; text-align: right; }
/* AI-MARK[QAI-UI:luckybest-collectible-rewards] 2026-09-25 (GMT+7) — support the post-payment lucky-envelope reveal and persistent mascot collection screen with compact, non-overlapping mobile cards | rel: QAI-FEAT:quiklott-collectible-lucky-envelope */
.collection-screen { color: #35170f; background: linear-gradient(180deg, #fff7ed 0%, #fff 48%); }
.collection-screen .lb-page-intro { margin: -18px -14px 13px; padding: 20px 14px 17px; color: #35170f; background: linear-gradient(145deg, #fff0d8, #fffaf3); border-radius: 0 0 23px 23px; }
.collection-screen .lb-page-intro > span { color: #e0521a; }
.collection-screen .lb-page-intro h1 { color: #2b130d; }
.collection-screen .lb-page-intro p { color: #806c64; }
.collection-progress { display: grid; gap: 8px; margin-bottom: 13px; padding: 12px; border: 1px solid #ffd5ac; border-radius: 16px; background: #fff; box-shadow: 0 7px 15px rgba(118, 45, 8, .08); }
.collection-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.collection-progress strong { color: #b93014; font-size: 14px; }
.collection-progress span, .collection-progress small { color: #8e7770; font-size: 9px; }
.collection-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #f4e5db; }
.collection-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8b13, #e23915); }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.collection-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 74px; padding: 9px; overflow: hidden; border: 1px solid #f3ded3; border-radius: 16px; background: #fff; box-shadow: 0 6px 13px rgba(118, 45, 8, .08); }
.collection-card.is-locked { background: #fffaf7; }
.collection-card-art { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--reward-accent) 17%, white); }
.reward-mascot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--reward-accent) 72%, white), var(--reward-accent)); font-size: 22px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(75, 28, 8, .15)); }
.reward-mascot.is-locked { color: #c2aaa0; background: #f4e9e3; font-size: 18px; filter: none; }
.collection-card-copy { display: grid; min-width: 0; gap: 3px; }
.collection-card-copy strong { overflow: hidden; color: #442017; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.collection-card-copy small { overflow: hidden; color: #9d7f73; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.collection-card.is-secret { border-color: #d7c5f3; background: linear-gradient(145deg, #fff, #faf7ff); }
.collection-card.is-secret .collection-card-art { background: linear-gradient(145deg, #f3ecff, #e7dcff); }
.collection-card.is-secret .collection-card-copy strong { color: #6846a3; }
.collection-check, .collection-lock { position: absolute; top: 6px; right: 7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: #27a86a; font-size: 9px; font-weight: 900; }
.collection-lock { color: #c7aaa0; background: #f5e6dd; }
.collection-secret-mark { color: #fff; background: #8f68d2; }
.collection-secret-note { display: flex; align-items: center; gap: 8px; margin: -3px 0 11px; padding: 9px 10px; border: 1px solid #dcccf6; border-radius: 13px; color: #704ca7; background: #f8f4ff; }
.collection-secret-note > .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.collection-secret-note span { display: grid; gap: 2px; min-width: 0; }
.collection-secret-note strong { font-size: 9px; }
.collection-secret-note small { color: #8e79b2; font-size: 8px; line-height: 1.2; }
.collection-buy-button { margin-top: 13px; }
.collection-buy-button .ui-icon { width: 15px; height: 15px; }
.reward-modal { max-height: 84%; color: #35170f; background: linear-gradient(180deg, #fff8ed, #fff); }
.reward-modal .modal-big-icon { margin-bottom: 8px; background: linear-gradient(145deg, #ff9d1b, #e63c13); }
.reward-eyebrow { display: block; margin-bottom: 5px; color: #e75b20; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.reward-modal h2 { margin-bottom: 6px; color: #35170f; }
.reward-modal p { color: #806c64; }
.payment-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; color: #8e7770; background: #fff0e3; font-size: 10px; }
.payment-summary strong { color: #d63a17; font-size: 16px; }
.payment-pick-source { display: grid; gap: 7px; margin: 10px 0; padding: 10px; border-radius: 12px; background: #fff2e6; }
.payment-pick-source > small { color: #9d7f73; font-size: 8px; font-weight: 800; }
.payment-pick-row i { display: grid; place-items: center; min-width: 27px; height: 25px; padding: 0 6px; border-radius: 999px; color: #d54716; background: #fff; font-size: 9px; font-style: normal; font-weight: 900; }
.payment-special-chip { display: inline-flex; align-items: center; gap: 3px; color: #d75a17; font-size: 8px; font-weight: 800; }
.payment-special-chip .smart-number-row { display: inline-flex; }
.payment-digit-chip, .payment-label-chip { min-width: 32px; }
.reward-secondary-button { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 9px; min-height: 34px; border-radius: 999px; color: #b55c3a; background: transparent; font-size: 10px; font-weight: 800; text-align: center; }
.modal-sheet > .reward-secondary-button { text-align: center; }
.envelope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 11px 0 8px; }
/* AI-MARK[QAI-UI:quiklott-vietnamese-envelope-art] 2026-09-25 (GMT+7) — turn each choice into a compact Vietnamese red packet with silk folds, gold blessing seal and layered festive ornament | rel: QAI-UI:quiklott-centered-modal */
.envelope-card { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 101px; padding: 6px 5px 7px; border: 1px solid #f5c56c; border-radius: 15px; color: #fff9df; background: linear-gradient(145deg, #e93616, #a90f0c); box-shadow: 0 6px 12px rgba(186, 39, 11, .23); }
.envelope-card:active { transform: translateY(1px) scale(.98); }
.envelope-card.envelope-variant-1 { background: linear-gradient(145deg, #f03f19, #a80e0b); }
.envelope-card.envelope-variant-2 { background: linear-gradient(145deg, #ff9d16, #d7460d); }
.envelope-card.envelope-variant-3 { background: linear-gradient(145deg, #d82a25, #83101a); }
.envelope-card.envelope-variant-4 { background: linear-gradient(145deg, #dc3d1c, #9d1a3d); }
.envelope-art { position: relative; display: grid; place-items: center; width: 100%; height: 47px; overflow: hidden; border: 1px solid rgba(255,231,153,.75); border-radius: 10px; background: rgba(126, 5, 9, .28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.envelope-art::before { position: absolute; inset: 0; content: ''; background: linear-gradient(135deg, transparent 47%, rgba(255,239,185,.42) 49%, transparent 52%), linear-gradient(225deg, transparent 47%, rgba(255,239,185,.32) 49%, transparent 52%); opacity: .9; }
.envelope-art::after { position: absolute; right: 10%; bottom: 5px; left: 10%; height: 1px; content: ''; background: rgba(255,232,157,.55); }
.envelope-fold { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 20px; clip-path: polygon(0 0, 50% 100%, 100% 0); background: rgba(255,209,77,.16); }
.envelope-ornament { position: absolute; z-index: 2; top: 2px; color: #ffe59a; font-size: 10px; line-height: 1; text-shadow: 0 1px 0 #9f1a0a; }
.envelope-seal { position: relative; z-index: 3; display: grid; place-items: center; width: 29px; height: 29px; border: 1.5px solid #fff0a6; border-radius: 50%; color: #a8180c; background: radial-gradient(circle at 35% 30%, #fff4bd, #ffc934 64%, #c77b0c); font-size: 7px; font-weight: 1000; letter-spacing: -.2px; box-shadow: 0 2px 5px rgba(76,13,0,.3); }
.envelope-number { position: absolute; z-index: 3; right: 5px; bottom: 3px; color: rgba(255,245,200,.76); font-size: 7px; font-weight: 900; }
.envelope-card strong { color: #fff4c7; font-size: 8px; letter-spacing: .35px; }
.envelope-card small, .reward-note { color: rgba(255,255,255,.8); font-size: 8px; }
.login-gifts-modal { max-height: 84%; }
.login-gifts-modal .modal-big-icon { background: linear-gradient(145deg, #8d62d7, #3f2a9d); }
.login-gifts-modal .reward-eyebrow { color: #7550b7; }
.login-streak-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin: 9px 0 2px; padding: 9px 10px; border: 1px solid #e2d6f7; border-radius: 12px; color: #62449b; background: #f7f3ff; }
.login-streak-card > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #fff; background: #8964cf; }
.login-streak-card .ui-icon { width: 15px; height: 15px; }
.login-streak-card strong { font-size: 11px; }
.login-streak-card small { color: #8d78b1; font-size: 8px; text-align: right; }
.login-envelope-grid { margin-top: 10px; }
.login-envelope-card.is-locked { border-color: #d7c8ef; background: linear-gradient(145deg, #8e71c6, #5a429f); }
.login-envelope-card.is-locked .envelope-art { border-color: rgba(238,229,255,.82); background: rgba(45,24,99,.27); }
.login-envelope-card.is-locked .envelope-seal { color: #5e3d9f; background: radial-gradient(circle at 35% 30%, #fff, #d8c4ff 67%, #a786e6); }
.login-envelope-card.is-unlocked { border-color: #ffc486; background: linear-gradient(145deg, #ef3a18, #b91e10); }
.login-envelope-card.is-unlocked .envelope-art { background: rgba(126, 5, 9, .28); }
.reward-note { display: block; color: #9d7f73; text-align: center; }
.reward-reveal-modal { text-align: center; }
.reward-reveal-modal .modal-grabber { margin-bottom: 10px; }
.reward-reveal-caption { display: block; margin-bottom: 6px; color: #d85b16; font-size: 9px; font-weight: 1000; letter-spacing: 1px; }
.reward-reveal-art { position: relative; display: grid; place-items: center; width: 118px; height: 118px; margin: 3px auto 11px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff7c4, #ffad1f 58%, #dd3514); box-shadow: 0 10px 20px rgba(217, 69, 12, .22); animation: mascot-pop .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.reward-reveal-art::before, .reward-reveal-art::after { position: absolute; color: #ed7419; content: '✦'; font-size: 16px; animation: sparkle-in .6s ease-out both; }
.reward-reveal-art::before { top: 4px; left: 11px; }
.reward-reveal-art::after { right: 8px; bottom: 10px; animation-delay: .12s; }
.reward-reveal-art .reward-mascot { width: 72px; height: 72px; font-size: 45px; }
@keyframes mascot-pop { from { transform: scale(.45) rotate(-8deg); opacity: .2; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes sparkle-in { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.reward-rarity { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #ca531d; background: #fff0e2; font-size: 9px; font-weight: 900; }
.reward-progress-note { margin: 10px 0 12px; color: #8e7770; font-size: 10px; }
.toast { position: fixed; z-index: 60; bottom: 22px; left: 50%; max-width: min(360px, calc(100vw - 32px)); padding: 10px 14px; transform: translate(-50%, 16px); border-radius: 999px; color: #fff; background: #2c1a15; box-shadow: 0 8px 20px rgba(0,0,0,.22); opacity: 0; pointer-events: none; font-size: 11px; font-weight: 700; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 430px) {
  .prototype-stage { padding: 0; }
  .surface-switcher { width: calc(100vw - 16px); margin: 8px auto 10px; }
  .surface-tabs { margin: 0; }
  .tier-switch { min-width: 86px; }
  .phone-frame { padding: 7px; border: 0; border-radius: 35px; box-shadow: none; }
  .phone-screen { height: calc(100vh - 67px); min-height: 550px; border-radius: 29px; }
}

@media (max-height: 720px) {
  .phone-screen { height: calc(100vh - 108px); min-height: 520px; }
  .lb-hero { min-height: 180px; }
  .lb-hero h1 { font-size: 22px; }
  .lb-product-card { min-height: 88px; }
}