/* ============================================================
   康惠 Token 工厂 —— 深色科技风主题
   特点：深色背景 + 蓝色光晕 + 渐变 + 发光效果
   说明：置于 Bootstrap 之后引入，用 !important 覆盖内联浅色样式
   ============================================================ */

:root {
    --dh-bg: #0d1523;
    --dh-panel: rgba(15, 23, 42, 0.85);
    --dh-border: rgba(56, 189, 248, 0.20);
    --dh-text: #e6edf7;
    --dh-muted: #93a4c3;
    --dh-accent: #38bdf8;
    --dh-accent-2: #6366f1;
    --dh-glow: rgba(56, 189, 248, 0.35);
}

/* ---------- 基础（"稍亮黑 + 一点点蓝"大背景 + 柔和蓝光晕） ---------- */
html, body {
    background: #0d1523 !important;
    color: #e6edf7 !important;
}

body {
    background-image:
        radial-gradient(1200px 640px at 12% -10%, rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(1000px 540px at 100% 0%, rgba(99, 102, 241, 0.14), transparent 55%),
        radial-gradient(900px 540px at 50% 115%, rgba(14, 116, 233, 0.12), transparent 60%) !important;
    background-attachment: fixed;
}

::selection { background: rgba(56, 189, 248, 0.35); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: #1e3555 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(#21436b, #132338); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2f5680; }

/* 文本基础 */
a { color: #4cc3ff !important; text-decoration: none; }
a:hover { color: #7ad0ff !important; }
h1, h2, h3, h4, h5, h6 { color: #eef4ff !important; }
label { color: #c7d2e6 !important; }
p { color: #c7d2e6; }
strong { font-weight: 600; }
hr, .divider { border-color: rgba(56, 189, 248, 0.25) !important; background: none; }

/* ---------- 顶部导航（home / dashboard） ---------- */
.nav-bar, .header {
    background: linear-gradient(120deg, #071022 0%, #0a1730 45%, #101c3a 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 14px 44px rgba(4, 10, 28, 0.7), 0 0 40px rgba(56, 189, 248, 0.20) !important;
}
.nav-link {
    color: #cfe0ff !important;
    background: rgba(56, 189, 248, 0.06) !important;
    border: 1px solid rgba(56, 189, 248, 0.18);
}
.nav-link:hover { background: rgba(56, 189, 248, 0.18) !important; color: #fff !important; }
.nav-logo-title {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #dcefff !important;
    -webkit-text-fill-color: #dcefff !important;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.55), 0 0 22px rgba(56, 189, 248, 0.30);
}
.nav-toggle { color: #dbeafe !important; }
.header .user-info, .header .user-balance, .header .logout-btn,
.header-user-info {
    background: rgba(56, 189, 248, 0.10) !important;
    color: #d5e6ff !important;
    border: 1px solid rgba(56, 189, 248, 0.28);
}
.header .logout-btn:hover, .header-user-info:hover { background: rgba(56, 189, 248, 0.20) !important; }

/* 大标题（实心亮色 + 蓝色发光，保证任何浏览器都能看清） */
.hero-title, .header-title, .price-notice h1, .register-title, .login-title, h1.hero, .title-gradient {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #dcefff !important;
    -webkit-text-fill-color: #dcefff !important;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.50), 0 0 26px rgba(56, 189, 248, 0.28);
}
h2, h3 { color: #dbeafe !important; }

/* ---------- 卡片 ---------- */
.card {
    background: linear-gradient(180deg, rgba(17, 26, 44, 0.92), rgba(11, 17, 32, 0.94)) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    box-shadow: 0 10px 34px rgba(2, 6, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: #e6edf7 !important;
}
.card-header {
    background: linear-gradient(120deg, #0a1730 0%, #10203f 100%) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-bottom: none;
}
.card-title { color: #e6edf7 !important; border-bottom-color: rgba(56, 189, 248, 0.24) !important; }
.card-title i { color: #38bdf8 !important; }
.card .card-footer { background: rgba(8, 14, 28, 0.6) !important; border-color: rgba(56, 189, 248, 0.2) !important; }

/* ---------- 统计卡（dashboard） ---------- */
.stat-card {
    background: linear-gradient(160deg, rgba(20, 32, 58, 0.92), rgba(12, 19, 36, 0.92)) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 6px 22px rgba(2, 6, 18, 0.55), inset 0 0 28px rgba(56, 189, 248, 0.07) !important;
}
.stat-value { color: #4cc3ff !important; filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5)); }
.stat-label { color: #9db0d0 !important; }

/* ---------- 价格卡（home） ---------- */
.price-card {
    background: linear-gradient(160deg, rgba(22, 34, 62, 0.92), rgba(12, 19, 36, 0.94)) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 10px 30px rgba(2, 6, 18, 0.55), inset 0 0 30px rgba(56, 189, 248, 0.06) !important;
    color: #e6edf7 !important;
}
.price-card:hover { box-shadow: 0 16px 46px rgba(2, 6, 18, 0.7), 0 0 34px rgba(56, 189, 248, 0.22) !important; }
.price-card-icon {
    background: rgba(56, 189, 248, 0.16) !important;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.25), 0 0 18px rgba(56, 189, 248, 0.25);
}
.price-card-title { color: #cbd8ee !important; }
.price-card-value { color: #4cc3ff !important; filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.45)); }
.price-card-desc { color: #9db0d0 !important; }
.price-example { color: #9db0d0 !important; }
.price-card.gift, .price-card.share { box-shadow: 0 0 30px rgba(56, 189, 248, 0.10); }
.share-count { background: rgba(56, 189, 248, 0.16) !important; color: #7ad0ff !important; }

/* ---------- 输入控件 ---------- */
input, select, textarea, .form-control, .form-select, .form-input {
    background: rgba(8, 14, 28, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    color: #e6edf7 !important;
}
input::placeholder, textarea::placeholder,
.form-control::placeholder, .form-input::placeholder { color: #6b7ea3 !important; }
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus, .form-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.20) !important;
    outline: none !important;
    color: #e6edf7 !important;
}

/* 邀请链接（dashboard） */
#invite-link {
    background: rgba(8, 14, 28, 0.9) !important;
    color: #d5e6ff !important;
    border: 1px solid rgba(56, 189, 248, 0.38) !important;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.10);
}
#invite-copy-msg { color: #34d399 !important; }

/* ---------- 按钮 ---------- */
.btn-primary, .btn, .btn-recharge, .btn-block, button {
    box-shadow: 0 4px 14px rgba(47, 109, 246, 0.4), 0 0 16px rgba(56, 189, 248, 0.15) !important;
}
.btn-primary:hover, .btn:hover, .btn-recharge:hover, .btn-block:hover, button:hover {
    box-shadow: 0 8px 26px rgba(47, 109, 246, 0.55), 0 0 26px rgba(56, 189, 248, 0.32) !important;
}
.btn-outline-light {
    color: #dbeafe !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    background: transparent !important;
}
.btn-outline-light:hover { background: rgba(56, 189, 248, 0.15) !important; color: #fff !important; }

/* ---------- 徽章 / 状态 ---------- */
.badge { box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); }
.badge-primary { background: rgba(56, 189, 248, 0.2) !important; color: #7ad0ff !important; }
.badge-success { background: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
.badge-danger { background: rgba(244, 63, 94, 0.2) !important; color: #fb7185 !important; }
.api-key-status.active { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; }
.api-key-status.inactive { background: rgba(244, 63, 94, 0.16) !important; color: #fb7185 !important; }
.model-tag { background: rgba(30, 58, 138, 0.32) !important; color: #7ad0ff !important; border: 1px solid rgba(56, 189, 248, 0.34); }

/* ---------- 消息提示 ---------- */
.message, .alert { border-radius: 10px; }
.message.success, .alert-success { background: rgba(16, 185, 129, 0.16) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.4); }
.message.error, .alert-danger { background: rgba(244, 63, 94, 0.16) !important; color: #fb7185 !important; border: 1px solid rgba(244, 63, 94, 0.4); }
.message.info, .alert-info { background: rgba(56, 189, 248, 0.14) !important; color: #7ad0ff !important; border: 1px solid rgba(56, 189, 248, 0.4); }
.new-key-alert { background: rgba(250, 204, 21, 0.12) !important; border: 1px solid rgba(250, 204, 21, 0.42) !important; }
.new-key-alert h4, .new-key-alert p { color: #facc15 !important; }

/* ---------- Bootstrap 深色补丁 ---------- */
.text-muted, .text-secondary { color: #8496b8 !important; }
.bg-light, .bg-white { background-color: rgba(13, 21, 38, 0.9) !important; color: #d5e1f5; }
.table { --bs-table-bg: transparent; --bs-table-color: #dbe4f5; --bs-table-border-color: rgba(56,189,248,0.18); }
.table thead th { background: rgba(56, 189, 248, 0.08); color: #9ec5ff; border-bottom-color: rgba(56,189,248,0.25); }
.table td, .table tbody tr { border-color: rgba(56, 189, 248, 0.12); }
.code, code, pre { background: rgba(8, 14, 28, 0.9) !important; color: #7ad0ff !important; border: 1px solid rgba(56, 189, 248, 0.18); }
blockquote { background: rgba(13, 21, 38, 0.8); border-left: 3px solid #38bdf8; }

/* ---------- 模态框 ---------- */
.modal, .modal-content, .share-modal,
#recharge-modal > div, #user-settings-modal > div, #user-settings-modal .modal-content {
    background: linear-gradient(180deg, #0f1a30 0%, #0a1224 100%) !important;
    color: #e6edf7 !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72), 0 0 54px rgba(56, 189, 248, 0.20) !important;
}
.modal .modal-header h5, .share-modal h3, .modal-title { color: #e6edf7 !important; }
.share-platform { background: rgba(30, 41, 59, 0.6) !important; border: 1px solid rgba(56, 189, 248, 0.25); }
.share-platform:hover { background: rgba(51, 65, 85, 0.8) !important; }

/* ---------- 用户设置（dashboard） ---------- */
.user-settings-title { color: #e6edf7 !important; }
.user-settings-subtitle { color: #9db0d0 !important; }
.user-settings-form-group label { color: #c7d2e6 !important; }
.user-settings-form-input { background: rgba(8, 14, 28, 0.9) !important; color: #e6edf7 !important; border: 1px solid rgba(56, 189, 248, 0.30) !important; }
.user-settings-message.success { background: rgba(16, 185, 129, 0.16) !important; color: #34d399 !important; }
.user-settings-message.error { background: rgba(244, 63, 94, 0.16) !important; color: #fb7185 !important; }

/* ---------- API 密钥（dashboard） ---------- */
.api-key-item { background: rgba(12, 19, 36, 0.6) !important; border: 1px solid rgba(56, 189, 248, 0.20) !important; }
.api-key-item:hover { border-color: #38bdf8 !important; box-shadow: 0 0 24px rgba(56, 189, 248, 0.20); }
.api-key-name { color: #e6edf7 !important; }
.api-info-label { color: #8aa0c6 !important; }
.api-key-meta { color: #9db0d0 !important; }
.api-key-value { background: rgba(8, 14, 28, 0.9) !important; color: #7ad0ff !important; border: 1px solid rgba(56, 189, 248, 0.22); }
.api-address { background: rgba(30, 58, 138, 0.26) !important; color: #7ad0ff !important; border: 1px solid rgba(56, 189, 248, 0.30); }
.quota-bar { background: rgba(56, 189, 248, 0.16) !important; }
.quota-bar-fill { background: linear-gradient(90deg, #38bdf8, #6366f1) !important; box-shadow: 0 0 12px rgba(56, 189, 248, 0.6); }

/* 密钥操作按钮：统一样式 + 与上方隔开 */
.api-key-actions {
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
}
.api-key-actions button {
    background: rgba(30, 41, 59, 0.70) !important;
    color: #cfe0ff !important;
    border: 1px solid rgba(56, 189, 248, 0.30) !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
.api-key-actions button:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.28) !important;
}
.api-key-actions .btn-danger {
    background: rgba(244, 63, 94, 0.14) !important;
    color: #fb7185 !important;
    border-color: rgba(244, 63, 94, 0.42) !important;
}
.api-key-actions .btn-danger:hover {
    background: rgba(244, 63, 94, 0.28) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.35) !important;
}

/* 创建新 API 密钥：全宽主按钮 + 图标，与 .btn-recharge 等主按钮统一 */
#create-key-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 55%, #3b82f6 100%) !important;
}
#create-key-btn i { font-size: 17px; }
#create-key-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 28px rgba(47, 109, 246, 0.55), 0 0 30px rgba(56, 189, 248, 0.38) !important;
}
#create-key-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* ---------- 链接区 / 空状态 ---------- */
.links { color: #c7d2e6 !important; }
.back-link { color: #9ec5ff !important; }
.empty-state { color: #8496b8 !important; }

/* ---------- 其它兜底：卡片内浅色内联文字提亮 ---------- */
.card p,
.card span[style*="color:#666"],
.card span[style*="color:#888"],
.card span[style*="color:#999"],
.card span[style*="color:#1f2937"] { color: #c7d2e6 !important; }

/* ---------- 首页组件（深色适配） ---------- */
.price-notice,
.api-info-card,
#model-comparison,
.models-section,
.feature-card {
    background: linear-gradient(180deg, rgba(16, 24, 42, 0.94), rgba(11, 17, 32, 0.96)) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 12px 40px rgba(2, 6, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: #e6edf7 !important;
}
.models-section { background: rgba(9, 14, 26, 0.5) !important; }
.feature-card:hover, .price-notice:hover {
    box-shadow: 0 18px 52px rgba(2, 6, 18, 0.72), 0 0 40px rgba(56, 189, 248, 0.22) !important;
}
.price-notice h1, .price-notice h2, .price-notice h3, .price-notice p,
.api-info-card h3, .api-info-card h4, .api-info-card p,
.feature-card p, .models-section p, .models-section h2, .models-section h3 {
    color: #cfe0ff !important;
}
.feature-card h3, .api-info-card .title, .price-card .title { color: #dbeafe !important; }

.feature-icon {
    background: rgba(56, 189, 248, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.32);
    box-shadow: inset 0 0 22px rgba(56, 189, 248, 0.22), 0 0 20px rgba(56, 189, 248, 0.25) !important;
}
.api-address-box {
    background: rgba(30, 58, 138, 0.22) !important;
    color: #7ad0ff !important;
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
}
.api-address-text {
    color: #8fd6ff !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.30);
}
.copy-btn {
    background: linear-gradient(135deg, #2f6df6 0%, #6366f1 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(56, 189, 248, 0.40) !important;
    box-shadow: 0 4px 14px rgba(47, 109, 246, 0.40), 0 0 14px rgba(56, 189, 248, 0.18) !important;
}
.copy-btn:hover {
    box-shadow: 0 8px 22px rgba(47, 109, 246, 0.55), 0 0 24px rgba(56, 189, 248, 0.32) !important;
}

/* 可用模型卡片：统一深色玻璃 + 蓝色发光，推荐卡绿色强调 */
#models-display .model-tile {
    background: linear-gradient(180deg, rgba(16, 24, 42, 0.94), rgba(11, 17, 32, 0.96)) !important;
    border: 1px solid rgba(56, 189, 248, 0.26) !important;
    box-shadow: 0 8px 26px rgba(2, 6, 18, 0.55), 0 0 22px rgba(56, 189, 248, 0.12) !important;
    color: #e6edf7 !important;
}
#models-display .model-tile:hover {
    box-shadow: 0 14px 40px rgba(2, 6, 18, 0.7), 0 0 30px rgba(56, 189, 248, 0.2) !important;
}
#models-display .model-tile-rec {
    border-color: rgba(52, 211, 153, 0.55) !important;
    box-shadow: 0 8px 26px rgba(2, 6, 18, 0.55), 0 0 26px rgba(52, 211, 153, 0.22) !important;
}
#models-display .model-id-box {
    background: rgba(8, 14, 28, 0.7) !important;
    border: 1px solid rgba(56, 189, 248, 0.2);
}
.btn-recharge {
    background: linear-gradient(135deg, #2f6df6 0%, #6366f1 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(56, 189, 248, 0.40) !important;
}
.btn-recharge:hover {
    box-shadow: 0 8px 22px rgba(47, 109, 246, 0.55), 0 0 24px rgba(56, 189, 248, 0.34) !important;
}
.model-badge {
    background: rgba(30, 58, 138, 0.32) !important;
    color: #cfe0ff !important;
    border: 1px solid rgba(56, 189, 248, 0.32);
}
.model-badge span, .model-badge div { color: #cfe0ff !important; }

/* 代码 / 示例块 + 白色子容器兜底 */
pre, code, .terminal, .code, .code-block,
.api-info-card pre, .api-info-card code,
.api-info-card > div, .feature-card > div {
    background: rgba(8, 14, 28, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.2);
}
pre, code, .terminal, .code, .code-block {
    color: #9fe3ff !important;
    background: rgba(8, 14, 28, 0.92) !important;
    border-color: rgba(56, 189, 248, 0.22);
}
.api-info-card .copy-btn, .api-info-card button { border-color: rgba(56, 189, 248, 0.3); }

/* 大白色 CTA 按钮 → 蓝紫发光 */
a.btn-primary, .hero-btn, .btn-cta {
    background: linear-gradient(135deg, #2f6df6 0%, #6366f1 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(56, 189, 248, 0.42) !important;
    box-shadow: 0 6px 18px rgba(47, 109, 246, 0.45), 0 0 22px rgba(56, 189, 248, 0.22) !important;
}
a.btn-primary:hover, .hero-btn:hover, .btn-cta:hover {
    box-shadow: 0 10px 28px rgba(47, 109, 246, 0.6), 0 0 32px rgba(56, 189, 248, 0.35) !important;
}

/* ---------- 终端 / curl 示例块 ---------- */
.terminal-section {
    background: linear-gradient(160deg, rgba(10, 16, 30, 0.96), rgba(8, 12, 24, 0.98)) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 20px 46px rgba(2, 6, 18, 0.72), 0 0 42px rgba(56, 189, 248, 0.16), inset 0 0 44px rgba(56, 189, 248, 0.05) !important;
}
.terminal-content { color: #d4d4d4 !important; }
.terminal-prompt, .terminal-success { color: #34d399 !important; }
.terminal-command { color: #eef4ff !important; }
.terminal-comment { color: #7d8db0 !important; }
.terminal-json { color: #7ad0ff !important; }
.terminal-line .error, .terminal-error { color: #fb7185 !important; }

/* ---------- 模型能力对比（表格 + 徽章）字体美化 ---------- */
.models-section h2, .api-info-card h2 {
    color: #dbefff !important;
    text-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
}
.models-section .model-name, .model-name { color: #eaf2ff !important; }
.models-section .model-status, .model-status { color: #34d399 !important; }

.api-info-card table { width: 100%; }
.api-info-card th { color: #eaf3ff !important; }
.api-info-card td { color: #c7d2e6 !important; }
.api-info-card td:first-child { color: #9cc8ff !important; font-weight: 600; }
.api-info-card tbody tr { border-color: rgba(56, 189, 248, 0.14) !important; }
.api-info-card td, .api-info-card th { border-color: rgba(56, 189, 248, 0.14) !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .container { padding-left: 14px !important; padding-right: 14px !important; }
    .card { padding: 20px !important; }
}