/* =========================================================================
 * 全站基座样式（浅灰主题 + 响应式 + 可访问性）
 *
 * 设计原则（对应约束）：
 *  1. 只做"覆盖式微调"，不动 layui 原有结构，避免大范围回归；
 *  2. 主题色统一浅灰，主色单一强调色；
 *  3. 所有容器流式宽度，不写死视口宽高；
 *  4. 窄屏下表格自动转卡片（由 ui.js 补 data-label），彻底消除横向滚动；
 *  5. 触控热区 ≥ 44px，文本不溢出、不截断；
 *  6. 尊重 prefers-reduced-motion。
 * ========================================================================= */

:root {
    /* 品牌与中性色（浅灰主题） */
    --ui-bg: #f4f6fa;
    --ui-surface: #ffffff;
    --ui-surface-2: #fafbfd;
    --ui-line: #e5e8ef;
    --ui-line-strong: #d6dbe6;
    --ui-text: #1f2430;
    --ui-text-2: #5b6270;
    --ui-text-3: #8b93a3;
    --ui-primary: #2f6bff;
    --ui-primary-dark: #1f52cc;
    --ui-primary-soft: #eef3ff;
    --ui-success: #12a150;
    --ui-warning: #d97706;
    --ui-danger: #e0483d;

    /* 圆角 / 阴影 / 间距 */
    --ui-radius-s: 8px;
    --ui-radius: 12px;
    --ui-radius-l: 16px;
    --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
    --ui-shadow-2: 0 2px 8px rgba(16, 24, 40, .07);
    --ui-shadow-3: 0 8px 28px rgba(16, 24, 40, .10);
    --ui-gap: 16px;

    /* 动效时长（约束：轻反馈 60–150ms，转场 200–350ms） */
    --ui-dur-fast: 120ms;
    --ui-dur-base: 220ms;
    --ui-dur-slow: 320ms;
    --ui-ease-out: cubic-bezier(.22, .61, .36, 1);
    --ui-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* 字号阶梯 */
    --ui-fs-xs: 12px;
    --ui-fs-s: 13px;
    --ui-fs: 14px;
    --ui-fs-m: 16px;
    --ui-fs-l: 20px;
    --ui-fs-xl: 26px;
}

/* ---------------------------------------------------------------- 基础 */
html {
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background: var(--ui-bg) !important;
    color: var(--ui-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--ui-fs);
    line-height: 1.6;
    overflow-x: hidden; /* 兜底：任何情况下都不出现横向滚动条 */
}

/* layui 默认容器写死了 1200px（超宽屏留白过大、窄屏溢出），改为流式 */
.layui-container {
    width: 100% !important;
    max-width: 1440px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------- 卡片 */
.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-1);
    padding: 18px;
    transition: box-shadow var(--ui-dur-base) var(--ui-ease-out),
        transform var(--ui-dur-base) var(--ui-ease-out);
}

.ui-card--hover:hover {
    box-shadow: var(--ui-shadow-3);
    transform: translateY(-2px);
}

.ui-title {
    font-size: var(--ui-fs-l);
    font-weight: 700;
    color: var(--ui-text);
    margin: 0 0 4px;
}

.ui-sub {
    font-size: var(--ui-fs-s);
    color: var(--ui-text-3);
    margin: 0;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-dark);
}

.ui-badge--ok { background: #e8f7ee; color: #0b7a3d; }
.ui-badge--warn { background: #fdf3e3; color: #a85b06; }
.ui-badge--bad { background: #fdeceb; color: #b3392f; }

/* ---------------------------------------------------------------- 按钮 */
.layui-btn {
    border-radius: var(--ui-radius-s);
    transition: transform var(--ui-dur-fast) var(--ui-ease-spring),
        box-shadow var(--ui-dur-fast) var(--ui-ease-out),
        filter var(--ui-dur-fast) var(--ui-ease-out);
}

.layui-btn:hover { filter: brightness(1.04); }
.layui-btn:active { transform: scale(.97); }

.layui-btn-primary {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 4px 12px rgba(47, 107, 255, .24);
}

.layui-btn-primary:hover { background: var(--ui-primary-dark) !important; }

/* 触控设备：保证 44px 热区 */
@media (hover: none) {
    .layui-btn { min-height: 44px; line-height: 44px; }
    .layui-btn-sm { min-height: 38px; line-height: 38px; }
}

/* ---------------------------------------------------------------- 表单 */
.layui-input,
.layui-textarea,
.layui-select,
.layui-form-select .layui-input {
    border-radius: var(--ui-radius-s);
    border-color: var(--ui-line-strong);
    transition: border-color var(--ui-dur-fast) var(--ui-ease-out),
        box-shadow var(--ui-dur-fast) var(--ui-ease-out);
}

.layui-input:focus,
.layui-textarea:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}

/* ---------------------------------------------------------------- 表格 → 窄屏卡片 */
.ui-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 桌面端：横滚容器兜底，避免撑破布局 */
.layui-table-view { border-radius: var(--ui-radius-s); }

@media (max-width: 768px) {
    /* 表格整体改为"一表一卡"：每行变卡片，单元格左侧显示列名 */
    .ui-table-wrap { overflow-x: visible; }

    .ui-card-table .layui-table-main,
    .ui-card-table .layui-table-box {
        width: 100% !important;
    }

    .ui-card-table table {
        width: 100% !important;
        display: block;
    }

    .ui-card-table thead { display: none; }

    .ui-card-table tbody,
    .ui-card-table tr,
    .ui-card-table td {
        display: block;
        width: 100% !important;
    }

    .ui-card-table tr {
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow-1);
        margin-bottom: 12px;
        padding: 6px 12px;
    }

    .ui-card-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        border: 0 !important;
        border-bottom: 1px dashed var(--ui-line) !important;
        padding: 10px 0;
        text-align: right;
        word-break: break-word;
    }

    .ui-card-table tr td:last-child { border-bottom: 0 !important; }

    /* 列名由 ui.js 写入 data-label */
    .ui-card-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--ui-text-3);
        font-weight: 500;
        text-align: left;
    }

    .ui-card-table td[data-label=""]::before { content: none; }
}

/* ---------------------------------------------------------------- 后台布局 */
@media (max-width: 992px) {
    /* layui 后台侧边栏窄屏收起为抽屉（由 ui.js 控制 .ui-side-open） */
    .layui-layout-admin .layui-side {
        transform: translateX(-100%);
        transition: transform var(--ui-dur-base) var(--ui-ease-out);
        z-index: 1001;
    }

    .layui-layout-admin.ui-side-open .layui-side { transform: none; }

    .layui-layout-admin .layui-body,
    .layui-layout-admin .layui-header .layui-layout-left {
        left: 0 !important;
    }

    .ui-side-mask {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--ui-dur-base) var(--ui-ease-out);
        z-index: 1000;
    }

    .layui-layout-admin.ui-side-open .ui-side-mask {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------------------------------------------------------------- 骨架屏 */
.ui-skeleton {
    background: linear-gradient(90deg, #eef0f5 25%, #f6f7fa 37%, #eef0f5 63%);
    background-size: 400% 100%;
    border-radius: var(--ui-radius-s);
    animation: ui-shimmer 1.4s ease infinite;
}

@keyframes ui-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------- 入场动画 */
.ui-enter {
    opacity: 0;
    transform: translateY(8px);
}

.ui-enter.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--ui-dur-slow) var(--ui-ease-out),
        transform var(--ui-dur-slow) var(--ui-ease-out);
}

/* 列表逐项入场由 ui.js 设置 --ui-delay */
.ui-enter { transition-delay: var(--ui-delay, 0ms); }

/* ---------------------------------------------------------------- 涟漪 */
.ui-ripple {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.ui-ripple > .ui-ripple-wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: .22;
    pointer-events: none;
    animation: ui-ripple-out var(--ui-dur-slow) var(--ui-ease-out) forwards;
}

@keyframes ui-ripple-out {
    to { transform: scale(2.4); opacity: 0; }
}

/* ---------------------------------------------------------------- 无障碍 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .ui-enter { opacity: 1; transform: none; }
}

/* 低端设备降级标记（由 ui.js 依据设备能力写入） */
.ui-low-end .ui-enter { opacity: 1; transform: none; }
.ui-low-end .ui-ripple > .ui-ripple-wave { display: none; }
.ui-low-end .ui-card--hover:hover { transform: none; }

/* ---------------------------------------------------------------- 打印 */
@media print {
    body { background: #fff !important; }
    .layui-side, .layui-header, .ui-side-mask { display: none !important; }
}

/* =========================================================================
 * layui 深度适配（实测问题驱动）
 * 基线审计发现：
 *   1) admin_orders 在 375px 有 54 个元素溢出 —— layui 表格单元格 nowrap 撑宽
 *   2) admin_workplace 在 768px 出现横向滚动 —— 长文本不换行
 *   3) user_jieko / admin_orders 按钮热区不足 32px
 * 对应策略：表格容器可横向滚动 + 单元格允许换行 + 按钮最小高度。
 * ========================================================================= */

/* 1. 表格：容器内滚动，绝不撑破页面 */
.layui-table-view,
.layui-table-box,
.layui-table-body,
.layui-table-main {
    max-width: 100%;
}

.layui-table-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 2. 单元格允许换行（layui 默认 nowrap + ellipsis，窄屏必然溢出） */
.layui-table-cell {
    height: auto !important;
    line-height: 22px !important;
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
    text-overflow: clip !important;
}

.layui-table td,
.layui-table th {
    word-break: break-word;
}

/* 3. 按钮热区：任何尺寸都不低于 32px；触屏 44px */
.layui-btn { min-height: 32px; line-height: 30px; }
.layui-btn-sm { min-height: 30px; line-height: 28px; }
.layui-btn-xs { min-height: 26px; }

@media (max-width: 768px) {
    .layui-btn { min-height: 40px; line-height: 38px; padding: 0 14px; }
    .layui-btn-sm { min-height: 34px; line-height: 32px; }
    .layui-btn-xs { min-height: 30px; line-height: 28px; }

    /* 表单：标签改为块级，避免固定 80px 宽挤压输入框 */
    .layui-form-label {
        width: auto !important;
        text-align: left !important;
        padding: 9px 0 4px;
        float: none;
    }

    .layui-input-block {
        margin-left: 0 !important;
    }

    .layui-form-item {
        margin-bottom: 12px;
    }
}

/* 4. 长英文/数字串（订单号、KEY）强制可断行 */
.layui-table-cell,
.ui-break {
    overflow-wrap: anywhere;
}

/* 5. 栅格断点：layui 的 md 断点是 992px，窄屏下所有 md 列改为整行
 *    实测 admin_workplace 在 768px 横向滚动，元凶是右侧 md 列被挤压后溢出 */
@media (max-width: 992px) {
    .layui-col-md1, .layui-col-md2, .layui-col-md3, .layui-col-md4,
    .layui-col-md5, .layui-col-md6, .layui-col-md7, .layui-col-md8,
    .layui-col-md9, .layui-col-md10, .layui-col-md11, .layui-col-md12 {
        width: 100% !important;
        float: none !important;
    }

    .layui-col-xs12 + .layui-col-xs12 {
        margin-top: 12px;
    }
}

/* 6. 静态表格（非 layui 渲染，直接写在模板里的 <table>）
 * 实测 admin_workplace@768：表格 <col> 写死 235px 列宽，右边界 813 > 768 造成整页横滚。
 * 处理：窄屏下解除列宽约束、允许单元格换行，并给卡片体加内部滚动兜底。 */
@media (max-width: 992px) {
    .layui-card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.layui-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    table.layui-table col {
        width: auto !important;
    }

    table.layui-table th,
    table.layui-table td {
        white-space: normal !important;
        word-break: break-word;
    }
}

/* 7. 让 min-height 真正生效：layui 给按钮写了固定 height:30px，
 *    不解除的话热区下限设置无效（实测桌面端按钮仍为 30px 高） */
.layui-btn,
input.layui-btn,
button.layui-btn {
    height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 8. 通用兜底：媒体元素与模板里常见的"行内固定宽度"
 * 实测支付通道页(common/*/view)与 404 页有元素右边界越界，
 * 多为 <img>/<table>/<div style="width:xxx px"> 写死宽度所致。 */
img, video, iframe, canvas, table, pre {
    max-width: 100% !important;
}

@media (max-width: 992px) {
    /* 行内写了 px 宽度的容器一律不得超出父级 */
    [style*="width:"][style*="px"] {
        max-width: 100% !important;
    }

    /* 通道支付页/结果页常见的居中固定容器 */
    .ui-wrap, .pay-box, .result-box {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 9. 热区最终修正
 * 审计发现两类"小热区"：
 *   a) 正文里的行内文字链接（忘记密码、解析地址…）—— WCAG 2.5.8 明确豁免，不做处理
 *   b) 真按钮：layui 把高度写死 30px（xs 更小），min-height 未生效
 * 这里用 !important 强制最小高度：桌面 32px，触屏 40px。
 */
.layui-btn,
input.layui-btn,
button.layui-btn,
a.layui-btn {
    height: auto !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .layui-btn,
    input.layui-btn,
    button.layui-btn,
    a.layui-btn {
        min-height: 40px !important;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* 表格操作列里的图标链接（非行内文字），给足点击面积 */
.layui-table-cell a,
.layui-table-cell button {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

/* 10. 文字型功能链接（忘记密码、注册、切换登录方式…）
 * 它们是 display:block 的独立链接，不是正文里的行内链接，
 * 不适用 WCAG 的行内豁免，但 22px 高确实偏小，这里给到 32px。 */
a.layui-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

@media (max-width: 768px) {
    a.layui-link { min-height: 36px; }
}

/* =========================================================================
 * 支付流程页组件（收银台之后的二维码页 / 确认页 / 引导页共用）
 * 与收银台保持同一套视觉：浅灰底、白卡、大金额、单一强调色
 * ========================================================================= */
.pay-page {
    min-height: 100vh;
    padding: 22px 16px 40px;
    background: var(--ui-bg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pay-card {
    width: 100%;
    max-width: 460px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-l);
    box-shadow: var(--ui-shadow-2);
    overflow: hidden;
}

.pay-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pay-brand { font-weight: 700; font-size: 15px; }
.pay-channel { font-size: 12px; color: var(--ui-text-3); }

.pay-body { padding: 22px 20px 24px; }

.pay-amount-label { font-size: 13px; color: var(--ui-text-3); text-align: center; }

.pay-amount {
    font-size: 42px;
    font-weight: 800;
    text-align: center;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-top: 2px;
}

.pay-amount small { font-size: 22px; font-weight: 600; margin-right: 2px; }

.pay-qr {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 16px auto 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-1);
}

.pay-qr-tip {
    text-align: center;
    font-size: 13px;
    color: var(--ui-warning);
    line-height: 1.6;
}

.pay-rows { margin-top: 18px; border-top: 1px dashed var(--ui-line); padding-top: 12px; }

.pay-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    font-size: 13.5px;
    padding: 7px 0;
    color: var(--ui-text-2);
}

.pay-row b {
    color: var(--ui-text);
    font-weight: 600;
    word-break: break-all;
    text-align: right;
}

.pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 20px;
    border: 0;
    border-radius: var(--ui-radius);
    background: linear-gradient(180deg, #3b82f6, var(--ui-primary));
    color: #fff;
    font-size: 16.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(47, 107, 255, .26);
    transition: transform var(--ui-dur-fast) var(--ui-ease-spring), box-shadow var(--ui-dur-fast) var(--ui-ease-out);
}

.pay-btn:active { transform: scale(.98); box-shadow: 0 3px 10px rgba(47, 107, 255, .22); }
.pay-btn[disabled] { opacity: .6; box-shadow: none; cursor: not-allowed; }

.pay-tip {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
    border: 1px dashed var(--ui-line);
    font-size: 12.5px;
    color: var(--ui-text-3);
    line-height: 1.75;
}

.pay-tip strong { color: var(--ui-text-2); }

.pay-countdown {
    text-align: center;
    font-size: 13px;
    color: var(--ui-text-2);
    font-variant-numeric: tabular-nums;
}

.pay-countdown b { color: var(--ui-danger); font-weight: 700; }

.pay-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pay-state--wait { background: #fdeceb; color: #b3392f; }
.pay-state--ok { background: #e8f7ee; color: #0b7a3d; }
.pay-state--expired { background: #fdf3e3; color: #a85b06; }

/* 引导页步骤 */
.pay-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.pay-steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 16px 34px;
    font-size: 14px;
    color: var(--ui-text-2);
    line-height: 1.7;
}
.pay-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-dark);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay-steps li:last-child { padding-bottom: 0; }

@media (max-width: 420px) {
    .pay-amount { font-size: 36px; }
    .pay-page { padding: 14px 12px 28px; }
}