/* iPad app 外壳 —— 尺寸与颜色取自 origin/main：lib/theme/tokens.ts（iPad.* / colors）、
 * checkout-design-tokens.ts（CK_*）、front-desk/TopBar.tsx、Sidebar.tsx、CockpitShell.tsx 的 StyleSheet。
 * 屏幕 1194×834 按 1:1 画；所有类名 ip- 前缀。 */
.kt-stage {
  --ip-teal: #3DCAB1; --ip-teal-dark: #2BBF9E; --ip-teal-ink: #0F766E; --ip-teal-tint: #3DCAB114;
  --ip-text: #24252C; --ip-muted: #91929E; --ip-label: #9CA3AF; --ip-name: #0A1629;
  --ip-border: #E5E7EB; --ip-field: #F9FAFB; --ip-bg: #F5F4F1; --ip-line: #D1D0CD;
  --ip-ok: #10B981; --ip-warn: #F97316; --ip-danger: #DC2626;
}

/* ---------- 机身 ---------- */
.ip-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #EEF3F2, #DDE6E4); }
.ip-dev { position: absolute; left: 101px; top: 11px; width: 1238px; height: 878px; border-radius: 46px; background: #1D1F22; box-shadow: 0 18px 50px rgba(15, 30, 40, .28), inset 0 0 0 2px #3A3D42; }
.ip-cam { position: absolute; left: 50%; top: 9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0B0C0E; box-shadow: inset 0 0 0 1px #2A2D33; }
.ip-scr { position: absolute; left: 22px; top: 22px; width: 1194px; height: 834px; border-radius: 22px; overflow: hidden; background: #FFFFFF; color: var(--ip-text); font-size: 14px; }
.ip-scr .lu { flex: none; }

/* ---------- cockpit ---------- */
.ip-ck { position: absolute; inset: 0; display: flex; flex-direction: column; background: #F9FAFB; }
.ip-ck-body { flex: 1; min-height: 0; display: flex; }
.ip-main { flex: 1; min-width: 0; position: relative; overflow: hidden; background: #F9FAFB; }
.ip-right { width: 360px; flex: none; position: relative; animation: ip-slide .22s ease; }
@keyframes ip-slide { from { width: 0; opacity: .4; } }

/* TopBar（height 52, paddingH 20, 底边 #e5e7eb） */
.ip-tb { height: 52px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #E5E7EB; background: #fff; }
.ip-tb-l, .ip-tb-r { flex: 1; display: flex; align-items: center; gap: 8px; }
.ip-tb-r { justify-content: flex-end; }
.ip-store { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E5E7EB; border-radius: 999px; padding: 6px 12px; }
.ip-store i { width: 28px; height: 28px; border-radius: 50%; background: var(--ip-teal); }
.ip-store b { font-size: 15px; font-weight: 700; color: var(--ip-text); }
.ip-store .sep { font-size: 15px; color: #D1D5DB; } .ip-store small { font-size: 13px; color: #9CA3AF; }
.ip-tb-c { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6B7280; }
.ip-cal { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E5E7EB; display: inline-flex; align-items: center; justify-content: center; color: #6B7280; }
.ip-tb-msg { position: relative; width: 44px; height: 36px; border-radius: 10px; background: #F3F4F6; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }
.ip-tb-msg em { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; background: #DC2626; color: #fff; font: 700 11px/18px Inter, sans-serif; font-style: normal; text-align: center; }
.ip-gear { width: 36px; height: 36px; border-radius: 18px; background: #F3F4F6; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }
.ip-ava { display: inline-flex; align-items: center; gap: 8px; }
.ip-ava i { width: 30px; height: 30px; border-radius: 15px; background: #E0F2FE; color: var(--ip-teal); display: inline-flex; align-items: center; justify-content: center; }
.ip-ava b { font-size: 13px; font-weight: 600; color: var(--ip-text); }

/* Sidebar（width 240, paddingH 14, paddingTop 16） */
.ip-side { width: 240px; flex: none; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #E5E7EB; padding: 16px 14px 10px; }
.ip-side-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ip-search { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: #F3F4F6; color: #9CA3AF; font-size: 13px; }
.ip-gl { font-size: 10px; font-weight: 600; color: #9CA3AF; letter-spacing: 1px; margin-top: 4px; }
.ip-split { display: flex; gap: 10px; }
.ip-hero { flex: 1; height: 72px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #F0FDF9; border: 1px solid #3DCAB166; color: var(--ip-teal); }
.ip-hero b { font-size: 13px; font-weight: 700; color: var(--ip-teal-ink); }
.ip-hero.solid { background: var(--ip-teal); border-color: var(--ip-teal); color: #fff; }
.ip-hero.solid b { color: #fff; }
.ip-prim { display: flex; flex-direction: column; gap: 10px; }
.ip-pb { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 12px; background: #F0FDF9; border: 1px solid #3DCAB133; color: var(--ip-teal); }
.ip-pb.on { background: #3DCAB122; border: 2px solid var(--ip-teal); color: var(--ip-teal-ink); padding: 0 13px; }
.ip-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ip-pt b { font-size: 13px; font-weight: 600; color: var(--ip-text); }
.ip-pb.on .ip-pt b { color: var(--ip-teal-ink); }
.ip-pt small { font-size: 11px; color: #9CA3AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #EF4444; color: #fff; font: 700 11px/22px Inter, sans-serif; font-style: normal; text-align: center; flex: none; }
.ip-div { height: 1px; background: #F3F4F6; margin: 4px 0; }
.ip-sec { display: flex; flex-direction: column; gap: 4px; }
.ip-sb { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 8px; color: #6B7280; font-size: 14px; }
.ip-sb span { flex: 1; color: #374151; }
.ip-sb.on { background: #3DCAB115; color: var(--ip-teal); }
.ip-sb.on span { color: var(--ip-teal-ink); font-weight: 600; }
.ip-side-foot { padding-top: 4px; }
.ip-rd { display: block; padding: 6px 10px; border-radius: 8px; background: #F3F4F6; font-size: 12px; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-rd i { font-style: normal; color: #9CA3AF; } .ip-rd i.on { color: #22C55E; } .ip-rd small { color: #6B7280; font-size: 12px; }

/* 弹窗：RN Modal backdrop rgba(15,23,42,.35)，卡片圆角 20 */
.ip-mask { position: absolute; inset: 0; z-index: 40; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; animation: kt-fade .2s ease; }
.ip-modal { background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 40px rgba(15, 23, 42, .18); animation: ip-pop .22s ease; }
@keyframes ip-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }

/* 屏内提示条 */
.ip-toast { position: absolute; left: 50%; top: 18px; z-index: 60; translate: -50% 0; max-width: 620px; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 6px 18px rgba(15, 23, 42, .14); animation: kt-toast .3s ease; }
.ip-toast.ok { background: #ECFBF6; border: 1px solid #BDEBDD; color: #0F766E; }
.ip-toast.err { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.ip-toast.warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }