/* ============================================================
   NEXUS-7 深色霓虹科技风（含赛博朋克主题切换）
   基础主题：科技蓝 / body.cyber：赛博朋克（霓虹粉紫黄）
   类名与结构同原 iOS 版完全兼容，仅换肤
   ============================================================ */

:root {
    /* —— 主色板（科技蓝·白底适配）—— */
    --nx-accent: #0092bd;
    --nx-accent-dim: #00799e;
    --nx-accent-2: #2f7fd6;
    --nx-warn: #d18a00;
    --nx-ok: #0a9d76;
    --nx-bad: #e64556;
    --nx-yellow: #b8860b;

    /* —— iOS 变量名保留（app.js / 模板内联样式大量引用）—— */
    --ios-blue: var(--nx-accent);
    --ios-blue-light: #4db3e6;
    --ios-green: var(--nx-ok);
    --ios-orange: var(--nx-warn);
    --ios-red: var(--nx-bad);
    --ios-gray: #56718a;
    --ios-gray-light: #8ba6bc;
    --ios-gray-bg: #eef3f8;
    --ios-separator: #d8e2ec;
    --ios-card-bg: rgba(255, 255, 255, .88);
    --ios-card-bg-solid: #ffffff;
    --ios-text: #16283a;
    --ios-text-secondary: #56718a;

    --page-bg: #ffffff;
    --page-bg-2: #f2f6fa;
    --line-soft: rgba(0, 146, 189, .25);
    --line-strong: rgba(0, 146, 189, .5);
    --glow: 0 0 14px rgba(0, 146, 189, .2);
    --glow-strong: 0 0 26px rgba(0, 146, 189, .3);
    --panel-shadow: 0 2px 20px rgba(20, 60, 90, .08), inset 0 1px 0 rgba(255, 255, 255, .8);

    --ios-radius: 10px;
    --ios-radius-sm: 6px;
    --ios-radius-lg: 14px;
    --ios-shadow: 0 8px 32px rgba(15, 40, 60, .12);
    --ios-shadow-lg: 0 16px 48px rgba(15, 40, 60, .18);
    --ios-shadow-card: var(--panel-shadow);
    --ios-shadow-sm: var(--panel-shadow);

    --mono: "Consolas", "SF Mono", "SFMono-Regular", "Menlo", monospace;
    --sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
    --clip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* —— 赛博朋克主题 —— */
body.cyber {
    --nx-accent: #ff2a6d;
    --nx-accent-dim: #d300ff;
    --nx-accent-2: #0093a6;
    --nx-warn: #c08a00;
    --nx-ok: #0a9d76;
    --nx-bad: #e64556;
    --nx-yellow: #b8860b;

    --ios-blue: #ff2a6d;
    --ios-blue-light: #e05684;
    --ios-green: #0a9d76;
    --ios-orange: #c08a00;
    --ios-red: #e64556;
    --ios-gray: #7a5a99;
    --ios-gray-light: #9c7fc0;
    --ios-gray-bg: #f6effb;
    --ios-separator: #e6d9f0;
    --ios-card-bg: rgba(255, 255, 255, .9);
    --ios-card-bg-solid: #ffffff;
    --ios-text: #2b1136;
    --ios-text-secondary: #7a5a99;

    --page-bg: #ffffff;
    --page-bg-2: #fbf6fd;
    --line-soft: rgba(211, 0, 255, .22);
    --line-strong: rgba(211, 0, 255, .5);
    --glow: 0 0 14px rgba(211, 0, 255, .2);
    --glow-strong: 0 0 26px rgba(211, 0, 255, .3);
    --panel-shadow: 0 2px 20px rgba(120, 20, 180, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { min-height: 100vh; }

body {
    font-family: var(--sans);
    background: var(--page-bg);
    color: var(--ios-text);
    min-height: 100vh;
    padding-bottom: 40px;
}

/* ---------- 背景霓虹网格 + 扫描线 ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 640px at 75% -8%, rgba(0, 140, 255, .05), transparent 60%),
        radial-gradient(900px 560px at 8% 108%, rgba(0, 229, 255, .03), transparent 60%),
        linear-gradient(rgba(18, 48, 71, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 48, 71, .08) 1px, transparent 1px);
    background-size: auto, auto, 64px 64px, 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .75));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .75));
}
body.cyber::before {
    background:
        radial-gradient(1100px 640px at 75% -8%, rgba(210, 0, 255, .06), transparent 60%),
        radial-gradient(900px 560px at 8% 108%, rgba(255, 42, 109, .04), transparent 60%),
        linear-gradient(rgba(92, 30, 160, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92, 30, 160, .1) 1px, transparent 1px);
    background-size: auto, auto, 64px 64px, 64px 64px;
}
/* 扫描线下落动画已按需求移除 */

::selection { background: var(--line-strong); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--nx-accent-dim), var(--ios-separator)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--nx-accent); }

/* Safe area for notched devices */
#app {
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ========== Header（指挥舱顶栏） ========== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .96), rgba(255, 255, 255, .85));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 4px 24px rgba(20, 60, 90, .08);
    padding: 8px 16px;
    padding-top: max(8px, env(safe-area-inset-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
}

.logo {
    font-size: 17px;
    font-weight: 700;
    color: var(--ios-text);
    letter-spacing: .1em;
    font-family: var(--mono);
    text-shadow: 0 0 14px var(--line-strong);
}

.header-left { display: flex; align-items: center; gap: 10px; }

/* ========== 自动改密开关（顶栏滑动开关） ========== */
.auto-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    line-height: 1;
    transition: border-color .2s, background .2s;
}
.auto-switch:hover { border-color: var(--nx-accent); box-shadow: var(--glow); }
.auto-switch:disabled { opacity: .55; cursor: wait; }
.auto-switch-text { font-size: 13px; font-weight: 600; color: var(--ios-text); white-space: nowrap; }
.switch-track {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: rgba(120, 140, 160, .45);
    transition: background .2s;
}
.switch-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .2s;
}
.auto-switch.on { border-color: var(--nx-accent); background: rgba(0, 146, 189, .08); }
.auto-switch.on .switch-track { background: var(--nx-accent); box-shadow: var(--glow); }
.auto-switch.on .switch-knob { transform: translateX(18px); }
.auto-switch-state { font-size: 12px; font-weight: 700; color: var(--ios-gray); white-space: nowrap; }
.auto-switch.on .auto-switch-state { color: var(--nx-ok); }
.auto-switch.off .auto-switch-state { color: var(--ios-red); }

@media (max-width: 640px) {
    .auto-switch { padding: 4px 10px; gap: 6px; }
    .auto-switch-text { font-size: 12px; }
    .switch-track { width: 34px; height: 18px; }
    .switch-knob { width: 14px; height: 14px; }
    .auto-switch.on .switch-knob { transform: translateX(16px); }
    .auto-switch-state { font-size: 11px; }
}

.header-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 主题切换按钮 */
.theme-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--nx-yellow);
    background: transparent;
    border: 1px solid rgba(252, 238, 10, .5);
    padding: 7px 14px;
    cursor: pointer;
    clip-path: var(--clip);
    transition: background .25s, color .25s, box-shadow .25s;
    min-height: 32px;
    align-self: center;
}
.theme-btn:hover { background: var(--nx-yellow); color: #fff; box-shadow: 0 0 22px rgba(252, 238, 10, .5); }

/* ========== 按钮（霓虹机甲风） ========== */
.btn {
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    clip-path: var(--clip);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--sans);
    letter-spacing: .05em;
    transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
    -webkit-user-select: none;
    user-select: none;
    background: rgba(255, 255, 255, .03);
    color: var(--ios-text);
    overflow: hidden;
}

.btn:active { transform: scale(.96); opacity: .85; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.btn:hover { box-shadow: var(--glow); }

.btn-primary {
    background: var(--nx-accent);
    color: #fff;
    border-color: var(--nx-accent);
    font-weight: 600;
}
body.cyber .btn-primary { color: #fff; }
.btn-primary:hover { box-shadow: var(--glow-strong); background: var(--nx-accent); }

.btn-secondary {
    background: rgba(255, 255, 255, .03);
    color: var(--nx-accent);
    border-color: var(--line-strong);
}
.btn-secondary:hover { background: rgba(0, 146, 189, .08); box-shadow: var(--glow); }

.btn-ghost {
    background: transparent;
    color: var(--nx-accent-2);
    border-color: rgba(127, 163, 187, .3);
}
.btn-ghost:hover { border-color: var(--nx-accent-2); box-shadow: 0 0 16px rgba(58, 160, 255, .35); }

.btn-danger {
    background: var(--nx-bad);
    color: #fff;
    border-color: var(--nx-bad);
    font-weight: 600;
}
.btn-danger:hover { box-shadow: 0 0 26px rgba(255, 95, 110, .6); }

/* ========== 到期时间微调按钮 ========== */
.time-adjuster {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.time-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--ios-separator);
    border-radius: 3px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    background: rgba(0, 190, 255, .08);
    color: var(--nx-accent-2);
    transition: background .15s;
    padding: 0;
    user-select: none;
}

.time-btn:hover { background: var(--nx-accent-2); color: #04121a; }

.time-btn.minus {
    background: rgba(255, 95, 110, .1);
    color: var(--nx-bad);
    border-color: rgba(255, 95, 110, .35);
}

.time-btn.minus:hover { background: var(--nx-bad); color: #fff; }

.time-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(255, 255, 255, .04);
    color: var(--ios-gray);
}

/* ========== 统计卡（隐藏，保留结构） ========== */
.stats-bar { display: none !important; }
.stats-bar::-webkit-scrollbar { display: none; }

.stat-card {
    flex: 0 0 auto;
    min-width: 120px;
    background: var(--ios-card-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--panel-shadow);
    transition: transform .15s, box-shadow .2s;
}

.stat-card:active { transform: scale(0.96); }

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--nx-accent);
    font-family: var(--mono);
    line-height: 1.2;
    text-shadow: var(--glow);
}

.stat-label {
    font-size: 13px;
    color: var(--ios-gray);
    margin-top: 4px;
    font-weight: 400;
}

/* ========== 筛选栏 ========== */
.filter-bar {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ios-card-bg);
    margin: 0 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
    box-shadow: var(--panel-shadow);
}

.filter-group { display: flex; align-items: center; gap: 8px; width: 100%; }

.filter-input {
    flex: 1;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-sm);
    font-size: 15px;
    font-family: inherit;
    background: var(--ios-gray-bg);
    color: var(--ios-text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.filter-input:focus { border-color: var(--nx-accent); outline: none; box-shadow: var(--glow); }

.filter-input::placeholder { color: var(--ios-gray-light); }

.filter-select, .filter-date {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-sm);
    font-size: 15px;
    font-family: inherit;
    background: var(--ios-gray-bg);
    color: var(--ios-text);
    -webkit-appearance: none;
    appearance: none;
}

.filter-select:focus, .filter-date:focus { outline: none; border-color: var(--nx-accent); }

.date-sep { color: var(--ios-gray); font-size: 15px; font-weight: 400; }

.filter-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.filter-actions .btn { flex: 1; }

/* ========== 订单卡（移动端） ========== */
.order-card-list {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
}

.order-card {
    background: var(--ios-card-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
    padding: 16px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.order-card:hover { border-color: var(--line-strong); box-shadow: var(--glow); }
.order-card:active { transform: scale(0.985); }

/* 角标括号装饰 */
.order-card::before, .order-card::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: solid var(--nx-accent);
    border-width: 0;
    transition: width .25s, height .25s;
    pointer-events: none;
}
.order-card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.order-card::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.order-card:hover::before, .order-card:hover::after { width: 20px; height: 20px; }

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ios-separator);
}

.order-card-id {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--nx-accent);
    letter-spacing: .02em;
    text-shadow: var(--glow);
}

.order-id, .order-id-cell {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--nx-accent);
    font-weight: 500;
}

.order-card-time {
    font-size: 13px;
    color: var(--ios-gray);
}

.order-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-card-label {
    font-size: 14px;
    color: var(--ios-gray);
    font-weight: 400;
}

.order-card-value {
    font-size: 14px;
    color: var(--ios-text);
    font-weight: 400;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-card-product {
    font-size: 14px;
    color: var(--ios-text);
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-card-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ios-separator);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========== 状态标签（霓虹版） ========== */
.status-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid;
    letter-spacing: .04em;
}

.status-tag.trade-success { background: rgba(89, 242, 200, .1); color: var(--nx-ok); border-color: rgba(89, 242, 200, .4); }
.status-tag.trade-refund { background: rgba(255, 184, 77, .1); color: var(--nx-warn); border-color: rgba(255, 184, 77, .4); }
.status-tag.trade-closed { background: rgba(255, 95, 110, .1); color: var(--nx-bad); border-color: rgba(255, 95, 110, .45); }
.status-tag.trade-wait { background: rgba(0, 229, 255, .08); color: var(--nx-accent-2); border-color: rgba(58, 160, 255, .4); }
.status-tag.default { background: rgba(255, 255, 255, .05); color: var(--ios-gray); border-color: var(--ios-separator); }

/* ========== 批量操作栏 ========== */
.batch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin: 8px 16px 0;
    background: var(--ios-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
    box-shadow: var(--panel-shadow);
    flex-wrap: wrap;
    gap: 8px;
}

.batch-info {
    font-size: 14px;
    color: var(--ios-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ========== 复选框（霓虹版） ========== */
.ios-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ios-gray-light);
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.ios-checkbox:checked {
    background: var(--nx-accent);
    border-color: var(--nx-accent);
    box-shadow: var(--glow);
}

.ios-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #04121a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ios-checkbox:active { transform: scale(0.9); }

.order-card .ios-checkbox {
    margin-right: 10px;
}

/* ========== 桌面表格 ========== */
.table-container {
    margin: 0 16px;
    background: var(--ios-card-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
    overflow: hidden;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.order-table {
    width: 100%;
    border-collapse: collapse;
}

.order-table thead {
    background: rgba(255, 255, 255, .03);
}

.order-table th {
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--ios-gray);
    font-size: 12px;
    font-family: var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ios-separator);
    white-space: nowrap;
    background: rgba(255, 255, 255, .03);
}

.order-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--ios-separator);
    color: var(--ios-text);
    font-size: 14px;
    background: transparent;
}

.order-table tbody tr:last-child td { border-bottom: none; }
.order-table tbody tr { transition: background .15s; background: rgba(248, 251, 254, .75); }
.order-table tbody tr:hover { background: rgba(0, 146, 189, .08); box-shadow: inset 3px 0 0 var(--nx-accent); }
body.cyber .order-table tbody tr { background: rgba(252, 248, 255, .75); }
body.cyber .order-table tbody tr:hover { background: rgba(211, 0, 255, .07); }

.order-table { table-layout: fixed; }
.order-table .col-check { width: 3%; text-align: center; }
.order-table .col-time { width: 13%; font-family: var(--mono); font-size: 13px; }
.order-table .col-sku { width: 17%; word-break: break-word; }
.order-table .col-remark { width: 26%; word-break: break-word; }
.order-table .col-expire { width: 10%; white-space: nowrap; }
.order-table .col-actions { width: 18%; white-space: nowrap; text-align: right; }

.loading-cell, .empty-cell {
    text-align: center;
    color: var(--ios-gray);
    padding: 40px 0 !important;
    font-size: 14px;
}

.order-id-cell {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--nx-accent);
    font-weight: 500;
    text-shadow: var(--glow);
}

.product-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

/* ========== 分页 ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    flex-wrap: wrap;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-sm);
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--mono);
    color: var(--ios-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .1s, background .2s, box-shadow .2s, border-color .2s;
}

.page-btn:active { transform: scale(0.92); }
.page-btn:hover { border-color: var(--line-strong); box-shadow: var(--glow); }
.page-btn.active { background: var(--nx-accent); color: #04121a; border-color: var(--nx-accent); box-shadow: var(--glow); font-weight: 700; }
body.cyber .page-btn.active { color: #1c0410; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; color: var(--ios-gray); transform: none; background: rgba(255, 255, 255, .02); box-shadow: none; }
.page-info { color: var(--ios-gray); font-size: 13px; margin-left: 8px; font-weight: 400; }

/* ========== 模态框（霓虹面板） ========== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(2, 4, 8, .7);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-overlay .modal {
    background: var(--ios-card-bg-solid);
    border: 1px solid var(--line-strong);
    border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--glow-strong), 0 20px 60px rgba(0, 0, 0, .6);
}

.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(2, 4, 8, .7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#importModal.active,
#uploadModal.active,
#mappingModal.active,
#detailModal.active,
#verifyModal.active,
#qnToolModal.active,
#friendToolModal.active,
#manualCreateModal.active,
.modal.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(2, 4, 8, .7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--ios-card-bg-solid);
    border: 1px solid var(--line-strong);
    border-radius: var(--ios-radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--glow-strong), 0 20px 60px rgba(0, 0, 0, .65);
    z-index: 1;
}

/* 模态框角标括号 */
.modal-content::before, .modal-content::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: solid var(--nx-accent);
    border-width: 0;
    z-index: 5;
    pointer-events: none;
}
.modal-content::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.modal-content::after { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }

.modal-large {
    max-height: 90vh;
}

@media (max-width: 640px) {
    .modal {
        align-items: flex-end;
    }
    .modal-content {
        border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0;
        max-height: 85vh;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* 打开后必须真正去掉 transform（写成 translateY(0) 不算去掉）：只要 transform
       属性还生效，iOS Safari 就会拿它建立新的 hit-testing 坐标系，弹窗里的原生
       <select>（手动录入的「游戏名称」）就会"点了没反应、选不了"。
       none 与 translateY(0) 视觉完全一致，滑入/滑出动画也不受影响
      （transition 插值时 none 会被当作单位矩阵）。 */
    .modal.active .modal-content {
        transform: none;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ios-separator);
    background: rgba(255, 255, 255, .03);
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-header h3, .modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ios-text);
    letter-spacing: .06em;
    text-shadow: var(--glow);
}

.modal-close {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--ios-separator);
    font-size: 20px;
    color: var(--ios-gray);
    cursor: pointer;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}

.modal-close:active { background: var(--ios-separator); }
.modal-close:hover { color: var(--nx-bad); border-color: rgba(255, 95, 110, .5); }

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* 内嵌 iframe（千牛 / Steam 工具）压暗 */
.modal-content iframe { background: var(--page-bg-2) !important; }

/* 千牛导出弹窗：解除 600px 宽度上限，放大到几乎全屏（内容区两栏并排，开始导出第一屏可见） */
#qnToolModal .modal-content {
    width: min(97vw, 1280px) !important;
    max-width: min(97vw, 1280px) !important;
    height: 94vh !important;
    max-height: 94vh !important;
}

/* 千牛导入说明卡（模板内联浅色覆盖） */
#importModal .ios-card {
    background: rgba(255, 184, 77, .08) !important;
    border: 1px solid rgba(255, 184, 77, .35);
}
#importModal .ios-card > div { color: var(--ios-text) !important; }

/* 密码验证日志区（模板内联浅色覆盖） */
#verifyLogs {
    background: rgba(0, 0, 0, .3) !important;
    color: var(--ios-text) !important;
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-sm);
}

/* 导入弹窗进度条底色 & 状态文字（模板内联浅色覆盖） */
.progress-bar { background: rgba(255, 255, 255, .08) !important; }
#importStatus { color: var(--ios-text) !important; }

/* 模态框底部说明文字（内联浅色覆盖） */
.modal-content > div[style*="border-top"] { border-top: 1px solid var(--ios-separator) !important; }
.modal-content > div[style*="border-top"] span { color: var(--ios-gray) !important; }
.modal-content > div[style*="border-top"] a { color: var(--nx-accent-2) !important; }

/* ========== 上传区 ========== */
.upload-area {
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed var(--ios-separator);
    border-radius: var(--ios-radius);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: rgba(255, 255, 255, .02);
}

.upload-area:hover, .upload-area.dragover {
    border-color: var(--nx-accent);
    background: rgba(0, 190, 255, .05);
    box-shadow: var(--glow);
}

.upload-icon { font-size: 48px; color: var(--nx-accent); margin-bottom: 12px; text-shadow: var(--glow); }
.upload-text { color: var(--ios-text); font-size: 15px; }
.upload-hint { color: var(--ios-gray); font-size: 13px; margin-top: 8px; }

.upload-result {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--ios-radius);
    font-size: 14px;
    border: 1px solid;
}

.upload-result.success { background: rgba(89, 242, 200, .1); color: var(--nx-ok); border-color: rgba(89, 242, 200, .4); }
.upload-result.error { background: rgba(255, 95, 110, .1); color: var(--nx-bad); border-color: rgba(255, 95, 110, .45); }

/* ========== 详情视图 ========== */
.detail-section { margin-bottom: 24px; }

.detail-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--nx-accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ios-separator);
    letter-spacing: .06em;
    font-family: var(--mono);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.detail-item { display: flex; flex-direction: column; }

.detail-label {
    font-size: 12px;
    color: var(--ios-gray);
    margin-bottom: 3px;
    font-weight: 400;
    letter-spacing: .08em;
}

.detail-value {
    font-size: 14px;
    color: var(--ios-text);
    word-break: break-all;
    font-weight: 400;
}

.detail-full { grid-column: 1 / -1; }

.raw-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    border-radius: var(--ios-radius-sm);
    overflow: hidden;
}

.raw-data-table th, .raw-data-table td {
    padding: 10px 12px;
    border: 1px solid var(--ios-separator);
    font-size: 13px;
    text-align: left;
}

.raw-data-table th { background: rgba(255, 255, 255, .04); color: var(--ios-gray); font-weight: 500; }
.raw-data-table td:first-child { color: var(--ios-gray); white-space: nowrap; width: 160px; }

/* ========== 底部标签栏 ========== */
.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(50px + env(safe-area-inset-bottom));
    padding-top: 4px;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    padding: 2px 0;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.15s;
}

.tab-item:active { opacity: 0.6; }

.tab-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--ios-gray);
    transition: color 0.2s;
}

.tab-item.active .tab-icon { color: var(--nx-accent); text-shadow: var(--glow); }

.tab-label {
    font-size: 10px;
    color: var(--ios-gray);
    font-weight: 500;
    transition: color 0.2s;
}

.tab-item.active .tab-label { color: var(--nx-accent); }

/* ========== 工具 ========== */
.pull-to-refresh-hint {
    text-align: center;
    padding: 12px;
    color: var(--ios-gray);
    font-size: 13px;
    display: none;
}

/* ========== 响应式 ========== */
@media (min-width: 768px) {
    #app { padding-bottom: 0; }
    .bottom-tab-bar { display: none; }
    .order-card-list { display: none; }
    .order-table-area { display: block; }
    .header { padding: 10px 24px; }
    .stats-bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: visible; padding: 20px 24px; }
    .stat-card { flex: 1; min-width: 0; }
    .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0 24px; }
    .filter-group { width: auto; }
    .filter-input { width: 260px; }
    .table-container { margin: 0 215px; }
}

@media (min-width: 1920px) {
    .table-container { margin: 0 280px; }
}

@media (max-width: 767px) {
    .order-table-area { display: none; }
    .order-card-list { display: flex; }
    .header-right .btn { padding: 6px 10px; font-size: 12px; min-height: 28px; }
    .filter-input { font-size: 16px; } /* Prevent iOS zoom */
    /* 弹窗内的表单控件同样要 ≥16px：iOS Safari 聚焦 font-size 小于 16px 的
       input/select/textarea 时会把整个页面强制放大，手动录入弹窗里的「游戏名称」
       下拉就会因此点不准、像是选不了。这里与 .filter-input 的既有做法对齐。 */
    .form-input { font-size: 16px; }
    .filter-actions { flex-wrap: wrap; }
}

/* ========== 表单 ========== */
.form-row { display: flex; gap: 12px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; color: var(--ios-gray); font-weight: 500; letter-spacing: .08em; }
.form-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-sm);
    background: var(--ios-gray-bg);
    color: var(--ios-text);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.form-input:focus { border-color: var(--nx-accent); box-shadow: var(--glow); }
.form-input::placeholder { color: var(--ios-gray-light); }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; align-items: center; }

select.form-input {
    appearance: auto;
    -webkit-appearance: auto;
    padding-right: 30px;
}

select.form-input option { background: var(--ios-card-bg-solid); color: var(--ios-text); }

/* ========== 进度条 ========== */
.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--ios-separator);
}
.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--nx-accent-dim), var(--nx-accent));
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: var(--glow);
}
.progress-text { font-size: 13px; color: var(--ios-gray); margin-top: 8px; text-align: center; }

/* ========== 映射列表 ========== */
.mapping-list { margin-top: 16px; max-height: 45vh; overflow-y: auto; }
.mapping-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ios-separator);
    background: rgba(255, 255, 255, .02);
    font-size: 14px;
}
.mapping-item:first-child { border-radius: var(--ios-radius-sm) var(--ios-radius-sm) 0 0; }
.mapping-item:last-child { border-bottom: none; border-radius: 0 0 var(--ios-radius-sm) var(--ios-radius-sm); }
.mapping-item:hover { background: rgba(255, 255, 255, .05); }

/* ========== 详情表格 ========== */
.detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table tr { border-bottom: 1px solid var(--ios-separator); }
.detail-table tr:last-child { border-bottom: none; }
.dt-key {
    width: 30%;
    padding: 9px 10px 9px 0;
    color: var(--ios-gray);
    font-weight: 500;
    vertical-align: top;
    white-space: nowrap;
}
.dt-val { padding: 9px 0; color: var(--ios-text); word-break: break-all; }
.detail-creds {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(0, 190, 255, .06);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--nx-accent-2);
    word-break: break-all;
}

/* ========== 其他 ========== */
.empty-state {
    padding: 32px 16px;
    text-align: center;
    color: var(--ios-gray);
    font-size: 14px;
}
.footer-stats {
    padding: 14px 24px;
    text-align: center;
    color: var(--ios-gray);
    font-size: 13px;
    font-family: var(--mono);
    letter-spacing: .04em;
}
.ios-card {
    background: var(--ios-card-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
}
.row-actions { display: flex; gap: 6px; white-space: nowrap; align-items: center; }
.order-card .creds-line,
.order-card .remark-line {
    font-size: 13px;
    color: var(--ios-gray);
    word-break: break-all;
    margin-top: 4px;
}
.order-card .creds-line { color: var(--nx-accent-2); font-family: var(--mono); text-shadow: var(--glow); }
.order-card-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--ios-separator);
    justify-content: flex-end;
}

/* ========== 内联编辑 & 过期 ========== */
.editable-cell { cursor: pointer; border-radius: var(--ios-radius-sm); padding: 2px 6px; transition: background 0.15s, box-shadow 0.15s; min-width: 60px; }
.editable-cell:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-soft); }
.expired-time { color: var(--nx-bad) !important; font-weight: 600; text-shadow: 0 0 12px rgba(255, 95, 110, .5); }
.order-table td.expired-time { color: var(--nx-bad); font-weight: 600; }
.expired-time strong { color: var(--nx-bad); font-weight: 600; }
.inline-edit { font-size: 14px; padding: 4px 6px; border: 1px solid var(--nx-accent); border-radius: var(--ios-radius-sm); outline: none; width: 100%; box-sizing: border-box; background: var(--ios-gray-bg); color: var(--ios-text); }
/* 手机端卡片视图：到期时间可点击编辑的视觉提示 */
.order-card .editable-cell { display: inline-block; text-decoration: underline dotted rgba(142, 142, 147, .8); text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; }

/* ========== Steam 账密内联编辑 ========== */
.steam-creds-inline { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 13px; }
.steam-creds-inline input { width: 90px; font-size: 12px; padding: 3px 6px; border: 1px solid var(--ios-separator); border-radius: var(--ios-radius-sm); background: var(--ios-gray-bg); color: var(--ios-text); }
.steam-creds-inline input:focus { border-color: var(--nx-accent); box-shadow: var(--glow); }
.steam-creds-inline .save-btn { padding: 2px 8px; font-size: 12px; min-height: auto; height: auto; line-height: 1.4; }
.steam-creds-inline input.new-password { color: var(--nx-ok); font-weight: 700; border-color: rgba(89, 242, 200, .5); }
.card-kind-line { margin-top: 5px; font-size: 12px; color: var(--ios-gray); }
.remark-editable { cursor: pointer; padding: 4px 6px; border-radius: var(--ios-radius-sm); transition: background 0.15s; display: inline-block; min-width: 60px; }
.remark-editable:hover { background: rgba(255, 255, 255, .06); }

/* ========== 工作流横幅（霓虹版） ========== */
.workflow-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px auto 0;
    max-width: 1400px;
    padding: 10px 16px;
    border-radius: var(--ios-radius);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    box-shadow: var(--glow);
}
/* 覆盖 JS 写入的内联浅色背景 */
.workflow-banner.manual-login {
    background: rgba(255, 95, 110, .12) !important;
    border: 1px solid rgba(255, 95, 110, .55);
    color: #d21c3c !important;
}
.workflow-banner.busy {
    background: rgba(0, 190, 255, .1) !important;
    border: 1px solid var(--line-strong);
    color: #0077aa !important;
}
/* 停止态（JS 内联 #8e5a00） */
.workflow-banner:not(.manual-login):not(.busy):not(.auto-off) {
    background: rgba(255, 184, 77, .1) !important;
    color: var(--nx-warn) !important;
}
/* 自动改密已关闭：用户主动设置的状态，用中性蓝提示，不用警告色 */
.workflow-banner.auto-off {
    background: rgba(47, 127, 214, .12) !important;
    border: 1px solid rgba(47, 127, 214, .5);
    color: var(--nx-accent-2) !important;
}
.workflow-banner .banner-sub { font-size: 12px; opacity: .8; color: inherit; }
/* 横幅内的操作按钮（JS 内联白底覆盖） */
.workflow-banner button {
    background: rgba(255, 255, 255, .95) !important;
    color: #12041c !important;
    border-radius: var(--ios-radius-sm);
    box-shadow: 0 0 14px rgba(255, 255, 255, .35);
}

/* ============================================================
   搜索栏：订单号 / Steam账号 / 商品 / 备注 / 游戏名
   ============================================================ */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--ios-card-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--ios-radius);
    box-shadow: var(--panel-shadow);
}
.search-bar .search-input {
    flex: 1 1 240px;
    min-width: 170px;
    max-width: 420px;
}
.search-bar .btn {
    flex: 0 0 auto;
}
/* 搜索栏右侧统计区：到期待处理量 + 全站各游戏账号数 */
.stat-box {
    margin-left: auto;
    text-align: right;
}
.due-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--nx-warn);
    text-shadow: 0 0 10px rgba(255, 184, 77, .35);
}
.due-game-list {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.5;
}
.due-game-list span {
    display: inline-block;
    margin-right: 10px;
}
.game-stats {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ios-gray);
    line-height: 1.5;
}
.game-stats span {
    display: inline-block;
    margin-left: 10px;
}