/* Reference-screenshot look (mini-program top bar, PIN field, cashier sheet, result rows). */

/* Partner = red, Customer = orange */
.device[data-app=partner] {
  --c-primary: #E6011E;
  --c-primary-press: #C2001A;
  --c-primary-soft: #FDE9EB;
  --g-brand: linear-gradient(135deg, #F2385A 0%, #E6011E 55%, #A8001A 100%);
}

/* top bar: back + left-aligned title + "··· ◎" capsule */
.topbar { grid-template-columns: auto 1fr auto; gap: 2px; padding: 0 10px 0 4px; }
.topbar-title { text-align: start; font-size: 17px; }
.topbar-right { gap: 8px; align-items: center; }
.capsule { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; border: 1px solid var(--c-border-1); border-radius: 15px; background: rgba(255, 255, 255, .7); color: var(--c-text-main); }
.capsule i { width: 1px; height: 14px; background: var(--c-border-1); }
.tu-hero .topbar, .qr-page .topbar, .bv-hero .topbar { background: transparent; color: #fff; }
.tu-hero .capsule, .qr-page .capsule, .bv-hero .capsule { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); color: #fff; }
.tu-hero .capsule i, .qr-page .capsule i, .bv-hero .capsule i { background: rgba(255, 255, 255, .5); }

.big-title { font-size: 24px; font-weight: 700; }
.link.start { align-self: flex-start; }
.list-sub.block { display: block; }

/* PIN page */
.pin-wrap { gap: 10px; }
.pinf { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1.5px solid var(--c-primary); border-radius: 8px; background: #fff; margin-top: 10px; }
.pinf-ph { color: var(--c-text-placeholder); font-size: 15px; }
.pinf-dots { font-size: 22px; letter-spacing: 6px; }
.pin-cont { margin-top: auto; }
.btn-primary:disabled { opacity: .35; }
.keypad { margin-top: 8px; }
.key { background: #fff; box-shadow: 0 1px 0 var(--c-border-1); }
.pin-wrap .keypad { background: var(--c-bg-floating); margin: 8px -20px -16px; padding: 8px; }

/* cashier sheet */
.rc-head { display: flex; justify-content: space-between; align-items: center; }
.rc-to { text-align: center; color: var(--c-text-general); font-size: 14px; }
.rc-amt, .res-amt { text-align: center; }
.ba { font-size: 34px; font-weight: 700; }
.ba small { font-size: 15px; font-weight: 500; margin-inline-end: 2px; }
.rc-rows .rrow { padding: 13px 0; }
.pm { display: inline-flex; align-items: center; gap: 4px; }
.pm .ic { color: var(--c-primary); }
.sheet .keypad { background: var(--c-bg-floating); margin: 0 -16px -24px; padding: 8px; }

/* detail rows */
.rrows { width: 100%; }
.rrow { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--c-border-2); font-size: 14px; }
.rrow .k { color: var(--c-text-secondary); }
.rrow .v { text-align: end; }
.accent { color: var(--c-primary); font-weight: 700; }

/* result page */
.screen:has(> .res) { background: #fff; }
.res { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px; background: #fff; }
.res-ic { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--c-success); color: var(--c-success); display: grid; place-items: center; }
.res-ic.pend { border: 0; color: var(--c-warning); }
.res-status { color: var(--c-success); font-size: 13px; }
.res-status.pend { color: var(--c-warning); }
.res-amt { margin: 8px 0 12px; }
.screen:has(> .res) .page-footer { padding-bottom: 28px; }

/* option list (Cash In / Cash Out) */
.opt-list { display: flex; flex-direction: column; gap: 12px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: #fff; text-align: start; width: 100%; }
.opt-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; flex: none; }

/* transfer */
.fic { color: var(--c-primary); display: grid; }
.fav-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #fff; border-radius: 8px; font-size: 13px; color: var(--c-text-secondary); }
.btn-mini { background: var(--c-primary); color: #fff; border-radius: 14px; padding: 4px 16px; font-size: 13px; font-weight: 600; }
.party-row { display: flex; align-items: center; gap: 12px; }
.amt-label { font-size: 12px; color: var(--c-text-secondary); margin-top: 8px; }
.amt-input { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--c-border-1); padding-bottom: 6px; }
.amt-input .cur { font-size: 22px; font-weight: 700; }
.amt-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 30px; font-weight: 700; }
.note-input { height: 40px; border: 1px solid var(--c-border-1); border-radius: 8px; padding: 0 12px; }

/* top up */
.tu-hero { margin-top: -34px; padding: 34px 0 22px; background: var(--g-brand); color: #fff; }
.tu-op { padding: 4px 18px 0; font-size: 12px; opacity: .9; }
.tu-phone { display: flex; align-items: center; gap: 8px; margin: 4px 18px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.tu-phone input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 22px; }
.tu-phone input::placeholder { color: rgba(255, 255, 255, .7); }
.tu-body { margin-top: -12px; }
.tu-sel { color: var(--c-primary); font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.tu-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.tu-chip { height: 56px; border-radius: 8px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 14px; }
.tu-chip b { font-size: 20px; }
.tu-custom { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tu-custom[hidden] { display: none; }
.tag-tab { display: inline-block; background: var(--c-primary); color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 6px; }
.pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.pkg { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 8px; border: 1px solid var(--c-border-1); background: #fff; font-size: 12px; text-align: start; }
.pkg b { color: var(--c-primary); font-size: 18px; }
.hot { position: absolute; top: 8px; inset-inline-end: 8px; background: var(--c-red); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; }

/* cash-in request + QR */
.req-card { display: flex; flex-direction: column; gap: 12px; }
.req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.req-chip { height: 40px; border-radius: 6px; border: 1px solid var(--c-border-1); background: #fff; color: var(--c-primary); font-size: 13px; }
.req-chip.on { background: var(--c-primary-soft); border-color: var(--c-primary); }
.qr-page { flex: 1; margin-top: -34px; padding: 34px 0 20px; background: var(--g-brand); }
.qr-card2 { margin: 8px 16px; background: #fff; border-radius: 10px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.qr-card2 p { font-size: 14px; line-height: 1.5; }

/* cards tab */
.cards-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 6px; }
.cards-date { font-size: 11px; color: var(--c-text-secondary); letter-spacing: .5px; }
.cards-hi { font-size: 24px; font-weight: 700; margin-top: 4px; }
.cards-top .avatar { background: var(--c-border-2); color: #fff; }
.grid-3.card .tile-icon { background: none; }
.bind-card { height: 130px; border-radius: 12px; background: var(--g-brand); color: #fff; font-size: 17px; font-weight: 600; position: relative; overflow: hidden; }
.bind-card::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .18); inset-inline-start: 20px; top: -10px; }
.bind-card span { position: relative; }

/* bank link */
.search-in { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 19px; background: var(--c-bg-floating); color: var(--c-text-secondary); }
.search-in input { flex: 1; border: 0; outline: 0; background: transparent; }
.bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; padding: 6px 0 20px; }
.bank-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-general); }
.bank-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg-floating); color: var(--c-primary); display: grid; place-items: center; }
.section-head.sm { font-size: 14px; }
.info-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 12px; display: grid; place-items: center; }
.bv-hero { margin-top: -34px; padding: 34px 0 36px; background: var(--g-brand); display: flex; flex-direction: column; align-items: center; }
.bv-hero .topbar { align-self: stretch; }
.bv-logo { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--c-primary); display: grid; place-items: center; margin-top: 4px; }
.bv-body { background: #fff; }
.bv-name { text-align: center; font-weight: 600; }
.countdown { color: var(--c-primary); font-size: 12px; }