/* ===== AIHub 白色简约主题 ===== */

/* 全局 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #f5f6fa;
  color: #1a1a2e;
  font-size: 14px;
  line-height: 1.6;
}

/* ===== 登录页 ===== */
.login-container {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
}
.login-card {
  background: #fff; border-radius: 20px;
  padding: 48px 40px 40px; width: 400px; text-align: center;
  box-shadow: 0 4px 24px rgba(124,92,252,0.08), 0 1px 4px rgba(0,0,0,0.04);
}
.login-logo .logo-icon { font-size: 48px; display: block; margin-bottom: 8px; }
.login-logo h1 { font-size: 28px; color: #7c5cfc; margin: 0 0 4px; font-weight: 700; letter-spacing: -0.5px; }
.login-logo p { color: #888; margin: 0 0 32px; font-size: 14px; }
.login-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 2px solid #f0f0f5; }
.login-tabs .tab-btn {
  flex: 1; padding: 10px; background: none; border: none; color: #999;
  cursor: pointer; font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.login-tabs .tab-btn.active { color: #7c5cfc; border-bottom-color: #7c5cfc; }
.login-form .form-group { text-align: left; margin-bottom: 18px; }
.login-form .form-group label { display: block; color: #555; font-size: 13px; margin-bottom: 6px; font-weight: 500; }
.login-form .form-group input {
  width: 100%; padding: 11px 14px; background: #f8f9fc; border: 1.5px solid #e8e8f0;
  border-radius: 10px; color: #1a1a2e; font-size: 14px; transition: border-color 0.2s;
  box-sizing: border-box;
}
.login-form .form-group input:focus { outline: none; border-color: #7c5cfc; background: #fff; }
.login-form .form-group input::placeholder { color: #bbb; }
.btn-primary {
  width: 100%; padding: 12px; background: #7c5cfc; border: none; border-radius: 10px;
  color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px;
  transition: background 0.2s, transform 0.1s;
}
.btn-primary:hover { background: #6a4ae8; }
.btn-primary:active { transform: scale(0.98); }
.login-hint { color: #aaa; font-size: 12px; margin-top: 18px; }

/* ===== 顶栏 ===== */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 28px; height: 56px; background: #fff;
  border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.03);
}
.top-left .logo-small { color: #7c5cfc; font-weight: 700; font-size: 18px; letter-spacing: -0.3px; }
.top-right { display: flex; align-items: center; gap: 18px; }
.credit-badge {
  display: flex; align-items: center; gap: 6px;
  background: #f8f6ff; border: 1.5px solid #ece6ff; border-radius: 20px;
  padding: 6px 14px; cursor: pointer; font-size: 14px; color: #7c5cfc; font-weight: 500;
  transition: background 0.2s;
}
.credit-badge:hover { background: #eee6ff; }
.credit-icon { font-size: 15px; }
.user-menu { position: relative; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; transition: background 0.2s; }
.user-menu:hover { background: #f5f5fa; }
.avatar-small {
  width: 32px; height: 32px; border-radius: 50%; background: #7c5cfc;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600;
}
.dropdown-menu {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  min-width: 170px; padding: 6px 0; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.dropdown-item {
  padding: 10px 18px; cursor: pointer; font-size: 14px; color: #444;
  transition: background 0.15s;
}
.dropdown-item:hover { background: #f8f6ff; color: #7c5cfc; }
.dropdown-item.danger { color: #e74c3c; }
.dropdown-item.danger:hover { background: #fff0f0; color: #e74c3c; }

/* ===== 侧边栏 ===== */
.sidebar {
  position: fixed; left: 0; top: 56px; bottom: 0; width: 230px;
  background: #fff; border-right: 1px solid #eee; padding: 16px 0;
  overflow-y: auto; z-index: 50;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-radius: 10px; color: #666; text-decoration: none; font-size: 14px;
  transition: all 0.2s; font-weight: 400;
}
.sidebar-nav .nav-item:hover { background: #f8f6ff; color: #7c5cfc; }
.sidebar-nav .nav-item.active { background: #f0ecff; color: #7c5cfc; font-weight: 600; }

/* ===== 主内容 ===== */
.main-content { margin-left: 230px; margin-top: 56px; padding: 28px; min-height: calc(100vh - 56px); }

/* ===== 工作台 ===== */
.welcome-banner {
  background: #fff; border-radius: 16px; padding: 32px; margin-bottom: 24px;
  border: 1px solid #eee;
}
.welcome-banner h2 { margin: 0 0 8px; color: #1a1a2e; font-size: 22px; font-weight: 700; }
.welcome-banner p { color: #888; margin: 0; font-size: 14px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card {
  background: #fff; border: 1px solid #eee; border-radius: 14px;
  padding: 22px 20px; text-align: center; transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: 0 4px 16px rgba(124,92,252,0.08); }
.stat-value { font-size: 30px; font-weight: 800; color: #7c5cfc; }
.stat-label { font-size: 13px; color: #999; margin-top: 4px; }
.quick-tools h3 { color: #333; margin-bottom: 16px; font-size: 16px; font-weight: 600; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tool-card {
  background: #fff; border: 1.5px solid #eee; border-radius: 14px;
  padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.2s;
}
.tool-card:hover { border-color: #7c5cfc; box-shadow: 0 4px 16px rgba(124,92,252,0.1); transform: translateY(-2px); }
.tool-card span { font-size: 36px; display: block; margin-bottom: 10px; }
.tool-card p { color: #333; margin: 0; font-size: 14px; font-weight: 500; }
.tool-card small { color: #aaa; font-size: 11px; display: block; margin-top: 4px; }

/* ===== 对话页 ===== */
.page-chat { height: calc(100vh - 120px); }
.chat-layout { display: flex; height: 100%; gap: 0; }
.chat-sidebar {
  width: 260px; background: #fff; border-right: 1px solid #eee;
  padding: 20px 16px; overflow-y: auto; border-radius: 14px 0 0 14px;
}

/* 自动 / Max 开关 */
.model-selector-header { margin-bottom: 14px; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  color: #333; font-size: 13px; padding: 8px 0; cursor: pointer;
}
.toggle-row input { display: none; }
.toggle-slider {
  width: 38px; height: 20px; background: #ddd; border-radius: 20px;
  position: relative; transition: background 0.2s;
}
.toggle-slider::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-row input:checked + .toggle-slider { background: #7c5cfc; }
.toggle-row input:checked + .toggle-slider::after { transform: translateX(18px); }

/* 模型下拉 */
.model-dropdown-wrapper { position: relative; margin-bottom: 12px; }
.model-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #fafbfe; border: 1px solid #e0e0e0;
  border-radius: 10px; cursor: pointer; color: #333; font-size: 14px;
  transition: border-color 0.2s; font-weight: 500;
}
.model-dropdown-trigger:hover { border-color: #7c5cfc; }
.trigger-left { display: flex; align-items: center; gap: 10px; }
.dropdown-chevron { color: #999; font-size: 12px; }

.model-dropdown {
  position: fixed; left: 0; top: 0;
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 9999;
  width: 360px; max-height: 420px; overflow-y: auto; padding: 6px;
  display: none;
}
.model-dropdown.show { display: block; }
.dropdown-section {
  color: #999; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 6px 10px 4px;
  pointer-events: none;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  color: #333; font-size: 13px; transition: background 0.15s;
}
.dropdown-item:hover { background: #f5f3ff; }
.dropdown-item.active { background: #f0ecff; }
.dropdown-item .model-name { flex: 1; font-weight: 500; }
.dropdown-item .checkmark { color: #7c5cfc; font-weight: bold; }

/* Provider 徽章 */
.provider-badge {
  width: 28px; height: 28px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; font-size: 10px;
  font-weight: 700; color: #fff; flex-shrink: 0;
}
.provider-badge.auto { background: #7c5cfc; }
.provider-badge.deepseek { background: #4f6ef7; }
.provider-badge.qwen { background: #9b59b6; }
.provider-badge.doubao { background: #3b82f6; }
.provider-badge.mimo { background: #ff6900; }
.provider-badge.openai { background: #10a37f; }

.multiplier {
  color: #999; font-size: 12px; font-variant-numeric: tabular-nums;
}

.chat-tools { margin-top: 18px; color: #999; font-size: 13px; }
.chat-tools label { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.chat-tools input[type="checkbox"] { accent-color: #7c5cfc; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: #fafbfe; border-radius: 0 14px 14px 0; border: 1px solid #eee; border-left: none; }
.chat-messages { flex: 1; overflow-y: auto; padding: 28px 24px; }

/* ===== 消息气泡 ===== */
.welcome-msg { text-align: center; color: #aaa; padding: 60px 20px; }
.welcome-msg p { margin: 10px 0; font-size: 15px; }
.welcome-msg p:first-child { font-size: 18px; }

.msg-user { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.msg-user .msg-bubble {
  background: #7c5cfc; color: #fff;
  padding: 12px 18px; border-radius: 18px 18px 6px 18px; max-width: 72%;
  font-size: 14px; line-height: 1.7; word-break: break-word; white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(124,92,252,0.15);
}
.msg-assistant { display: flex; justify-content: flex-start; margin-bottom: 20px; position: relative; }
.msg-assistant .msg-bubble {
  background: #fff; color: #1a1a2e;
  padding: 12px 18px; border-radius: 18px 18px 18px 6px; max-width: 72%;
  font-size: 14px; line-height: 1.7; word-break: break-word; white-space: pre-wrap;
  border: 1px solid #eee; box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* 消息操作按钮 */
.msg-actions {
  position: absolute; top: -10px; right: 12px;
  display: none; gap: 2px;
  background: #fff; border: 1px solid #eee; border-radius: 8px;
  padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 10;
}
.msg-assistant:hover .msg-actions,
.msg-actions:hover { display: flex; }
.msg-action-btn {
  background: none; border: none; cursor: pointer; padding: 5px 7px;
  border-radius: 6px; font-size: 13px; color: #888; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.msg-action-btn:hover { background: #f0ecff; color: #7c5cfc; }
.msg-copy-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #1a1a2e; color: #fff; padding: 8px 18px; border-radius: 8px;
  font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 9999;
}
.msg-copy-toast.show { opacity: 1; }

/* 输入区域 */
.chat-input-area { padding: 16px 24px 20px; background: #fff; border-top: 1px solid #eee; }
.input-row { display: flex; gap: 12px; align-items: flex-end; }
.input-row textarea {
  flex: 1; padding: 12px 16px; background: #f8f9fc; border: 1.5px solid #e8e8f0;
  border-radius: 14px; color: #1a1a2e; font-size: 14px; resize: none;
  font-family: inherit; line-height: 1.5; transition: border-color 0.2s;
  min-height: 44px; max-height: 120px;
}
.input-row textarea:focus { outline: none; border-color: #7c5cfc; background: #fff; }
.send-btn {
  padding: 10px 22px; background: #7c5cfc; border: none; border-radius: 12px;
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
}
.send-btn:hover { background: #6a4ae8; }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn:active { transform: scale(0.96); }
.input-hint { font-size: 12px; color: #aaa; margin-top: 8px; }

/* ===== 积分中心 ===== */
.page-credits { max-width: 800px; }
.credits-header { margin-bottom: 32px; }
.credits-balance-card {
  background: #fff; border: 2px solid #f0ecff; border-radius: 18px; padding: 36px; text-align: center;
  box-shadow: 0 4px 20px rgba(124,92,252,0.06);
}
.credits-balance-card h3 { color: #999; margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.balance-num { font-size: 52px; font-weight: 800; color: #7c5cfc; letter-spacing: -2px; }
.credits-balance-card p { color: #aaa; margin: 10px 0 0; font-size: 13px; }
.recharge-section h3 { color: #333; margin-bottom: 16px; font-size: 16px; font-weight: 600; }
.packages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.package-card {
  background: #fff; border: 2px solid #eee; border-radius: 16px;
  padding: 24px 16px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative;
}
.package-card:hover { border-color: #7c5cfc; box-shadow: 0 4px 16px rgba(124,92,252,0.1); transform: translateY(-2px); }
.package-card.recommended { border-color: #7c5cfc; }
.pkg-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #7c5cfc; color: #fff; font-size: 11px; padding: 2px 12px;
  border-radius: 10px; font-weight: 500;
}
.pkg-price { font-size: 30px; font-weight: 800; color: #1a1a2e; }
.pkg-credits { font-size: 14px; color: #7c5cfc; margin: 6px 0 2px; font-weight: 600; }
.pkg-name { font-size: 13px; color: #888; }
.pkg-per { font-size: 12px; color: #aaa; margin-top: 4px; }
.paypal-button-container { margin-top: 12px; min-height: 40px; }
.package-card.paypal-selected { border-color: #7c5cfc; background: #faf8ff; }
.transactions-section h3 { color: #333; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.tx-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.tx-table th { text-align: left; padding: 12px 14px; color: #888; font-size: 13px; border-bottom: 1px solid #eee; font-weight: 500; }
.tx-table td { padding: 12px 14px; color: #333; font-size: 13px; border-bottom: 1px solid #f5f5f5; }
.tx-plus { color: #22c55e; font-weight: 600; }
.tx-minus { color: #ef4444; font-weight: 600; }

/* ===== 任务中心 ===== */
.page-tasks { max-width: 600px; }
.task-card {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid #eee; border-radius: 14px;
  padding: 22px 24px; margin-bottom: 14px; transition: box-shadow 0.2s;
}
.task-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
.task-icon { font-size: 34px; }
.task-info { flex: 1; }
.task-info h4 { margin: 0 0 4px; color: #1a1a2e; font-size: 15px; }
.task-info p { margin: 0; color: #888; font-size: 13px; }
.btn-small {
  padding: 8px 18px; background: #7c5cfc; border: none; border-radius: 8px;
  color: #fff; font-size: 13px; cursor: pointer; font-weight: 500; transition: background 0.2s;
}
.btn-small:hover { background: #6a4ae8; }
.btn-small:disabled { background: #ccc; cursor: default; }

/* ===== 个人中心 ===== */
.page-profile { max-width: 600px; }
.profile-card {
  background: #fff; border: 1px solid #eee; border-radius: 18px;
  padding: 48px 40px; text-align: center;
}
.profile-avatar {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 18px;
  background: #7c5cfc;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #fff; font-weight: 700;
}
.profile-card h3 { color: #1a1a2e; margin: 0 0 14px; font-size: 20px; }
.profile-card p { color: #888; margin: 8px 0; font-size: 14px; }

/* ===== 管理后台 ===== */
.page-admin { max-width: 1100px; }
.admin-layout { max-width: 1100px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }

/* Admin Tabs */
.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 24px;
  background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 4px;
}
.admin-tab {
  padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; color: #666;
}
.admin-tab:hover { color: #333; background: rgba(124,92,252,0.05); }
.admin-tab.active { background: #7c5cfc; color: #fff; }

/* Data Table */
.data-table { background: #fff; border-radius: 10px; overflow: hidden; font-size: 13px; }
.data-table th {
  background: #f8f9fa; padding: 10px 12px; text-align: left; font-weight: 600;
  color: #555; border-bottom: 2px solid #e5e7eb; font-size: 12px; white-space: nowrap;
}
.data-table td {
  padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #333; vertical-align: middle;
}
.data-table tr:hover td { background: #fafbff; }

/* Badge */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-success { background: #e6fff0; color: #389e0d; }
.badge-danger { background: #fff1f0; color: #cf1322; }
.badge-warning { background: #fffbe6; color: #d48806; }
.badge-primary { background: #e6f0ff; color: #1677ff; }
.badge-secondary { background: #f5f5f5; color: #666; }
.badge-info { background: #e6fffb; color: #08979c; }

/* Modal */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 20px;
}
.modal-box { width: 100%; animation: slideDown 0.2s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* Small buttons */
.btn-sm {
  padding: 6px 12px; border: 1px solid #ddd; border-radius: 6px;
  background: #fff; color: #333; cursor: pointer; font-size: 12px; transition: all 0.15s;
}
.btn-sm:hover { background: #f5f5f5; border-color: #bbb; }
.btn-sm.btn-primary { background: #7c5cfc; color: #fff; border-color: #7c5cfc; }
.btn-sm.btn-primary:hover { background: #6a4ae8; }

/* Stat card sub */
.stat-card-sub { font-size: 11px; color: #999; margin-top: 4px; }
.stat-card-label { font-size: 13px; color: #888; margin-top: 2px; }

/* Chart card */
.chart-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 16px;
}
.chart-card h4 { color: #333; font-size: 15px; }

code { font-family: 'SF Mono', Consolas, monospace; font-size: 12px; background: #f5f5f5; padding: 2px 6px; border-radius: 4px; color: #7c5cfc; }

/* ===== 通用 ===== */
.loading { color: #aaa; text-align: center; padding: 60px; font-size: 15px; }
.coming-soon { text-align: center; padding: 80px 20px; color: #aaa; }
.coming-soon h2 { color: #666; font-size: 20px; margin-bottom: 8px; }

.mock-warning {
  background: #fffbe6; border: 1px solid #ffe58f; border-radius: 10px;
  padding: 12px 18px; margin-bottom: 20px; color: #ad8b00; font-size: 13px;
}
.mock-warning code { background: #fff7cc; padding: 2px 6px; border-radius: 4px; color: #7c5cfc; font-size: 12px; }
.real-mode-ok {
  background: #f0fff4; border: 1px solid #b7ebc4; border-radius: 10px;
  padding: 12px 18px; margin-bottom: 20px; color: #389e0d; font-size: 13px;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 16px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-sidebar { width: 200px; }
  .chat-layout { flex-direction: column; }
  .chat-sidebar { width: 100%; border-radius: 14px 14px 0 0; border-right: none; border-bottom: 1px solid #eee; max-height: 200px; }
  .chat-main { border-radius: 0 0 14px 14px; border-left: 1px solid #eee; }
}

/* ===== 支付方式 ===== */
.payment-methods-section {
  background: #fff; border: 1px solid #eee; border-radius: 16px;
  padding: 24px; margin-bottom: 32px;
}
.payment-methods-section h3 { color: #333; margin-bottom: 16px; font-size: 16px; font-weight: 600; }
.payment-methods {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.payment-method-btn {
  padding: 12px 24px; border: 1.5px solid #eee; border-radius: 12px;
  background: #fff; color: #555; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; min-width: 110px; text-align: center;
}
.payment-method-btn:hover { border-color: #7c5cfc; color: #7c5cfc; background: #faf8ff; }
.payment-method-btn.active { border-color: #7c5cfc; background: #f0ecff; color: #7c5cfc; }
.payment-method-btn.wechat:hover, .payment-method-btn.wechat.active { border-color: #07c160; color: #07c160; background: #f0fff4; }
.payment-method-btn.alipay:hover, .payment-method-btn.alipay.active { border-color: #1677ff; color: #1677ff; background: #f0f7ff; }
.payment-method-btn.paypal:hover, .payment-method-btn.paypal.active { border-color: #0070ba; color: #0070ba; background: #f0f7ff; }
.payment-method-btn.mock:hover, .payment-method-btn.mock.active { border-color: #999; color: #666; background: #f5f5f5; }
.payment-method-container { min-height: 60px; }
.wechat-qr-box, .alipay-qr-box {
  text-align: center; padding: 20px; background: #fafbfe; border-radius: 12px; border: 1px solid #eee;
}
.wechat-qr-box img, .alipay-qr-box img { max-width: 256px; width: 100%; border-radius: 8px; margin: 12px 0; }
.wechat-qr-box p, .alipay-qr-box p { color: #666; font-size: 13px; margin: 6px 0; }
.alipay-qr-box h4 { color: #1677ff; margin: 0 0 8px; font-size: 16px; }
.alipay-qr-price { color: #333; font-size: 24px; font-weight: 600; margin: 4px 0 12px; }
.alipay-qr-tip { color: #1677ff !important; font-weight: 500; }
.alipay-pay-link { display: inline-block; margin-top: 12px; padding: 10px 28px; background: #1677ff; color: #fff; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.2s; }
.alipay-pay-link:hover { background: #0958d9; }