/* iPad · Fiserv 收款 —— 尺寸与颜色取自 origin/main 各组件的 StyleSheet（见 page.js 文件头）。所有类名 ic- 前缀。 */
.ic-root { position: absolute; inset: 0; }
.ic-root .g { flex: 1; }
.ic-root b { font-weight: 700; }
.ic-root small { font-size: 12px; }

/* ---------- 首页时间轴（简化） ---------- */
.ic-home { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.ic-th { height: 44px; display: grid; grid-template-columns: 64px repeat(3, 1fr); align-items: center; border-bottom: 1px solid #E5E7EB; font-size: 13px; color: #24252C; }
.ic-th b { text-align: center; font-weight: 600; }
.ic-grid { position: relative; flex: 1; overflow: hidden; }
.ic-hr { position: absolute; left: 0; right: 0; height: 128px; border-top: 1px solid #F3F4F6; }
.ic-hr small { position: absolute; left: 12px; top: 4px; font-size: 12px; color: #91929E; }
.ic-now { position: absolute; left: 64px; right: 0; height: 2px; background: #EF4444; z-index: 2; }
.ic-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #EF4444; }
.ic-appt { position: absolute; width: calc((100% - 64px) / 3 - 12px); border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 4px solid var(--c); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ic-appt b { font-size: 14px; color: #0A1629; } .ic-appt small { color: #6B7280; }

/* 结账台右侧面板（CheckoutQueuePanel / CheckoutQueueCard） */
.ic-qp { position: absolute; inset: 0; background: #fff; border-left: 1px solid #E5E7EB; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.ic-qph { display: flex; align-items: center; gap: 8px; }
.ic-qph b { font-size: 16px; color: #24252C; }
.ic-qph em { height: 22px; padding: 0 8px; border-radius: 11px; background: #EF4444; color: #fff; font: 600 11px/22px Inter, sans-serif; font-style: normal; }
.ic-x { width: 28px; height: 28px; border-radius: 6px; background: #F3F4F6; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }
.ic-qsub { color: #9CA3AF; margin-top: -6px; }
.ic-qc { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ic-qh { display: flex; align-items: center; gap: 10px; }
.ic-qh > i { width: 36px; height: 36px; border-radius: 18px; background: #E0F2FE; flex: none; }
.ic-qh > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ic-qh b { font-size: 14px; color: #1C3E60; } .ic-qh small { font-size: 11px; color: #91929E; }
.ic-qh em { height: 22px; padding: 0 8px; border-radius: 6px; font: 600 10px/22px Inter, sans-serif; font-style: normal; }
.ic-qh em.done { background: #22C55E22; color: #15803D; } .ic-qh em.inprog { background: #3DCAB122; color: #0F766E; }
.ic-qf { display: flex; align-items: center; gap: 8px; }
.ic-qf > b { font-size: 18px; color: #0A1629; }
.ic-qpay, .ic-qdone { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.ic-qpay { background: #3DCAB1; color: #fff; } .ic-qdone { background: #22C55E22; color: #15803D; }

/* ---------- 结账页 ---------- */
.ic-co { position: absolute; inset: 0; display: flex; flex-direction: column; background: #F5F4F1; }
.ic-cotb { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: #fff; border-bottom: 1px solid #D1D0CD; }
.ic-ib { width: 36px; height: 36px; border-radius: 8px; background: #F5F4F1; color: #6D6C6A; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ic-ib.gray { background: #F3F4F6; } .ic-ib.sm { width: 32px; height: 32px; border-radius: 10px; }
.ic-cname { font-size: 18px; color: #0A1629; }
.ic-pkgbtn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #3DCAB1; color: #3DCAB1; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; background: #fff; }
.ic-cobody { flex: 1; min-height: 0; display: flex; }
.ic-left { flex: 2; background: #fff; border-right: 1px solid #D1D0CD; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ic-bh { display: flex; align-items: center; justify-content: space-between; }
.ic-bh b { font-size: 18px; color: #24252C; } .ic-bh span { display: flex; gap: 10px; align-items: center; }
.ic-bh small { color: #91929E; } .ic-bh em { font-style: normal; font-size: 12px; font-weight: 700; color: #3DCAB1; }
.ic-svc { border: 1px solid #3DCAB1; border-radius: 18px; padding: 21px; display: flex; flex-direction: column; gap: 12px; }
.ic-svtop { display: flex; align-items: center; gap: 10px; }
.ic-ck { width: 29px; height: 29px; border-radius: 5px; background: #3DCAB1; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ic-bar { width: 5px; align-self: stretch; min-height: 29px; border-radius: 2px; background: #7C6BC9; flex: none; }
.ic-svi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ic-svi b { font-size: 18px; font-weight: 600; color: #24252C; } .ic-svi small { font-size: 14px; color: #91929E; }
.ic-svp b { font-size: 21px; color: #24252C; }
.ic-chips { display: flex; gap: 8px; padding-left: 34px; }
.ic-pkgpill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #3DCAB110; border: 1px solid #3DCAB1; color: #3DCAB1; font-size: 13px; font-weight: 600; }
.ic-addon { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 8px; background: #F3F4F6; color: #91929E; font-size: 13px; }
.ic-right { flex: 3; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.ic-hero { background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; align-items: center; }
.ic-hero small { font-size: 13px; color: #91929E; } .ic-hero b { font-size: 52px; line-height: 60px; color: #24252C; letter-spacing: -1px; }
.ic-applied { display: flex; align-items: center; gap: 12px; }
.ic-applied small { flex: 1; font-size: 13px; color: #91929E; }
.ic-applied span { border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #24252C; }
.ic-tip { display: flex; flex-direction: column; gap: 8px; }
.ic-tiph { display: flex; align-items: baseline; justify-content: space-between; } .ic-tiph b { font-size: 15px; color: #24252C; } .ic-tiph small { font-size: 11px; color: #91929E; }
.ic-tiprow { display: flex; gap: 10px; }
.ic-tc { flex: 1; min-width: 0; min-height: 68px; border-radius: 14px; border: 1px solid #E5E7EB; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ic-tc.on { border-color: #3DCAB1; background: #3DCAB114; }
.ic-tc b { font-size: 14px; color: #24252C; } .ic-tc.on b { color: #3DCAB1; }
.ic-tc small { font-size: 11px; color: #91929E; }
.ic-tch { display: flex; align-items: center; gap: 8px; } .ic-tch b { flex: 1; }
.ic-tin { height: 32px; min-width: 78px; display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; border-radius: 10px; border: 1px solid #E5E7EB; background: #F9FAFB; font-size: 13px; color: #91929E; }
.ic-tin i { flex: 1; text-align: right; font-style: normal; font-weight: 700; color: #B9BCC4; }
.ic-tender { display: flex; flex-direction: column; gap: 10px; }
.ic-sec { font-size: 15px; color: #24252C; }
.ic-tiles { display: flex; gap: 10px; }
.ic-tile { flex: 1; height: 116px; border-radius: 16px; border: 1px solid #E5E7EB; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #24252C; }
.ic-tile b { font-size: 18px; } .ic-tile small { color: #91929E; }
.ic-row { height: 50px; border-radius: 14px; border: 1px solid #E5E7EB; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #24252C; }
.ic-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ic-row b { font-size: 14px; } .ic-row small { font-size: 11px; color: #91929E; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-row > .lu:last-child { color: #91929E; }
.ic-lock { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 20; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 14px; line-height: 1.5; animation: kt-toast .3s ease; }

/* 弹窗内容（CheckoutCardSheet / CashCollectSheet / CheckoutSplitSheet） */
.ic-mt { font-size: 20px; color: #24252C; }
.ic-mh { font-size: 12px; color: #91929E; margin-bottom: 4px; line-height: 1.5; }
.ic-rdr { display: flex; align-items: center; gap: 12px; border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px; }
.ic-rdr.on { border-color: #3DCAB1; background: #3DCAB114; }
.ic-rdr > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ic-rdr b { font-size: 14px; color: #24252C; } .ic-rdr small { font-size: 11px; color: #91929E; }
.ic-radio { width: 18px; height: 18px; border-radius: 9px; border: 2px solid #E5E7EB; flex: none; }
.ic-rdr.on .ic-radio { border-color: #3DCAB1; background: #3DCAB1; box-shadow: inset 0 0 0 3px #fff; }
.ic-cnp { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: #3DCAB1; font-size: 13px; font-weight: 600; }
.ic-save { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px; }
.ic-save.on { border-color: #3DCAB1; }
.ic-save > div { display: flex; flex-direction: column; gap: 2px; } .ic-save b { font-size: 14px; color: #24252C; } .ic-save small { font-size: 11px; color: #91929E; }
.ic-cb { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #E5E7EB; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; color: #fff; }
.ic-save.on .ic-cb { border-color: #3DCAB1; background: #3DCAB1; }
.ic-hr1 { display: block; height: 1px; background: #E5E7EB; margin-top: 4px; }
.ic-stt { font-size: 13px; color: #24252C; }
.ic-steps { display: flex; gap: 8px; }
.ic-steps > div { flex: 1; border-radius: 10px; background: #F9FAFB; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ic-steps i { width: 18px; height: 18px; border-radius: 9px; background: #3DCAB1; color: #fff; font: 700 11px/18px Inter, sans-serif; font-style: normal; text-align: center; }
.ic-steps b { font-size: 12px; color: #24252C; } .ic-steps small { font-size: 10px; color: #91929E; }
.ic-sum { display: flex; flex-direction: column; gap: 8px; }
.ic-sumc { display: flex; align-items: center; gap: 10px; border: 1px solid #3DCAB1; background: #3DCAB114; border-radius: 12px; padding: 12px; color: #3DCAB1; }
.ic-sumc > div { display: flex; flex-direction: column; } .ic-sumc b { font-size: 15px; } .ic-sumc small { font-size: 11px; color: #91929E; }
.ic-sumr { display: flex; justify-content: space-between; font-size: 13px; color: #91929E; }
.ic-sumr b { color: #24252C; } .ic-sumr.t span, .ic-sumr.t b { font-size: 15px; font-weight: 700; color: #24252C; }
.ic-sum > small { font-size: 10px; color: #91929E; }
.ic-mf { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1px solid #E5E7EB; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #24252C; background: #fff; }
.ic-btn.pri { background: #3DCAB1; border-color: #3DCAB1; color: #fff; font-weight: 700; }
.ic-btn.danger { background: #DC2626; border-color: #DC2626; color: #fff; }
.ic-btn.off { opacity: .4; } .ic-btn.g { flex: 1; } .ic-btn.wide { align-self: stretch; height: 48px; }
.ic-btn.sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.ic-cashrows { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #F9FAFB; }
.ic-cashrows > div { display: flex; justify-content: space-between; font-size: 14px; color: #6B7280; }
.ic-cashrows .t span, .ic-cashrows .t b, .ic-cashrows b { color: #24252C; } .ic-cashrows .t { font-weight: 700; font-size: 16px; }
.ic-sf { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px 14px; }
.ic-sf > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #24252C; }
.ic-sf small { font-size: 11px; color: #91929E; font-weight: 400; margin-left: 4px; }
.ic-inp { min-width: 120px; height: 40px; border-radius: 10px; border: 1px solid #E5E7EB; background: #F9FAFB; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 12px; color: #91929E; }
.ic-inp b { font-size: 16px; color: #24252C; } .ic-inp.f { border-color: #3DCAB1; background: #fff; }
.ic-stot { display: flex; justify-content: space-between; font-size: 14px; color: #24252C; }
.ic-stot .ok { color: #10B981; font-weight: 600; }
.ic-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; }
.ic-wait b { font-size: 17px; color: #24252C; } .ic-wait small { color: #91929E; }
.ic-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #3DCAB133; border-top-color: #3DCAB1; animation: ic-spin 1s linear infinite; flex: none; }
.ic-spin.sm { width: 20px; height: 20px; border-width: 3px; } .ic-spin.big { width: 64px; height: 64px; border-width: 5px; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
.ic-succ { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.ic-succ > b { font-size: 20px; color: #24252C; } .ic-succ > small { font-size: 13px; color: #91929E; }
.ic-succ .ic-sumr { align-self: stretch; font-size: 14px; }
.ic-okc { width: 64px; height: 64px; border-radius: 32px; background: #3DCAB1; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ic-okc.big { width: 88px; height: 88px; border-radius: 44px; }

/* ---------- 顾客屏（英文） ---------- */
.ic-cs { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.ic-ch { height: 140px; flex: none; background: #3DCAB1; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.ic-ch b { font-size: 22px; font-weight: 800; } .ic-ch small { font-size: 13px; opacity: .85; }
.ic-cback { position: absolute; top: 12px; left: 16px; width: 36px; height: 36px; border-radius: 18px; background: #ffffff22; display: inline-flex; align-items: center; justify-content: center; }
.ic-clogo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.ic-clogo i { width: 12px; height: 12px; border-radius: 6px; background: #fff; opacity: .9; }
.ic-cerr { padding: 12px 20px 0; }
.ic-cerr span { display: block; font-size: 13px; color: #B91C1C; background: #FEF2F2; border-radius: 8px; padding: 10px; text-align: center; animation: kt-toast .3s ease; }
.ic-cc { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18px 32px; gap: 14px; }
.ic-csa { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ic-csa small { font-size: 12px; color: #9CA3AF; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
.ic-csa b { font-size: 40px; font-weight: 800; color: #0A1629; letter-spacing: -1px; }
.ic-cask { font-size: 15px; font-weight: 600; color: #0A1629; }
.ic-tgrid { display: flex; gap: 12px; width: 100%; max-width: 720px; }
.ic-tcard { flex: 1; padding: 14px 8px; border-radius: 12px; border: 1px solid #E5E7EB; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; justify-content: center; }
.ic-tcard b { font-size: 20px; color: #0A1629; } .ic-tcard small { font-size: 14px; color: #9CA3AF; }
.ic-tcard.on { border-color: #3DCAB1; background: #3DCAB122; } .ic-tcard.on b, .ic-tcard.on small { color: #3DCAB1; }
.ic-cust { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ic-cust > b { font-size: 22px; font-weight: 600; color: #0A1629; }
.ic-cust span { width: 180px; height: 52px; border: 1px solid #3DCAB1; border-radius: 10px; padding: 0 16px; font-size: 20px; color: #0A1629; display: flex; align-items: center; }
.ic-caret { display: inline-block; width: 2px; height: 24px; background: #3DCAB1; margin-left: 2px; animation: ic-blink 1s steps(1) infinite; }
@keyframes ic-blink { 50% { opacity: 0; } }
.ic-ctot { display: flex; justify-content: space-between; width: 100%; max-width: 400px; border-top: 1px solid #F3F4F6; padding-top: 16px; margin-top: 4px; }
.ic-ctot span { font-size: 16px; font-weight: 600; color: #0A1629; } .ic-ctot b { font-size: 20px; font-weight: 800; color: #3DCAB1; }
.ic-cfoot { display: flex; gap: 12px; padding: 20px; border-top: 1px solid #E5E7EB; }
.ic-ghost { flex: 1; height: 48px; border-radius: 10px; border: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #9CA3AF; }
.ic-ghost.w { flex: none; width: 200px; height: 54px; border-radius: 16px; border-color: #D1D0CD; }
.ic-cpri { flex: 2; height: 48px; border-radius: 10px; background: #3DCAB1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.ic-cpri.sm { flex: none; width: 240px; height: 52px; border-radius: 14px; font-size: 16px; }
.ic-cp { position: absolute; inset: 0; background: #F3F4F6; display: flex; flex-direction: column; align-items: center; }
.ic-cph { width: 100%; height: 200px; flex: none; background: linear-gradient(#2BBF9E59, #2BBF9E59), #3DCAB1; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ic-cph small { color: #ffffffcc; font-size: 13px; font-weight: 600; letter-spacing: .4px; } .ic-cph b { font-size: 22px; }
.ic-cpp { width: 680px; background: #fff; border-radius: 20px; margin-top: -28px; padding: 32px 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.ic-ring { width: 180px; height: 180px; border-radius: 90px; background: #3DCAB11A; display: flex; align-items: center; justify-content: center; animation: ic-pulse 1.6s ease-in-out infinite; }
.ic-ring > div { width: 128px; height: 128px; border-radius: 64px; background: #3DCAB140; display: flex; align-items: center; justify-content: center; }
.ic-ring > div > div { width: 64px; height: 64px; border-radius: 32px; background: #3DCAB1; color: #fff; display: flex; align-items: center; justify-content: center; }
@keyframes ic-pulse { 50% { transform: scale(1.05); } }
.ic-cpa { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ic-cpa small { font-size: 12px; color: #9CA3AF; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; } .ic-cpa b { font-size: 54px; line-height: 64px; color: #0A1629; }
.ic-cpi { font-size: 16px; font-weight: 600; color: #0A1629; } .ic-cps { font-size: 13px; color: #6B7280; }
.ic-rpill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #F9FAFB; border: 1px solid #E5E7EB; }
.ic-rpill i { width: 14px; height: 14px; border-radius: 3px; background: #3DCAB1; } .ic-rpill b { font-size: 13px; font-weight: 600; color: #0A1629; }
.ic-rpill em { width: 7px; height: 7px; border-radius: 4px; background: #22C55E; } .ic-rpill small { color: #16A34A; font-weight: 500; }
.ic-cpc { margin-top: 6px; padding: 12px 28px; border-radius: 12px; border: 1px solid #E5E7EB; font-size: 14px; color: #4B5563; font-weight: 500; }
.ic-sg { position: absolute; inset: 0; display: flex; flex-direction: column; background: #F5F4F1; }
.ic-sgh { height: 96px; flex: none; background: #3DCAB1; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ic-sgh b { font-size: 20px; font-weight: 800; } .ic-sgh small { font-size: 13px; color: rgba(255, 255, 255, .75); font-weight: 500; }
.ic-sgb { flex: 1; min-height: 0; display: flex; gap: 20px; padding: 24px 32px; }
.ic-sgl { flex: 45; background: #fff; border-radius: 16px; border: 1px solid #F0F0F0; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ic-pt { font-size: 18px; color: #0A1629; }
.ic-bill { background: #F6F7F9; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ic-bill > div { display: flex; justify-content: space-between; font-size: 14px; color: #9CA3AF; } .ic-bill > div b { color: #0A1629; font-weight: 500; }
.ic-bill > i { height: 1px; background: #E5E7EB; }
.ic-bill .t span { font-size: 16px; font-weight: 700; color: #0A1629; } .ic-bill .t b { font-size: 18px; font-weight: 800; color: #3DCAB1; }
.ic-sigbox { flex: 1; min-height: 150px; border-radius: 16px; border: 2px solid #3DCAB1; background: #fff; padding: 12px; display: flex; align-items: center; justify-content: center; }
.ic-sigsvg { width: 100%; height: 100%; }
.ic-email { display: flex; flex-direction: column; gap: 6px; }
.ic-email small { font-size: 13px; color: #9CA3AF; }
.ic-email span { height: 44px; border-radius: 10px; border: 1px solid #E5E7EB; background: #F9FAFB; display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: #0A1629; }
.ic-sgr { flex: 55; background: #fff; border-radius: 16px; border: 1px solid #F0F0F0; padding: 28px; display: flex; flex-direction: column; gap: 20px; align-self: flex-start; }
.ic-rt { font-size: 20px; font-weight: 800; color: #0A1629; } .ic-sgr > small { font-size: 13px; color: #9CA3AF; margin-top: -12px; }
.ic-thc { display: flex; align-items: center; gap: 12px; background: #F6F7F9; border-radius: 16px; padding: 14px; }
.ic-thc i { width: 44px; height: 44px; border-radius: 22px; background: #3DCAB1; color: #fff; font: 700 16px/44px Inter, sans-serif; font-style: normal; text-align: center; }
.ic-thc div { display: flex; flex-direction: column; gap: 2px; } .ic-thc b { font-size: 15px; font-weight: 600; color: #0A1629; } .ic-thc small { color: #9CA3AF; }
.ic-stars { display: flex; gap: 16px; justify-content: center; color: #D1D5DB; }
.ic-stars .on { color: #F59E0B; } .ic-stars .on .lu { fill: #F59E0B; }
.ic-fb { min-height: 80px; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 14px; font-size: 14px; color: #B9BCC4; background: #F9FAFB; }
.ic-sgf { height: 88px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 32px; border-top: 1px solid #E5E7EB; background: #fff; }
.ic-sgf .ic-cpri { height: 54px; border-radius: 16px; font-size: 15px; flex: 1; }
.ic-done { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ic-done > b { font-size: 26px; color: #0A1629; } .ic-done > small { font-size: 16px; color: #6B7280; }
.ic-cof { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; }
.ic-cofh { flex: none; background: #3DCAB1; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 24px; gap: 10px; }
.ic-cofh > b { font-size: 24px; font-weight: 800; }
.ic-cofcard { display: flex; align-items: center; gap: 10px; } .ic-cofcard em { font-style: normal; background: #ffffff33; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .6px; }
.ic-cofcard b { font-size: 15px; font-weight: 600; }
.ic-cofp { flex: 1; width: 100%; max-width: 720px; align-self: center; padding: 28px 40px; display: flex; flex-direction: column; gap: 14px; }
.ic-cofb { margin: 0; font-size: 18px; line-height: 27px; color: #0A1629; }
.ic-cofp > small { font-size: 14px; line-height: 21px; color: #9CA3AF; }
.ic-coft { display: flex; justify-content: space-between; align-items: center; } .ic-coft b:first-child { font-size: 22px; font-weight: 800; color: #0A1629; } .ic-coft b:last-child { font-size: 26px; font-weight: 800; color: #0A1629; }
.ic-cofl { display: flex; justify-content: space-between; font-size: 17px; color: #9CA3AF; } .ic-cofl b { color: #0A1629; }
.ic-cofa { height: 56px; border-radius: 12px; background: #3DCAB1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex: none; }
.ic-cofd { text-align: center; padding: 10px 0; font-size: 16px; color: #0A1629; }

/* ---------- 前台后续屏（StaffFollowUpScreen / FiservPrintRow） ---------- */
.ic-fu { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px 40px; }
.ic-fue { font-size: 15px; font-weight: 600; color: #3D8A5A; margin-top: 4px; }
.ic-fun { font-size: 28px; font-weight: 800; color: #1A1918; margin-top: -8px; }
.ic-fus { font-size: 15px; color: #6D6C6A; max-width: 460px; text-align: center; line-height: 22px; }
.ic-cofn { width: 560px; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #ECFBF6; border: 1px solid #BDEBDD; color: #0F766E; font-size: 13px; font-weight: 500; animation: kt-toast .3s ease; }
.ic-pr { width: 560px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #F8FAFB; border: 1px solid #E5E4E1; color: #6D6C6A; }
.ic-pr > b { flex: 1; font-size: 13px; font-weight: 600; color: #1A1918; }
.ic-prb { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 10px; border: 1px solid #3DCAB1; background: #fff; color: #0F9B7D; font-size: 14px; font-weight: 600; }
.ic-prb.off { background: #F3F4F6; border-color: #E5E4E1; color: #9C9B99; }
.ic-fusec { width: 560px; display: flex; flex-direction: column; gap: 12px; }
.ic-fush { display: flex; justify-content: space-between; align-items: center; } .ic-fush b { font-size: 16px; color: #1A1918; } .ic-fush small { font-size: 13px; color: #9C9B99; }
.ic-fuempty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 0; border-radius: 14px; background: #F8FAFB; border: 1px solid #E5E4E1; color: #9C9B99; font-size: 14px; }
.ic-fub { width: 560px; display: flex; flex-direction: column; gap: 12px; }
.ic-fbp { height: 54px; border-radius: 16px; background: #3DCAB1; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; }
.ic-fbs { height: 54px; border-radius: 16px; border: 1px solid #D1D0CD; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #6D6C6A; }

/* ---------- 顾客档案 / 买套餐 ---------- */
.ic-cu { position: absolute; inset: 0; background: #F9FAFB; display: flex; flex-direction: column; }
.ic-cuh { display: flex; align-items: center; gap: 14px; padding: 22px 28px 16px; background: #fff; }
.ic-cuh i { width: 52px; height: 52px; border-radius: 26px; background: #E7F7EF; color: #0F766E; font: 700 18px/52px Inter, sans-serif; font-style: normal; text-align: center; }
.ic-cuh div { display: flex; flex-direction: column; gap: 4px; } .ic-cuh b { font-size: 20px; color: #0A1629; } .ic-cuh small { font-size: 13px; color: #6B7280; }
.ic-tabs { display: flex; gap: 22px; padding: 0 28px; background: #fff; border-bottom: 1px solid #E5E7EB; }
.ic-tabs span { padding: 12px 0; font-size: 14px; color: #6B7280; border-bottom: 2px solid transparent; }
.ic-tabs span.on { color: #0F766E; font-weight: 600; border-bottom-color: #3DCAB1; }
.ic-pk { padding: 20px 28px; display: flex; flex-direction: column; gap: 14px; }
.ic-pkh { display: flex; }
.ic-pkempty { padding: 40px 0; text-align: center; color: #9CA3AF; font-size: 14px; background: #fff; border-radius: 14px; border: 1px solid #E5E7EB; }
.ic-pkc { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: 14px; border: 1px solid #3DCAB1; animation: kt-toast .35s ease; }
.ic-pkc > div { flex: 1; display: flex; flex-direction: column; gap: 4px; } .ic-pkc b { font-size: 15px; color: #0A1629; } .ic-pkc small { font-size: 13px; color: #6B7280; }
.ic-pkc em { font-style: normal; font-size: 12px; font-weight: 600; color: #15803D; background: #22C55E22; border-radius: 6px; padding: 3px 8px; }
.ic-pmh { display: flex; align-items: center; gap: 12px; } .ic-pmh b { flex: 1; font-size: 18px; color: #0A1629; }
.ic-pmr { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 12px; }
.ic-pmr .g { display: flex; flex-direction: column; gap: 3px; } .ic-pmr .g b { font-size: 14px; font-weight: 600; color: #0A1629; } .ic-pmr .g small { font-size: 11px; color: #6B7280; }
.ic-cb2 { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid #D1D5DB; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.ic-cb2.on { background: #3DCAB1; border-color: #3DCAB1; }
.ic-dot { width: 6px; height: 36px; border-radius: 3px; background: #7C6BC9; flex: none; }
.ic-pmu { min-width: 90px; display: flex; flex-direction: column; align-items: flex-end; } .ic-pmu small { font-size: 10px; color: #9CA3AF; } .ic-pmu b { font-size: 13px; color: #FE964A; } .ic-pmu b.k { font-size: 15px; color: #0A1629; }
.ic-pmt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #0A1629; } .ic-pmt small { color: #6B7280; } .ic-pmt b { font-size: 22px; color: #FE964A; }
.ic-gp { display: flex; flex-direction: column; gap: 10px; }
.ic-gpt { font-size: 17px; color: #0A1629; } .ic-gp > small { color: #6B7280; font-size: 13px; }
.ic-gpi { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #F9FAFB; }
.ic-gpi div { display: flex; justify-content: space-between; font-size: 14px; color: #24252C; }
.ic-gpi.t { flex-direction: row; justify-content: space-between; font-size: 16px; font-weight: 700; color: #24252C; background: none; padding: 4px 12px; }
.ic-pchips { display: flex; gap: 10px; }
.ic-pchip { padding: 10px 22px; border-radius: 10px; border: 1px solid #E5E7EB; font-size: 14px; font-weight: 600; color: #24252C; }
.ic-pchip.on { border-color: #3DCAB1; background: #3DCAB114; color: #0F766E; }
.ic-dyn { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid #E5E7EB; color: #3DCAB1; }
.ic-dyn div { flex: 1; display: flex; flex-direction: column; } .ic-dyn b { font-size: 14px; color: #24252C; } .ic-dyn small { font-size: 11px; color: #10B981; }
.ic-dyn > span { font-size: 13px; font-weight: 600; color: #3DCAB1; }
.ic-gwait { height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; background: #F3F4F6; font-size: 15px; color: #24252C; }

/* ---------- 交易记录 / 订单 / 退款 ---------- */
.ic-tx, .ic-od { position: absolute; inset: 0; background: #F9FAFB; display: flex; flex-direction: column; }
.ic-txh, .ic-odh { height: 76px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 28px; background: #fff; border-bottom: 1px solid #E5E7EB; }
.ic-txh > div:first-child { display: flex; flex-direction: column; gap: 4px; } .ic-txh b { font-size: 22px; color: #24252C; } .ic-txh small { color: #9CA3AF; }
.ic-ob { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 8px; border: 1px solid #E5E7EB; background: #fff; font-size: 13px; font-weight: 500; color: #6B7280; }
.ic-ob.sq { width: 40px; height: 40px; padding: 0; justify-content: center; }
.ic-txs { height: 36px; width: 200px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; background: #F3F4F6; font-size: 13px; color: #9CA3AF; }
.ic-stats { display: flex; gap: 12px; padding: 16px 28px 0; }
.ic-stc { flex: 1; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ic-stc small { color: #6B7280; } .ic-stc b { font-size: 19px; color: #24252C; } .ic-stc span { font-size: 11px; color: #9CA3AF; }
.ic-fchips { display: flex; gap: 8px; padding: 14px 28px 10px; }
.ic-fchips span { padding: 6px 14px; border-radius: 999px; border: 1px solid #E5E7EB; background: #fff; font-size: 12px; color: #6B7280; }
.ic-fchips span.on { background: #24252C; border-color: #24252C; color: #fff; }
.ic-tbl { margin: 0 28px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.ic-tr { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid #F3F4F6; font-size: 13px; color: #24252C; }
.ic-tr.h { height: 40px; font-size: 12px; color: #9CA3AF; background: #F9FAFB; }
.ic-tr .tm { width: 120px; display: flex; flex-direction: column; } .ic-tr .tm b { font-weight: 500; } .ic-tr .tm small { font-size: 11px; color: #9CA3AF; }
.ic-tr .cu { flex: 1; } .ic-tr .it { width: 180px; font-size: 12px; color: #6B7280; } .ic-tr .pm { width: 70px; font-size: 12px; color: #6B7280; }
.ic-tr .am { width: 90px; text-align: right; font-size: 14px; font-weight: 600; } .ic-tr .st { width: 80px; text-align: right; font-size: 12px; color: #22C55E; }
.ic-tr.h .am, .ic-tr.h .st { font-size: 12px; font-weight: 400; color: #9CA3AF; }
.ic-tr .st.r { color: #EF4444; }
.ic-odh > div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; } .ic-odh small { color: #9CA3AF; }
.ic-odt { display: flex; align-items: center; gap: 10px; } .ic-odt b { font-size: 20px; color: #24252C; }
.ic-odt em { height: 22px; padding: 0 10px; border-radius: 11px; border: 1px solid #BBF7D0; background: #F0FDF4; color: #15803D; display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 Inter, sans-serif; font-style: normal; }
.ic-odt em i { width: 6px; height: 6px; border-radius: 3px; background: #22C55E; }
.ic-odt em.r { border-color: #FECACA; background: #FEF2F2; color: #DC2626; } .ic-odt em.r i { background: #EF4444; }
.ic-rfb { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 8px; background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626; font-size: 13px; font-weight: 600; }
.ic-strip { display: flex; align-items: center; gap: 8px; padding: 10px 28px; background: #ECFBF6; border-bottom: 1px solid #BDEBDD; color: #0F766E; font-size: 13px; animation: kt-fade .25s ease; }
.ic-odb { display: flex; gap: 16px; padding: 20px 28px; }
.ic-odc { flex: 1; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ic-odc > b { font-size: 15px; color: #24252C; }
.ic-odl { display: flex; justify-content: space-between; font-size: 14px; color: #6B7280; } .ic-odl b { color: #24252C; font-weight: 600; }
.ic-odl.t span, .ic-odl.t b { font-size: 16px; font-weight: 700; color: #24252C; }
.ic-rfh { display: flex; align-items: center; color: #9CA3AF; } .ic-rfh b { font-size: 18px; color: #24252C; }
.ic-rfi { padding: 12px; border-radius: 8px; background: #F9FAFB; display: flex; flex-direction: column; gap: 6px; }
.ic-rfi div { display: flex; justify-content: space-between; font-size: 13px; color: #6B7280; } .ic-rfi b { color: #24252C; font-weight: 500; } .ic-rfi b.t { color: #3DCAB1; font-weight: 600; }
.ic-fl { font-size: 13px; font-weight: 500; color: #24252C; }
.ic-rfa { height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid #E5E7EB; background: #F9FAFB; display: flex; align-items: center; gap: 8px; font-size: 15px; color: #6B7280; } .ic-rfa b { color: #24252C; }
.ic-rfn { font-size: 12px; color: #6B7280; line-height: 1.5; }
.ic-rfc { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-rfc span { padding: 7px 12px; border-radius: 8px; border: 1px solid #E5E7EB; font-size: 13px; color: #24252C; }
.ic-rfc span.on { border-color: #3DCAB1; background: #3DCAB114; color: #0F766E; font-weight: 600; }
.ic-rfw { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #FEF2F2; color: #B91C1C; font-size: 12px; line-height: 1.5; }

/* ---------- 读卡器放在机身右下角 ---------- */
.ic-devwrap { position: absolute; right: 26px; bottom: 14px; z-index: 30; transform: scale(.78); transform-origin: 100% 100%; filter: drop-shadow(0 16px 30px rgba(10, 22, 41, .35)); animation: ic-devin .45s ease; }
@keyframes ic-devin { from { transform: scale(.78) translateY(60px); opacity: 0; } }