/* ================================================================
   祥升电竞·闲鱼托管 — Theme Override v1.0
   商务蓝主色 + 金色辅助 · 闲管家风格
   加载顺序：app.css → theme.css（后者覆盖前者）
   ================================================================ */

/* ========== 品牌色覆盖：Indigo → 商务蓝 ========== */
:root,[data-theme="default"]{
    /* 主品牌色：商务蓝 #2563EB */
    --c-accent:#2563eb;
    --c-accent-hover:#1d4ed8;
    --c-accent-active:#1e40af;
    --c-accent-light:#eff6ff;
    --c-accent-glow:rgba(37,99,235,.15);
    --c-accent-gradient:linear-gradient(135deg,#2563eb 0%,#1e40af 100%);
    --c-accent-subtle:#dbeafe;

    /* 金色辅助体系（克制使用：CTA/价格/VIP/高亮） */
    --c-gold:#d4a017;
    --c-gold-hover:#b8860b;
    --c-gold-active:#9a7209;
    --c-gold-light:#fef9e7;
    --c-gold-bg:#fdf6e3;
    --c-gold-border:#f0e0b8;
    --c-gold-glow:rgba(212,160,23,.15);
    --c-gold-gradient:linear-gradient(135deg,#d4a017 0%,#b8860b 100%);
    --c-gold-text:#8a6d1a;

    /* 信息色与主色统一 */
    --c-info:#2563eb;
    --c-info-bg:#eff6ff;
}

/* 暗色主题品牌色覆盖 */
[data-theme="dark"]{
    --c-accent:#3b82f6;
    --c-accent-hover:#2563eb;
    --c-accent-active:#1d4ed8;
    --c-accent-light:rgba(59,130,246,.12);
    --c-accent-glow:rgba(59,130,246,.2);
    --c-accent-subtle:rgba(59,130,246,.08);
    --c-accent-gradient:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);

    --c-gold:#f0b429;
    --c-gold-hover:#d4a017;
    --c-gold-active:#b8860b;
    --c-gold-light:rgba(240,180,41,.12);
    --c-gold-bg:rgba(240,180,41,.08);
    --c-gold-border:rgba(240,180,41,.25);
    --c-gold-glow:rgba(240,180,41,.2);
    --c-gold-gradient:linear-gradient(135deg,#f0b429 0%,#d4a017 100%);
    --c-gold-text:#f5c94c;

    --c-info:#3b82f6;
    --c-info-bg:rgba(59,130,246,.12);
}

/* ========== 金色按钮（CTA 专用，克制使用） ========== */
.btn-gold,.panel-btn-gold{
    background:var(--c-gold-gradient);
    color:#fff;
    box-shadow:0 1px 3px rgba(212,160,23,.25);
    font-weight:var(--fw-bold);
    letter-spacing:.01em;
}
.btn-gold:hover,.panel-btn-gold:hover{
    background:linear-gradient(135deg,#b8860b 0%,#9a7209 100%);
    box-shadow:0 4px 12px var(--c-gold-glow);
    transform:translateY(-1px);
}
.btn-gold:active,.panel-btn-gold:active{
    background:var(--c-gold-active);
    transform:scale(.97);
}

/* 金色描边按钮（次重要操作） */
.btn-gold-outline,.panel-btn-gold-outline{
    background:var(--c-surface);
    color:var(--c-gold-text);
    border:1px solid var(--c-gold-border);
    font-weight:var(--fw-semibold);
}
.btn-gold-outline:hover,.panel-btn-gold-outline:hover{
    background:var(--c-gold-light);
    border-color:var(--c-gold);
    color:var(--c-gold-hover);
}

/* ========== 金色徽章/标签 ========== */
.badge-gold,.panel-badge-gold{
    background:var(--c-gold-light);
    color:var(--c-gold-text);
    border:1px solid var(--c-gold-border);
    font-weight:var(--fw-semibold);
}

/* ========== 金色高亮文本 ========== */
.text-gold{color:var(--c-gold)}
.text-gold-strong{color:var(--c-gold-text);font-weight:var(--fw-semibold)}

/* 价格/VIP 专用样式 */
.price-highlight{
    color:var(--c-gold-text);
    font-weight:var(--fw-bold);
    font-size:var(--fs-lg);
}
.vip-badge{
    display:inline-flex;align-items:center;gap:var(--space-1);
    padding:2px var(--space-2);
    background:var(--c-gold-gradient);
    color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold);
    border-radius:var(--r-sm);
    letter-spacing:.02em;
}

/* ========== 金色卡片（VIP/会员/推荐） ========== */
.card-gold,.panel-card-gold{
    background:var(--c-gold-bg);
    border:1px solid var(--c-gold-border);
}
.card-gold .card-header,.panel-card-gold .panel-card-header{
    background:var(--c-gold-light);
    border-bottom-color:var(--c-gold-border);
}

/* ========== 金色警告框（重要提示） ========== */
.alert-gold{
    background:var(--c-gold-light);
    border:1px solid var(--c-gold-border);
    color:var(--c-gold-text);
}
.alert-gold .alert-icon{color:var(--c-gold)}

/* ========== 主色按钮增强（保持原有 .btn-primary 但微调） ========== */
.btn-primary,.panel-btn-primary{
    box-shadow:0 1px 3px rgba(37,99,235,.2);
}
.btn-primary:hover,.panel-btn-primary:hover{
    box-shadow:0 4px 12px var(--c-accent-glow);
}

/* ========== 链接颜色统一 ========== */
a{color:var(--c-accent)}
a:hover{color:var(--c-accent-hover)}

/* ========== 选中状态 ========== */
::selection{background:var(--c-accent-light);color:var(--c-accent-active)}

/* ========== 焦点环（可访问性） ========== */
:focus-visible{
    outline:2px solid var(--c-accent);
    outline-offset:2px;
    border-radius:var(--r-xs);
}
.btn:focus-visible,.panel-btn:focus-visible,
.form-input:focus-visible,.panel-input:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px var(--c-accent-glow);
}

/* ========== 响应式断点参考（注释，不实际使用） ==========
   移动端:  < 768px
   平板:    768px - 1024px
   桌面:    > 1024px
   ================================================================ */

/* ========== 移动端触控优化 ========== */
@media (max-width:768px){
    /* 所有可点击元素最小 44px 触控目标 */
    .btn,.panel-btn,
    .form-input,.panel-input,
    .form-select,.panel-select{
        min-height:44px;
    }
    .btn-sm,.panel-btn-sm{min-height:36px}
    .btn-lg,.panel-btn-lg{min-height:48px}

    /* 图标按钮 */
    .btn-icon{min-width:44px;min-height:44px}

    /* 表格操作列按钮 */
    .panel-table .btn,.panel-table .panel-btn{min-height:36px}

    /* 导航链接 */
    .nav-link,.sidebar-link{min-height:44px;display:flex;align-items:center}
}

/* ========== 加载状态统一 ========== */
.loading-spinner{
    display:inline-block;width:16px;height:16px;
    border:2px solid var(--c-border);
    border-top-color:var(--c-accent);
    border-radius:50%;
    animation:spin .6s linear infinite;
}
.loading-spinner-gold{border-top-color:var(--c-gold)}

/* 全页加载遮罩 */
.loading-overlay{
    position:fixed;inset:0;
    background:rgba(255,255,255,.8);
    display:flex;align-items:center;justify-content:center;
    z-index:var(--z-modal);
    backdrop-filter:blur(2px);
}
[data-theme="dark"] .loading-overlay{background:rgba(15,15,16,.8)}

/* ========== 空状态增强 ========== */
.empty-state{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:var(--space-16) var(--space-4);
    text-align:center;
}
.empty-state-icon{
    width:64px;height:64px;margin-bottom:var(--space-4);
    color:var(--c-text-3);opacity:.5;
}
.empty-state-title{
    font-size:var(--fs-lg);font-weight:var(--fw-semibold);
    color:var(--c-text-2);margin-bottom:var(--space-2);
}
.empty-state-desc{
    font-size:var(--fs-sm);color:var(--c-text-3);
    max-width:320px;line-height:var(--lh-relaxed);
}

/* ========== 页面标题统一 ========== */
.page-title{
    font-size:var(--fs-2xl);font-weight:var(--fw-bold);
    color:var(--c-text);letter-spacing:var(--tracking-tight);
    margin-bottom:var(--space-1);
}
.page-subtitle{
    font-size:var(--fs-sm);color:var(--c-text-3);
    margin-bottom:var(--space-6);
}

/* ========== 卡片标题统一 ========== */
.card-title,.panel-card-title{
    font-size:var(--fs-md);font-weight:var(--fw-semibold);
    color:var(--c-text);letter-spacing:var(--tracking-tight);
}

/* ========== 统计卡片金色高亮变体 ========== */
.stat-card-gold,.panel-stat-gold{
    background:var(--c-gold-bg);
    border:1px solid var(--c-gold-border);
}
.stat-card-gold .stat-value,.panel-stat-gold .stat-value{
    color:var(--c-gold-text);
}

/* ========== 分隔线 ========== */
.divider{
    height:1px;background:var(--c-border);
    margin:var(--space-4) 0;border:none;
}
.divider-gold{background:var(--c-gold-border)}

/* ========== 滚动条金色变体（VIP区域） ========== */
.scrollbar-gold::-webkit-scrollbar-thumb{background:var(--c-gold-border)}
.scrollbar-gold::-webkit-scrollbar-thumb:hover{background:var(--c-gold)}

/* ========== 打印样式 ========== */
@media print{
    .btn-gold,.panel-btn-gold,
    .vip-badge,.badge-gold,.panel-badge-gold{
        background:#f0f0f0!important;color:#333!important;
        border:1px solid #ccc!important;
    }
}
