/* 买家中心布局 — 配合 Arco Design 组件样式 (arco.min.css) */
:root {
    --bg-body: var(--color-bg-2, #f5f7fa);
    --bg-sidebar: var(--color-bg-1, #fff);
    --bg-card: var(--color-bg-1, #fff);
    --bg-card-hover: var(--color-fill-2, #f2f3f5);
    --text-primary: var(--color-text-1, #1d2129);
    --text-secondary: var(--color-text-2, #4e5969);
    --text-muted: var(--color-text-3, #86909c);
    --border-color: var(--color-border-2, #e5e6eb);
    --accent-blue: rgb(var(--primary-6, 22, 93, 255));
    --buyer-sidebar-width: 220px;
    --buyer-topbar-height: 60px;
    --buyer-main-gutter: clamp(16px, 2vw, 24px);
    --accent-green: rgb(var(--success-6, 0, 180, 42));
    --accent-orange: rgb(var(--warning-6, 255, 125, 0));
    --accent-purple: #722ed1;
    --shadow-sm: 0 1px 2px rgba(29, 33, 41, 0.06);
    --shadow-md: var(--shadow-1, 0 4px 10px rgba(29, 33, 41, 0.06));
}

[data-theme="dark"] {
    --bg-body: var(--color-bg-2, #0f0f0f);
    --bg-sidebar: var(--color-bg-1, #17171a);
    --bg-card: var(--color-bg-1, #17171a);
    --bg-card-hover: var(--color-fill-2, #232324);
    --text-primary: var(--color-text-1, #f6f6f6);
    --text-secondary: var(--color-text-2, #c9cdd4);
    --text-muted: var(--color-text-3, #86909c);
    --border-color: var(--color-border-2, #333335);
}

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

[v-cloak] { display: none; }

/* ===== Toast ===== */
.toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-12px);
    z-index: 10002; padding: 10px 18px; border-radius: var(--radius-md, 8px);
    font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s;
    box-shadow: var(--shadow-2, 0 8px 24px rgba(29, 33, 41, 0.12));
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { background: rgba(var(--success-6, 0, 180, 42), .95); color: #fff; }
.toast.err { background: rgba(var(--danger-6, 245, 63, 63), .95); color: #fff; }

/* ===== 登录/注册 ===== */
.auth-page {
    min-height: 100vh;
    display: none;
    align-items: stretch;
    background: var(--color-bg-2, #f5f7fa);
}
.auth-page.show { display: flex; }
html.buyer-boot-pending #authPage,
html.buyer-boot-pending #dashboard {
    display: none !important;
}
html.buyer-boot-pending .buyer-boot-loader {
    display: flex;
}
html.buyer-boot-done .buyer-boot-loader {
    display: none;
}

.buyer-boot-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--color-bg-2, #f5f7fa);
    color: var(--text-muted, #86909c);
    font-size: 14px;
}
.buyer-boot-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(22, 93, 255, .15);
    border-top-color: rgb(22, 93, 255);
    border-radius: 50%;
    animation: buyer-boot-spin .8s linear infinite;
}
@keyframes buyer-boot-spin {
    to { transform: rotate(360deg); }
}

.auth-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 48px clamp(32px, 5vw, 72px);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    background: #f7f9fc;
}

.auth-left-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(145deg, #eef4ff 0%, #f8faff 45%, #f3f0ff 100%);
}

.auth-left-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(0);
}

.auth-left-glow-1 {
    width: min(520px, 70%);
    height: min(520px, 70%);
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, rgba(22, 93, 255, 0.14) 0%, transparent 68%);
}

.auth-left-glow-2 {
    width: min(420px, 55%);
    height: min(420px, 55%);
    left: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(114, 46, 209, 0.1) 0%, transparent 70%);
}

.auth-left-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(22, 93, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 93, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 85%);
}

.auth-brand {
    position: absolute;
    top: 28px;
    left: clamp(28px, 4vw, 48px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 56px);
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(29, 33, 41, 0.06);
    backdrop-filter: blur(8px);
    transition: box-shadow .2s, transform .2s;
}

.auth-brand:hover {
    box-shadow: 0 6px 20px rgba(22, 93, 255, 0.12);
    transform: translateY(-1px);
}

.auth-brand-logo {
    display: block;
    height: 32px;
    max-width: min(200px, 100%);
    width: auto;
    object-fit: contain;
}

.auth-brand-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

.auth-left-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.auth-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin-bottom: 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), 0.08);
    border: 1px solid rgba(var(--primary-6), 0.12);
}

.auth-hero-badge [data-arco-icon],
.auth-hero-badge .arco-icon,
.auth-hero-badge svg {
    width: 14px;
    height: 14px;
}

.auth-hero-title {
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #1d2129;
}

.auth-hero-sub {
    color: #4e5969;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 28px;
}

.auth-feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 18px rgba(29, 33, 41, 0.05);
    backdrop-filter: blur(6px);
    transition: transform .2s, box-shadow .2s;
}

.auth-feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.1);
}

.auth-feature-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-feature-icon [data-arco-icon],
.auth-feature-icon .arco-icon,
.auth-feature-icon svg {
    width: 20px;
    height: 20px;
}

.auth-feature-icon.tone-blue {
    background: rgba(var(--primary-6), 0.1);
    color: rgb(var(--primary-6));
}

.auth-feature-icon.tone-green {
    background: rgba(var(--success-6), 0.1);
    color: rgb(var(--success-6));
}

.auth-feature-icon.tone-purple {
    background: rgba(114, 46, 209, 0.1);
    color: #722ed1;
}

.auth-feature-icon.tone-orange {
    background: rgba(var(--warning-6), 0.12);
    color: rgb(var(--warning-6));
}

.auth-feature-text {
    flex: 1;
    min-width: 0;
}

.auth-feature-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1d2129;
    margin-bottom: 4px;
}

.auth-feature-text span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    color: #86909c;
}

.auth-right {
    flex: 0 0 min(480px, 44%);
    width: min(480px, 44%);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 32px;
    position: relative;
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 32px rgba(29, 33, 41, .04);
}
.auth-panel {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.auth-home {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-card-hover);
}
.auth-home:hover { color: rgb(var(--primary-6)); border-color: rgb(var(--primary-6)); }
.auth-welcome h2 {
    font-size: 28px;
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.auth-welcome p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 28px;
    line-height: 1.5;
}
.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    width: 100%;
}
.auth-tab {
    flex: 1;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
}
.auth-tab.active {
    background: rgba(var(--primary-6), .1);
    border-color: rgb(var(--primary-6));
    color: rgb(var(--primary-6));
    font-weight: 600;
}
.auth-form {
    width: 100%;
}
.auth-form form {
    width: 100%;
}
.auth-form .auth-field {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}
.auth-form .auth-field::before,
.auth-form .auth-field::after {
    display: none;
}
.auth-form .arco-input-wrapper {
    display: block;
    width: 100%;
}
.auth-form .arco-input {
    width: 100%;
    min-height: 42px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
}
.auth-form .arco-input:focus {
    border-color: rgb(var(--primary-6));
    box-shadow: 0 0 0 2px rgba(var(--primary-6), .12);
}
.auth-form .arco-btn-long {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
}
.auth-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.auth-actions .auth-action-btn {
    flex: 1;
    min-height: 42px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.auth-actions .auth-merchant-btn {
    color: rgb(var(--primary-6));
    border-color: rgb(var(--primary-6));
    background: transparent;
}
.auth-actions .auth-merchant-btn:hover {
    color: rgb(var(--primary-5));
    border-color: rgb(var(--primary-5));
    background: rgba(var(--primary-6), .06);
}
.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 12px;
}
.auth-forgot-back-row {
    margin-top: 12px;
    text-align: center;
}
.auth-forgot-link {
    border: 0;
    background: none;
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    cursor: pointer;
}
.auth-forgot-link:hover {
    text-decoration: underline;
}
.auth-forgot-head h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1d2129;
}
.auth-forgot-sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: #86909c;
    line-height: 1.5;
}
.auth-wechat-login {
    margin-top: 18px;
}
.auth-wechat-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #94a3b8;
    font-size: 12px;
}
.auth-wechat-divider::before,
.auth-wechat-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.auth-wechat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-wechat-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}
.auth-wechat-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.5;
}
.profile-wechat-status {
    margin: 0 0 14px;
    font-size: 14px;
    color: #64748b;
}
.profile-wechat-status.is-bound {
    color: #059669;
}
.profile-wechat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.auth-inline-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #4e5969;
}
.auth-captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.auth-captcha-row .auth-captcha-input {
    flex: 1;
}
.auth-captcha-img {
    width: 108px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    object-fit: cover;
    border: 1px solid #e5e6eb;
}
.auth-code-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.auth-code-input {
    flex: 1;
    min-width: 0;
}
.auth-code-btn {
    flex-shrink: 0;
    min-width: 108px;
    white-space: nowrap;
}
.auth-code-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.auth-copy {
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== 控制台壳 ===== */
body.arco-pc-app .pc-dashboard-bg {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg-body);
    background-image: var(--pc-dashboard-bg-image, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
body.arco-pc-app .pc-dashboard-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(245, 247, 250, 0.42) 0%,
        rgba(245, 247, 250, 0.55) 45%,
        rgba(245, 247, 250, 0.7) 100%
    );
}
body.arco-pc-app:has(#dashboard.show) .pc-dashboard-bg {
    display: block;
}
.dashboard { display: none; min-height: 100vh; background: var(--bg-body); }
.dashboard.show { display: block; }
body.arco-pc-app .dashboard.show {
    position: relative;
    z-index: 1;
    background: transparent;
}
.sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 999;
}
.sidebar-overlay.show { display: block; }
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--buyer-sidebar-width); background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color); z-index: 1000; overflow-y: auto;
}
/* 侧栏品牌区 / 菜单样式以 buyer-center-nav.css 为准 */
.sidebar-divider { height: 1px; margin: 10px 16px; background: var(--border-color); }

.topbar {
    position: fixed; top: 0; left: var(--buyer-sidebar-width); right: 0; height: var(--buyer-topbar-height); background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color); display: flex; align-items: center;
    justify-content: space-between; padding: 0 var(--buyer-main-gutter); z-index: 998;
}
.topbar-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; }
.topbar-breadcrumb strong { color: var(--text-primary); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
    padding: 4px 6px 4px 5px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(29, 33, 41, 0.08);
    box-shadow: 0 1px 3px rgba(29, 33, 41, 0.05);
}
.topbar-user {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-divider {
    width: 1px;
    height: 18px;
    background: rgba(29, 33, 41, 0.1);
    flex-shrink: 0;
}
.topbar-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .2s, color .2s;
}
.topbar-logout-btn:hover {
    background: rgba(var(--danger-6), 0.08);
    color: rgb(var(--danger-6));
}
.topbar-logout-btn [data-arco-icon],
.topbar-logout-btn .arco-icon,
.topbar-logout-btn svg {
    width: 15px;
    height: 15px;
}
.topbar-avatar.arco-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
    background: linear-gradient(135deg, #4096ff 0%, rgb(var(--primary-6)) 100%);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--primary-6), 0.28);
}
.topbar-avatar .arco-avatar-text {
    font-size: 14px;
    font-weight: 600;
}
.topbar-avatar .topbar-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
}
.topbar-avatar .topbar-avatar-icon .arco-icon,
.topbar-avatar .topbar-avatar-icon svg {
    width: 16px;
    height: 16px;
}
.topbar-avatar .arco-avatar-image img {
    object-fit: cover;
}
.menu-toggle {
    display: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color);
    background: var(--bg-card-hover); align-items: center; justify-content: center; cursor: pointer; margin-right: 8px;
}

.main {
    margin-left: var(--buyer-sidebar-width);
    margin-top: 0;
    padding: calc(var(--buyer-topbar-height) + var(--buyer-main-gutter)) var(--buyer-main-gutter) var(--buyer-main-gutter);
    min-height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 订单查询内容较少时，不强制撑满视口，避免出现多余滚动条 */
body.arco-pc-app.buyer-panel-order-query .main {
    min-height: auto;
}

.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px;
}
#panel-orders.content-card {
    overflow: visible;
}
#panel-orders .stat-grid-orders {
    padding: 16px 18px 0;
    margin-bottom: 0;
}
#panel-orders .stat-grid-orders .stat-card {
    margin-bottom: 0;
}
#panel-orders .order-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
#panel-orders .order-table col.col-order-no { width: 20%; }
#panel-orders .order-table col.col-order-goods { width: 18%; }
#panel-orders .order-table .order-tx-no,
#panel-orders .order-table .order-pay-account {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted, #86909c);
    word-break: break-all;
    line-height: 1.35;
}
#panel-orders .order-table .order-no-main {
    font-weight: 500;
    word-break: break-all;
}
#panel-orders .order-table col.col-order-shop { width: 11%; }
#panel-orders .order-table col.col-order-amount { width: 8%; }
#panel-orders .order-table col.col-order-pay { width: 12%; }
#panel-orders .order-table col.col-order-status { width: 10%; }
#panel-orders .order-table col.col-order-actions { width: 14%; }
#panel-orders .order-table th,
#panel-orders .order-table td {
    box-sizing: border-box;
    padding: 11px 12px;
    vertical-align: middle;
    line-height: 1.4;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}
#panel-orders .order-table thead th {
    background: var(--bg-card-hover);
}
#panel-orders .order-table tbody tr:last-child td {
    border-bottom: none;
}
#panel-orders .order-table th:nth-child(1),
#panel-orders .order-table td:nth-child(1),
#panel-orders .order-table th:nth-child(2),
#panel-orders .order-table td:nth-child(2) {
    text-align: left;
}
#panel-orders .order-table th:nth-child(3),
#panel-orders .order-table th:nth-child(4),
#panel-orders .order-table th:nth-child(5),
#panel-orders .order-table th:nth-child(6),
#panel-orders .order-table td:nth-child(3),
#panel-orders .order-table td:nth-child(4),
#panel-orders .order-table td:nth-child(5),
#panel-orders .order-table td:nth-child(6) {
    text-align: center;
}
#panel-orders .order-table td:nth-child(1) {
    word-break: break-all;
    font-size: 13px;
    color: var(--text-primary);
}
#panel-orders .order-table .order-goods-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
#panel-orders .order-table td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-orders .order-table td:nth-child(5),
#panel-orders .order-table td:nth-child(6) {
    white-space: nowrap;
}
#panel-orders .order-table .order-pay-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    vertical-align: middle;
}
#panel-orders .order-table .order-pay-method-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 0;
}
#panel-orders .order-table .order-pay-method-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}
#panel-orders .order-table .order-pay-method-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-primary);
}
#panel-orders .order-table td:nth-child(6) .badge {
    vertical-align: middle;
}
#panel-orders .order-table th:last-child,
#panel-orders .order-table td.table-actions {
    text-align: left;
    padding-left: 10px;
    padding-right: 8px;
}
#panel-orders .order-table td.table-actions {
    display: table-cell;
    width: auto;
    max-width: none;
    white-space: nowrap;
}
#panel-orders .order-table .order-row-actions {
    display: inline-grid;
    grid-template-columns: 68px auto;
    column-gap: 6px;
    align-items: center;
    justify-items: start;
}
#panel-orders .order-table td.table-actions .arco-btn {
    margin: 0;
    vertical-align: middle;
}
#panel-orders .order-table td.table-actions .js-order-query {
    width: 100%;
    justify-content: center;
}
#panel-orders .order-table td.table-actions .arco-btn-size-mini {
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
}
#panel-orders .order-table td.table-actions .arco-btn .arco-icon,
#panel-orders .order-table td.table-actions .arco-btn [data-arco-icon] {
    margin-right: 2px;
}
#panel-orders .m-card-actions .arco-btn {
    margin-right: 6px;
}
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px);
    padding: 20px; box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: flex-start;
}
.stat-card .label { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.stat-card .stat-icon {
    width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.stat-card .stat-icon.blue { background: rgba(var(--primary-6), .12); color: rgb(var(--primary-6)); }
.stat-card .stat-icon.green { background: rgba(var(--success-6), .12); color: rgb(var(--success-6)); }
.stat-card .stat-icon.orange { background: rgba(var(--warning-6), .12); color: rgb(var(--warning-6)); }

.panel { display: none; }
.panel.active { display: block; }
.content-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm); overflow: hidden;
    max-width: 100%;
    min-width: 0;
}
.content-card-header {
    padding: 14px 18px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.content-card-header h3 {
    margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.content-card-body { padding: 16px 18px 18px; }
#panel-balance.content-card,
#panel-balance .content-card-body,
#panel-balance .balance-hero,
#panel-balance .balance-hero-main {
    overflow: visible;
}
#panel-balance-recharge .content-card-body { padding: 20px 24px 24px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.order-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.order-filter-fields {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}
.order-filter-keyword {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
}
.order-filter-select {
    flex: 0 0 84px;
    width: 84px;
    height: 32px;
    padding: 0 6px;
    font-size: 13px;
    cursor: pointer;
}
.order-filter-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.order-filter-actions .arco-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
}
.order-filter-actions .arco-btn .arco-icon,
.order-filter-actions .arco-btn [data-arco-icon] {
    margin-right: 0;
}
.order-filter-btn-text { margin-left: 4px; }
@media (max-width: 768px) {
    .order-filter-bar { gap: 6px; margin-bottom: 8px; }
    .order-filter-fields { gap: 6px; }
    .order-filter-select { flex: 0 0 72px; width: 72px; font-size: 12px; }
    .order-filter-keyword { font-size: 12px; padding: 0 8px; }
    .order-filter-actions .arco-btn { padding: 0 8px; min-width: 32px; }
    .order-filter-btn-text { display: none; }
}

.dark-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dark-table th, .dark-table td {
    padding: 12px 14px; border-bottom: 1px solid var(--border-color); text-align: left;
}
.dark-table th { background: var(--bg-card-hover); color: var(--text-secondary); font-weight: 500; }
.dark-table td.empty { text-align: center; color: var(--text-muted); padding: 28px; }
.dark-table .table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#panel-orders .order-table td.table-actions {
    display: table-cell !important;
    flex-wrap: nowrap;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.pagination-summary {
    font-size: 13px;
    color: var(--text-muted, rgba(255, 255, 255, .55));
    white-space: nowrap;
}
.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pagination button {
    min-width: 34px; height: 34px; border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary); border-radius: var(--radius-md, 8px); cursor: pointer; font-size: 13px;
    padding: 0 10px;
}
.pagination .pagination-prev,
.pagination .pagination-next {
    min-width: auto;
    padding: 0 12px;
}
.pagination button.active, .pagination button:hover {
    border-color: rgb(var(--primary-6)); color: rgb(var(--primary-6)); background: rgba(var(--primary-6), .06);
}

.badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm, 4px);
    font-size: 12px; font-weight: 500;
}
.badge-success { background: rgba(var(--success-6), .12); color: rgb(var(--success-6)); }
.badge-warning { background: rgba(var(--warning-6), .12); color: rgb(var(--warning-6)); }
.badge-info { background: rgba(var(--primary-6), .12); color: rgb(var(--primary-6)); }
.badge-danger { background: rgba(var(--danger-6, 245, 63, 63), .12); color: rgb(var(--danger-6, 245, 63, 63)); }
.badge-muted { background: rgba(134, 144, 156, .14); color: #86909c; }
.amount-positive { color: rgb(var(--success-6)); font-weight: 600; }
.amount-negative { color: rgb(var(--danger-6, 245, 63, 63)); font-weight: 600; }

.balance-hero {
    display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px;
}
.balance-hero-main {
    background: linear-gradient(145deg, #f5f9ff 0%, #f7fafc 48%, #f3fbf6 100%);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px); padding: 24px;
}
.balance-hero-top .label {
    font-size: 13px;
    color: var(--text-secondary);
}
.balance-amount { font-size: 36px; font-weight: 700; color: rgb(var(--success-6)); margin: 6px 0 0; letter-spacing: -0.02em; }
.balance-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 12px;
}
.auth-oauth-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.auth-oauth-btns .arco-btn {
    flex: 1 1 140px;
}
.auth-qq-btn .auth-qq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 4px;
    background: #12b7f5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.balance-consume-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(var(--primary-6, 22, 93, 255), .14);
    border-radius: var(--radius-md, 8px);
    background: rgba(255, 255, 255, 0.88);
    min-width: 0;
}
.balance-consume-label { margin: 0; color: var(--text-secondary); font-size: 12px; }
.balance-consume-amount {
    font-size: 18px;
    font-weight: 700;
    color: rgb(var(--primary-6, 22, 93, 255));
    letter-spacing: -0.01em;
}
.balance-freeze-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    margin: 0;
    border: 1px solid rgba(var(--warning-6, 255, 125, 0), .18);
    border-radius: var(--radius-md, 8px);
    background: rgba(255, 255, 255, 0.88);
    overflow: visible;
    min-width: 0;
}
.balance-freeze-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.balance-freeze-label { margin: 0; color: var(--text-secondary); font-size: 12px; }
.balance-freeze-amount {
    font-size: 18px;
    font-weight: 700;
    color: rgb(var(--warning-6, 255, 125, 0));
    letter-spacing: -0.01em;
}
.balance-freeze-hint {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
@media (max-width: 520px) {
    .balance-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}
.balance-freeze-help-panel {
    display: none;
}
.balance-freeze-tip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    outline: none;
    z-index: 2;
}
.balance-freeze-tip-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--primary-6), .12);
    color: rgb(var(--primary-6));
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    user-select: none;
}
.balance-freeze-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    bottom: auto;
    transform: translateX(-50%);
    width: min(300px, calc(100vw - 40px));
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .94);
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    z-index: 1000;
    pointer-events: none;
    white-space: normal;
}
.balance-freeze-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(15, 23, 42, .94);
}
.balance-freeze-tip-wrap:hover .balance-freeze-tooltip,
.balance-freeze-tip-wrap:focus .balance-freeze-tooltip,
.balance-freeze-tip-wrap:focus-within .balance-freeze-tooltip {
    display: block;
}

@media (max-width: 768px) {
    .balance-freeze-tip-wrap .balance-freeze-tooltip,
    .balance-freeze-tip-wrap:hover .balance-freeze-tooltip,
    .balance-freeze-tip-wrap:focus .balance-freeze-tooltip,
    .balance-freeze-tip-wrap:focus-within .balance-freeze-tooltip {
        display: none !important;
    }

    .balance-freeze-help-panel {
        margin: 0 0 10px;
        padding: 10px 12px;
        border-radius: 8px;
        background: rgba(15, 23, 42, .94);
        color: #f8fafc;
        font-size: 12px;
        line-height: 1.55;
    }

    .balance-freeze-help-panel.is-open {
        display: block;
    }
}
.balance-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hint { color: var(--text-muted); font-size: 12px; }
.section-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

.recharge-layout {
    width: 100%;
}
.recharge-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
    align-items: start;
}
.recharge-side {
    position: sticky;
    top: 84px;
}
.recharge-balance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(var(--primary-6), .18);
    border-radius: var(--radius-lg, 12px);
    background: linear-gradient(135deg, rgba(var(--primary-6), .08), rgba(var(--success-6), .08));
}
.recharge-balance-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}
.recharge-balance-value {
    font-size: 28px;
    font-weight: 700;
    color: rgb(var(--success-6));
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.recharge-main {
    max-width: none;
}
.recharge-section {
    margin-bottom: 24px;
}
.recharge-section:last-of-type {
    margin-bottom: 0;
}
.recharge-section-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.recharge-main .recharge-form-item {
    display: block;
    margin-bottom: 0;
}
.recharge-main .recharge-form-item::before,
.recharge-main .recharge-form-item::after {
    display: none;
}
.recharge-main .arco-form-item-label {
    display: block;
    float: none;
    flex: none;
    width: auto;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 10px;
    padding: 0;
    line-height: 1.4;
}
.recharge-main .amount-input-wrap,
.recharge-main .pay-channel-box,
.recharge-main .recharge-hint {
    width: 100%;
    max-width: 100%;
}
.recharge-hint {
    margin-top: 8px;
    line-height: 1.5;
}
.recharge-fee-preview {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(64, 158, 255, 0.08);
    border: 1px solid rgba(64, 158, 255, 0.18);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.recharge-fee-preview strong {
    color: var(--text-primary);
    font-weight: 600;
}
.recharge-row-fee {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}
.amount-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.amount-presets button {
    padding: 10px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s, color .2s, background .2s;
}
.amount-presets button.active {
    border-color: rgb(var(--primary-6));
    color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), .08);
    font-weight: 600;
}
.amount-presets button:hover:not(.active) {
    border-color: rgba(var(--primary-6), .45);
    color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), .04);
}
.amount-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: 0 14px;
    background: var(--bg-card);
    min-height: 44px;
    transition: border-color .2s, box-shadow .2s;
}
.amount-input-wrap:focus-within {
    border-color: rgb(var(--primary-6));
    box-shadow: 0 0 0 2px rgba(var(--primary-6), .12);
}
.amount-input-wrap .amount-currency {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}
.amount-input-wrap .arco-input {
    border: none;
    box-shadow: none;
    padding-left: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.amount-input-wrap .arco-input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
}
.pay-channel-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.pay-channel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 140px;
    min-width: 0;
    max-width: none;
    min-height: 52px;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #545454;
    background: var(--bg-card-hover);
    transition: border-color .2s, color .2s, background .2s;
    text-align: center;
    box-sizing: border-box;
    gap: 6px;
}
.pay-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.pay-channel-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
.recharge-pay-method {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
.recharge-pay-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.recharge-pay-method-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
.recharge-pay-method-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pay-channel-name {
    display: inline-block;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.pay-channel-rate {
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.pay-channel-item.active .pay-channel-rate {
    color: rgb(var(--primary-6));
}
.pay-channel-item.active {
    border-color: rgb(var(--primary-6));
    color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), .06);
}
.pay-channel-item.active .pay-channel-name {
    color: rgb(var(--primary-6));
}
.pay-channel-item:hover:not(.active) {
    border-color: rgba(var(--primary-6), .45);
    color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), .04);
}
.pay-channel-item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
}
.recharge-form-actions {
    margin-top: 24px;
    padding-top: 0;
    border-top: none;
}
.recharge-form-actions .arco-btn-long {
    width: 100%;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
}
.recharge-tips-bar {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card-hover);
}
.recharge-tips-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.recharge-tips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.recharge-tips li {
    position: relative;
    padding-left: 12px;
    margin: 0;
}
.recharge-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--primary-6), .55);
}
.side-card {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    padding: 18px 20px;
    margin-bottom: 0;
}
.side-card h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.side-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.8;
}
.side-balance { font-size: 28px; font-weight: 700; color: rgb(var(--success-6)); }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    max-width: none;
}
.profile-block {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card-hover);
}
.profile-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.profile-block-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.profile-block-icon .arco-icon,
.profile-block-icon svg {
    width: 18px;
    height: 18px;
}
.profile-block-icon.blue { background: rgba(var(--primary-6), .12); color: rgb(var(--primary-6)); }
.profile-block-icon.orange { background: rgba(var(--warning-6), .12); color: rgb(var(--warning-6)); }
.profile-block-icon.green { background: rgba(var(--success-6), .12); color: rgb(var(--success-6)); }
.profile-block-head h4 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.profile-form {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.profile-form .profile-form-item {
    display: block;
    margin-bottom: 16px;
}
.profile-form .profile-form-item::before,
.profile-form .profile-form-item::after {
    display: none;
}
.profile-form .arco-form-item-label {
    display: flex;
    align-items: center;
    gap: 6px;
    float: none;
    flex: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    text-align: left;
}
.profile-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.profile-label-icon .arco-icon,
.profile-label-icon svg {
    width: 14px;
    height: 14px;
}
.profile-form-actions .arco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.profile-form-actions .arco-btn .arco-icon,
.profile-form-actions .arco-btn svg {
    width: 14px;
    height: 14px;
}
.profile-form .arco-input-wrapper {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
}
.profile-form .arco-input-wrapper .arco-input {
    width: 100%;
    background: #fff;
}
.profile-form .arco-input-wrapper .arco-input[disabled] {
    background: #f7f8fa;
    color: var(--text-muted);
    cursor: not-allowed;
}
[data-theme="dark"] .profile-form .arco-input-wrapper,
[data-theme="dark"] .profile-form .arco-input-wrapper .arco-input {
    background: var(--color-bg-1, #17171a);
}

.profile-block .pay-pwd-verify-tabs {
    display: flex;
    width: 100%;
    gap: 8px;
    padding: 4px;
    border-radius: 10px;
    background: #f1f5f9;
}
.profile-block .pay-pwd-verify-tab {
    flex: 1;
    justify-content: center;
    padding: 7px 10px;
    font-size: 12px;
}
.profile-block .pay-pwd-readonly {
    padding: 8px 10px;
    font-size: 13px;
}
.profile-block .pay-pwd-captcha-row {
    gap: 8px;
}
.profile-block .pay-pwd-captcha-img {
    width: 108px;
    height: 36px;
}
.profile-block .pp-unset-hint {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
}
.profile-block .pp-forgot-link {
    border: 0;
    background: none;
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    cursor: pointer;
}
.profile-block .pp-forgot-link:hover {
    text-decoration: underline;
}
.profile-block .pp-forgot-tip {
    color: #64748b;
    margin-bottom: 4px;
}
.profile-block .pp-forgot-row,
.profile-block .pp-forgot-back-row {
    margin-top: 6px;
}
@media (max-width: 1280px) {
    .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #profilePayPasswordBlock {
        grid-column: 1 / -1;
    }
}
[data-theme="dark"] .profile-form .arco-input-wrapper .arco-input[disabled] {
    background: var(--color-fill-2, #232324);
}
.profile-form-actions {
    margin-top: auto;
    padding-top: 8px;
}
.profile-form-actions .arco-btn-long {
    width: 100%;
    min-height: 40px;
}
.profile-form-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
#panel-profile .content-card-body {
    padding: 20px 24px 24px;
}

.complaint-apply-card,
.complaint-detail-card {
    width: 100%;
    max-width: none;
}
.complaint-apply-head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.complaint-poll-hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}
.complaint-apply-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.complaint-apply-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
}
.complaint-apply-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.complaint-tips-bar {
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card-hover);
}
.complaint-tips-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.complaint-tips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.complaint-tips li {
    position: relative;
    padding-left: 12px;
    margin: 0;
}
.complaint-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--primary-6), .55);
}
.complaint-process {
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.8;
}
.complaint-process li {
    margin: 0;
}
.complaint-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}
.complaint-form-span-2 {
    grid-column: 1 / -1;
}
.complaint-form .complaint-form-item {
    display: block;
    margin-bottom: 0;
}
.complaint-form .arco-form-item-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}
.complaint-form .arco-input-wrapper,
.complaint-form select.arco-input {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
}
.complaint-textarea {
    min-height: 110px;
    resize: vertical;
    width: 100%;
    padding: 10px 12px;
    line-height: 1.6;
}
.complaint-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.complaint-upload-item {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.complaint-upload-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.complaint-upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
}
.complaint-form-actions {
    margin-top: 20px;
    padding-top: 4px;
    display: flex;
    justify-content: center;
}
.complaint-form-actions .arco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 140px;
    height: 36px;
    padding: 0 20px;
    box-sizing: border-box;
}
.complaint-form-actions .arco-btn [data-arco-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.complaint-form-actions .arco-btn [data-arco-icon] .arco-icon,
.complaint-form-actions .arco-btn [data-arco-icon] svg {
    width: 14px;
    height: 14px;
}
.complaint-form .hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.complaint-form #cpTradeNo[readonly] {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    cursor: default;
}
.complaint-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}
.complaint-detail-main {
    min-width: 0;
}
.complaint-detail-side {
    position: sticky;
    top: 84px;
}
.complaint-info-card {
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card-hover);
}
.complaint-info-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.complaint-info-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.complaint-info-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 13px;
    line-height: 1.5;
}
.complaint-info-item dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}
.complaint-info-item dd {
    margin: 0;
    color: var(--text-primary);
    word-break: break-all;
}
.complaint-chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 480px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: #fff;
    overflow: hidden;
}
.complaint-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-card-hover), #fff);
}
.complaint-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 280px;
    max-height: 420px;
    overflow: auto;
    padding: 16px;
    background: linear-gradient(180deg, #f7f8fa 0%, #f2f3f5 100%);
}
.complaint-chat-empty {
    margin: auto;
    color: var(--text-muted);
    font-size: 13px;
}
.complaint-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 82%;
}
.complaint-msg.is-self {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.complaint-msg-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgb(var(--primary-6));
    box-shadow: 0 2px 8px rgba(var(--primary-6), .25);
}
.complaint-msg-platform .complaint-msg-avatar {
    background: #86909c;
    box-shadow: 0 2px 8px rgba(134, 144, 156, .25);
}
.complaint-msg-user .complaint-msg-avatar,
.complaint-msg-parent .complaint-msg-avatar {
    background: #ff7d00;
    box-shadow: 0 2px 8px rgba(255, 125, 0, .25);
}
.complaint-msg-buyer .complaint-msg-avatar {
    background: rgb(var(--primary-6));
}
.complaint-msg-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.complaint-msg.is-self .complaint-msg-content {
    align-items: flex-end;
}
.complaint-msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.2;
}
.complaint-msg.is-self .complaint-msg-meta {
    flex-direction: row-reverse;
}
.complaint-msg-label {
    font-weight: 600;
    color: var(--text-primary);
}
.complaint-msg-time {
    color: var(--text-muted);
}
.complaint-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.complaint-msg.is-self .complaint-msg-bubble {
    background: rgba(var(--primary-6), .12);
    border-color: rgba(var(--primary-6), .18);
    color: var(--text-primary);
}
.complaint-msg-image {
    display: block;
    max-width: 220px;
    border-radius: 8px;
}
.complaint-reply-box {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.complaint-reply-input {
    min-height: 72px;
    resize: vertical;
}
.complaint-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.complaint-reply-actions .arco-btn.is-loading {
    opacity: .72;
    pointer-events: none;
}

/* 兼容旧结构 */
.complaint-detail-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card-hover);
}
.complaint-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}
.complaint-detail-row span {
    color: var(--text-muted);
}

/* Element Plus 弹窗置于买家中心布局之上 */
.el-overlay.is-message-box {
    z-index: 4000;
}

/* Arco 按钮内图标与链接样式修正 */
.dashboard .arco-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.dashboard a.arco-btn,
.dashboard a.arco-btn:hover,
.dashboard a.arco-btn:focus,
.dashboard a.arco-btn:active,
.dashboard a.arco-btn:visited {
    text-decoration: none;
}

.dashboard .arco-btn-primary,
.dashboard .arco-btn-primary:hover,
.dashboard .arco-btn-primary:focus,
.dashboard .arco-btn-primary:active,
.dashboard a.arco-btn-primary,
.dashboard a.arco-btn-primary:visited {
    color: #fff;
}

.dashboard .arco-btn [data-arco-icon],
.dashboard .arco-btn-primary [data-arco-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 0;
}

.dashboard .arco-btn [data-arco-icon] .arco-icon,
.dashboard .arco-btn [data-arco-icon] svg {
    color: inherit;
    stroke: currentColor;
    fill: none;
}

.dashboard .arco-btn-size-small [data-arco-icon] .arco-icon,
.dashboard .arco-btn-size-small [data-arco-icon] svg,
.dashboard .arco-btn-size-mini [data-arco-icon] .arco-icon,
.dashboard .arco-btn-size-mini [data-arco-icon] svg {
    width: 14px;
    height: 14px;
}

.dashboard .arco-btn-primary [data-arco-icon],
.dashboard .arco-btn-primary [data-arco-icon] .arco-icon,
.dashboard .arco-btn-primary [data-arco-icon] svg {
    color: #fff;
    stroke: currentColor;
    opacity: 1;
}

.dashboard .content-card-header h3 [data-arco-icon] .arco-icon,
.dashboard .content-card-header h3 [data-arco-icon] svg {
    color: rgb(var(--primary-6));
    stroke: currentColor;
}

@media (max-width: 1100px) {
    .auth-left {
        padding: 32px clamp(24px, 4vw, 48px);
    }

    .auth-right {
        flex: 0 0 min(420px, 46%);
        width: min(420px, 46%);
        padding: 32px 24px;
    }

    .auth-panel {
        max-width: 100%;
    }
}

@media (max-width: 960px) {
    .auth-page { flex-direction: column; }
    .auth-left { display: none; }
    .auth-right {
        width: 100%;
        flex: 1 1 auto;
        border-left: none;
        min-height: 100vh;
        padding: 56px 24px 40px;
        box-shadow: none;
    }
    .auth-panel { max-width: 420px; }
    .balance-hero, .profile-grid { grid-template-columns: 1fr; }
    .profile-grid { max-width: none; }
    .recharge-body { grid-template-columns: 1fr; }
    .recharge-side { position: static; }
    .complaint-apply-body { grid-template-columns: 1fr; }
    .complaint-apply-side { position: static; }
    .complaint-form-grid { grid-template-columns: 1fr; }
    .complaint-detail-body { grid-template-columns: 1fr; }
    .complaint-detail-side { position: static; order: -1; }
    .complaint-msg { max-width: 92%; }
}
@media (max-width: 480px) {
    .amount-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pay-channel-item {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }
}

.pay-pwd-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pay-pwd-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #dbeafe;
}
.pay-pwd-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}
.pay-pwd-hero-icon [data-arco-icon],
.pay-pwd-hero-icon svg {
    color: #fff;
    stroke: currentColor;
}
.pay-pwd-hero-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}
.pay-pwd-hero-sub {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 14px;
}
.pay-pwd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}
.pay-pwd-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px 24px;
}
.pay-pwd-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.pay-pwd-card-head [data-arco-icon] {
    color: #2563eb;
}
.pay-pwd-form-item {
    margin-bottom: 16px;
}
.pay-pwd-form-item .arco-form-item-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #334155;
}
.pay-pwd-form-item .required {
    color: #ef4444;
}
.pay-pwd-readonly {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-weight: 600;
}
.pay-pwd-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}
.pay-pwd-captcha-row,
.pay-pwd-code-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.pay-pwd-captcha-row .arco-input-wrapper,
.pay-pwd-code-row .arco-input-wrapper {
    flex: 1;
}
.pay-pwd-captcha-img {
    width: 120px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    object-fit: cover;
    background: #f8fafc;
}
.pay-pwd-password-wrap {
    position: relative;
}
.pay-pwd-password-wrap .arco-input {
    padding-right: 42px;
}
.pay-pwd-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
}
.pay-pwd-toggle:hover {
    color: #2563eb;
    background: #eff6ff;
}
.pay-pwd-side-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.pay-pwd-side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
}
.pay-pwd-tip-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pay-pwd-tip-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pay-pwd-tip-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pay-pwd-tip-icon.blue { background: #eff6ff; color: #2563eb; }
.pay-pwd-tip-icon.green { background: #ecfdf5; color: #059669; }
.pay-pwd-tip-icon.orange { background: #fff7ed; color: #ea580c; }
.pay-pwd-tip-icon.pink { background: #fdf2f8; color: #db2777; }
.pay-pwd-tip-item strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 2px;
}
.pay-pwd-tip-item p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.55;
}
.pay-pwd-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    line-height: 1.55;
}
.pay-pwd-alert [data-arco-icon] {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}
.pay-pwd-disabled {
    padding: 28px;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}
.pay-pwd-verify-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    border-radius: 10px;
    background: #f1f5f9;
}
.pay-pwd-verify-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.pay-pwd-verify-tab:hover:not(:disabled) {
    color: #2563eb;
}
.pay-pwd-verify-tab.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.pay-pwd-verify-tab:disabled {
    opacity: .45;
    cursor: not-allowed;
}
@media (max-width: 960px) {
    .pay-pwd-layout {
        grid-template-columns: 1fr;
    }
}

/* ========== 消费概览仪表盘 ========== */
#panel-home .content-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.buyer-dash-welcome {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-radius: 16px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(125deg, #0958d9 0%, rgb(var(--primary-6)) 38%, #4096ff 72%, #69b1ff 100%);
    box-shadow: 0 12px 32px rgba(var(--primary-6), 0.24);
}

.buyer-dash-welcome-deco {
    position: absolute;
    right: -28px;
    top: -36px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.buyer-dash-welcome-deco::after {
    content: '';
    position: absolute;
    left: -90px;
    bottom: -120px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.buyer-dash-welcome-main {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.buyer-dash-welcome-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.buyer-dash-welcome-quote {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}

.buyer-dash-welcome-quote-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.buyer-dash-welcome-quote-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.96);
}

.buyer-dash-welcome-quote-author {
    margin-left: 0.35em;
    font-style: normal;
    font-size: 12px;
    opacity: 0.82;
    white-space: nowrap;
}

.buyer-dash-welcome-meta {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.82;
}

.buyer-dash-welcome-balance {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.26);
}

.buyer-dash-welcome-balance .label {
    font-size: 12px;
    opacity: 0.9;
}

.buyer-dash-welcome-balance .value {
    margin-top: 4px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.buyer-dash-welcome-balance .sub {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.88;
}

.buyer-dash-stats-with-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 0;
}

.buyer-dash-stats-with-notice.has-notice {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
}

.buyer-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.buyer-dash-stat-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.buyer-dash-stat-main .label {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.buyer-dash-stat-main .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.buyer-dash-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buyer-dash-stat-card.tone-blue .buyer-dash-stat-icon {
    background: rgba(var(--primary-6), .12);
    color: rgb(var(--primary-6));
}

.buyer-dash-stat-card.tone-green .buyer-dash-stat-icon {
    background: rgba(var(--success-6), .12);
    color: rgb(var(--success-6));
}

.buyer-dash-stat-card.tone-orange .buyer-dash-stat-icon {
    background: rgba(var(--warning-6), .12);
    color: rgb(var(--warning-6));
}

.buyer-dash-stat-card.tone-purple .buyer-dash-stat-icon {
    background: rgba(114, 46, 209, .12);
    color: #722ed1;
}

.buyer-dash-stat-card.tone-teal .buyer-dash-stat-icon {
    background: rgba(19, 194, 194, .12);
    color: #13c2c2;
}

.buyer-dash-stat-card.tone-red .buyer-dash-stat-icon {
    background: rgba(var(--danger-6), .12);
    color: rgb(var(--danger-6));
}

.buyer-dash-order-status {
    padding: 14px 16px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.buyer-dash-status-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.buyer-dash-status-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.buyer-dash-status-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-body, #fafafa);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
}

.buyer-dash-status-chip:hover {
    border-color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), .04);
    transform: translateY(-1px);
}

.buyer-dash-status-chip .num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.buyer-dash-status-chip .txt {
    font-size: 12px;
    color: var(--text-muted);
}

.buyer-dash-status-chip.tone-warning .num { color: rgb(var(--warning-6)); }
.buyer-dash-status-chip.tone-success .num { color: rgb(var(--success-6)); }
.buyer-dash-status-chip.tone-danger .num { color: rgb(var(--danger-6)); }
.buyer-dash-status-chip.tone-muted .num { color: var(--text-muted); }

.buyer-dash-quick {
    padding: 14px 16px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.buyer-dash-quick-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.buyer-dash-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.buyer-dash-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-body, #fafafa);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.buyer-dash-quick-btn:hover {
    border-color: rgb(var(--primary-6));
    background: rgba(var(--primary-6), .06);
    color: rgb(var(--primary-6));
}

.buyer-dash-quick-btn [data-arco-icon] {
    width: 16px;
    height: 16px;
}

.buyer-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.buyer-dash-section {
    padding: 16px 18px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    min-height: 180px;
}

.buyer-dash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.buyer-dash-section-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.buyer-dash-list {
    display: flex;
    flex-direction: column;
}

.buyer-dash-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
}

.buyer-dash-list-item:first-child { padding-top: 0; }
.buyer-dash-list-item:last-child { border-bottom: none; padding-bottom: 0; }

.buyer-dash-list-main {
    flex: 1;
    min-width: 0;
}

.buyer-dash-list-main .title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buyer-dash-list-main .meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buyer-dash-list-side {
    flex-shrink: 0;
    text-align: right;
}

.buyer-dash-list-side .amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.buyer-dash-list-side .amount.amount-positive { color: rgb(var(--success-6)); }
.buyer-dash-list-side .amount.amount-negative { color: rgb(var(--danger-6)); }

.buyer-dash-list-side .sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.buyer-dash-order-item {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.buyer-dash-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.buyer-dash-order-shop {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #4e5969);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buyer-dash-order-goods {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.buyer-dash-order-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.buyer-dash-order-no {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.01em;
}

.buyer-dash-order-sep {
    color: #c9cdd4;
}

.buyer-dash-order-time {
    white-space: nowrap;
}

.buyer-dash-order-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2px;
}

.buyer-dash-order-foot .amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* 兼容旧结构 */
.buyer-dash-order-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.buyer-dash-order-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
}

.buyer-dash-order-line .label {
    flex: 0 0 auto;
    color: var(--text-muted);
    white-space: nowrap;
}

.buyer-dash-order-line .label::after {
    content: '：';
}

.buyer-dash-order-line .value {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buyer-dash-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .buyer-dash-order-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .buyer-dash-order-item {
        gap: 6px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: #fff;
    }

    .buyer-dash-order-item:first-child,
    .buyer-dash-order-item:last-child {
        padding-top: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }
}

@media (max-width: 960px) {
    .buyer-dash-welcome {
        flex-direction: column;
    }

    .buyer-dash-welcome-balance {
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
        padding-top: 14px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
    }

    .buyer-dash-welcome-balance .value {
        font-size: 26px;
    }

    .buyer-dash-status-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buyer-dash-grid {
        grid-template-columns: 1fr;
    }
}

.buyer-wechat-verify-mask {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(15, 23, 42, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.buyer-wechat-verify-panel {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.buyer-wechat-verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f7;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.buyer-wechat-verify-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}

.buyer-wechat-verify-body {
    padding: 18px 20px 22px;
    text-align: center;
}

.buyer-wechat-verify-tip {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

.buyer-wechat-verify-qr-wrap {
    display: inline-flex;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.buyer-wechat-verify-qr {
    display: block;
    width: 200px;
    height: 200px;
}

.buyer-wechat-verify-status {
    margin: 14px 0 8px;
    font-size: 13px;
    color: #059669;
}

.buyer-wechat-verify-link {
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
}

.buyer-wechat-verify-link:hover {
    text-decoration: underline;
}

.recharge-mode-tabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 16px;
    padding: 3px;
    border-radius: 12px;
    background: #f2f3f5;
}

.recharge-mode-tab {
    border: none;
    background: transparent;
    color: #4e5969;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.recharge-mode-tab:hover:not(.active) {
    color: rgb(var(--primary-6, 22, 93, 255));
}

.recharge-mode-tab.active {
    background: #fff;
    color: rgb(var(--primary-6, 22, 93, 255));
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

/* ===== 充值结果页 ===== */
.pay-result-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 48px;
    background: var(--color-bg-2, #f5f7fa);
    position: relative;
    overflow: hidden;
}

.pay-result-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(145deg, #eef4ff 0%, #f8faff 45%, #f3f0ff 100%);
}

.pay-result-glow {
    position: absolute;
    border-radius: 50%;
}

.pay-result-glow-1 {
    width: min(520px, 70vw);
    height: min(520px, 70vw);
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, rgba(22, 93, 255, 0.14) 0%, transparent 68%);
}

.pay-result-glow-2 {
    width: min(420px, 55vw);
    height: min(420px, 55vw);
    left: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(114, 46, 209, 0.1) 0%, transparent 70%);
}

.pay-result-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(22, 93, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 93, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 85%);
}

.pay-result-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
}

.pay-result-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    text-decoration: none;
    color: var(--text-primary, #1d2129);
}

.pay-result-brand-logo {
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.pay-result-brand-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pay-result-card {
    box-shadow: var(--shadow-md, 0 4px 10px rgba(29, 33, 41, 0.06));
}

.pay-result-body {
    padding: 36px 28px 28px;
    text-align: center;
}

.pay-result-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-result-icon [data-arco-icon],
.pay-result-icon .arco-icon,
.pay-result-icon svg {
    width: 36px;
    height: 36px;
}

.pay-result-icon.is-success {
    background: rgba(var(--success-6, 0, 180, 42), 0.12);
    color: rgb(var(--success-6, 0, 180, 42));
}

.pay-result-icon.is-pending {
    background: rgba(var(--warning-6, 255, 125, 0), 0.12);
    color: rgb(var(--warning-6, 255, 125, 0));
}

.pay-result-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, #1d2129);
}

.pay-result-sub {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #4e5969);
}

.pay-result-amount {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(var(--success-6, 0, 180, 42));
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.pay-result-fee {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--text-muted, #86909c);
}

.pay-result-pending-tip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-secondary, #4e5969);
    background: var(--color-fill-2, #f2f3f5);
    border: 1px solid var(--border-color, #e5e6eb);
}

.pay-result-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--primary-6, 22, 93, 255), 0.15);
    border-top-color: rgb(var(--primary-6, 22, 93, 255));
    border-radius: 50%;
    animation: buyer-boot-spin .8s linear infinite;
    flex-shrink: 0;
}

.pay-result-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-fill-1, #f7f8fa);
    border: 1px solid var(--border-color, #e5e6eb);
    text-align: left;
}

.pay-result-meta-label {
    font-size: 12px;
    color: var(--text-muted, #86909c);
}

.pay-result-meta-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1d2129);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}

.pay-result-actions {
    margin-top: 4px;
}

.pay-result-actions .arco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pay-result-actions .arco-btn [data-arco-icon],
.pay-result-actions .arco-btn .arco-icon,
.pay-result-actions .arco-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .pay-result-body {
        padding: 28px 20px 22px;
    }

    .pay-result-title {
        font-size: 22px;
    }

    .pay-result-amount {
        font-size: 32px;
    }
}

.activity-log-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-2, rgba(255, 255, 255, .08));
}

.activity-log-tab {
    border: 1px solid var(--color-border-2, rgba(255, 255, 255, .12));
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, .65));
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: all .2s ease;
}

.activity-log-tab:hover {
    color: var(--text-primary, rgba(255, 255, 255, .88));
    border-color: rgba(var(--primary-6, 22, 93, 255), .25);
}

.activity-log-tab.active {
    color: rgb(var(--primary-6, 22, 93, 255));
    border-color: rgba(var(--primary-6, 22, 93, 255), .45);
    background: rgba(var(--primary-6, 22, 93, 255), .12);
    font-weight: 600;
}

.activity-log-tip {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted, rgba(255, 255, 255, .55));
}

.mobile-card-list {
    display: none;
}

#panel-activity-log .content-card-body {
    padding-top: 4px;
}

.desktop-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.desktop-table-wrap .dark-table {
    width: 100%;
    min-width: 720px;
}

.desktop-table-wrap .order-table {
    min-width: 900px;
}

#panel-activity-log .dark-table {
    margin-top: 0;
}

/* ===== PC 多分辨率适配 ===== */
@media (max-width: 1280px) {
    .buyer-dash-stats-with-notice.has-notice {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    }

    .buyer-dash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buyer-dash-stats-with-notice.has-notice .buyer-dash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .buyer-dash-stats-with-notice.has-notice {
        grid-template-columns: minmax(0, 1fr);
    }

    .buyer-dash-stats-with-notice.has-notice .buyer-notice-banner-list {
        height: auto;
        max-height: 220px;
    }
}

    .buyer-dash-status-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recharge-body {
        grid-template-columns: 1fr;
    }

    .recharge-side {
        position: static;
    }

    .complaint-apply-body,
    .complaint-detail-body {
        grid-template-columns: 1fr;
    }

    .complaint-apply-side,
    .complaint-detail-side {
        position: static;
    }
}

@media (max-width: 1024px) {
    body.arco-pc-app .menu-toggle {
        display: inline-flex;
    }

    body.arco-pc-app .sidebar {
        transform: translateX(-100%);
        transition: transform .25s;
    }

    body.arco-pc-app .sidebar.open {
        transform: translateX(0);
    }

    body.arco-pc-app .topbar {
        left: 0;
        padding: 0 clamp(12px, 2vw, 20px);
    }

    body.arco-pc-app .topbar-breadcrumb {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.arco-pc-app .topbar-user-card {
        max-width: min(240px, 42vw);
    }

    body.arco-pc-app .main {
        margin-left: 0;
    }

    .buyer-dash-grid {
        grid-template-columns: 1fr;
    }

    .content-card-body {
        padding: 14px clamp(12px, 2vw, 18px) 16px;
    }

    .content-card-header {
        padding: 12px clamp(12px, 2vw, 18px);
        flex-wrap: wrap;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .buyer-dash-welcome-balance .value {
        font-size: 26px;
    }

    .buyer-dash-stat-main .value {
        font-size: 20px;
    }
}

#panel-activity-log .pagination {
    margin-top: 18px;
}

.shop-history-tip {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.shop-history-desktop {
    width: 100%;
}

.shop-history-list {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--bg-card);
}

.shop-history-head,
.shop-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px 72px 156px;
    align-items: center;
    column-gap: 16px;
    padding: 12px 18px;
}

.shop-history-head {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.shop-history-row {
    border-top: 1px solid var(--border-color);
    transition: background-color .2s;
}

.shop-history-row:hover {
    background: var(--bg-card-hover);
}

.shop-history-col-shop {
    min-width: 0;
}

.shop-history-col-time,
.shop-history-col-count,
.shop-history-col-actions,
.shop-history-head .shop-history-col-time,
.shop-history-head .shop-history-col-count,
.shop-history-head .shop-history-col-actions {
    text-align: center;
}

.shop-history-col-time {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.shop-history-col-count {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.shop-history-col-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.shop-history-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

@media (max-width: 900px) {
    .shop-history-head,
    .shop-history-row {
        grid-template-columns: minmax(0, 1fr) 140px 60px 140px;
        column-gap: 10px;
        padding: 12px 14px;
    }
}

.shop-history-shop {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}

.shop-history-shop:hover {
    opacity: .92;
}

.shop-history-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(var(--primary-6, 22, 93, 255)), #66b1ff);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primary-6, 22, 93, 255), .18);
}

.shop-history-avatar.has-image {
    background: var(--bg-card-hover);
    box-shadow: 0 1px 4px rgba(29, 33, 41, .08);
}

.shop-history-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-history-avatar.tone-1 {
    background: linear-gradient(135deg, #722ed1, #b37feb);
}

.shop-history-avatar.tone-2 {
    background: linear-gradient(135deg, #0fc6c2, #3fd4cf);
}

.shop-history-avatar.tone-3 {
    background: linear-gradient(135deg, #ff7d00, #ffb65d);
}

.shop-history-avatar.tone-4 {
    background: linear-gradient(135deg, #00b42a, #5cdb7f);
}

.shop-history-shop-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-history-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-history-shop:hover .shop-history-name {
    color: var(--accent-blue);
}

.shop-history-token {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-history-card-head {
    margin-bottom: 10px;
}

.shop-history-card-head .shop-history-shop {
    width: 100%;
}

.shop-history-card .shop-history-name {
    font-size: 15px;
}

#panel-shop-history .pagination {
    margin-top: 18px;
}

/* 买家公告通知 - 统计卡片右侧竖栏（对齐上下两行高度） */
.buyer-notice-banner-list {
    min-width: 0;
    height: 100%;
    margin: 0;
}

.buyer-notice-banner-list:empty,
.buyer-notice-banner-list[hidden] {
    display: none !important;
}

.buyer-dash-stats-with-notice.has-notice .buyer-notice-banner-list {
    display: flex;
}

.buyer-notice-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid rgba(22, 93, 255, 0.14);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(22, 93, 255, 0.08) 0%, rgba(247, 248, 250, 0.96) 42%, #fff 100%);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.buyer-notice-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 12px 8px;
    border-bottom: 1px solid rgba(22, 93, 255, 0.08);
}

.buyer-notice-strip-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.02em;
}

.buyer-notice-strip-label .arco-icon,
.buyer-notice-strip-label svg {
    width: 15px;
    height: 15px;
}

.buyer-notice-strip-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
    transition: color 0.15s;
}

.buyer-notice-strip-more:hover {
    color: var(--accent-blue);
}

.buyer-notice-strip-more .arco-icon,
.buyer-notice-strip-more svg {
    width: 12px;
    height: 12px;
}

.buyer-notice-strip-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.buyer-notice-strip-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.buyer-notice-strip-item:hover {
    background: rgba(255, 255, 255, 0.78);
}

.buyer-notice-strip-dot {
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent-blue);
}

.buyer-notice-strip-item.tone-warning .buyer-notice-strip-dot { background: var(--accent-orange); }
.buyer-notice-strip-item.tone-success .buyer-notice-strip-dot { background: var(--accent-green); }
.buyer-notice-strip-item.tone-danger .buyer-notice-strip-dot { background: rgb(var(--danger-6, 245, 63, 63)); }

.buyer-notice-strip-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buyer-notice-strip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buyer-notice-strip-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.buyer-notice-strip-foot {
    flex-shrink: 0;
    padding: 0 12px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* 公告列表 / 详情 — Arco List + Tag + Link */
.buyer-notice-list-count {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
}

.buyer-notice-panel-body {
    padding-top: 12px !important;
}

.buyer-notice-empty-wrap {
    padding: 48px 16px;
}

.buyer-notice-arco-list {
    border: 1px solid var(--color-border-2, var(--border-color));
    border-radius: var(--border-radius-medium, 4px);
    background: var(--color-bg-2, #fff);
    overflow: hidden;
}

.buyer-notice-arco-list .arco-list-item {
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.buyer-notice-arco-list .arco-list-item-meta-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.buyer-notice-arco-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-1, var(--text-primary));
    line-height: 1.4;
}

.buyer-notice-arco-list .arco-list-item-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: 16px;
}

.buyer-notice-arco-time {
    font-size: 12px;
    color: var(--color-text-3, var(--text-muted));
    white-space: nowrap;
}

.buyer-notice-arco-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
}

.buyer-notice-arco-link .arco-icon,
.buyer-notice-arco-link svg {
    width: 12px;
    height: 12px;
}

.buyer-notice-detail {
    display: flex;
    justify-content: center;
}

.buyer-notice-detail-article {
    width: 100%;
    max-width: 680px;
}

.buyer-notice-detail-head {
    text-align: center;
    margin-bottom: 4px;
}

.buyer-notice-detail-tags {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.buyer-notice-detail-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-1, var(--text-primary));
    word-break: break-word;
}

.buyer-notice-detail-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    font-size: 13px;
    color: var(--color-text-3, var(--text-muted));
}

.buyer-notice-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.buyer-notice-detail-meta .arco-icon,
.buyer-notice-detail-meta svg {
    width: 14px;
    height: 14px;
}

.buyer-notice-detail-divider {
    margin: 20px auto !important;
    max-width: 64px;
}

.buyer-notice-detail-content {
    font-size: 15px;
    line-height: 1.85;
    color: var(--color-text-2, var(--text-secondary));
    text-align: left;
}

.buyer-notice-detail-empty-text {
    text-align: center;
    color: var(--color-text-3, var(--text-muted));
}

/* 详情正文 Markdown 样式 */
.buyer-notice-detail-content.buyer-md-body p {
    margin: 0 0 0.9em;
}

.buyer-notice-detail-content.buyer-md-body h1,
.buyer-notice-detail-content.buyer-md-body h2,
.buyer-notice-detail-content.buyer-md-body h3 {
    margin: 1.1em 0 0.5em;
    font-weight: 600;
    color: var(--color-text-1, var(--text-primary));
    line-height: 1.35;
}

.buyer-notice-detail-content.buyer-md-body h1 { font-size: 1.35em; }
.buyer-notice-detail-content.buyer-md-body h2 { font-size: 1.2em; }
.buyer-notice-detail-content.buyer-md-body h3 { font-size: 1.08em; }

.buyer-notice-detail-content.buyer-md-body .buyer-md-list {
    margin: 0.4em 0 1em;
    padding-left: 1.4em;
    text-align: left;
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-list li {
    margin: 0.35em 0;
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-quote {
    margin: 0.8em 0;
    padding: 10px 14px;
    border-left: 3px solid rgb(var(--primary-6, 22, 93, 255));
    border-radius: 0 6px 6px 0;
    background: var(--color-fill-1, #f7f8fa);
    color: var(--color-text-2, var(--text-secondary));
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-quote p {
    margin: 0;
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-pre {
    margin: 0.8em 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--color-fill-2, #f2f3f5);
    border: 1px solid var(--color-border-2, var(--border-color));
    color: var(--color-text-1, var(--text-primary));
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-pre code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: inherit;
}

.buyer-notice-detail-content.buyer-md-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-fill-2, #f2f3f5);
    color: var(--color-text-1, var(--text-primary));
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
    border-radius: 8px;
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-video {
    margin: 12px auto;
}

.buyer-notice-detail-content.buyer-md-body .buyer-md-hr {
    border: none;
    border-top: 1px solid var(--color-border-2, var(--border-color));
    margin: 1.2em auto;
    max-width: 80%;
}

.buyer-notice-detail-content.buyer-md-body a {
    color: rgb(var(--primary-6, 22, 93, 255));
    text-decoration: none;
}

.buyer-notice-detail-content.buyer-md-body a:hover {
    text-decoration: underline;
}

.buyer-notice-detail-content.buyer-md-body strong {
    color: var(--color-text-1, var(--text-primary));
    font-weight: 600;
}

.buyer-notice-modal-summary {
    margin: 0 0 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.buyer-notice-modal-detail {
    width: 100%;
}

.buyer-notice-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(var(--primary-6), 0.1);
    color: rgb(var(--primary-6));
}

@media (max-width: 720px) {
    .buyer-notice-arco-list .arco-list-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .buyer-notice-arco-list .arco-list-item-action {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .buyer-notice-detail-title {
        font-size: 20px;
    }
}

.buyer-md-body p { margin: 0 0 0.7em; }
.buyer-md-body p:last-child { margin-bottom: 0; }
.buyer-md-body h1,
.buyer-md-body h2,
.buyer-md-body h3 {
    margin: 0.85em 0 0.4em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}
.buyer-md-body h1 { font-size: 1.28em; }
.buyer-md-body h2 { font-size: 1.14em; }
.buyer-md-body h3 { font-size: 1.05em; }
.buyer-md-body ul,
.buyer-md-body ol {
    margin: 0.35em 0 0.75em;
    padding-left: 1.35em;
}
.buyer-md-body li { margin: 0.18em 0; }
.buyer-md-body blockquote {
    margin: 0.55em 0;
    padding: 6px 12px;
    border-left: 3px solid var(--accent-blue);
    background: rgba(22, 93, 255, 0.06);
    color: var(--text-secondary);
}
.buyer-md-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-card-hover, #f2f3f5);
}
.buyer-md-body pre {
    margin: 0.55em 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #1d2129;
    color: #f2f3f5;
    overflow: auto;
}
.buyer-md-body pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}
.buyer-md-body a {
    color: var(--accent-blue);
    text-decoration: none;
}
.buyer-md-body a:hover { text-decoration: underline; }
.buyer-md-body hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.9em 0;
}
.buyer-md-body .buyer-md-img,
.buyer-md-body img.buyer-md-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 8px;
}
.buyer-md-body .buyer-md-video {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    background: #0f1115;
    aspect-ratio: 16 / 9;
}
.buyer-md-body .buyer-md-video video,
.buyer-md-body .buyer-md-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.buyer-notice-modal[hidden] { display: none !important; }

.buyer-notice-modal {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.buyer-notice-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(29, 33, 41, 0.45);
}

.buyer-notice-modal-card {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(29, 33, 41, 0.22);
    overflow: hidden;
}

.buyer-notice-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color);
}

.buyer-notice-modal-head h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
}

.buyer-notice-modal-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(22, 93, 255, 0.1);
    color: var(--accent-blue);
}

.buyer-notice-modal-badge.tone-warning {
    background: rgba(255, 125, 0, 0.12);
    color: var(--accent-orange);
}
.buyer-notice-modal-badge.tone-success {
    background: rgba(0, 180, 42, 0.12);
    color: var(--accent-green);
}
.buyer-notice-modal-badge.tone-danger {
    background: rgba(245, 63, 63, 0.12);
    color: rgb(var(--danger-6, 245, 63, 63));
}

.buyer-notice-modal-x {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.buyer-notice-modal-body {
    padding: 16px 18px;
    overflow: auto;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    word-break: break-word;
}

.buyer-notice-modal-foot {
    padding: 12px 18px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
}

body.buyer-notice-modal-open {
    overflow: hidden;
}

/* 推广中心 */
.buyer-promote-panel-body {
    padding-top: 4px;
}
.buyer-promote-overview {
    margin-bottom: 16px;
}
.buyer-promote-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.buyer-promote-stat {
    background: var(--bg-secondary, #f7f8fa);
    border: 1px solid var(--border-color, #e5e6eb);
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
}
.buyer-promote-stat .label {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #86909c);
    margin-bottom: 6px;
}
.buyer-promote-stat strong {
    font-size: 18px;
    color: var(--text-primary, #1d2129);
    font-weight: 600;
}
.buyer-promote-share {
    border: 1px solid var(--border-color, #e5e6eb);
    border-radius: 12px;
    padding: 14px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(22, 93, 255, 0.08) 0%, transparent 55%),
        #fff;
}
.buyer-promote-code-card {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(22, 93, 255, 0.12);
}
.buyer-promote-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.buyer-promote-code-head .label,
.buyer-promote-link-card > .label {
    font-size: 12px;
    color: var(--text-muted, #86909c);
}
.buyer-promote-code-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    color: rgb(var(--primary-6, 22, 93, 255));
    background: rgba(22, 93, 255, 0.08);
}
.buyer-promote-code-row {
    margin-bottom: 10px;
}
.buyer-promote-code-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    color: var(--primary, #165dff) !important;
    background: #f7faff !important;
}
.buyer-promote-code-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.buyer-promote-code-actions .arco-btn {
    width: auto;
    min-width: 72px;
    flex: 0 0 auto;
    padding-left: 14px;
    padding-right: 14px;
}
.buyer-promote-link-card {
    margin-bottom: 10px;
}
.buyer-promote-link-card > .label {
    display: block;
    margin-bottom: 6px;
}
.buyer-promote-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.buyer-promote-link-row .arco-input {
    flex: 1;
    min-width: 0;
}
.buyer-promote-link-row .arco-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 64px;
    padding-left: 14px;
    padding-right: 14px;
}
.buyer-promote-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.buyer-promote-share-row .label {
    flex: 0 0 72px;
    font-size: 13px;
    color: var(--text-muted, #86909c);
}
.auth-form .buyer-invite-input-wrap .arco-input.is-invite-locked,
.auth-form .arco-input-wrapper.is-invite-locked .arco-input {
    background: #f2f3f5 !important;
    color: #4e5969 !important;
    cursor: not-allowed;
    caret-color: transparent;
}
.buyer-promote-share-row .arco-input {
    flex: 1;
    min-width: 0;
}
.buyer-promote-tip {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted, #86909c);
    line-height: 1.5;
}
.buyer-promote-list-card {
    border: 1px solid var(--border-color, #e5e6eb);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}
.buyer-promote-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 12px;
    padding: 3px;
    border-radius: 10px;
    background: #f2f3f5;
}
.buyer-promote-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-secondary, #4e5969);
    border-radius: 8px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    cursor: pointer;
}
.buyer-promote-tab.active {
    color: rgb(var(--primary-6, 22, 93, 255));
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.buyer-promote-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.buyer-promote-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e5e6eb);
    border-radius: 8px;
    background: #fff;
}
.buyer-promote-item .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1d2129);
}
.buyer-promote-item .sub,
.buyer-promote-item .time {
    font-size: 12px;
    color: var(--text-muted, #86909c);
    margin-top: 4px;
}
.buyer-promote-item-side {
    text-align: right;
    flex-shrink: 0;
}
.buyer-promote-status {
    display: inline-block;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;
}
.buyer-promote-status.ok {
    color: #00b42a;
    background: #e8ffea;
}
.buyer-promote-status.muted {
    color: #86909c;
    background: #f2f3f5;
}
.buyer-promote-rate {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #86909c);
}
.buyer-promote-empty,
.buyer-promote-loading,
.buyer-promote-disabled {
    padding: 28px 12px;
    text-align: center;
    color: var(--text-muted, #86909c);
    font-size: 13px;
}
@media (max-width: 720px) {
    .buyer-promote-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}