:root {
    /* 全局主题变量：统一控制背景、文字、强调色与告警色 */
    --bg-a: #f4eee6;
    --bg-b: #d8e5f4;
    --ink-1: #102331;
    --ink-2: #445d6f;
    --surface: #ffffff;
    --surface-soft: #f6f9fc;
    --line: #d6e1eb;
    --accent: #1d4f7a;
    --accent-soft: #e9f2fb;
    --danger: #b91c1c;
    --danger-bg: #fee2e2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
}

body {
    /* 双层背景：径向高光 + 线性渐变，提升层次感 */
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.78), transparent 64%),
        linear-gradient(160deg, var(--bg-a), var(--bg-b));
    color: var(--ink-1);
    font-family: "Trebuchet MS", "Noto Sans", "Segoe UI", sans-serif;
    line-height: 1.4;
    overflow-x: hidden;
}

.header {
    /* 顶部固定提醒条，始终可见 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-size: 14px;
    color: #4f5f6d;
    background: #ffe7c2;
    border-bottom: 1px solid rgba(80, 54, 11, 0.1);
    box-shadow: 0 8px 24px rgba(95, 76, 40, 0.12);
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
}

.page-wrap {
    /* 页面主容器，预留顶部固定条空间 */
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 74px) 14px 24px;
}

.cashier-card {
    /* 核心卡片：玻璃质感 + 入场动画 */
    width: 100%;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.93));
    border: 1px solid rgba(175, 194, 209, 0.7);
    box-shadow: 0 22px 48px rgba(16, 35, 49, 0.18);
    padding: 20px 14px 16px;
    backdrop-filter: blur(4px);
    animation: card-in 420ms ease-out;
}

.cashier-card h1 {
    font-size: 28px;
    font-weight: 700;
    color: #143247;
    letter-spacing: 0.2px;
    margin-bottom: 14px;
    padding-left: 8px;
}

.info-section {
    /* 收款信息分区 */
    background: var(--surface-soft);
    border: 1px solid #e3ebf2;
    border-radius: 24px;
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.info-item {
    margin-bottom: 12px;
}

.info-item:last-of-type {
    margin-bottom: 8px;
}

.info-label {
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}

.value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-value {
    /* 关键值显示：突出可读性 */
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 4px 12px rgba(18, 46, 66, 0.05);
    color: #0f2436;
    font-size: 20px;
    font-weight: 700;
    word-break: break-word;
}

.copy-btn {
    /* 复制按钮：兼顾触摸反馈与键盘可访问性 */
    width: 46px;
    height: 40px;
    border: 1px solid #bccddd;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f2f7fb);
    color: #153c59;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(10, 34, 52, 0.08);
    transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.copy-btn:hover {
    border-color: #98b5cc;
}

.copy-btn:focus-visible {
    outline: 3px solid #8bb8df;
    outline-offset: 1px;
}

.copy-btn.is-pressed,
.copy-btn:active {
    /* 按下态：提供明确触觉反馈 */
    transform: translateY(1px) scale(0.97);
    background: #e7f1fa;
}

.bank-row,
.countdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bank-row {
    /* 银行信息与上方区块用虚线分隔 */
    border-top: 1px dashed #c8d6e2;
    margin-top: 10px;
    padding-top: 10px;
}

.bank-label,
.countdown-hint {
    color: var(--ink-2);
    font-size: 13px;
}

.bank-name,
.countdown-row .countdown-timer {
    background: var(--accent-soft);
    border: 1px solid #bfd3e4;
    border-radius: 8px;
    color: #133853;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 8px;
    white-space: nowrap;
}

.countdown-row {
    margin-top: 8px;
}

.countdown-row .countdown-timer.warning {
    /* 倒计时告警态 */
    color: var(--danger);
    border-color: #fecaca;
    background: var(--danger-bg);
}

.qr-section {
    /* 扫码支付区 */
    margin-top: 14px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid #dfe8f2;
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(10, 41, 64, 0.08);
    padding: 12px;
}

.qr-title {
    color: #0f3856;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.qr-wrapper {
    /* 二维码容器：固定最小高度，避免加载抖动 */
    border-radius: 20px;
    border: 1px solid #d8e5f1;
    background: #fcfeff;
    padding: 12px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

#qrCanvas {
    width: 180px;
    height: 180px;
    max-width: 100%;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e9f0;
    box-shadow: 0 6px 16px rgba(17, 42, 60, 0.08);
    padding: 8px;
}

.qr-hint {
    margin-top: 10px;
    color: #2f4a5e;
    font-size: 12px;
    font-weight: 600;
}

.qr-fallback {
    /* 二维码失败提示条（由 JS 动态插入） */
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.toast-message {
    /* 顶部轻提示，默认不可见，通过 .show 控制显隐 */
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    z-index: 1200;
    transform: translate(-50%, -12px);
    opacity: 0;
    pointer-events: none;
    background: #1c3042;
    color: #fff;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 30px rgba(9, 21, 31, 0.35);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    max-width: calc(100% - 28px);
    min-width: 180px;
    padding: 10px 16px;
    transition: transform 180ms ease, opacity 180ms ease;
}

.toast-message.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes card-in {
    /* 首屏卡片入场动画 */
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 360px) {
    /* 小屏优化：标题/数字缩小，倒计时改为纵向 */
    .cashier-card h1 {
        font-size: 24px;
    }

    .main-value {
        font-size: 18px;
    }

    .countdown-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 640px) {
    /* 大屏优化：增加左右留白与卡片内边距 */
    .page-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cashier-card {
        padding: 24px 20px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 尊重系统“减少动态效果”设置 */
    .cashier-card,
    .copy-btn,
    .toast-message {
        animation: none;
        transition: none;
    }
}