/* =========================================================
 * 票云阁项目主题文件
 * 文件用途：
 * 1、作为“项目配置包”的前端主题入口；
 * 2、后期复制新项目时，只需要复制 static/themes/pyg 为新项目主题目录；
 * 3、修改变量即可调整网站主色、按钮、背景、字体、卡片风格；
 * 4、本文件作为最后加载的 CSS，尽量只做主题覆盖，不改核心布局结构。
 * ========================================================= */

/* =========================================================
 * 一、主题变量
 * ========================================================= */
:root {
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-primary-soft: rgba(37, 99, 235, 0.10);

    --brand-secondary: #0f766e;
    --brand-secondary-hover: #0d665f;
    --brand-secondary-soft: rgba(15, 118, 110, 0.10);

    --brand-success: #16a34a;
    --brand-warning: #f59e0b;
    --brand-danger: #dc2626;

    --brand-bg: #f5f7fb;
    --brand-page-bg: #f6f8fb;
    --brand-card-bg: #ffffff;

    --brand-sidebar-bg: linear-gradient(180deg, #f8fbff 0%, #eef4ff 55%, #e9f1ff 100%);
    --brand-modal-bg: linear-gradient(180deg, #eef5ff 0%, #e7f0ff 48%, #edf4ff 100%);

    --brand-text-main: #1f2937;
    --brand-text-strong: #111827;
    --brand-text-muted: #667085;
    --brand-text-light: #98a2b3;

    --brand-border: #d8e4f2;
    --brand-border-soft: #eef1f6;

    --brand-shadow-card: 0 8px 24px rgba(35, 61, 99, 0.08);
    --brand-shadow-hover: 0 10px 24px rgba(50, 80, 130, 0.10);
    --brand-shadow-modal: 0 18px 40px rgba(73, 97, 130, 0.16);

    --brand-button-radius: 10px;
    --brand-card-radius: 14px;
    --brand-panel-radius: 18px;

    --brand-font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* =========================================================
 * 二、全站基础覆盖
 * ========================================================= */
body {
    font-family: var(--brand-font-family);
    background: var(--brand-bg);
    color: var(--brand-text-main);
}

a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary-hover);
}

.layout-shell {
    background: var(--brand-bg);
}

/* =========================================================
 * 三、首页背景图
 * ========================================================= */
.home-page-with-bg {
    background-image:
        linear-gradient(180deg, rgba(246, 248, 251, 0.72) 0%, rgba(246, 248, 251, 0.88) 100%),
        var(--project-home-bg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.home-page-with-bg .home-banner,
.home-page-with-bg .home-feature-section,
.home-page-with-bg .home-service-section,
.home-page-with-bg .home-footer-section {
    background: transparent;
}

/* =========================================================
 * 四、左侧栏主题
 * ========================================================= */
.sidebar {
    background: var(--brand-sidebar-bg);
    border-right-color: var(--brand-border);
    color: var(--brand-text-main);
}

.brand a {
    color: var(--brand-primary);
}

.brand a:hover {
    color: var(--brand-primary-hover);
}

.brand-sub {
    color: var(--brand-text-muted);
}

.nav-group-title a,
.nav-group ul a {
    color: var(--brand-text-main);
}

.nav-group-title-active a {
    color: var(--brand-primary);
}

.nav-group li.nav-item:hover {
    background: var(--brand-secondary-soft);
}

.nav-group li.nav-item-active {
    background: var(--brand-secondary-soft);
}

.nav-group ul a.nav-link-active {
    color: var(--brand-secondary);
}

.nav-group ul a.nav-link-active:hover {
    color: var(--brand-secondary-hover);
}

.sidebar-user {
    border-top-color: rgba(31, 45, 61, 0.12);
}

.sidebar-login-trigger:hover {
    color: var(--brand-primary) !important;
}

/* =========================================================
 * 五、首页主题
 * ========================================================= */
.home-page {
    background-color: var(--brand-bg);
}

.home-banner-inner,
.home-feature-card,
.contact-info,
.contact-qrcode-box,
.about-content-card,
.about-value-item {
    background: var(--brand-card-bg);
    border-color: var(--brand-border-soft);
}

.home-banner-inner {
    border-color: var(--brand-border);
    border-radius: var(--brand-card-radius);
}

.home-banner-title,
.home-feature-title-line,
.home-feature-sub-line {
    color: var(--brand-text-strong);
}

.home-banner-subtitle,
.home-banner-stats,
.stats-prefix {
    color: var(--brand-text-main);
}

.stats-gold {
    color: var(--brand-warning);
}

.stats-orange {
    color: #f97316;
}

.stats-green {
    color: var(--brand-success);
}

.home-feature-card {
    border-radius: var(--brand-card-radius);
    box-shadow: 0 2px 10px rgba(50, 80, 130, 0.04);
}

.home-feature-card:hover {
    border-color: var(--brand-border);
    box-shadow: var(--brand-shadow-hover);
    background: #fcfdff;
}

.home-feature-grid .home-feature-card:nth-child(1) .home-feature-card-title {
    color: #7a3db8;
}

.home-feature-grid .home-feature-card:nth-child(2) .home-feature-card-title {
    color: var(--brand-secondary);
}

.home-feature-grid .home-feature-card:nth-child(3) .home-feature-card-title {
    color: #d97706;
}

.home-feature-grid .home-feature-card:nth-child(4) .home-feature-card-title {
    color: var(--brand-primary);
}

.home-feature-grid .home-feature-card:nth-child(5) .home-feature-card-title {
    color: #c2410c;
}

.home-feature-grid .home-feature-card:nth-child(6) .home-feature-card-title {
    color: #be123c;
}

.home-footer-links a {
    color: var(--brand-text-muted);
}

.home-footer-links a:hover {
    color: var(--brand-primary);
}

/* =========================================================
 * 六、二维码图片显示
 * ========================================================= */
.login-qrcode img,
.vip-pay-qrcode img,
.home-service-qr-img,
.home-wechat-popover-qr {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.login-qrcode-placeholder,
.vip-pay-qrcode-placeholder,
.home-service-qr-placeholder,
.home-wechat-popover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--brand-text-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* =========================================================
 * 七、登录弹窗主题
 * ========================================================= */
.login-modal-mask {
    background: rgba(80, 104, 140, 0.18);
}

.login-modal {
    background: var(--brand-modal-bg);
    border-color: var(--brand-border);
    border-radius: var(--brand-panel-radius);
    box-shadow: var(--brand-shadow-modal);
    color: var(--brand-text-main);
}

.login-modal-close {
    color: var(--brand-text-muted);
}

.login-modal-close:hover {
    color: var(--brand-primary);
}

.login-tab-btn {
    color: var(--brand-primary);
}

.login-tab-btn.is-active {
    color: var(--brand-primary-hover);
}

.login-code-input {
    border-color: var(--brand-border);
}

.login-code-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.login-submit-btn {
    background: var(--brand-secondary);
    border-radius: var(--brand-button-radius);
}

.login-submit-btn:hover {
    background: var(--brand-secondary-hover);
}

/* =========================================================
 * 八、VIP 弹窗主题
 * ========================================================= */
.vip-modal {
    border-color: var(--brand-primary);
    border-radius: var(--brand-card-radius);
}

.vip-modal-close,
.vip-success-close {
    background: var(--brand-primary);
    border-radius: var(--brand-button-radius);
}

.vip-modal-close:hover,
.vip-success-close:hover {
    background: var(--brand-primary-hover);
}

.vip-card {
    border-color: var(--brand-primary);
    border-radius: var(--brand-card-radius);
}

.vip-card:hover,
.vip-card.is-selected {
    box-shadow: 0 0 0 2px var(--brand-primary-soft);
}

.vip-card-price,
.vip-card-desc {
    color: var(--brand-primary);
}

.vip-open-btn {
    background: var(--brand-secondary);
    border-radius: var(--brand-button-radius);
}

.vip-open-btn:hover {
    background: var(--brand-secondary-hover);
}

.vip-cancel-btn {
    border-color: var(--brand-primary);
    border-radius: var(--brand-button-radius);
}

/* =========================================================
 * 九、支持页主题
 * ========================================================= */
.support-page {
    background: var(--brand-page-bg);
}

.support-card {
    background: var(--brand-card-bg);
    border-color: var(--brand-border-soft);
    border-radius: var(--brand-panel-radius);
    box-shadow: var(--brand-shadow-card);
}

.support-header {
    border-bottom-color: var(--brand-border-soft);
}

.support-header h1 {
    color: var(--brand-text-main);
}

.support-header p {
    color: var(--brand-text-muted);
}

.about-highlight {
    background: linear-gradient(135deg, var(--brand-primary-soft) 0%, #f8fbff 100%);
    border-color: var(--brand-border);
    border-radius: var(--brand-card-radius);
}

.about-highlight-title {
    color: var(--brand-primary);
}

.about-value-title,
.contact-value,
.legal-summary-title {
    color: var(--brand-text-main);
}

.about-value-text,
.contact-label,
.legal-summary-text,
.support-body,
.support-article,
.help-category-desc {
    color: var(--brand-text-muted);
}

.support-body a,
.support-article a,
.contact-value a {
    color: var(--brand-primary);
}

.support-primary-btn,
.support-primary-link {
    background: var(--brand-primary);
    border-radius: var(--brand-button-radius);
}

.support-primary-btn:hover,
.support-primary-link:hover {
    background: var(--brand-primary-hover);
}

/* =========================================================
 * 十、表单和按钮通用微调
 * ========================================================= */
button,
input,
textarea,
select {
    font-family: var(--brand-font-family);
}

button {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}