/* 移动端（咖啡厅扫码流程）布局 —— 375×812 基准，最大宽 480 居中 */
body.m-body { background: var(--tk-bg-canvas); font-size: var(--tk-font-size-md); }
.m-screen { max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--tk-bg-surface); }
.m-top { display: flex; align-items: center; gap: var(--tk-space-2); height: 52px; padding: 0 var(--tk-space-2) 0 var(--tk-space-4); }
.m-top__brand { display: flex; align-items: center; gap: var(--tk-space-2); font-weight: var(--tk-font-weight-semibold); font-size: var(--tk-font-size-md); color: var(--tk-text-primary); }
.m-top__brand img { width: 28px; height: 28px; }
.m-top__co { font-weight: var(--tk-font-weight-regular); color: var(--tk-text-secondary); font-size: var(--tk-font-size-xs); }
.m-top__title { flex: 1; text-align: center; font-weight: var(--tk-font-weight-semibold); font-size: var(--tk-font-size-md); }
.m-top .tk-btn { --_h: var(--tk-size-touch-min); }
.m-top--nav { padding: 0 var(--tk-space-1); }
.m-spacer { flex: 1; }
.m-main { flex: 1; padding: var(--tk-space-2) var(--tk-space-5) var(--tk-space-6); display: flex; flex-direction: column; gap: var(--tk-space-5); }
.m-progress { padding: 0 var(--tk-space-5); display: flex; flex-direction: column; gap: var(--tk-space-2); }
.m-progress__label { font-size: var(--tk-font-size-xs); color: var(--tk-text-secondary); display: flex; justify-content: space-between; }
.m-title { font-size: var(--tk-font-size-2xl); line-height: var(--tk-font-line-height-tight); font-weight: var(--tk-font-weight-semibold); }
.m-sub { color: var(--tk-text-secondary); font-size: var(--tk-font-size-sm); margin-top: var(--tk-space-2); line-height: var(--tk-font-line-height-relaxed); }
.m-footer { position: sticky; bottom: 0; padding: var(--tk-space-3) var(--tk-space-5) calc(var(--tk-space-4) + env(safe-area-inset-bottom)); background: var(--tk-bg-surface); display: flex; flex-direction: column; gap: var(--tk-space-2); box-shadow: 0 -1px 0 var(--tk-border-default); }
.m-footer--flat { box-shadow: none; }
.m-footer .tk-btn--lg { --_h: 52px; }
.m-legal { font-size: var(--tk-font-size-xs); color: var(--tk-text-tertiary); text-align: center; line-height: 1.6; }
.m-legal a { color: var(--tk-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.m-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--tk-space-4); min-height: 44px; border-bottom: 1px solid var(--tk-border-default); font-size: var(--tk-font-size-sm); }
.m-list li:last-child { border-bottom: 0; }
.m-list dt, .m-list .k { color: var(--tk-text-secondary); }
.m-center { text-align: center; align-items: center; }
.m-hero-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: var(--tk-space-6) auto 0; }
.m-hero-icon .tk-icon { width: 36px; height: 36px; stroke-width: 1.6; }
.m-hero-icon--danger { background: var(--tk-bg-danger-subtle); color: var(--tk-text-danger); }
.m-hero-icon--warning { background: var(--tk-bg-warning-subtle); color: var(--tk-text-warning); }
.m-hero-icon--success { background: var(--tk-bg-success-subtle); color: var(--tk-text-success); }
.m-hero-icon--coffee { background: var(--tk-bg-coffee-subtle); color: var(--tk-text-coffee); }
.m-hero-icon--brand { background: var(--tk-bg-brand-subtle); color: var(--tk-text-brand); }