/* AI-MARK[QAI-UI:quiklott-mobile-webview-demo] 2026-09-24 13:42 (GMT+7) — mobile-first QuikLott prototype tokens and layout | rel: UI-L7-demo, thelotter, Vietlott SMS */
:root {
  --ink: #09152e;
  --ink-2: #122448;
  --ink-3: #203968;
  --muted: #7f8ca8;
  --muted-2: #aeb8cd;
  --line: rgba(137, 160, 201, .17);
  --paper: #f6f8fc;
  --card: #ffffff;
  --gold: #f6c453;
  --orange: #ff7d4a;
  --coral: #ff5e58;
  --mint: #5fe0b5;
  --blue: #73a6ff;
  --violet: #ba8cff;
  --radius-lg: 24px;
  --radius-md: 17px;
  --shadow: 0 18px 50px rgba(2, 13, 38, .20);
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #edf1f8;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 320px; background: radial-gradient(circle at 50% -10%, #dce7fa 0, #edf1f8 43%, #e8edf5 100%); }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(115, 166, 255, .55); outline-offset: 3px; }

.prototype-stage { min-height: 100vh; padding: 20px clamp(14px, 4vw, 52px) 46px; }
.prototype-toolbar { max-width: 1440px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.prototype-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.prototype-brand strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.prototype-brand span:not(.prototype-mark) { display: block; margin-top: 2px; color: #7a879e; font-size: 11px; }
.prototype-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; font-size: 19px; font-weight: 900; border-radius: 12px; background: linear-gradient(145deg, #ff8a4c, #f04e5b); box-shadow: 0 8px 18px rgba(240, 78, 91, .25); }
.prototype-status { color: #6c7b94; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #2fc58f; box-shadow: 0 0 0 4px rgba(47, 197, 143, .12); }

.stage-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 300px) minmax(390px, 430px) minmax(220px, 300px); justify-content: center; align-items: start; gap: clamp(24px, 6vw, 96px); }
.panel-card { margin-top: 132px; padding: 23px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 22px; background: rgba(255, 255, 255, .55); box-shadow: 0 17px 46px rgba(22, 52, 95, .06); backdrop-filter: blur(14px); }
.panel-kicker { color: #ee6b4f; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.panel-card h1, .panel-card h2 { margin: 12px 0 11px; color: #122448; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.06; letter-spacing: -.055em; }
.panel-card h2 { font-size: 23px; }
.panel-lead, .disclaimer { margin: 0; color: #697792; font-size: 12px; line-height: 1.6; }
.research-rule { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid rgba(113, 136, 177, .16); }
.research-rule:last-of-type { border-bottom: 0; }
.rule-number { color: #ff7958; font-size: 11px; font-weight: 900; }
.research-rule strong, .decision-item strong { display: block; color: #1b2e52; font-size: 12px; line-height: 1.35; }
.research-rule span:not(.rule-number), .decision-item span { display: block; margin-top: 4px; color: #738099; font-size: 11px; line-height: 1.45; }
.source-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 15px; padding: 11px 12px; color: #6d7b93; font-size: 10px; line-height: 1.45; border: 1px solid rgba(255, 157, 103, .25); border-radius: 13px; background: rgba(255, 246, 235, .8); }
.source-icon { display: grid; flex: 0 0 auto; place-items: center; width: 19px; height: 19px; color: #fff; font-size: 10px; font-weight: 900; border-radius: 6px; background: linear-gradient(135deg, #db2929, #ef9b35); }
.decision-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(113, 136, 177, .16); }
.decision-icon { display: grid; place-items: center; width: 26px; height: 26px; color: #244275 !important; font-size: 14px !important; font-weight: 900; border-radius: 9px; background: #e9f0ff; }
.pattern-chip { margin: 18px 0 14px; padding: 13px; color: #6d7a94; border-radius: 15px; background: #e9edf5; }
.pattern-chip span { display: block; margin-bottom: 5px; color: #8190a9; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.pattern-chip strong { display: block; color: #2a4777; font-size: 11px; line-height: 1.45; }

.device-wrap { position: relative; display: flex; justify-content: center; }
.device-shadow { position: absolute; inset: 17% -10% -2%; border-radius: 50%; background: rgba(12, 32, 70, .18); filter: blur(48px); }
.device-shell { position: relative; z-index: 1; width: 430px; min-height: 900px; padding: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .7); border-radius: 48px; background: #0b1731; box-shadow: 0 32px 90px rgba(14, 34, 76, .35), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.device-notch { position: absolute; z-index: 20; top: 11px; left: 50%; width: 106px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #061126; }
.device-notch span { position: absolute; top: 8px; right: 20px; width: 7px; height: 7px; border: 1px solid #223557; border-radius: 50%; background: #0c1b36; }
.app-shell { position: relative; display: flex; min-height: 884px; flex-direction: column; overflow: hidden; border-radius: 40px; color: #fff; background: var(--ink); }
.app-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 75px; padding: 25px 22px 12px; background: linear-gradient(180deg, rgba(7, 18, 43, .98), rgba(9, 21, 46, .88)); }
.app-topbar .brand-lockup { display: flex; align-items: center; gap: 9px; }
.app-topbar .brand-mark { display: grid; place-items: center; width: 27px; height: 27px; color: #fff; font-size: 15px; font-weight: 900; border-radius: 9px; background: linear-gradient(140deg, #ff8b50, #f14f5d); }
.app-topbar .brand-name { color: #fff; font-size: 17px; font-weight: 850; letter-spacing: -.04em; }
.app-topbar .balance { display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: #f4f7ff; font-size: 11px; font-weight: 800; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .06); }
.app-topbar .balance-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(246, 196, 83, .12); }
.app-topbar .back-button { display: grid; place-items: center; width: 31px; height: 31px; color: #e5ecfa; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .07); cursor: pointer; }
.app-topbar .page-title { margin-right: auto; color: #f7f9ff; font-size: 16px; font-weight: 800; }
.app-topbar .icon-button { display: grid; place-items: center; width: 30px; height: 30px; color: #d9e4fa; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .06); cursor: pointer; }

.app-content { flex: 1 1 auto; min-height: 0; padding: 0 16px 94px; overflow: auto; scrollbar-width: none; background: linear-gradient(180deg, #09152e 0%, #0c1a38 42%, #f3f5fa 42.1%, #f3f5fa 100%); }
.app-content::-webkit-scrollbar { display: none; }
.app-page { color: var(--ink); }
.home-page { padding-top: 5px; }
.eyebrow { color: #93a7ca; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.home-greeting { margin: 0 0 16px; color: #f7f9ff; font-size: 22px; font-weight: 800; letter-spacing: -.05em; }
.home-greeting small { display: block; margin-top: 5px; color: #8ca0c2; font-size: 11px; font-weight: 550; letter-spacing: 0; }
.jackpot-card { position: relative; min-height: 188px; padding: 20px; overflow: hidden; color: #fff; border: 1px solid rgba(255, 255, 255, .13); border-radius: 25px; background: radial-gradient(circle at 94% 10%, rgba(255, 141, 75, .86), transparent 32%), linear-gradient(135deg, #162f6a 0%, #163e7b 48%, #0e2457 100%); box-shadow: 0 18px 38px rgba(3, 15, 42, .28); }
.jackpot-card::after { position: absolute; right: -34px; bottom: -54px; width: 178px; height: 178px; content: ""; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; box-shadow: 0 0 0 17px rgba(255, 255, 255, .035), 0 0 0 34px rgba(255, 255, 255, .035), 0 0 0 51px rgba(255, 255, 255, .035); }
.jackpot-card .eyebrow { color: #ffd989; }
.jackpot-amount { margin: 8px 0 2px; color: #fff; font-size: 37px; font-weight: 900; letter-spacing: -.07em; line-height: .95; }
.jackpot-caption { color: #c5d4f2; font-size: 11px; }
.countdown { display: flex; gap: 5px; margin-top: 14px; }
.countdown span { display: grid; min-width: 39px; padding: 6px 6px 5px; text-align: center; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(4, 13, 35, .26); }
.countdown b { font-size: 14px; line-height: 1; }
.countdown em { margin-top: 4px; color: #9db0d0; font-size: 8px; font-style: normal; text-transform: uppercase; }
.jackpot-card .primary-button { position: absolute; right: 17px; bottom: 17px; z-index: 1; }

.primary-button, .secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; font-size: 12px; font-weight: 850; border: 0; border-radius: 13px; cursor: pointer; transition: transform .18s var(--ease), filter .18s var(--ease), background .18s var(--ease); }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary-button { color: #15243f; background: var(--gold); box-shadow: 0 8px 20px rgba(246, 196, 83, .22); }
.secondary-button { color: #1a305c; background: #e8effd; }
.ghost-button { color: #45618d; border: 1px solid #d7e0ef; background: transparent; }
.primary-button.full, .secondary-button.full { width: 100%; }
.primary-button.large { min-height: 48px; font-size: 13px; border-radius: 15px; }
.text-button { padding: 0; color: #e66c51; font-size: 11px; font-weight: 850; border: 0; background: transparent; cursor: pointer; }

.section-block { margin-top: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.section-heading h2 { margin: 0; color: #1a2c4e; font-size: 15px; letter-spacing: -.03em; }
.section-heading span { color: #8490a7; font-size: 11px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick-action { display: grid; gap: 8px; justify-items: start; padding: 12px 11px; text-align: left; color: #234477; border: 1px solid #e2e8f3; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(22, 42, 80, .04); cursor: pointer; }
.quick-action .quick-icon { display: grid; place-items: center; width: 27px; height: 27px; color: #fff; font-size: 14px; font-weight: 900; border-radius: 9px; background: #e7835c; }
.quick-action:nth-child(2) .quick-icon { background: #6b9ceb; }
.quick-action:nth-child(3) .quick-icon { background: #50b995; }
.quick-action strong { font-size: 10px; line-height: 1.25; }

.product-strip { display: flex; gap: 10px; overflow: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.product-strip::-webkit-scrollbar { display: none; }
.product-card { position: relative; flex: 0 0 145px; min-height: 138px; padding: 12px; overflow: hidden; text-align: left; color: #fff; border: 0; border-radius: 18px; cursor: pointer; box-shadow: 0 10px 20px rgba(18, 43, 79, .12); transition: transform .18s var(--ease); }
.product-card:hover { transform: translateY(-3px); }
.product-card.power { background: linear-gradient(145deg, #ff8a49, #e64455); }
.product-card.mega { background: linear-gradient(145deg, #be3156, #76358f); }
.product-card.lotto { background: linear-gradient(145deg, #1b9e9c, #1665a5); }
.product-card.max { background: linear-gradient(145deg, #8c69dd, #3e4f9e); }
.product-card.bingo { background: linear-gradient(145deg, #38b685, #0e6f8f); }
.product-card::after { position: absolute; right: -24px; bottom: -36px; width: 105px; height: 105px; content: ""; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; box-shadow: 0 0 0 13px rgba(255,255,255,.08), 0 0 0 26px rgba(255,255,255,.06); }
.product-card .product-kind { color: rgba(255,255,255,.74); font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.product-card .product-name { display: block; margin-top: 8px; font-size: 15px; font-weight: 900; letter-spacing: -.055em; }
.product-card .product-jackpot { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; }
.mini-balls { display: flex; gap: 3px; margin-top: 12px; }
.mini-balls i { display: grid; place-items: center; width: 16px; height: 16px; color: rgba(24, 40, 70, .76); font-size: 7px; font-style: normal; font-weight: 900; border-radius: 50%; background: rgba(255,255,255,.86); }

.ticket-preview { padding: 13px; border: 1px solid #e1e8f4; border-radius: 17px; background: #fff; }
.ticket-preview .ticket-top, .ticket-card .ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-preview .ticket-top > div, .ticket-card .ticket-top > div { min-width: 0; flex: 1 1 auto; }
.ticket-title { display: block; min-width: 0; color: #1a2e53; font-size: 12px; font-weight: 900; line-height: 1.22; overflow-wrap: anywhere; }
.ticket-status { display: block; flex: 0 0 auto; max-width: 84px; padding: 5px 8px; color: #2b9b73; font-size: 9px; font-weight: 900; line-height: 1.15; text-align: center; border-radius: 999px; background: #e5f8f0; overflow-wrap: anywhere; }
.ticket-meta { display: block; margin-top: 5px; color: #8a96ab; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.ticket-numbers { display: flex; gap: 5px; margin-top: 12px; }
.ticket-numbers i { display: grid; place-items: center; width: 24px; height: 24px; color: #294673; font-size: 10px; font-style: normal; font-weight: 900; border: 1px solid #d7e2f1; border-radius: 50%; background: #f4f7fc; }
.ticket-numbers i:last-child { color: #fff; border-color: #f3bb4b; background: #f3bb4b; }
.ticket-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #dde5f2; }
.ticket-bottom > span { min-width: 0; color: #7f8ba1; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.ticket-bottom > strong { flex: 0 0 auto; max-width: 48%; color: #234895; font-size: 12px; line-height: 1.2; text-align: right; overflow-wrap: anywhere; }

.safe-banner { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; color: #476785; border: 1px solid #d8e8f1; border-radius: 15px; background: #eff9fb; }
.safe-banner .safe-icon { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; color: #fff; font-weight: 900; border-radius: 9px; background: #62b7ae; }
.safe-banner strong { display: block; font-size: 11px; }
.safe-banner span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; }

.play-page { padding-top: 4px; }
.game-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 6px 1px 12px; }
.game-head h1 { margin: 4px 0 0; color: #fff; font-size: 24px; letter-spacing: -.06em; }
.game-head p { margin: 5px 0 0; color: #9baccc; font-size: 10px; }
.game-badge { padding: 7px 9px; color: #ffd57e; font-size: 9px; font-weight: 900; border: 1px solid rgba(255, 207, 102, .23); border-radius: 10px; background: rgba(255, 201, 84, .08); }
.game-jackpot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.07); }
.game-jackpot span { color: #8fa4c7; font-size: 9px; }
.game-jackpot strong { display: block; margin-top: 3px; color: #fff; font-size: 17px; }
.game-jackpot small { color: #f8c75b; font-size: 10px; font-weight: 850; }
.picker-card { margin-top: 14px; padding: 14px; border-radius: 21px 21px 15px 15px; background: #fff; }
.picker-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.picker-tools strong { color: #1b2f54; font-size: 12px; }
.picker-tools span { color: #8793a8; font-size: 10px; }
.picker-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 13px; padding: 4px; border-radius: 11px; background: #f1f4f9; }
.picker-tabs button { min-height: 32px; color: #8693aa; font-size: 10px; font-weight: 850; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.picker-tabs button.active { color: #264576; background: #fff; box-shadow: 0 3px 10px rgba(26, 51, 89, .08); }
.selected-row { display: flex; align-items: center; min-height: 29px; gap: 5px; margin-bottom: 12px; }
.selected-row-label { margin-right: 4px; color: #8b97ab; font-size: 9px; font-weight: 800; }
.selected-row i { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; border-radius: 50%; background: #234a88; }
.selected-row i.empty { color: #a3afc0; border: 1px dashed #cbd5e3; background: #fff; }
.number-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.number-grid button { aspect-ratio: 1; min-width: 0; padding: 0; color: #37547f; font-size: 10px; font-weight: 850; border: 1px solid #dbe3ef; border-radius: 50%; background: #fff; cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.number-grid button:hover { transform: scale(1.06); }
.number-grid button.selected { color: #fff; border-color: #ef7b56; background: #ef7b56; box-shadow: 0 5px 12px rgba(239, 123, 86, .22); }
.picker-hint { margin: 12px 0 0; color: #8d98aa; font-size: 9px; line-height: 1.4; }
.checkout-card { margin: 12px 0 0; padding: 13px 14px; border: 1px solid #dfe6f0; border-radius: 17px; background: #f7f9fc; }
.checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkout-row + .checkout-row { margin-top: 9px; }
.checkout-row span { color: #7e8a9e; font-size: 10px; }
.checkout-row strong { color: #1c335c; font-size: 12px; }
.draw-pills { display: flex; gap: 5px; }
.draw-pills button { min-width: 31px; min-height: 27px; color: #61718c; font-size: 10px; font-weight: 850; border: 1px solid #d7e1ef; border-radius: 8px; background: #fff; cursor: pointer; }
.draw-pills button.active { color: #1c3c70; border-color: #6c9be5; background: #eaf2ff; }
.addon-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed #d5deec; }
.addon-copy strong { display: block; color: #37547e; font-size: 10px; }
.addon-copy span { display: block; margin-top: 2px; color: #8a96aa; font-size: 9px; }
.toggle { position: relative; width: 36px; height: 21px; padding: 0; border: 0; border-radius: 999px; background: #d5dfec; cursor: pointer; }
.toggle::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; content: ""; border-radius: 50%; background: #fff; transition: transform .18s var(--ease); box-shadow: 0 2px 5px rgba(18, 42, 79, .18); }
.toggle.on { background: #70ba9f; }
.toggle.on::after { transform: translateX(15px); }
.buy-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.buy-bar .total { flex: 1; }
.buy-bar .total span { display: block; color: #8591a6; font-size: 9px; }
.buy-bar .total strong { display: block; margin-top: 3px; color: #1c335c; font-size: 18px; letter-spacing: -.04em; }

.tickets-page, .account-page, .results-page { padding-top: 5px; }
.page-intro { padding: 6px 1px 15px; }
.page-intro h1 { margin: 5px 0 4px; color: #fff; font-size: 23px; letter-spacing: -.055em; }
.page-intro p { margin: 0; color: #9aaacc; font-size: 11px; line-height: 1.4; }
.ticket-card { margin-bottom: 10px; padding: 14px; border: 1px solid #e1e8f4; border-radius: 18px; background: #fff; }
.ticket-card .ticket-top { align-items: flex-start; }
.ticket-card .ticket-meta { margin-top: 5px; }
.ticket-card .ticket-bottom { align-items: flex-start; gap: 10px; margin-top: 12px; }
.fast-buy-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 10px; border: 1px solid #ffd39d; border-radius: 15px; background: linear-gradient(135deg, #fffaf0, #fff); box-shadow: 0 7px 16px rgba(32, 56, 94, .08); }
.fast-buy-strip > div { min-width: 0; flex: 1 1 auto; }
.fast-buy-strip strong, .fast-buy-strip span { display: block; }
.fast-buy-strip strong { color: #213c70; font-size: 10px; line-height: 1.2; }
.fast-buy-strip span { margin-top: 3px; color: #7d8ca3; font-size: 8px; line-height: 1.35; }
.fast-buy-strip .primary-button { flex: 0 0 auto; min-height: 34px; padding: 0 10px; font-size: 9px; }
.ticket-filter { display: flex; gap: 6px; margin-bottom: 12px; }
.ticket-filter button { min-height: 29px; padding: 0 11px; color: #8995aa; font-size: 10px; font-weight: 850; border: 1px solid #dde5f1; border-radius: 999px; background: #fff; cursor: pointer; }
.ticket-filter button.active { color: #234476; border-color: #9bb9e8; background: #edf4ff; }
.scan-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px; color: #fff; border-radius: 17px; background: linear-gradient(135deg, #1a4078, #203264); }
.scan-banner strong { display: block; font-size: 12px; }
.scan-banner span { display: block; margin-top: 3px; color: #b8c9e6; font-size: 10px; line-height: 1.35; }
.scan-banner .secondary-button { flex: 0 0 auto; color: #173661; background: #dff4ed; }
.empty-state { padding: 30px 16px; text-align: center; color: #8b97ab; border: 1px dashed #cad6e7; border-radius: 17px; background: rgba(255,255,255,.62); }
.empty-state strong { display: block; margin-bottom: 5px; color: #36547f; font-size: 12px; }

.account-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; font-size: 15px; font-weight: 900; border-radius: 15px; background: linear-gradient(145deg, #708fdf, #4fbeaa); }
.account-head strong { display: block; color: #fff; font-size: 14px; }
.account-head span { display: block; margin-top: 3px; color: #99accd; font-size: 10px; }
.wallet-card { padding: 15px; color: #fff; border-radius: 19px; background: linear-gradient(135deg, #1d4783, #1b7d84); }
.wallet-card > span { color: #c0e9df; font-size: 10px; }
.wallet-card strong { display: block; margin-top: 4px; font-size: 26px; letter-spacing: -.06em; }
.wallet-actions { display: flex; gap: 7px; margin-top: 13px; }
.wallet-actions button { min-height: 30px; padding: 0 10px; color: #eafff9; font-size: 10px; font-weight: 850; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(255,255,255,.1); cursor: pointer; }
.account-section { margin-top: 16px; }
.account-section h2 { margin: 0 0 8px; color: #1a2e53; font-size: 14px; }
.setting-list { overflow: hidden; border: 1px solid #e1e8f2; border-radius: 17px; background: #fff; }
.setting-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px; text-align: left; border: 0; border-bottom: 1px solid #edf0f5; background: #fff; cursor: pointer; }
.setting-row:last-child { border-bottom: 0; }
.setting-row .setting-icon { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; color: #31578f; font-size: 13px; font-weight: 900; border-radius: 9px; background: #edf3fd; }
.setting-row strong { display: block; color: #315078; font-size: 11px; }
.setting-row span { display: block; margin-top: 2px; color: #9aa5b7; font-size: 9px; }
.setting-row .chevron { margin-left: auto; color: #9facbe; font-size: 17px; }
.limit-card { margin-top: 11px; padding: 14px; border: 1px solid #cfeadf; border-radius: 17px; background: #effaf5; }
.limit-card .limit-head { display: flex; align-items: center; justify-content: space-between; }
.limit-card strong { color: #267c62; font-size: 11px; }
.limit-card .limit-value { color: #1b6e58; font-size: 13px; font-weight: 900; }
.limit-bar { height: 7px; margin: 11px 0 7px; overflow: hidden; border-radius: 999px; background: #d4eee3; }
.limit-bar span { display: block; width: 35%; height: 100%; border-radius: inherit; background: #60be9b; }
.limit-card p { margin: 0; color: #57917c; font-size: 9px; line-height: 1.35; }

.bottom-nav { position: absolute; right: 0; bottom: 0; left: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 10px 11px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(39, 61, 99, .12); background: rgba(255, 255, 255, .97); box-shadow: 0 -7px 22px rgba(16, 37, 71, .08); }
.bottom-nav button { display: grid; gap: 4px; justify-items: center; padding: 4px 0; color: #9aa5b7; font-size: 9px; font-weight: 800; border: 0; background: transparent; cursor: pointer; }
.bottom-nav button span:first-child { display: grid; place-items: center; width: 29px; height: 25px; font-size: 15px; border-radius: 9px; }
.bottom-nav button.active { color: #e86e53; }
.bottom-nav button.active span:first-child { color: #e86e53; background: #fff0eb; }

.toast { position: fixed; right: 20px; bottom: 22px; z-index: 100000; max-width: min(360px, calc(100vw - 40px)); padding: 12px 15px; color: #fff; font-size: 12px; font-weight: 700; border-radius: 13px; background: #112b54; box-shadow: 0 14px 35px rgba(10, 27, 61, .28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 18px; background: rgba(4, 14, 34, .65); backdrop-filter: blur(8px); }
.modal-sheet { width: min(410px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 20px; border: 1px solid rgba(255,255,255,.7); border-radius: 25px; background: #f6f8fc; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.modal-sheet.dark-sheet { color: #fff; background: #10244b; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; color: inherit; font-size: 19px; letter-spacing: -.045em; }
.modal-head p { margin: 5px 0 0; color: #91a2c4; font-size: 10px; line-height: 1.45; }
.close-modal { display: grid; place-items: center; width: 28px; height: 28px; color: #8793a8; font-size: 17px; border: 0; border-radius: 9px; background: #e9eef6; cursor: pointer; }
.dark-sheet .close-modal { color: #cfdbef; background: rgba(255,255,255,.08); }
.scan-viewport { display: grid; place-items: center; height: 230px; margin: 18px 0 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: radial-gradient(circle, #254c83, #0d2248); }
.scan-frame { position: relative; width: 220px; height: 122px; border: 1px solid rgba(255,255,255,.7); border-radius: 15px; box-shadow: 0 0 0 500px rgba(5, 16, 39, .18); }
.scan-frame::before, .scan-frame::after { position: absolute; width: 22px; height: 22px; content: ""; border-color: #f7cf69; border-style: solid; }
.scan-frame::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 5px 0 0; }
.scan-frame::after { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 5px; }
.scan-line { position: absolute; right: 15px; left: 15px; height: 1px; background: #5fe0b5; box-shadow: 0 0 13px 2px rgba(95,224,181,.7); animation: scan 2.2s infinite ease-in-out; }
@keyframes scan { 0%, 100% { top: 20px; } 50% { top: 100px; } }
.scan-caption { margin: 0 0 14px; color: #aebddd; text-align: center; font-size: 10px; }
.modal-actions { display: grid; gap: 8px; }
.win-result { margin: 18px 0 15px; padding: 16px; text-align: center; border: 1px solid #caeddf; border-radius: 17px; background: #ebfbf4; }
.win-result .win-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 8px; color: #fff; font-size: 20px; font-weight: 900; border-radius: 50%; background: #4bb790; }
.win-result strong { display: block; color: #1b745d; font-size: 22px; letter-spacing: -.04em; }
.win-result span { display: block; margin-top: 4px; color: #5b927f; font-size: 10px; }
.limit-form { margin-top: 15px; }
.limit-form label { display: block; margin-bottom: 6px; color: #486287; font-size: 10px; font-weight: 850; }
.limit-form input { width: 100%; min-height: 42px; padding: 0 12px; color: #1e3a67; font-size: 13px; font-weight: 800; border: 1px solid #d7e2ef; border-radius: 12px; background: #fff; }
.limit-form small { display: block; margin-top: 6px; color: #8b98ab; font-size: 9px; line-height: 1.4; }

@media (max-width: 1050px) {
  .stage-grid { grid-template-columns: minmax(180px, 240px) 430px; gap: 28px; }
  .decision-panel { display: none; }
}
@media (max-width: 760px) {
  .prototype-stage { padding: 0; }
  .prototype-toolbar, .research-panel { display: none; }
  .stage-grid { display: block; }
  .device-wrap { min-height: 100vh; }
  .device-shadow { display: none; }
  .device-shell { width: 100%; min-height: 100vh; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .device-notch { top: 9px; }
  .app-shell { min-height: 100vh; border-radius: 0; }
  .app-content { padding-right: 14px; padding-left: 14px; }
}
@media (max-width: 420px) {
  .quick-actions { gap: 6px; }
  .quick-action { padding-right: 8px; padding-left: 8px; }
  .product-card { flex-basis: 138px; }
  .number-grid { gap: 5px; }
}

/* AI-MARK[QAI-UI:quiklott-surfaces-icons] 2026-09-24 14:15 (GMT+7) — App/WebView tabs, embedded webview frame and production SVG icon primitives | rel: QAI-UI:quiklott-mobile-webview-demo */
.ui-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: middle; }
.prototype-mark .ui-icon { width: 22px; height: 22px; }
.surface-tabs { max-width: 610px; margin: 0 auto 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 5px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(255,255,255,.52); box-shadow: 0 10px 26px rgba(22,52,95,.08); backdrop-filter: blur(16px); }
.surface-tab { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 8px 13px; color: #7f8da7; text-align: left; border: 0; border-radius: 13px; background: transparent; cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.surface-tab:hover { color: #2d4774; background: rgba(255,255,255,.65); }
.surface-tab.is-active { color: #1b315b; background: #fff; box-shadow: 0 6px 16px rgba(29,55,98,.12); }
.surface-tab .tab-icon { display: grid; place-items: center; width: 32px; height: 32px; color: #e66d52; border-radius: 10px; background: #fff0eb; }
.surface-tab:nth-child(2) .tab-icon { color: #5b87dc; background: #edf3ff; }
.surface-tab strong, .surface-tab small { display: block; }
.surface-tab strong { font-size: 12px; font-weight: 900; }
.surface-tab small { margin-top: 3px; color: #9aa6ba; font-size: 9px; font-weight: 650; }
.surface-view[hidden] { display: none; }
.primary-button .ui-icon, .secondary-button .ui-icon, .text-button .ui-icon, .wallet-actions .ui-icon { width: 14px; height: 14px; margin-left: 5px; }
.app-topbar .back-button .ui-icon, .app-topbar .icon-button .ui-icon { width: 16px; height: 16px; }
.app-topbar .brand-mark .ui-icon { width: 20px; height: 20px; }
.quick-action .quick-icon .ui-icon, .safe-banner .safe-icon .ui-icon, .win-result .win-icon .ui-icon { width: 15px; height: 15px; }
.product-card .product-logo { position: absolute; top: 10px; right: 11px; display: grid; place-items: center; width: 25px; height: 25px; color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(255,255,255,.12); }
.product-card .product-logo .ui-icon { width: 15px; height: 15px; }
.setting-row .setting-icon .ui-icon, .setting-row .chevron .ui-icon { width: 15px; height: 15px; }
.setting-row .chevron { display: grid; place-items: center; }
.bottom-nav button span:first-child .ui-icon { width: 16px; height: 16px; }
.scan-camera { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 34px; height: 34px; color: rgba(255,255,255,.76); transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(6,18,43,.28); }
.scan-camera .ui-icon { width: 18px; height: 18px; }

.webview-layout { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 275px) minmax(560px, 840px) minmax(220px, 275px); justify-content: center; align-items: start; gap: clamp(18px, 3vw, 42px); }
.webview-layout .panel-card { margin-top: 0; }
.webview-context h1 { font-size: 26px; }
.webview-stat { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(113,136,177,.16); }
.webview-stat strong, .check-row span:last-child { display: block; color: #1b2e52; font-size: 12px; line-height: 1.35; }
.webview-stat span:last-child { display: block; margin-top: 4px; color: #738099; font-size: 11px; line-height: 1.45; }
.stat-icon, .check-icon { display: grid; place-items: center; width: 27px; height: 27px; color: #2c61ae; border-radius: 9px; background: #eaf2ff; }
.stat-icon .ui-icon, .check-icon .ui-icon { width: 15px; height: 15px; }
.reference-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: #e56d53; font-size: 11px; font-weight: 850; text-decoration: none; }
.reference-link .ui-icon { width: 13px; height: 13px; }
.webview-window { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 22px; background: #dfe6f1; box-shadow: 0 24px 65px rgba(17,42,82,.18); }
.webview-browser-bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; color: #75839b; border-bottom: 1px solid #ccd6e7; background: #f5f7fb; }
.browser-dots { display: flex; gap: 5px; margin-right: 6px; }
.browser-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #f0a36f; }
.browser-dots i:nth-child(2) { background: #e3c36a; }
.browser-dots i:nth-child(3) { background: #73c5a8; }
.browser-lock { display: grid; place-items: center; width: 25px; height: 25px; color: #4d769f; border-radius: 8px; background: #e9eff8; }
.browser-lock .ui-icon, .browser-action .ui-icon { width: 13px; height: 13px; }
.browser-url { flex: 1; min-width: 0; overflow: hidden; color: #61728c; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.browser-action { display: grid; place-items: center; color: #7787a0; }
.webview-body { display: flex; min-height: 820px; background: #0a1732; }
.webview-rail { display: flex; width: 62px; padding: 17px 9px; flex: 0 0 62px; flex-direction: column; align-items: center; gap: 11px; border-right: 1px solid rgba(255,255,255,.08); background: #0b1b3a; }
.webview-rail-brand { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 16px; color: #fff; border-radius: 10px; background: linear-gradient(140deg, #ff8b50, #f14f5d); }
.webview-rail-brand .ui-icon { width: 21px; height: 21px; }
.rail-button { display: grid; place-items: center; width: 36px; height: 36px; color: #8096bd; border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; }
.rail-button:hover, .rail-button.active { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.1); }
.rail-button.active { color: #ffd778; box-shadow: inset 3px 0 #f6c453; }
.rail-button .ui-icon { width: 17px; height: 17px; }
.webview-app-frame { min-width: 0; flex: 1; }
.webview-app-shell { height: 820px; min-height: 0; border-radius: 0; }
.webview-app-shell .app-content { padding-right: 24px; padding-left: 24px; }
.webview-app-shell .bottom-nav { display: none; }
.webview-checklist h2 { margin-bottom: 14px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; padding: 13px 0; border-bottom: 1px solid rgba(113,136,177,.16); }
.check-row:last-child { border-bottom: 0; }
.check-row .check-icon { flex: 0 0 auto; color: #319476; background: #e9f8f1; }
.check-row span:last-child { margin-top: 4px; color: #738099; font-size: 11px; font-weight: 650; }

@media (max-width: 1120px) {
  .webview-layout { grid-template-columns: minmax(190px, 240px) minmax(520px, 1fr); gap: 24px; }
  .webview-checklist { display: none; }
}
@media (max-width: 760px) {
  .surface-tabs { margin: 10px 12px 16px; }
  .surface-tab { min-height: 50px; padding: 6px 9px; }
  .surface-tab small { display: none; }
  .surface-view.is-active { min-height: 100vh; }
  .webview-layout { display: block; }
  .webview-context { display: none; }
  .webview-window { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .webview-browser-bar { min-height: 43px; padding: 0 12px; }
  .webview-body { min-height: calc(100vh - 43px); }
  .webview-rail { display: none; }
  .webview-app-shell { height: calc(100vh - 43px); min-height: calc(100vh - 43px); border-radius: 0; }
  .webview-app-shell .bottom-nav { display: grid; }
  .webview-app-shell .app-content { padding-right: 14px; padding-left: 14px; }
}

/* AI-MARK[QAI-UI:quiklott-webview-in-app] 2026-09-24 14:28 (GMT+7) — WebView is represented as a mobile phone surface launched inside the host app, never as a desktop browser page | rel: QAI-UI:quiklott-mobile-webview-demo */
.webview-stage-grid { grid-template-columns: minmax(220px, 300px) minmax(390px, 430px) minmax(220px, 300px); }
.webview-device-wrap { min-height: 900px; }
.webview-device-shell { min-height: 900px; }
.webview-host-shell { position: relative; z-index: 1; display: flex; height: 884px; flex-direction: column; overflow: hidden; border-radius: 40px; background: var(--ink); }
.webview-host-bar { display: flex; align-items: center; gap: 9px; min-height: 47px; padding: 10px 15px 7px; color: #fff; background: #07132c; }
.host-back { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: #d9e5fa; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.07); cursor: pointer; }
.host-back .ui-icon { width: 14px; height: 14px; }
.host-menu, .host-close { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: #d9e5fa; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.07); cursor: pointer; }
.host-menu .ui-icon, .host-close .ui-icon { width: 14px; height: 14px; }
.host-title { min-width: 0; flex: 1; }
.host-title strong, .host-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-title strong { color: #f7f9ff; font-size: 11px; font-weight: 850; }
.host-title span { margin-top: 2px; color: #8fa3c4; font-size: 8px; }
.host-status { display: flex; align-items: center; gap: 4px; color: #79d2b0; font-size: 8px; font-weight: 850; }
.host-status .ui-icon { width: 11px; height: 11px; }
.webview-device-shell .webview-browser-bar { display: none; min-height: 31px; padding: 0 15px; color: #92a4c2; border: 0; background: #0b1b3a; }
.webview-device-shell .browser-lock { width: 19px; height: 19px; color: #75bda8; background: rgba(95,224,181,.1); }
.webview-device-shell .browser-lock .ui-icon { width: 10px; height: 10px; }
.webview-device-shell .browser-url { color: #94a8c6; font-size: 8px; font-weight: 700; }
.webview-device-shell .browser-action .ui-icon { width: 12px; height: 12px; }
.webview-device-shell .webview-body { display: block; min-height: 0; flex: 1; background: var(--ink); }
.webview-device-shell .webview-rail { display: none; }
.webview-device-shell .webview-app-frame { width: 100%; height: 100%; }
.webview-device-shell .webview-app-shell { height: 837px; min-height: 0; border-radius: 0 0 40px 40px; }
.webview-device-shell .webview-app-shell .bottom-nav { display: grid; }
.webview-device-shell .webview-app-shell .app-content { padding-right: 16px; padding-left: 16px; }
.webview-device-shell .webview-app-shell .app-topbar { min-height: 69px; padding-top: 16px; }
/* Vietlott SMS-inspired mobile web language: light web header, red-blue lottery emphasis, product-first browsing. */
.webview-device-shell .webview-app-shell .app-topbar { color: #142c5c; border-bottom: 1px solid #e8edf5; background: #fff; }
.webview-device-shell .webview-app-shell .app-topbar .brand-name { color: #142c5c; }
.webview-device-shell .webview-app-shell .app-topbar .brand-mark { background: linear-gradient(140deg, #d92535, #f0644e); }
.webview-device-shell .webview-app-shell .app-topbar .balance { color: #28436f; border-color: #e5ebf4; background: #f7f9fc; }
.webview-device-shell .webview-app-shell .app-topbar .icon-button, .webview-device-shell .webview-app-shell .app-topbar .back-button { color: #315488; border-color: #e0e8f3; background: #f7f9fc; }
.webview-device-shell .webview-app-shell .app-content { background: #fff; }
.webview-device-shell .webview-app-shell .home-greeting { color: #142c5c; }
.webview-device-shell .webview-app-shell .home-greeting small { color: #6f809e; }
.webview-device-shell .webview-app-shell .eyebrow { color: #d94b45; }
.webview-device-shell .webview-app-shell .jackpot-card { background: radial-gradient(circle at 94% 10%, rgba(255,166,87,.82), transparent 32%), linear-gradient(135deg, #c92239 0%, #e84648 48%, #a81737 100%); }
.webview-device-shell .webview-app-shell .section-heading h2 { color: #142c5c; }
.webview-device-shell .webview-app-shell .quick-action { border-color: #e5ebf4; }
.webview-device-shell .webview-app-shell .safe-banner { border-color: #e0ece9; background: #f2fbf8; }
.webview-device-shell .webview-app-shell .safe-banner strong { color: #245d58; }
.webview-device-shell .webview-app-shell .play-page .game-head h1, .webview-device-shell .webview-app-shell .page-intro h1 { color: #142c5c; }
.webview-device-shell .webview-app-shell .game-head p, .webview-device-shell .webview-app-shell .page-intro p { color: #72819a; }
.webview-device-shell .webview-app-shell .game-jackpot { border-color: #e3eaf3; background: #f7f9fc; }
.webview-device-shell .webview-app-shell .game-jackpot span { color: #71839e; }
.webview-device-shell .webview-app-shell .game-jackpot strong { color: #17356b; }
.webview-device-shell .webview-app-shell .account-head strong { color: #142c5c; }
.webview-device-shell .webview-app-shell .account-head span { color: #73849e; }
.webview-promo { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 12px; color: #264877; border: 1px solid #d5e2f3; border-radius: 15px; background: #f0f6ff; }
.promo-icon { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; color: #4c7dcb; border-radius: 9px; background: #dceaff; }
.promo-icon .ui-icon { width: 15px; height: 15px; }
.webview-promo strong, .webview-promo span { display: block; }
.webview-promo strong { font-size: 10px; font-weight: 900; }
.webview-promo div span { margin-top: 2px; color: #7790b2; font-size: 9px; line-height: 1.35; }
.promo-button { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; margin-left: auto; color: #fff; border: 0; border-radius: 9px; background: #5685d4; cursor: pointer; }
.promo-button .ui-icon { width: 14px; height: 14px; }

@media (max-width: 1120px) {
  .webview-stage-grid { grid-template-columns: minmax(180px, 240px) 430px; }
}
@media (max-width: 760px) {
  .webview-stage-grid { display: block; }
  .webview-device-wrap { min-height: 100vh; }
  .webview-device-shell { min-height: 100vh; }
  .webview-host-shell { height: 100vh; border-radius: 0; }
  .webview-device-shell .webview-app-shell { height: calc(100vh - 47px); min-height: calc(100vh - 47px); border-radius: 0; }
}

/* AI-MARK[QAI-UI:quiklott-canvas-sync] 2026-09-24 15:05 (GMT+7) — canvas-aligned design tokens and component surfaces for App, number picker and partner WebView flows | rel: QAI-UI:quiklott-mobile-webview-demo */
:root { --ink: #1a4096; --ink-2: #173a86; --ink-3: #244caa; --gold: #f7941d; --orange: #f7941d; --paper: #f3f5fa; --canvas-text: #141821; --canvas-success: #157347; --canvas-danger: #b42318; }
.app-header-actions { display: flex; align-items: center; gap: 6px; }
.header-action { position: relative; display: grid; place-items: center; width: 29px; height: 29px; color: #d7e4ff; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.06); cursor: pointer; }
.header-action .ui-icon { width: 15px; height: 15px; }
.header-action i { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #f7941d; }
.app-topbar .balance { cursor: pointer; }
.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.canvas-home-page .home-greeting { margin-bottom: 14px; }
.canvas-jackpot-card { min-height: 248px; padding: 17px; background: linear-gradient(145deg, #1a4096 0%, #255bb8 56%, #123578 100%); }
.canvas-jackpot-card .primary-button { position: static; }
.jackpot-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #d7e4ff; font-size: 9px; font-weight: 800; }
.jackpot-product { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.jackpot-product strong, .jackpot-product span { display: block; }
.jackpot-product strong { color: #fff; font-size: 12px; }
.jackpot-product div span { margin-top: 3px; color: #c7d8f9; font-size: 9px; }
.official-product-mark { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; color: #fff; border: 1px solid rgba(255,255,255,.38); border-radius: 9px; background: rgba(255,255,255,.15); }
.official-product-mark .ui-icon { width: 16px; height: 16px; }
.power-mark { color: #17356e; border-color: #ffd46a; background: #f7c64d; }
.canvas-jackpot-card .jackpot-amount { margin-top: 10px; font-size: 43px; }
.stop-sale { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; color: #d6e3ff; font-size: 9px; }
.stop-sale span { display: inline-flex; align-items: center; gap: 4px; }
.stop-sale .ui-icon { width: 12px; height: 12px; color: #f7941d; }
.stop-sale strong { color: #fff; font-size: 10px; }
.canvas-jackpot-card .countdown { margin-top: 9px; }
.canvas-jackpot-card .countdown span { min-width: 47px; padding: 6px 5px; }
.jackpot-actions { position: absolute; right: 17px; bottom: 16px; left: 17px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.secondary-link { padding: 0; color: #dce8ff; font-size: 10px; font-weight: 850; border: 0; background: transparent; cursor: pointer; }
.secondary-link:hover { color: #fff; }
.canvas-product-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 7px; scrollbar-width: none; }
.canvas-product-list::-webkit-scrollbar { display: none; }
.canvas-game-card { position: relative; display: grid; flex: 0 0 151px; min-height: 152px; padding: 12px; align-content: start; text-align: left; color: #fff; border: 0; border-radius: 17px; background: #1a4096; cursor: pointer; box-shadow: 0 9px 20px rgba(24,61,133,.15); }
.canvas-game-card:hover { transform: translateY(-2px); }
.canvas-game-card .official-product-mark { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; }
.canvas-game-card strong { margin-top: 8px; font-size: 14px; letter-spacing: -.04em; }
.canvas-game-card > span:not(.official-product-mark) { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 9px; }
.canvas-game-card b { margin-top: 8px; font-size: 16px; }
.canvas-game-card small { margin-top: 3px; color: rgba(255,255,255,.8); font-size: 8px; }
.canvas-game-card em { display: inline-flex; align-items: center; gap: 3px; margin-top: 9px; color: #fff; font-size: 9px; font-style: normal; font-weight: 850; }
.canvas-game-card em .ui-icon { width: 11px; height: 11px; }
.canvas-game-card.mega { background: #c8102e; }
.canvas-game-card.lotto { background: #1f7a35; }
.canvas-game-card.maxpro { background: #6a1b7a; }
.canvas-game-card.max { background: #b0166e; }
.canvas-game-card.bingo { background: #c2410c; }
.habit-card { padding: 13px; border: 1px solid #e1e7f0; border-radius: 17px; background: #fff; }
.habit-card-head { display: flex; align-items: center; gap: 8px; }
.habit-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #1a4096; border-radius: 9px; background: #e9f0ff; }
.habit-icon .ui-icon { width: 15px; height: 15px; }
.habit-card-head strong, .habit-card-head span { display: block; }
.habit-card-head strong { color: #1b3565; font-size: 11px; }
.habit-card-head div span { margin-top: 2px; color: #8a96a9; font-size: 9px; }
.habit-count { margin-left: auto; color: #1a4096; font-size: 9px; font-weight: 900; }
.habit-card .ticket-numbers { margin: 12px 0; }
.habit-card .secondary-button { width: 100%; }
.ticket-numbers .special-ball { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; border-radius: 50%; background: #f7941d; }
.result-strip { display: grid; gap: 8px; }
.result-mini { padding: 11px; border: 1px solid #e1e7f0; border-radius: 15px; background: #fff; }
.result-mini strong, .result-mini span { display: block; }
.result-mini strong { color: #1b3565; font-size: 11px; }
.result-mini span { margin-top: 3px; color: #8995a8; font-size: 9px; }
.result-balls { display: flex; gap: 4px; margin-top: 9px; }
.result-balls .ticket-numbers { margin-top: 0; }
.result-balls .ticket-numbers i { width: 22px; height: 22px; font-size: 9px; }
.missed-draw-banner { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 12px; border: 1px solid #d8e6f0; border-radius: 16px; background: #f1f8ff; }
.missed-draw-banner > div { min-width: 0; flex: 1; }
.missed-draw-banner strong, .missed-draw-banner span, .missed-draw-banner small { display: block; }
.missed-draw-banner strong { color: #1b3d71; font-size: 11px; }
.missed-draw-banner span { margin-top: 2px; color: #617b9f; font-size: 9px; }
.missed-draw-banner small { margin-top: 3px; color: #8a99af; font-size: 8px; line-height: 1.35; }
.missed-draw-banner .ghost-button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trust-grid > div { padding: 11px; border: 1px solid #e1e7f0; border-radius: 15px; background: #fff; }
.trust-grid > div > span { display: grid; place-items: center; width: 25px; height: 25px; color: #1a4096; border-radius: 8px; background: #edf3ff; }
.trust-grid > div > span .ui-icon { width: 14px; height: 14px; }
.trust-grid strong { display: block; margin-top: 7px; color: #1b3565; font-size: 10px; }
.trust-grid p { margin: 4px 0 0; color: #8a96a9; font-size: 8px; line-height: 1.35; }

.lobby-page { padding-top: 5px; }
.lobby-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.lobby-header h1 { margin: 5px 0 4px; color: #fff; font-size: 23px; letter-spacing: -.055em; }
.lobby-header p { margin: 0; color: #9aaacc; font-size: 10px; }
.light-icon { color: #d9e4fa !important; }
.lobby-filters, .webview-filter-row { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.lobby-filters button, .webview-filter-row button { min-height: 29px; padding: 0 10px; color: #90a0bb; font-size: 9px; font-weight: 850; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.06); white-space: nowrap; cursor: pointer; }
.lobby-filters button.active, .webview-filter-row button.active { color: #193875; border-color: #f7941d; background: #f7941d; }
.lobby-section-label { margin: 14px 0 8px; color: #f0bb6d; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lobby-sections .canvas-game-card { width: 100%; margin-bottom: 8px; }

.canvas-game-page .game-head { margin-bottom: 9px; }
.canvas-game-page .game-head h1 { font-size: 23px; }
.canvas-game-jackpot { background: linear-gradient(135deg, #1a4096, #254da0); }
.canvas-game-jackpot .stop-sale-inline { display: grid; gap: 3px; color: #d5e4ff; font-size: 9px; text-align: right; }
.stop-sale-inline span { display: inline-flex; align-items: center; gap: 3px; }
.stop-sale-inline .ui-icon { width: 11px; height: 11px; color: #f7941d; }
.stop-sale-inline b { color: #fff; font-size: 12px; }
.quick-pick-panel, .other-ways { margin-top: 12px; padding: 14px; border-radius: 18px; background: #fff; }
.quick-pick-panel .section-heading h2, .other-ways .section-heading h2 { color: #183666; }
.quick-pick-panel .section-heading span { color: #8a96a9; }
.quick-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.quick-package { min-height: 57px; padding: 8px 5px; color: #22457d; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; cursor: pointer; }
.quick-package span, .quick-package strong { display: block; }
.quick-package span { color: #647d9f; font-size: 9px; }
.quick-package strong { margin-top: 4px; font-size: 11px; }
.quick-package.active { color: #8c4c00; border-color: #f7941d; background: #fff6e9; box-shadow: inset 0 0 0 1px #f7941d; }
.quick-package.active span { color: #b66c13; }
.or-divider { display: flex; align-items: center; gap: 8px; margin: 13px 0; color: #9aa7b9; font-size: 9px; }
.or-divider::before, .or-divider::after { height: 1px; flex: 1; content: ''; background: #e7ebf2; }
.outline-choice { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 38px; margin-top: 6px; padding: 0 10px; color: #2a4c81; font-size: 10px; font-weight: 850; text-align: left; border: 1px solid #dbe4f0; border-radius: 11px; background: #fff; cursor: pointer; }
.outline-choice .ui-icon { width: 14px; height: 14px; color: #5f87c7; }
.other-way-card { display: flex; align-items: flex-start; gap: 8px; padding: 11px 0; border-bottom: 1px solid #edf0f5; }
.other-way-card:last-child { border-bottom: 0; }
.other-way-card > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: #1a4096; border-radius: 8px; background: #edf3ff; }
.other-way-card > span:first-child .ui-icon { width: 14px; height: 14px; }
.other-way-card strong { display: block; color: #1b3565; font-size: 10px; }
.other-way-card p { margin: 3px 0 0; color: #8a96a9; font-size: 9px; line-height: 1.35; }
.other-way-card > span:last-child { display: grid; place-items: center; margin-left: auto; color: #9aabc0; }
.other-way-card > span:last-child .ui-icon { width: 14px; height: 14px; }

.picker-page { min-height: 100%; padding-top: 5px; padding-bottom: 72px; }
.picker-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.picker-title-row h1 { margin: 5px 0 4px; color: #fff; font-size: 20px; letter-spacing: -.045em; }
.picker-title-row p { margin: 0; color: #a1b1cf; font-size: 9px; }
.picker-timer { padding: 7px 8px; color: #ffd87b; font-size: 10px; font-weight: 900; border: 1px solid rgba(247,148,29,.25); border-radius: 9px; background: rgba(247,148,29,.1); }
.picker-set-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 15px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,.09); }
.picker-set-tabs button { min-height: 30px; color: #9eb0d0; font-size: 9px; font-weight: 850; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.picker-set-tabs button.active { color: #183a75; background: #fff; }
.picker-summary { display: flex; align-items: center; gap: 4px; margin-top: 11px; padding: 11px; border-radius: 14px; background: #fff; }
.picker-summary > span { margin-right: 4px; color: #8b97aa; font-size: 8px; font-weight: 850; }
.picker-summary .selected-row i { width: 23px; height: 23px; font-size: 8px; }
.picker-summary .ticket-numbers { margin-top: 0; gap: 4px; }
.picker-summary b { margin-left: auto; color: #e27616; font-size: 9px; }
.picker-actions { display: flex; gap: 6px; margin-top: 8px; }
.picker-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 29px; padding: 0 9px; color: #dce8ff; font-size: 9px; font-weight: 850; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.07); cursor: pointer; }
.picker-actions .ui-icon { width: 12px; height: 12px; }
.picker-instruction { margin: 13px 0 8px; color: #dce7fb; font-size: 10px; font-weight: 850; }
.canvas-number-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; padding: 12px; border-radius: 16px; background: #fff; }
.canvas-number-grid button { min-height: 34px; padding: 0; color: #38567f; font-size: 10px; font-weight: 850; border: 1px solid #dbe3ef; border-radius: 10px; background: #fff; cursor: pointer; }
.canvas-number-grid button.selected { color: #fff; border-color: #f7941d; background: #f7941d; box-shadow: 0 4px 10px rgba(247,148,29,.25); }
.picker-bottom-bar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 10px; padding: 10px 15px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #dbe3ef; background: rgba(255,255,255,.98); box-shadow: 0 -8px 20px rgba(17,43,86,.1); }
.picker-bottom-bar > div { flex: 1; }
.picker-bottom-bar span, .picker-bottom-bar strong { display: block; }
.picker-bottom-bar span { color: #8c98aa; font-size: 9px; }
.picker-bottom-bar strong { margin-top: 2px; color: #1a4096; font-size: 16px; }
.picker-bottom-bar .primary-button { min-height: 41px; }

.webview-page { color: #141821; background: #f9fbfd; }
.webview-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px 11px; border-bottom: 1px solid #e7ebf2; background: #fff; }
.webview-tabs button { min-height: 34px; color: #7889a1; font-size: 9px; font-weight: 900; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.webview-tabs button.active { color: #1a4096; background: #edf3ff; box-shadow: inset 0 -2px #f7941d; }
.webview-link-banner { display: grid; grid-template-columns: 27px 1fr auto 25px; gap: 8px; align-items: center; margin: 11px; padding: 10px; border: 1px solid #f3dfbb; border-radius: 13px; background: #fff8ea; }
.webview-link-banner > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; color: #a76513; border-radius: 8px; background: #ffe5b3; }
.webview-link-banner > span:first-child .ui-icon { width: 14px; height: 14px; }
.webview-link-banner strong { display: block; color: #734510; font-size: 10px; }
.webview-link-banner p { margin: 3px 0 0; color: #967044; font-size: 8px; line-height: 1.3; }
.webview-link-banner .secondary-button { min-height: 29px; padding: 0 8px; color: #fff; font-size: 9px; background: #1a4096; }
.webview-link-banner .icon-button { width: 25px; height: 25px; color: #9c8b73; border: 0; background: transparent; }
.webview-jackpot-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 11px 11px; padding: 14px; color: #fff; border-radius: 16px; background: linear-gradient(135deg, #1a4096, #285eb8); }
.webview-jackpot-card span, .webview-jackpot-card strong, .webview-jackpot-card small { display: block; }
.webview-jackpot-card span:first-child { color: #d7e5ff; font-size: 9px; font-weight: 850; }
.webview-jackpot-card strong { margin-top: 4px; font-size: 26px; letter-spacing: -.05em; }
.webview-jackpot-card small { margin-top: 3px; color: #c1d4f5; font-size: 8px; }
.webview-jackpot-mark { display: grid; place-items: center; width: 39px; height: 39px; color: #1a4096; border-radius: 12px; background: #f7c64d; }
.webview-jackpot-mark .ui-icon { width: 22px; height: 22px; }
.webview-quick-buy, .webview-other-games { padding: 0 11px; }
.webview-quick-buy .section-heading h2, .webview-other-games .section-heading h2 { color: #1b3565; }
.webview-quick-buy .section-heading span { color: #8a96a9; }
.webview-buy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.webview-buy-grid button { min-height: 55px; color: #1a4096; border: 1px solid #dbe4f0; border-radius: 11px; background: #fff; cursor: pointer; }
.webview-buy-grid button strong, .webview-buy-grid button span { display: block; }
.webview-buy-grid button strong { font-size: 11px; }
.webview-buy-grid button span { margin-top: 4px; color: #e27616; font-size: 10px; font-weight: 900; }
.webview-quick-buy .outline-choice { margin-top: 8px; }
.webview-other-games { margin-top: 15px; }
.webview-game-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 51px; padding: 7px 0; text-align: left; border: 0; border-bottom: 1px solid #e8edf3; background: transparent; cursor: pointer; }
.webview-game-mark { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: #fff; border-radius: 8px; background: #c8102e; }
.webview-game-mark .ui-icon { width: 14px; height: 14px; }
.webview-game-mark.lotto { background: #1f7a35; }.webview-game-mark.maxpro { background: #6a1b7a; }.webview-game-mark.max { background: #b0166e; }.webview-game-mark.bingo { background: #c2410c; }
.webview-game-row div { flex: 1; }.webview-game-row strong, .webview-game-row span, .webview-game-row small { display: block; }.webview-game-row strong { color: #1b3565; font-size: 10px; }.webview-game-row span { margin-top: 3px; color: #e27616; font-size: 9px; font-weight: 850; }.webview-game-row small { color: #8997aa; font-size: 8px; }.webview-game-row > .ui-icon { width: 14px; height: 14px; color: #9aabc0; }
.webview-scan-card { display: flex; align-items: center; gap: 8px; width: calc(100% - 22px); min-height: 48px; margin: 13px 11px; padding: 8px 10px; color: #244574; text-align: left; border: 1px solid #dce7f4; border-radius: 13px; background: #eff6ff; cursor: pointer; }.webview-scan-card > span { display: grid; place-items: center; width: 28px; height: 28px; color: #1a4096; border-radius: 8px; background: #dceaff; }.webview-scan-card > span .ui-icon { width: 15px; height: 15px; }.webview-scan-card div { flex: 1; }.webview-scan-card strong, .webview-scan-card small { display: block; }.webview-scan-card strong { font-size: 10px; }.webview-scan-card small { margin-top: 2px; color: #7c92b1; font-size: 8px; }.webview-scan-card > .ui-icon { width: 14px; height: 14px; }
.webview-footer { display: flex; justify-content: center; gap: 5px; padding: 12px 8px 17px; color: #8b98a9; font-size: 8px; }
.webview-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 15px 11px 10px; }.webview-page-head h1 { margin: 5px 0 3px; color: #1b3565; font-size: 21px; }.webview-page-head p { margin: 0; color: #8491a5; font-size: 9px; }.webview-page-head .secondary-button { min-height: 31px; padding: 0 9px; font-size: 9px; }
.webview-filter-row { padding: 0 11px; }.webview-filter-row button { color: #74859e; border-color: #dce5f0; background: #fff; }.webview-filter-row button.active { color: #fff; background: #1a4096; }
.webview-result-card, .webview-ticket-card { margin: 0 11px 10px; padding: 12px; border: 1px solid #dfe7f1; border-radius: 15px; background: #fff; }.webview-result-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.webview-result-top strong, .webview-result-top span { display: block; }.webview-result-top strong { color: #1b3565; font-size: 11px; }.webview-result-top span { margin-top: 3px; color: #8a96a9; font-size: 8px; }.webview-result-card .ticket-numbers { margin-top: 11px; }.prize-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 11px; }.prize-grid span { padding: 7px; border-radius: 8px; background: #f3f7fc; }.prize-grid b, .prize-grid strong { display: block; }.prize-grid b { color: #8795aa; font-size: 7px; }.prize-grid strong { margin-top: 3px; color: #1a4096; font-size: 9px; }.webview-scan-explainer { display: flex; align-items: center; gap: 8px; margin: 11px; padding: 11px; border: 1px solid #dce7f4; border-radius: 13px; background: #eff6ff; }.webview-scan-explainer > span { display: grid; place-items: center; width: 28px; height: 28px; color: #1a4096; border-radius: 8px; background: #dceaff; }.webview-scan-explainer > span .ui-icon { width: 15px; height: 15px; }.webview-scan-explainer div { flex: 1; }.webview-scan-explainer strong, .webview-scan-explainer p { display: block; }.webview-scan-explainer strong { color: #244574; font-size: 10px; }.webview-scan-explainer p { margin: 3px 0 0; color: #7b91af; font-size: 8px; line-height: 1.35; }.webview-scan-explainer .secondary-button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.ticket-count-badge { padding: 7px 9px; color: #1a4096; font-size: 9px; font-weight: 900; border-radius: 999px; background: #edf3ff; }.webview-ticket-status { display: flex; gap: 6px; padding: 0 11px 11px; }.webview-ticket-status button { min-height: 29px; padding: 0 10px; color: #8491a5; font-size: 9px; font-weight: 850; border: 1px solid #dce5f0; border-radius: 999px; background: #fff; }.webview-ticket-status button.active { color: #1a4096; border-color: #9eb8e7; background: #edf3ff; }.ticket-set-list { display: grid; gap: 8px; margin-top: 11px; }.ticket-set-list > div { display: flex; align-items: center; gap: 4px; }.ticket-set-list b { width: 33px; color: #7a8ba3; font-size: 8px; }.ticket-set-list .ticket-numbers { margin-top: 0; }.ticket-set-list .ticket-numbers i { width: 22px; height: 22px; font-size: 8px; }.ticket-code { display: flex; justify-content: space-between; margin-top: 11px; padding-top: 9px; border-top: 1px dashed #dce4ef; }.ticket-code span { color: #8996a9; font-size: 8px; }.ticket-code strong { color: #1b3565; font-size: 9px; }.ticket-actions { display: flex; gap: 6px; margin-top: 10px; }.ticket-actions button { min-height: 29px; padding: 0 9px; color: #1a4096; font-size: 9px; font-weight: 850; border: 1px solid #dce5f0; border-radius: 8px; background: #fff; }.webview-auto-ticket { display: flex; align-items: center; gap: 8px; margin: 0 11px; padding: 11px; border: 1px solid #e2e8f0; border-radius: 13px; background: #fff; }.webview-auto-ticket > span { display: grid; place-items: center; width: 27px; height: 27px; color: #1a4096; border-radius: 8px; background: #edf3ff; }.webview-auto-ticket > span .ui-icon { width: 14px; height: 14px; }.webview-auto-ticket div { flex: 1; }.webview-auto-ticket strong, .webview-auto-ticket small { display: block; }.webview-auto-ticket strong { color: #1b3565; font-size: 9px; }.webview-auto-ticket small { margin-top: 3px; color: #8996a9; font-size: 8px; }.webview-auto-ticket .ghost-button { min-height: 28px; padding: 0 7px; font-size: 8px; }

.permission-list { margin-top: 15px; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }.permission-list > div { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border-bottom: 1px solid #edf0f5; }.permission-list > div:last-child { border-bottom: 0; }.permission-list > div > span { display: grid; place-items: center; width: 27px; height: 27px; color: #1a4096; border-radius: 8px; background: #edf3ff; }.permission-list .ui-icon { width: 14px; height: 14px; }.permission-list strong, .permission-list small { display: block; }.permission-list strong { color: #274574; font-size: 10px; }.permission-list small { margin-top: 3px; color: #8491a5; font-size: 8px; line-height: 1.35; }.permission-note { margin: 11px 0 0; color: #7788a0; font-size: 9px; line-height: 1.4; }.permission-note strong { color: #23436f; }.partner-pay-total { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 14px; border-radius: 14px; background: #edf3ff; }.partner-pay-total span { color: #7d8ea7; font-size: 9px; }.partner-pay-total strong { color: #1a4096; font-size: 25px; }.partner-pay-list { margin: 10px 0 15px; padding: 2px 13px; border: 1px solid #e1e7f0; border-radius: 13px; background: #fff; }.partner-pay-list div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf0f5; }.partner-pay-list div:last-child { border-bottom: 0; }.partner-pay-list span { color: #8b97a9; font-size: 9px; }.partner-pay-list strong { color: #274574; font-size: 9px; text-align: right; }.partner-pay-note { margin: 9px 0 0; color: #8a96a9; text-align: center; font-size: 8px; }

/* AI-MARK[QAI-UI:quiklott-webview-canvas-host] 2026-09-24 15:22 (GMT+7) — remove the empty app topbar so the embedded WebView starts directly below the partner host header, matching the canvas W1 shell | rel: QAI-UI:quiklott-canvas-sync */
.webview-device-shell .webview-app-shell .app-topbar { display: none; }
.webview-device-shell .webview-app-shell .app-content { padding-bottom: 20px; background: #f9fbfd; }

/* AI-MARK[QAI-UI:quiklott-fixed-phone-viewport] 2026-09-24 15:34 (GMT+7) — keep the phone frame at a real mobile viewport height and let only app content scroll | rel: QAI-UI:quiklott-canvas-sync */
.device-shell { height: 900px; min-height: 0; }
.app-shell { height: 884px; min-height: 0; }
.device-wrap { min-height: 900px; }
.app-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.webview-device-shell { height: 900px; min-height: 0; }
.webview-host-shell { height: 884px; min-height: 0; }
.webview-device-shell .webview-app-shell { height: 837px; min-height: 0; }

@media (max-width: 420px) {
  .canvas-number-grid { gap: 5px; padding: 9px; }
  .canvas-number-grid button { min-height: 32px; }
  .canvas-game-card { flex-basis: 143px; }
  .trust-grid { gap: 6px; }
}

@media (max-width: 760px) {
  .device-shell { height: 100vh; min-height: 0; }
  .app-shell { height: 100%; min-height: 0; }
  .device-wrap { min-height: 100vh; }
  .webview-device-shell { height: 100vh; min-height: 0; }
  .webview-host-shell { height: 100%; min-height: 0; }
  .webview-device-shell .webview-app-shell { height: calc(100% - 47px); min-height: 0; }
}

/* AI-MARK[QAI-UI:quiklott-vietlott-product-art] 2026-09-24 15:58 (GMT+7) — fit official Vietlott SMS product artwork into the card marks without changing the canvas card geometry | rel: QAI-UI:quiklott-vietlott-product-assets */
.product-art { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.official-product-mark { overflow: hidden; padding: 2px; }
.official-product-mark .product-art { width: 100%; height: 100%; }
.product-logo { overflow: hidden; }
.product-logo .product-art { width: 100%; height: 100%; }
.webview-jackpot-mark { overflow: hidden; padding: 3px; }
.webview-game-mark { overflow: hidden; padding: 2px; }
.webview-game-mark .product-art { width: 100%; height: 100%; }

/* AI-MARK[QAI-UI:quiklott-clean-artboard] 2026-09-24 16:34 (GMT+7) — keep the clean App/WebView artboards at a standard 390x844 mobile viewport without a fake phone bezel or research annotations | rel: QAI-UI:quiklott-canvas-sync */
.prototype-stage { max-width: 620px; margin: 0 auto; padding: 22px 14px 32px; }
.surface-tabs { max-width: 420px; margin: 0 auto 16px; }
.surface-tab { min-height: 48px; }
.surface-tab strong { font-size: 12px; }
.surface-tab small { display: none; }
.surface-view { width: min(100%, 390px); margin: 0 auto; }
.surface-canvas { width: 100%; height: auto; aspect-ratio: 390 / 844; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 28px; background: var(--ink); box-shadow: 0 24px 65px rgba(17,42,82,.18); }
.surface-canvas .app-shell { width: 100%; height: 100%; min-height: 0; border-radius: 27px; }
.surface-canvas .app-content { min-height: 0; padding-right: clamp(18px, 5vw, 56px); padding-left: clamp(18px, 5vw, 56px); }
.webview-surface-canvas { background: var(--ink); }
.webview-surface-canvas .webview-host-shell { height: 100%; min-height: 0; border-radius: 27px; }
.webview-surface-canvas .webview-browser-bar { display: none; }
.webview-surface-canvas .webview-body { min-height: 0; height: calc(100% - 47px); }
.webview-surface-canvas .webview-app-frame { height: 100%; }
.webview-surface-canvas .webview-app-shell { height: 100%; min-height: 0; border-radius: 0 0 27px 27px; }
.webview-surface-canvas .webview-app-shell .app-topbar { display: none; }
.webview-surface-canvas .webview-app-shell .app-content { padding: 0 20px 20px; background: #f9fbfd; }
.webview-surface-canvas .webview-rail { display: none; }

@media (max-width: 760px) {
  .prototype-stage { padding: 8px 0 0; }
  .surface-tabs { margin: 0 10px 8px; }
  .surface-view { width: min(100%, 390px); }
  .surface-canvas { height: auto; min-height: 0; border-right: 1px solid rgba(255,255,255,.82); border-left: 1px solid rgba(255,255,255,.82); border-radius: 28px; box-shadow: 0 24px 65px rgba(17,42,82,.18); }
  .surface-canvas .app-shell, .webview-surface-canvas .webview-host-shell { border-radius: 0; }
  .surface-canvas .app-content { padding-right: 14px; padding-left: 14px; }
  .webview-surface-canvas .webview-app-shell { border-radius: 0; }
}

/* AI-MARK[QAI-UI:quiklott-canvas-missing-screens] 2026-09-24 14:32 (GMT+7) — style the remaining Claude canvas screens without changing the standard 390x844 mobile artboard | rel: QAI-UI:quiklott-canvas-purchase-completion */
.canvas-game-card.keno, .webview-game-mark.keno { background: #0e7490; }
.product-card.keno { background: linear-gradient(145deg, #0e7490, #155e75); }
.product-card.maxpro, .canvas-game-card.maxpro { background: #6a1b7a; }
.product-card.max, .canvas-game-card.max { background: #b0166e; }
.special-ball { color: #fff !important; border-color: #f7941d !important; background: #f7941d !important; }
.special-instruction { margin-top: 13px; }
.special-number-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; border-radius: 14px; background: #fff; }
.special-number-grid button { min-height: 30px; color: #9a5a06; font-size: 10px; font-weight: 850; border: 1px solid #f4d3a0; border-radius: 9px; background: #fff7e8; cursor: pointer; }
.special-number-grid button.selected { color: #fff; border-color: #f7941d; background: #f7941d; }

.review-page, .checkout-page, .ekyc-page, .responsible-page, .digit-picker-page, .bingo-page { padding-top: 5px; padding-bottom: 20px; }
.review-page .page-intro, .checkout-page .page-intro, .ekyc-page .page-intro, .responsible-page .page-intro { padding-bottom: 13px; }
.review-ticket-list { display: grid; gap: 7px; }
.review-ticket { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #dfe7f2; border-radius: 14px; background: #fff; }
.review-ticket span, .review-ticket strong { display: block; }
.review-ticket span { color: #8c99ac; font-size: 9px; }
.review-ticket strong { margin-top: 4px; color: #1b3565; font-size: 11px; letter-spacing: .02em; }
.review-ticket button { min-height: 28px; padding: 0 9px; color: #1a4096; font-size: 9px; font-weight: 850; border: 1px solid #c7d8f2; border-radius: 8px; background: #edf3ff; cursor: pointer; }
.review-panel, .payment-panel, .responsible-limit, .responsible-month, .pause-panel { margin-top: 11px; padding: 13px; border-radius: 16px; background: #fff; }
.review-panel .section-heading, .payment-panel .section-heading, .responsible-limit .section-heading, .responsible-month .section-heading, .pause-panel .section-heading { margin-bottom: 10px; }
.draw-choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.draw-choice-grid button { min-height: 48px; padding: 5px; color: #355681; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; cursor: pointer; }
.draw-choice-grid button.selected { color: #8b5309; border-color: #f7941d; background: #fff6e6; box-shadow: inset 0 0 0 1px #f7941d; }
.draw-choice-grid strong, .draw-choice-grid span { display: block; }
.draw-choice-grid strong { font-size: 10px; }.draw-choice-grid span { margin-top: 3px; color: #8c9ab0; font-size: 8px; }
.review-auto-row, .bingo-value-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #dce4ef; }
.review-auto-row strong, .review-auto-row small { display: block; }.review-auto-row strong { color: #294b7e; font-size: 10px; }.review-auto-row small { margin-top: 3px; color: #8997aa; font-size: 8px; }
.review-upsell { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid #f1dfbd; border-radius: 14px; background: #fff9ee; }
.review-upsell > span { display: grid; place-items: center; width: 27px; height: 27px; color: #9a5d0e; border-radius: 8px; background: #ffe4b2; }.review-upsell div { flex: 1; }.review-upsell strong, .review-upsell small { display: block; }.review-upsell strong { color: #744b18; font-size: 9px; }.review-upsell small { margin-top: 3px; color: #9d8057; font-size: 8px; }.review-upsell .ghost-button { min-height: 28px; padding: 0 7px; font-size: 8px; }
.review-limit { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding: 0 3px; color: #8491a5; font-size: 9px; }.review-limit strong { color: #2c4c7d; }.review-primary { margin-top: 12px; }
.checkout-order { display: grid; gap: 4px; padding: 13px; color: #fff; border-radius: 16px; background: linear-gradient(135deg, #1a4096, #285eb8); }.checkout-order strong { font-size: 12px; }.checkout-order span { color: #cbdcff; font-size: 9px; }.checkout-order b { margin-top: 5px; font-size: 23px; letter-spacing: -.05em; }
.payment-method { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 53px; margin-top: 6px; padding: 8px 9px; text-align: left; border: 1px solid #dce5f0; border-radius: 11px; background: #fff; cursor: pointer; }.payment-method.selected { border-color: #9ab8e9; background: #f0f5ff; box-shadow: inset 0 0 0 1px #9ab8e9; }.payment-method > span:nth-child(2) { flex: 1; }.payment-method strong, .payment-method small { display: block; }.payment-method strong { color: #1b3565; font-size: 10px; }.payment-method small { margin-top: 3px; color: #8997aa; font-size: 8px; }.payment-method > b { color: #1a4096; font-size: 9px; }.payment-radio { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; border: 1px solid #cbd7e7; border-radius: 50%; background: #fff; }.payment-method.selected .payment-radio { border-color: #1a4096; background: #1a4096; }.payment-radio .ui-icon { width: 12px; height: 12px; }
.kyc-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px; color: #365b86; border: 1px solid #d9e7f7; border-radius: 13px; background: #eff6ff; }.kyc-notice > span { display: grid; place-items: center; width: 27px; height: 27px; color: #1a4096; border-radius: 8px; background: #dceaff; }.kyc-notice strong, .kyc-notice small { display: block; }.kyc-notice strong { font-size: 9px; }.kyc-notice small { margin-top: 3px; color: #7790b0; font-size: 8px; line-height: 1.35; }.checkout-summary { margin-top: 10px; }.checkout-summary .total-row { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #d5deec; }.checkout-summary .total-row strong { font-size: 16px; color: #1a4096; }.payment-note { margin: 9px 0 0; color: #8190a5; font-size: 8px; line-height: 1.4; text-align: center; }
.kyc-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 12px; }.kyc-stepper span { display: grid; justify-items: center; gap: 4px; color: #93a0b4; font-size: 8px; text-align: center; }.kyc-stepper b { display: grid; place-items: center; width: 25px; height: 25px; color: #8997ab; font-size: 9px; border: 1px solid #d7e0ed; border-radius: 50%; background: #fff; }.kyc-stepper span.current b { color: #fff; border-color: #f7941d; background: #f7941d; }.kyc-stepper span.done b { color: #fff; border-color: #2e9c76; background: #2e9c76; }.kyc-stepper span.current, .kyc-stepper span.done { color: #2d4e7f; }
.kyc-ticket-hold { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e4e9f1; border-radius: 13px; background: #fff; }.kyc-ticket-hold > span { display: grid; place-items: center; width: 27px; height: 27px; color: #1a4096; border-radius: 8px; background: #edf3ff; }.kyc-ticket-hold strong, .kyc-ticket-hold small { display: block; }.kyc-ticket-hold strong { color: #274574; font-size: 9px; }.kyc-ticket-hold small { margin-top: 3px; color: #8b97aa; font-size: 8px; }
.kyc-camera-card { display: grid; justify-items: center; gap: 7px; margin-top: 11px; padding: 14px; text-align: center; border: 1px solid #dce5f1; border-radius: 17px; background: #fff; }.kyc-camera-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #1a4096; border-radius: 12px; background: #edf3ff; }.kyc-camera-card strong { color: #1d3767; font-size: 11px; }.kyc-camera-card > small { color: #8391a6; font-size: 8px; }.kyc-frame { display: grid; place-items: center; width: 150px; height: 130px; margin-top: 4px; color: #84a8db; border: 2px dashed #a8c3e7; border-radius: 14px; background: #f5f9ff; }.kyc-frame .ui-icon { width: 38px; height: 38px; }.kyc-success { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding: 9px 12px; color: #16734e; font-size: 10px; font-weight: 850; border-radius: 999px; background: #e8f8ef; }.kyc-success .ui-icon { width: 15px; height: 15px; }.kyc-privacy { display: grid; gap: 4px; margin: 11px 0; padding: 10px; color: #6c7e99; border-radius: 12px; background: #f6f8fc; }.kyc-privacy strong { color: #274574; font-size: 9px; }.kyc-privacy span { font-size: 8px; line-height: 1.4; }
.bingo-page .game-head h1, .digit-picker-page .picker-title-row h1 { color: #fff; }.bingo-latest { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; color: #fff; border-radius: 15px; background: linear-gradient(135deg, #c2410c, #ec701d); }.bingo-latest span { font-size: 9px; }.bingo-latest strong { font-size: 15px; }.bingo-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 11px; padding: 4px; border-radius: 11px; background: rgba(255,255,255,.09); }.bingo-tabs button { min-height: 38px; color: #a2b4d1; font-size: 9px; font-weight: 850; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }.bingo-tabs button.active { color: #1b3565; background: #fff; }.bingo-tabs small { display: block; margin-top: 3px; font-size: 7px; font-weight: 600; }.bingo-panel { margin-top: 11px; padding: 13px; border-radius: 16px; background: #fff; }.bingo-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.bingo-choice { min-height: 64px; padding: 7px 4px; color: #385780; border: 1px solid #dce5f1; border-radius: 11px; background: #fff; cursor: pointer; }.bingo-choice.selected { color: #fff; border-color: #c2410c; background: #c2410c; }.bingo-choice strong, .bingo-choice span { display: block; }.bingo-choice strong { font-size: 11px; }.bingo-choice span { margin-top: 4px; font-size: 8px; }.bingo-value-row strong { color: #31547f; font-size: 9px; }.bingo-value-row .draw-pills button { min-width: 30px; }.bingo-session { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; color: #6a4961; border: 1px solid #efd8e8; border-radius: 13px; background: #fff4fb; }.bingo-session > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; color: #b0166e; border-radius: 8px; background: #f7d9ea; }.bingo-session div { flex: 1; }.bingo-session strong, .bingo-session small { display: block; }.bingo-session strong { font-size: 9px; }.bingo-session small { margin-top: 3px; font-size: 8px; line-height: 1.35; }.session-safe { color: #a06a8e; font-size: 7px; }
.digit-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,.09); }.digit-mode button { min-height: 32px; color: #9eb0d0; font-size: 9px; font-weight: 850; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }.digit-mode button.active { color: #1a3566; background: #fff; }.digit-picker-page .picker-instruction { margin: 13px 2px 8px; color: #dfe8fb; }.digit-sets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.digit-set { padding: 12px 8px; text-align: center; border: 1px solid #dbe5f1; border-radius: 13px; background: #fff; }.digit-set span, .digit-set strong, .digit-set small { display: block; }.digit-set span { color: #8997ab; font-size: 8px; }.digit-set strong { margin-top: 4px; color: #1a4096; font-size: 22px; letter-spacing: .18em; }.digit-set small { margin-top: 4px; color: #8b98ab; font-size: 7px; }.digit-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 11px; padding: 10px; border-radius: 15px; background: #fff; }.digit-keypad button { min-height: 37px; color: #31547f; font-size: 12px; font-weight: 850; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; cursor: pointer; }.digit-keypad button:nth-child(10), .digit-keypad button:nth-child(12) { font-size: 8px; }.prize-explainer { display: grid; gap: 4px; margin-top: 10px; padding: 10px; color: #6f7e96; border: 1px solid #dce5f0; border-radius: 12px; background: #f7f9fc; }.prize-explainer strong { color: #2c4b79; font-size: 9px; }.prize-explainer span { font-size: 8px; line-height: 1.4; }
.responsible-badge { padding: 5px 7px; color: #1c7b57; font-size: 8px; font-weight: 850; border-radius: 999px; background: #e6f8ef; }.spend-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.spend-summary div { padding: 8px; border-radius: 10px; background: #f6f8fc; }.spend-summary span, .spend-summary strong { display: block; }.spend-summary span { color: #8592a6; font-size: 8px; }.spend-summary strong { margin-top: 4px; color: #2a4c80; font-size: 10px; }.spend-summary .negative { color: #b42318; }.spend-bars { display: flex; align-items: end; gap: 8px; height: 63px; margin-top: 13px; padding: 0 10px; border-bottom: 1px solid #dce5f0; }.spend-bars span { width: 28%; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #f7941d, #f7c64d); }.responsible-month > small { display: block; margin-top: 7px; color: #8795aa; font-size: 7px; line-height: 1.35; }.limit-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px; border-radius: 10px; background: #f2f5fa; }.limit-tabs button { min-height: 29px; color: #8b98aa; font-size: 9px; font-weight: 850; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }.limit-tabs button.active { color: #1a4096; background: #fff; }.limit-big { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 12px; }.limit-big strong { color: #1a4096; font-size: 23px; }.limit-big span { color: #8390a5; font-size: 8px; text-align: right; }.limit-actions { display: flex; gap: 6px; margin-top: 11px; }.limit-actions button { flex: 1; min-height: 34px; font-size: 9px; }.responsible-settings { margin-top: 10px; padding: 0 12px; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }.responsible-settings .setting-row { padding-right: 0; padding-left: 0; }.pause-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.pause-grid button { min-height: 38px; padding: 4px; color: #6c5174; font-size: 8px; font-weight: 850; border: 1px solid #ecd9e8; border-radius: 9px; background: #fff7fc; cursor: pointer; }

.surface-canvas .app-shell .picker-bottom-bar { bottom: 72px; z-index: 15; }
.picker-bottom-bar .primary-button:disabled { color: #8c98aa; background: #e5eaf2; box-shadow: none; cursor: not-allowed; filter: none; transform: none; }

.webview-result-stack { display: grid; gap: 8px; }.result-number-line { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }.result-number-line i { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; color: #2d4f7d; font-size: 8px; font-style: normal; font-weight: 850; border: 1px solid #d8e3f0; border-radius: 50%; background: #f5f8fc; }.webview-win-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 10px; padding: 11px; color: #1a4096; font-size: 9px; font-weight: 850; text-align: left; border: 1px solid #cbdcf3; border-radius: 12px; background: #eff6ff; cursor: pointer; }.webview-win-entry .ui-icon { width: 13px; height: 13px; }
.webview-flow-page { min-height: 100%; padding-bottom: 20px; background: #f9fbfd; }.webview-flow-head { display: flex; align-items: center; gap: 8px; padding: 14px 11px 10px; color: #1b3565; }.webview-flow-head h1 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.045em; }.webview-flow-head > div { flex: 1; }.webview-flow-kicker { color: #e56a50; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.partner-app-mark, .quik-app-mark { display: grid; place-items: center; width: 28px; height: 28px; color: #1a4096; border-radius: 8px; background: #edf3ff; }.quik-app-mark { color: #fff; background: linear-gradient(135deg,#ff8b50,#f14f5d); }.host-inline-back { display: grid; place-items: center; width: 29px; height: 29px; color: #1a4096; border: 1px solid #dce5f0; border-radius: 9px; background: #fff; cursor: pointer; }.webview-flow-card { margin: 5px 11px 0; padding: 14px; border: 1px solid #dce5f0; border-radius: 16px; background: #fff; }.webview-flow-card h1 { margin: 7px 0 6px; color: #1b3565; font-size: 20px; line-height: 1.05; letter-spacing: -.05em; }.webview-flow-card > p { margin: 0; color: #7889a1; font-size: 9px; line-height: 1.4; }.webview-flow-card .permission-list { margin-top: 13px; }.webview-flow-card .primary-button { margin-top: 12px; }.webview-flow-card .ghost-button { margin-top: 6px; }.webview-product-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 0 11px 8px; scrollbar-width: none; }.webview-product-tabs::-webkit-scrollbar { display: none; }.webview-product-tabs button { display: grid; justify-items: center; gap: 4px; min-width: 52px; padding: 5px 3px; color: #7d8ca3; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; cursor: pointer; }.webview-product-tabs button.active { color: #1a4096; border-color: #9bb8e8; background: #edf4ff; }.webview-product-mark { display: grid; place-items: center; width: 25px; height: 25px; overflow: hidden; border-radius: 7px; background: #1a4096; }.webview-product-tabs small { font-size: 7px; font-weight: 850; white-space: nowrap; }.webview-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 11px 10px; padding: 5px; border-radius: 9px; background: #eaf0f8; }.webview-progress span { padding: 6px 2px; color: #8996aa; font-size: 8px; font-weight: 850; text-align: center; border-radius: 6px; }.webview-progress .active { color: #fff; background: #1a4096; }.webview-buy-summary { margin: 0 11px; padding: 13px; border: 1px solid #dce5f0; border-radius: 15px; background: #fff; }.webview-buy-summary h2 { margin: 5px 0 11px; color: #1b3565; font-size: 16px; }.webview-buy-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.webview-buy-facts span { display: grid; gap: 3px; color: #506c96; font-size: 8px; }.webview-buy-facts b { color: #9aa5b7; font-size: 7px; }.webview-set-card { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; padding: 9px; border: 1px solid #e0e8f2; border-radius: 10px; background: #f8fafe; }.webview-set-card div { flex: 1; }.webview-set-card b, .webview-set-card strong { display: block; }.webview-set-card b { color: #8a97aa; font-size: 8px; }.webview-set-card strong { margin-top: 4px; color: #274574; font-size: 10px; letter-spacing: .03em; }.webview-set-card button { display: grid; place-items: center; width: 25px; height: 25px; color: #1a4096; border: 0; border-radius: 7px; background: #e7effd; cursor: pointer; }.webview-set-card button .ui-icon { width: 13px; height: 13px; }.webview-set-actions { display: flex; gap: 5px; margin-top: 8px; }.webview-set-actions button { flex: 1; min-height: 30px; color: #1a4096; font-size: 8px; font-weight: 850; border: 1px solid #d9e4f2; border-radius: 8px; background: #fff; cursor: pointer; }.webview-guide { display: grid; gap: 5px; margin: 10px 11px; padding: 10px; color: #71839e; border-radius: 12px; background: #eff6ff; }.webview-guide strong { color: #244574; font-size: 8px; }.webview-guide span { font-size: 8px; }.webview-buy-total { display: flex; align-items: center; justify-content: space-between; margin: 0 11px 9px; color: #7d8ea7; font-size: 9px; }.webview-buy-total strong { color: #1a4096; font-size: 18px; }.webview-buy-page > .primary-button { width: calc(100% - 22px); margin: 0 11px; }.partner-order-card, .partner-pay-card { margin: 0 11px 10px; padding: 13px; border-radius: 15px; background: #fff; border: 1px solid #dce5f0; }.partner-order-card { display: grid; gap: 4px; }.partner-order-card span { color: #71839d; font-size: 9px; }.partner-order-card strong { color: #1a4096; font-size: 25px; }.partner-order-card small { color: #8997aa; font-size: 8px; }.partner-pay-card { display: grid; gap: 10px; }.partner-pay-line { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed #dce4ef; color: #7b8da7; font-size: 9px; }.partner-pay-line strong { color: #274574; text-align: right; }.partner-pay-card small { color: #8b98aa; font-size: 8px; text-align: center; }.webview-win-page .webview-tabs { margin: 0 -0px 9px; }.win-hero { display: grid; justify-items: center; gap: 5px; margin: 0 11px 10px; padding: 21px 14px; color: #fff; text-align: center; border-radius: 16px; background: linear-gradient(145deg, #1f7a35, #11613b); }.win-confetti { display: grid; place-items: center; width: 42px; height: 42px; color: #1f7a35; border-radius: 13px; background: #f7c64d; }.win-hero > span:nth-child(2) { color: #c8ead4; font-size: 8px; font-weight: 850; }.win-hero h1 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.05em; }.win-hero strong { font-size: 29px; color: #f7d777; }.win-hero small { color: #d7f1dd; font-size: 9px; }.win-detail-card { margin: 0 11px 10px; padding: 13px; border: 1px solid #dce5f0; border-radius: 15px; background: #fff; }.win-ticket-row { display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: 9px 0; border-top: 1px solid #edf0f5; }.win-ticket-row span { color: #8b98aa; font-size: 8px; }.win-ticket-row strong { color: #274574; font-size: 9px; letter-spacing: .04em; }.win-ticket-row small { grid-column: 2; color: #1b8a60; font-size: 8px; }.win-ticket-row.muted small { color: #8b98aa; }.webview-win-page > .primary-button, .webview-win-page > .secondary-button { width: calc(100% - 22px); margin: 0 11px 7px; }.webview-win-note { margin: 3px 20px; color: #8795a8; font-size: 8px; line-height: 1.4; text-align: center; }

/* AI-MARK[QAI-UI:quiklott-brand-logo] 2026-09-24 16:10 (GMT+7) — replace the prototype brand glyph with the supplied Quik company wordmark across App, WebView host chrome and account-link flow | rel: QAI-UI:quiklott-mobile-webview-demo */
.brand-mark.logo-mark { display: block; width: 48px; height: 28px; padding: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: #fff; }
.brand-mark.logo-mark .brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.host-logo { display: block; width: 42px; height: 24px; flex: 0 0 auto; padding: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px; background: #fff; }
.host-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quik-app-mark.flow-logo { display: block; width: 36px; height: 24px; padding: 2px; overflow: hidden; border: 1px solid #dce5f0; border-radius: 7px; background: #fff; }
.quik-app-mark.flow-logo .brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 380px) {
  .canvas-number-grid { grid-template-columns: repeat(6, 1fr); gap: 5px; }
  .draw-choice-grid { grid-template-columns: repeat(2, 1fr); }
  .webview-product-tabs button { min-width: 48px; }
  .spend-summary strong { font-size: 9px; }
}

/* AI-MARK[QAI-UI:quiklott-phone-frame] 2026-09-24 16:48 (GMT+7) — restore a single standard portrait phone frame around both App and embedded WebView surfaces while preserving the 390:844 viewport ratio and internal scrolling | rel: QAI-UI:quiklott-mobile-webview-demo */
.phone-frame { position: relative; width: min(100%, 414px); margin: 0 auto; padding: 9px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 48px; background: linear-gradient(145deg, #1d2d4c 0%, #07132d 55%, #020b1d 100%); box-shadow: 0 28px 70px rgba(15, 35, 72, .32), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 4px rgba(0, 0, 0, .15); }
.phone-frame::before, .phone-frame::after { position: absolute; z-index: 0; width: 3px; content: ""; border-radius: 3px; background: #0a1730; box-shadow: inset 1px 0 rgba(255, 255, 255, .16); }
.phone-frame::before { top: 136px; left: -3px; height: 57px; }
.phone-frame::after { top: 202px; right: -3px; height: 72px; }
.phone-screen { position: relative; z-index: 1; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; border: 1px solid #020a1a; border-radius: 39px; background: #07132d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); }
.phone-notch { position: absolute; z-index: 40; top: 8px; left: 50%; display: flex; align-items: center; justify-content: flex-end; width: 106px; height: 23px; padding-right: 19px; transform: translateX(-50%); border-radius: 14px; background: #020916; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); pointer-events: none; }
.phone-notch span { width: 7px; height: 7px; border: 1px solid #273956; border-radius: 50%; background: #0d1a34; }
.phone-screen > .surface-canvas { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; overflow: hidden; border: 0; border-radius: 31px; box-shadow: none; }
.phone-screen > .surface-canvas .app-shell { width: 100%; height: 100%; min-height: 0; border-radius: 31px; }
.phone-screen > .webview-surface-canvas .webview-host-shell { height: 100%; min-height: 0; border-radius: 31px; }
.phone-screen > .webview-surface-canvas .webview-app-shell { height: 100%; min-height: 0; border-radius: 0 0 31px 31px; }
.phone-screen .app-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 430px) {
  .phone-frame { width: calc(100% - 16px); padding: 7px; border-radius: 39px; }
  .phone-screen { border-radius: 32px; }
  .phone-screen > .surface-canvas, .phone-screen > .surface-canvas .app-shell, .phone-screen > .webview-surface-canvas .webview-host-shell { border-radius: 25px; }
  .phone-screen > .webview-surface-canvas .webview-app-shell { border-radius: 0 0 25px 25px; }
}

/* AI-MARK[QAI-UI:quiklott-mobile-layout-qa] 2026-09-24 17:02 (GMT+7) — reserve safe areas, prevent header/notch collisions, keep the bottom navigation clear of scroll content and fit the framed phone on short mobile viewports | rel: QAI-UI:quiklott-phone-frame */
html { min-height: 100%; overflow-x: hidden; }
body { min-height: 100dvh; overflow-x: hidden; overscroll-behavior-x: none; }
.surface-view, .phone-frame, .phone-screen, .phone-screen > .surface-canvas, .phone-screen .app-shell { min-width: 0; }
.phone-frame { contain: layout paint; }
.phone-notch { top: 3px; height: 20px; }
.phone-screen > .surface-canvas .app-topbar { padding-top: max(25px, env(safe-area-inset-top)); }
.phone-screen > .webview-surface-canvas .webview-host-bar { padding-top: max(10px, env(safe-area-inset-top)); }
.phone-screen .app-content { -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding-bottom: max(94px, calc(82px + env(safe-area-inset-bottom))); }
.phone-screen .bottom-nav { padding-bottom: max(13px, env(safe-area-inset-bottom)); }
.phone-screen > .webview-surface-canvas .app-content { padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))); }

@media (min-width: 761px) and (max-height: 900px) {
  .prototype-stage { padding-bottom: 8px; }
  .phone-frame { width: min(390px, calc(46.21svh - 39px)); }
}

@media (max-width: 760px) {
  .phone-frame { width: calc(100% - 24px); }
  .prototype-stage { min-height: 100dvh; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .phone-frame { width: min(calc(100% - 24px), calc(46.21svh - 24px)); }
}

@media (max-width: 360px) {
  .phone-screen > .surface-canvas .app-topbar { gap: 6px; padding-right: 13px; padding-left: 13px; }
  .phone-screen > .surface-canvas .brand-lockup { gap: 5px; min-width: 0; }
  .phone-screen > .surface-canvas .brand-mark.logo-mark { width: 40px; height: 25px; }
  .phone-screen > .surface-canvas .brand-name { font-size: 15px; }
  .phone-screen > .surface-canvas .app-header-actions { gap: 4px; min-width: 0; }
  .phone-screen > .surface-canvas .header-action { width: 26px; height: 26px; }
  .phone-screen > .surface-canvas .balance { gap: 4px; padding: 6px 7px; font-size: 9px; }
}

/* AI-MARK[QAI-UI:quiklott-product-background-art] 2026-09-24 17:18 (GMT+7) — promote official Vietlott product artwork from a corner badge to the card background while retaining a contrast layer for readable product data | rel: QAI-UI:quiklott-vietlott-product-assets */
.product-card, .canvas-game-card { background-color: #17356f; background-image: linear-gradient(108deg, rgba(6, 18, 46, .93) 0%, rgba(6, 18, 46, .68) 48%, rgba(6, 18, 46, .28) 100%), var(--product-background) !important; background-position: center, center; background-size: cover, cover; background-repeat: no-repeat; }
.product-card > *, .canvas-game-card > * { position: relative; z-index: 1; }
.product-card .product-logo, .canvas-game-card .official-product-mark { background: rgba(6, 18, 46, .42); border-color: rgba(255, 255, 255, .42); }
.canvas-game-card strong { text-shadow: 0 1px 2px rgba(0, 0, 0, .24); }
.canvas-game-card b { text-shadow: 0 1px 3px rgba(0, 0, 0, .28); }

/* AI-MARK[QAI-UI:quiklott-webview-safe-header] 2026-09-24 17:29 (GMT+7) — reserve the phone safe-area above the partner WebView header so the notch never covers QuikLott title content | rel: QAI-UI:quiklott-mobile-layout-qa */
.phone-screen > .webview-surface-canvas .webview-host-bar { min-height: 61px; padding-top: 24px; padding-bottom: 8px; }
.phone-screen > .webview-surface-canvas .webview-body { height: calc(100% - 61px); }

/* AI-MARK[QAI-UI:quiklott-home-white-background] 2026-09-24 17:42 (GMT+7) — remove the split dark/light canvas backdrop from the native Home surface and keep text contrast on a fully white content background | rel: QAI-UI:quiklott-mobile-layout-qa */
#surface-app .app-content:has(.canvas-home-page) { background: #fff; }
#surface-app .canvas-home-page { background: #fff; }
#surface-app .canvas-home-page .home-greeting { color: #142c5c; }
#surface-app .canvas-home-page .home-greeting small { color: #6f809e; }
#surface-app .canvas-home-page .eyebrow { color: #e66d52; }

/* AI-MARK[QAI-UI:quiklott-canvas-supplemental-screens] 2026-09-24 18:05 (GMT+7) — isolated gallery for the missing canvas artboards; existing App/WebView component styles stay untouched | rel: QAI-UI:quiklott-canvas-supplemental-screens */
.supplement-page { min-height: 100%; padding: 14px 13px 30px; color: #173568; background: #f7f9fc; }
#surface-app .app-content:has(.supplement-page) { background: #f7f9fc; }
.business-product-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 0 0 9px; padding: 1px 0 2px; scrollbar-width: none; }
.business-product-tabs::-webkit-scrollbar { display: none; }
.business-product-tabs button { display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 5px 3px; color: #7d8ca3; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; cursor: pointer; }
.business-product-tabs button.active { color: #1a4096; border-color: #9bb8e8; background: #edf4ff; box-shadow: 0 4px 9px rgba(26,64,150,.08); }
.business-product-art { display: block; width: 26px; height: 26px; object-fit: contain; }
.business-product-tabs small { max-width: 52px; overflow: hidden; font-size: 6px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.business-product-context { position: relative; overflow: hidden; margin: 0 0 10px; padding: 11px; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; background-color: #17356f; background-image: linear-gradient(115deg, rgba(8,22,57,.96), rgba(8,22,57,.6)), var(--business-background); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat; box-shadow: 0 10px 22px rgba(22,47,89,.12); }
.business-context-head { display: flex; align-items: center; gap: 8px; }
.business-product-mark { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.48); border-radius: 10px; background: rgba(255,255,255,.18); }
.business-context-head > div { min-width: 0; flex: 1; }
.business-context-head span { color: #f7c64d; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.business-context-head strong, .business-context-head small { display: block; overflow-wrap: anywhere; }
.business-context-head strong { margin-top: 2px; color: #fff; font-size: 15px; line-height: 1.15; letter-spacing: -.04em; }
.business-context-head small { margin-top: 3px; color: #d5e2fa; font-size: 7px; line-height: 1.3; }
.business-context-head > b { max-width: 76px; color: #f9d883; font-size: 9px; line-height: 1.15; text-align: right; overflow-wrap: anywhere; }
.business-context-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.business-context-facts span { min-width: 0; padding: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.1); }
.business-context-facts i, .business-context-facts strong { display: block; }
.business-context-facts i { color: #adc1e1; font-size: 6px; font-style: normal; }
.business-context-facts strong { display: -webkit-box; min-height: 2.5em; margin-top: 3px; overflow: hidden; color: #fff; font-size: 7px; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.supplement-page-intro { padding: 3px 2px 11px; }
.supplement-intro-row { display: flex; align-items: center; gap: 8px; }
.supplement-intro-row > div { min-width: 0; flex: 1; }
.supplement-intro-row h1 { margin: 3px 0 0; color: #142d5e; font-size: 21px; line-height: 1.03; letter-spacing: -.055em; }
.supplement-page-intro p { margin: 8px 0 0 37px; color: #7889a4; font-size: 9px; line-height: 1.45; }
.supplement-back { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; color: #1a4096; border: 1px solid #d7e1ef; border-radius: 10px; background: #fff; cursor: pointer; }
.supplement-back .ui-icon { width: 15px; height: 15px; }
.supplement-count { padding: 5px 7px; color: #e66d52; font-size: 8px; font-weight: 900; white-space: nowrap; border-radius: 999px; background: #fff0eb; }
.supplement-kind-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 1px 0 9px; scrollbar-width: none; }
.supplement-kind-tabs::-webkit-scrollbar { display: none; }
.supplement-kind-tabs button { min-height: 31px; padding: 5px 9px; color: #7a8aa4; font-size: 8px; font-weight: 850; white-space: nowrap; border: 1px solid #dce5f0; border-radius: 9px; background: #fff; cursor: pointer; }
.supplement-kind-tabs button.active { color: #fff; border-color: #1a4096; background: #1a4096; box-shadow: 0 5px 12px rgba(26,64,150,.16); }
.supplement-hub-grid { display: grid; gap: 8px; }
.supplement-hub-card { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 11px; text-align: left; border: 1px solid #dce5f0; border-radius: 15px; background: #fff; cursor: pointer; }
.supplement-hub-card.featured { border-color: #ffcf9f; background: linear-gradient(135deg, #fffaf1, #fff); }
.supplement-hub-card:hover { border-color: #9bb8e8; }
.supplement-hub-icon { display: grid; place-items: center; width: 31px; height: 31px; color: #1a4096; border-radius: 10px; background: #edf3ff; }
.supplement-hub-card.featured .supplement-hub-icon { color: #e66d52; background: #fff0eb; }
.supplement-hub-icon .ui-icon { width: 16px; height: 16px; }
.supplement-hub-card span:nth-child(2) { min-width: 0; }
.supplement-hub-card b, .supplement-hub-card small { display: block; }
.supplement-hub-card b { color: #1c3769; font-size: 10px; line-height: 1.2; }
.supplement-hub-card small { margin-top: 4px; color: #8090a8; font-size: 8px; line-height: 1.35; }
.supplement-hub-card em { color: #e66d52; font-size: 7px; font-style: normal; font-weight: 900; text-align: right; white-space: nowrap; }
.supplement-hub-card em .ui-icon { width: 11px; height: 11px; vertical-align: -3px; }
.supplement-proof, .supplement-foundation-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px; color: #587092; border: 1px solid #dce7f5; border-radius: 13px; background: #eff6ff; }
.supplement-proof > span, .supplement-foundation-note > span { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; color: #1d74bd; border-radius: 8px; background: #d9ebff; }
.supplement-proof .ui-icon, .supplement-foundation-note .ui-icon { width: 14px; height: 14px; }
.supplement-proof strong, .supplement-proof small, .supplement-foundation-note strong, .supplement-foundation-note small { display: block; }
.supplement-proof strong, .supplement-foundation-note strong { color: #274b7d; font-size: 9px; }
.supplement-proof small, .supplement-foundation-note small { margin-top: 3px; font-size: 8px; line-height: 1.4; }
.supplement-screen-stack { display: grid; gap: 12px; }
.supplement-screen-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; background-color: #17356f; background-image: linear-gradient(135deg, rgba(8,22,57,.96) 0%, rgba(8,22,57,.8) 45%, rgba(8,22,57,.45) 100%), var(--supplement-background); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat; box-shadow: 0 13px 28px rgba(22,47,89,.14); }
.supplement-screen-card > * { position: relative; z-index: 1; }
.supplement-screen-header { display: flex; align-items: center; gap: 8px; padding: 13px 13px 9px; color: #fff; }
.supplement-screen-mark { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 11px; background: rgba(255,255,255,.18); }
.supplement-product-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.supplement-screen-header > div { min-width: 0; flex: 1; }
.supplement-screen-header h2 { margin: 2px 0 2px; color: #fff; font-size: 16px; line-height: 1.05; letter-spacing: -.04em; }
.supplement-screen-header small { display: block; color: #d8e4fa; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supplement-screen-index { padding: 4px 5px; color: #fbd897; font-size: 7px; font-weight: 900; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; }
.supplement-kicker { color: #f7c64d; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.supplement-screen-body { margin: 0 9px; padding: 11px; border-radius: 15px; background: rgba(255,255,255,.96); }
.supplement-number-preview, .supplement-digit-preview, .supplement-choice-preview, .supplement-order, .supplement-result-head { display: grid; gap: 5px; }
.supplement-number-preview > span, .supplement-digit-preview > span, .supplement-choice-preview > span { color: #7e8da5; font-size: 8px; font-weight: 800; }
.supplement-number-preview > small, .supplement-digit-preview > small, .supplement-choice-preview > small { color: #8997aa; font-size: 8px; line-height: 1.35; }
.supplement-number-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.supplement-number-chips i, .supplement-result-balls i { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; color: #1a4096; font-size: 9px; font-style: normal; font-weight: 900; border: 1px solid #bfd1ec; border-radius: 50%; background: #edf4ff; }
.supplement-number-chips i.special, .supplement-result-balls i.special { min-width: auto; color: #9a5d0e; border-color: #f4c96d; border-radius: 8px; background: #fff1cc; }
.supplement-number-chips.large i { min-width: 28px; height: 28px; }
.supplement-digit-preview { padding: 10px; border-radius: 11px; background: #edf4ff; }
.supplement-digit-preview strong { color: #1a4096; font-size: 24px; letter-spacing: .12em; }
.supplement-choice-preview { padding: 10px; border-radius: 11px; background: #fff4fb; }
.supplement-choice-preview strong { color: #a41b69; font-size: 20px; }
.supplement-choice-pills { display: flex; gap: 5px; margin-top: 3px; }
.supplement-choice-pills i { padding: 5px 8px; color: #8b7a8d; font-size: 8px; font-style: normal; border: 1px solid #ead8e7; border-radius: 7px; background: #fff; }
.supplement-choice-pills i.selected { color: #fff; border-color: #b0166e; background: #b0166e; }
.supplement-review-line, .supplement-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.supplement-review-line span, .supplement-result-head span { color: #7d8da6; font-size: 8px; }
.supplement-review-line strong, .supplement-result-head strong { color: #1a4096; font-size: 10px; text-align: right; }
.supplement-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.supplement-option-grid span { display: grid; gap: 4px; padding: 7px; color: #8997ab; font-size: 7px; border-radius: 8px; background: #f7f9fc; }
.supplement-option-grid b { color: #31547f; font-size: 8px; line-height: 1.25; }
.supplement-review-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; color: #8391a5; font-size: 9px; border-top: 1px dashed #dce4ef; }
.supplement-review-total strong { color: #1a4096; font-size: 18px; }
.supplement-order { margin: -1px -1px 9px; padding: 10px; color: #fff; border-radius: 11px; background: linear-gradient(135deg, #1a4096, #2d68c5); }
.supplement-order span { color: #d2e1ff; font-size: 8px; }
.supplement-order strong { font-size: 19px; }
.supplement-order small { color: #e5edff; font-size: 8px; }
.supplement-payment-list { display: grid; gap: 6px; }
.supplement-payment-list > div { display: grid; grid-template-columns: 17px 1fr; gap: 1px 6px; align-items: center; padding: 7px; border: 1px solid #e1e8f2; border-radius: 9px; background: #fff; }
.supplement-payment-list > div.selected { border-color: #9bb8e8; background: #eff6ff; }
.supplement-payment-list b { color: #31547f; font-size: 9px; }
.supplement-payment-list small { grid-column: 2; color: #8896aa; font-size: 7px; }
.payment-dot { display: grid; place-items: center; width: 16px; height: 16px; color: #1a4096; border: 1px solid #a5bcdf; border-radius: 50%; }
.payment-dot .ui-icon { width: 10px; height: 10px; }
.supplement-kyc-note { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 7px; color: #557196; border-radius: 8px; background: #f1f7ff; }
.supplement-kyc-note .ui-icon { width: 13px; height: 13px; color: #1a4096; }
.supplement-kyc-note small { font-size: 7px; line-height: 1.35; }
.supplement-ticket-status { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid #e8edf4; }
.supplement-ticket-status > span { display: grid; place-items: center; width: 29px; height: 29px; color: #1d8a61; border-radius: 9px; background: #e7f7ef; }
.supplement-ticket-status .ui-icon { width: 15px; height: 15px; }
.supplement-ticket-status strong, .supplement-ticket-status small { display: block; }
.supplement-ticket-status strong { color: #31547f; font-size: 9px; }
.supplement-ticket-status small { margin-top: 3px; color: #8795a9; font-size: 7px; }
.supplement-ticket-number { display: grid; gap: 6px; padding-top: 9px; }
.supplement-ticket-number span { color: #8896aa; font-size: 7px; }
.supplement-ticket-number strong { color: #1a4096; font-size: 10px; letter-spacing: .04em; }
.supplement-ticket-actions { display: flex; gap: 5px; margin-top: 9px; }
.supplement-ticket-actions button { flex: 1; min-height: 27px; color: #1a4096; font-size: 7px; font-weight: 850; border: 1px solid #d4e0ef; border-radius: 7px; background: #fff; cursor: pointer; }
.supplement-result-head { margin-bottom: 9px; }
.supplement-result-balls { display: flex; flex-wrap: wrap; gap: 4px; }
.supplement-prize-table { display: grid; gap: 5px; margin-top: 10px; }
.supplement-prize-table div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 7px; border-radius: 7px; background: #f7f9fc; }
.supplement-prize-table span { color: #8997aa; font-size: 7px; }
.supplement-prize-table b { color: #31547f; font-size: 8px; text-align: right; }
.supplement-screen-footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 12px 11px; color: #d9e4fa; font-size: 7px; }
.supplement-screen-footer button { display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 0 8px; color: #173568; font-size: 8px; font-weight: 900; border: 0; border-radius: 8px; background: #f7941d; cursor: pointer; }
.supplement-screen-footer button .ui-icon { width: 12px; height: 12px; }
.supplement-foundation-card { padding: 13px; border: 1px solid #dce5f0; border-radius: 19px; background: #fff; box-shadow: 0 13px 28px rgba(22,47,89,.08); }
.supplement-foundation-brand { display: flex; gap: 10px; align-items: center; }
.supplement-logo-box { display: block; width: 64px; height: 38px; flex: 0 0 auto; padding: 3px; overflow: hidden; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; }
.supplement-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.supplement-foundation-brand h2 { margin: 3px 0 0; color: #173568; font-size: 17px; line-height: 1.05; letter-spacing: -.045em; }
.supplement-foundation-brand p { margin: 5px 0 0; color: #8190a7; font-size: 8px; line-height: 1.4; }
.supplement-token-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 13px; }
.supplement-token-grid div { display: grid; gap: 4px; min-width: 0; padding: 7px; border-radius: 8px; background: #f7f9fc; }
.supplement-token-grid span { color: #8a97aa; font-size: 7px; }
.supplement-token-grid b { overflow: hidden; color: #31547f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.token-swatch::before { display: inline-block; width: 8px; height: 8px; margin-right: 3px; vertical-align: -1px; content: ''; border-radius: 50%; background: currentColor; }
.token-blue { color: #1a4096 !important; }.token-orange { color: #f7941d !important; }.token-white { color: #92a0b4 !important; }
.supplement-product-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.supplement-product-thumb { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 5px 2px; border-radius: 8px; background: #f3f7fc; }
.supplement-product-thumb > span { display: grid; place-items: center; width: 27px; height: 27px; overflow: hidden; border-radius: 7px; background: #1a4096; }
.supplement-product-thumb small { width: 100%; overflow: hidden; color: #71839e; font-size: 5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.supplement-foundation-note { margin-top: 12px; }

@media (max-width: 360px) {
  .supplement-page { padding-right: 10px; padding-left: 10px; }
  .supplement-option-grid { grid-template-columns: 1fr; }
  .supplement-product-strip { grid-template-columns: repeat(4, 1fr); }
  .supplement-token-grid { grid-template-columns: repeat(2, 1fr); }
}

/* AI-MARK[QAI-UI:quiklott-full-width-phone-layout] 2026-09-24 18:42 (GMT+7) — use the full portrait phone width, remove desktop height-based shrinking, and keep App/WebView gutters proportional so content does not look cooped up | rel: QAI-UI:quiklott-phone-frame, QAI-UI:quiklott-mobile-layout-qa */
.phone-screen > .surface-canvas .app-content { padding-right: 16px; padding-left: 16px; }
.phone-screen > .webview-surface-canvas .app-content { padding-right: 0; padding-left: 0; }

@media (min-width: 761px) and (max-height: 900px) {
  .phone-frame { width: min(414px, calc(100vw - 28px)); }
}

@media (max-width: 760px) {
  .phone-frame { width: 100%; max-width: none; margin-right: 0; margin-left: 0; }
}