/**
 * 全礼通 · 青绿山水统一设计系统
 * 源自 index.php 国风视觉：青绿山水 / 水墨云纹 / 青铜开片 / 鎏金流光
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Microsoft+YaHei&display=swap');

:root {
    /* 青绿主色 */
    --ql-green-dark: #2D5016;
    --ql-green: #4A7C59;
    --ql-green-mid: #5B8A72;
    --ql-teal: #669999;
    /* 点缀 */
    --ql-gold: #D4AF37;
    --ql-gold-light: #FBBF24;
    --ql-bronze: #A67C52;
    --ql-bronze-dark: #8B5A3C;
    --ql-purple: #3A1C71;
    /* surface */
    --ql-paper: #F8F5F0;
    --ql-paper-alpha: rgba(248, 245, 240, 0.98);
    --ql-paper-soft: rgba(248, 245, 240, 0.8);
    /* 渐变 */
    --ql-bg-gradient: linear-gradient(135deg, #2D5016 0%, #4A7C59 30%, #669999 70%, #5B8A72 100%);
    --ql-header-gradient: linear-gradient(135deg, #2D5016 0%, #4A7C59 25%, #669999 50%, #5B8A72 75%, #4A7C59 100%);
    --ql-btn-gradient: linear-gradient(135deg, #4A7C59 0%, #5B8A72 50%, #669999 100%);
    --ql-btn-hover: linear-gradient(135deg, #5B8A72 0%, #669999 50%, #4A7C59 100%);
    --ql-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #FBBF24 100%);
    --ql-title-gradient: linear-gradient(135deg, #D4AF37 0%, #FBBF24 100%);
    /* 圆角阴影 */
    --ql-radius: 12px;
    --ql-radius-lg: 20px;
    --ql-shadow: 0 25px 50px rgba(45, 80, 22, 0.15), 0 8px 32px rgba(74, 124, 89, 0.1);
    --ql-border-gold: 1px solid rgba(212, 175, 55, 0.3);
    /* 鎏金输入 */
    --ql-input-gold: #B8860B;
    --ql-input-gold-focus: #D4AF37;
    --ql-input-gold-deep: #9A7220;
    --ql-input-placeholder: rgba(184, 134, 11, 0.45);
    /* layout */
    --sidebar-width: 240px;
    --topbar-height: 64px;
    --bottom-nav-height: 64px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

/* ===== 青绿山水页面背景（全局） ===== */
.ql-body,
body.auth-page,
body.member-layout,
body.admin-layout {
    font-family: 'Microsoft YaHei', 'Noto Serif SC', -apple-system, sans-serif;
    background: var(--ql-bg-gradient);
    min-height: 100vh;
    line-height: 1.6;
    color: var(--ql-paper);
    position: relative;
    overflow-x: hidden;
}

/* 青绿山水背景纹理 */
.ql-body::before,
body.auth-page::before,
body.member-layout::before,
body.admin-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(75, 140, 114, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(45, 80, 22, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(102, 153, 153, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* 水墨云纹底纹 */
.ql-body::after,
body.auth-page::after,
body.member-layout::after,
body.admin-layout::after {
    content: '';
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234A7C59' fill-opacity='0.04'%3E%3Cpath d='M20 20c0-11.046 8.954-20 20-20s20 8.954 20 20-8.954 20-20 20-20-8.954-20-20zm20-16c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
}

/* 隐藏旧版深色光晕 */
.bg-orbs, .auth-orb { display: none !important; }

/* ===== 青铜器开片纹卡片 ===== */
.ql-card,
.login-container,
.auth-card,
.content-card,
.admin-card,
.admin-panel,
.admin-stat,
.card,
.stat-card,
.product-card,
.message-item,
.history-card,
.messages-container,
.notification-card {
    background: var(--ql-paper-alpha);
    border-radius: var(--ql-radius-lg);
    box-shadow: var(--ql-shadow), inset 0 1px 0 rgba(212, 175, 55, 0.2);
    border: var(--ql-border-gold);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

/* 青铜器开片纹边框装饰 */
.ql-card::before,
.login-container::before,
.auth-card::before,
.content-card::before,
.admin-card::before,
.admin-panel::before,
.card::before,
.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5L55 20L70 15L65 30L80 25L75 40L90 35L85 50L100 45L95 60L80 65L85 80L70 75L75 90L60 85L65 100L50 95L45 80L30 85L35 70L20 75L25 60L10 65L15 50L0 55L5 40L20 35L15 20L30 25L25 10L40 15L35 0L50 5Z' fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 0;
}

.ql-card > *,
.login-container > *,
.auth-card > *,
.content-card > *,
.card > * { position: relative; z-index: 1; }

@keyframes qlSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.ql-animate-in { animation: qlSlideUp 0.7s ease-out; }

/* ===== 千里江山图页头 ===== */
.ql-page-header,
.login-header,
.auth-card-header,
.page-header,
.section-title-bar {
    background: var(--ql-header-gradient);
    color: var(--ql-paper);
    padding: 32px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ql-page-header::before,
.login-header::before,
.auth-card-header::before,
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='200' height='60' viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,45 Q50,15 100,25 T200,35 L200,60 L0,60 Z' fill='%23669999' fill-opacity='0.12'/%3E%3Cpath d='M0,50 Q50,20 100,30 T200,40 L200,60 L0,60 Z' fill='%235B8A72' fill-opacity='0.12'/%3E%3C/svg%3E") repeat-x;
    pointer-events: none;
    z-index: 0;
}

.ql-page-header h1,
.ql-page-header h2,
.login-header h1,
.auth-card-header h1,
.page-header h1 {
    font-size: 26px;
    font-weight: 700;
    background: var(--ql-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.ql-seal-title,
.login-header h1 {
    position: relative;
    display: inline-block;
}

/* 传统印章装饰 */
.ql-seal-title::after,
.login-header h1::after {
    content: '印';
    position: absolute;
    right: -36px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 2px solid var(--ql-gold);
    border-radius: 4px;
    color: var(--ql-gold);
    -webkit-text-fill-color: var(--ql-gold);
    opacity: 0.75;
    font-weight: 700;
}

/* ===== 瓷器开片纹分割线 ===== */
.ql-divider,
.login-form::before,
.auth-card-body::before,
.section-title::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.3) 20%,
        rgba(166, 124, 82, 0.5) 50%,
        rgba(212, 175, 55, 0.3) 80%,
        transparent 100%);
    margin: 16px auto;
    width: 80%;
}

.login-form { position: relative; padding: 36px 32px; }
.login-form::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    margin: 0;
}

.auth-card-body { position: relative; padding: 32px; }
.auth-card-body::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    margin: 0;
}

/* ===== 表单 ===== */
.form-group { margin-bottom: 22px; position: relative; }

.form-group label,
.auth-form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--ql-purple);
    font-weight: 600;
    font-size: 15px;
}

/* 为标签添加传统装饰点 */
.form-group label::before,
.auth-form-group label::before {
    content: '◆';
    color: var(--ql-gold);
    margin-right: 6px;
    font-size: 12px;
    opacity: 0.65;
}

.form-group input,
.form-group select,
.form-group textarea,
.auth-form-group input,
.form-control {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(166, 124, 82, 0.3);
    border-radius: var(--ql-radius);
    font-size: 15px;
    font-family: inherit;
    background: var(--ql-paper-soft);
    color: var(--ql-input-gold);
    -webkit-text-fill-color: var(--ql-input-gold);
    caret-color: var(--ql-input-gold-focus);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.auth-form-group input:focus,
.auth-form-group textarea:focus,
.form-control:focus,
body.auth-page input[type="text"]:focus,
body.auth-page input[type="password"]:focus,
body.auth-page input[type="email"]:focus,
body.auth-page input[type="number"]:focus,
body.auth-page input[type="tel"]:focus,
body.auth-page input[type="search"]:focus,
body.auth-page input[type="url"]:focus,
body.auth-page select:focus,
body.auth-page textarea:focus,
body.member-layout input[type="text"]:focus,
body.member-layout input[type="password"]:focus,
body.member-layout input[type="email"]:focus,
body.member-layout input[type="number"]:focus,
body.member-layout input[type="tel"]:focus,
body.member-layout input[type="search"]:focus,
body.member-layout input[type="url"]:focus,
body.member-layout select:focus,
body.member-layout textarea:focus,
body.admin-layout input[type="text"]:focus,
body.admin-layout input[type="password"]:focus,
body.admin-layout input[type="email"]:focus,
body.admin-layout input[type="number"]:focus,
body.admin-layout input[type="tel"]:focus,
body.admin-layout input[type="search"]:focus,
body.admin-layout input[type="url"]:focus,
body.admin-layout input[type="date"]:focus,
body.admin-layout select:focus,
body.admin-layout textarea:focus,
body.admin-layout .form-control:focus {
    outline: none;
    border-color: var(--ql-gold);
    background: #ffffff;
    color: var(--ql-input-gold-focus);
    -webkit-text-fill-color: var(--ql-input-gold-focus);
    caret-color: var(--ql-input-gold-focus);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18), 0 4px 12px rgba(45, 80, 22, 0.08);
    transform: translateY(-1px);
}

.form-group input:focus::placeholder,
.auth-form-group input:focus::placeholder,
.form-group textarea:focus::placeholder,
.form-control:focus::placeholder {
    color: var(--ql-input-placeholder);
}

/* 浏览器自动填充 */
body.auth-page input:-webkit-autofill,
body.auth-page input:-webkit-autofill:hover,
body.auth-page input:-webkit-autofill:focus,
body.auth-page textarea:-webkit-autofill,
body.auth-page textarea:-webkit-autofill:focus,
body.member-layout input:-webkit-autofill,
body.member-layout input:-webkit-autofill:hover,
body.member-layout input:-webkit-autofill:focus,
body.member-layout textarea:-webkit-autofill,
body.member-layout textarea:-webkit-autofill:focus,
body.admin-layout input:-webkit-autofill,
body.admin-layout input:-webkit-autofill:hover,
body.admin-layout input:-webkit-autofill:focus,
body.admin-layout textarea:-webkit-autofill,
body.admin-layout textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ql-input-gold-focus) !important;
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 9999s ease-out 0s;
}

.form-group input::placeholder,
.auth-form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--ql-input-placeholder);
}

.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(166, 124, 82, 0.3);
    border-radius: var(--ql-radius);
    font-size: 15px;
    font-family: inherit;
    background: var(--ql-paper-soft);
    color: var(--ql-input-gold);
    -webkit-text-fill-color: var(--ql-input-gold);
    caret-color: var(--ql-input-gold-focus);
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 100px;
}

/* 锁定账户 · 联系管理员 */
.ql-contact-toggle {
    width: 100%;
    margin-bottom: 16px;
}

.ql-contact-panel {
    margin-bottom: 20px;
    padding: 18px;
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--ql-radius);
}

.ql-contact-panel[hidden] { display: none; }

.ql-contact-hint {
    font-size: 13px;
    color: var(--ql-bronze);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ===== 按钮 · 鎏金流光 ===== */
.btn,
.admin-btn,
.login-btn,
.auth-btn,
.ql-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--ql-radius);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    color: var(--ql-paper);
    background: var(--ql-btn-gradient);
    box-shadow: 0 8px 25px rgba(74, 124, 89, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn::before,
.admin-btn::before,
.login-btn::before,
.auth-btn::before,
.ql-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before,
.admin-btn:hover::before,
.login-btn:hover::before,
.auth-btn:hover::before,
.ql-btn:hover::before { left: 100%; }

.btn:hover,
.admin-btn:hover,
.login-btn:hover,
.auth-btn:hover,
.ql-btn:hover {
    transform: translateY(-2px);
    background: var(--ql-btn-hover);
    box-shadow: 0 12px 32px rgba(74, 124, 89, 0.35);
}

.btn-primary, .admin-btn-primary { background: var(--ql-btn-gradient); }
.btn-success, .admin-btn-success { background: linear-gradient(135deg, #2D5016, #4A7C59); }
.btn-warning, .admin-btn-warning { background: linear-gradient(135deg, #D4AF37, #B8860B); color: #fff; }
.btn-danger,  .admin-btn-danger  { background: linear-gradient(135deg, #C53030, #E53E3E); }
.btn-info,    .admin-btn-info    { background: linear-gradient(135deg, #669999, #4A7C59); }
.btn-secondary, .admin-btn-secondary {
    background: rgba(74, 124, 89, 0.15);
    color: var(--ql-green-dark);
    border: 1px solid rgba(74, 124, 89, 0.35);
    box-shadow: none;
}

.btn-sm { padding: 8px 16px; font-size: 13px; }

.ql-btn-full,
.login-btn,
.auth-btn {
    width: 100%;
}

/* ===== 扫码登录页 ===== */
.ql-scan-page { padding: 20px; }
.ql-scan-card { max-width: 480px; }
.ql-scan-body {
    padding: 32px 28px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.ql-scan-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3) 20%, rgba(166,124,82,0.5) 50%, rgba(212,175,55,0.3) 80%, transparent);
}
#reader { width: 100%; max-width: 360px; margin: 0 auto; }
.ql-qrcode-box {
    margin: 0 auto;
    width: 256px;
    height: 256px;
    padding: 12px;
    background: var(--ql-paper);
    border-radius: var(--ql-radius);
    border: var(--ql-border-gold);
    box-shadow: 0 8px 24px rgba(45,80,22,0.12);
}
.ql-scan-hint { margin: 14px 0; color: var(--ql-bronze); font-size: 13px; }
.ql-scan-status { margin-top: 16px; font-size: 15px; color: var(--ql-purple); font-weight: 500; }
.ql-scan-status.is-success { color: #059669; }
.ql-scan-status.is-error { color: #C53030; }
.ql-scan-error { color: #C53030; font-size: 14px; }
.ql-scan-body button,
.ql-scan-body .html5-qrcode-element button {
    padding: 12px 24px;
    font-size: 14px;
    margin-top: 16px;
    border: none;
    border-radius: var(--ql-radius);
    background: var(--ql-btn-gradient);
    color: var(--ql-paper);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ql-scan-body a { color: var(--ql-green); }

/* ===== 传统回纹分割 / 页脚链接 ===== */
.ql-footer-links,
.register-link,
.auth-footer,
.login-link {
    text-align: center;
    margin-top: 24px;
    color: #4B5563;
    position: relative;
    font-size: 14px;
}

.ql-footer-links::before,
.register-link::before,
.auth-footer::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(166, 124, 82, 0.4) 20%,
        rgba(212, 175, 55, 0.6) 50%,
        rgba(166, 124, 82, 0.4) 80%,
        transparent 100%);
}

.ql-footer-links a,
.register-link a,
.auth-footer a {
    color: var(--ql-green);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.ql-footer-links a:hover,
.register-link a:hover,
.auth-footer a:hover {
    color: var(--ql-green-dark);
}

/* ===== 消息提示 ===== */
.success-message,
.admin-alert-success,
.auth-success {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    padding: 14px 18px;
    border-radius: var(--ql-radius);
    margin-bottom: 18px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 4px solid #10B981;
    font-weight: 500;
}

.error-message,
.admin-alert-error,
.auth-error {
    background: rgba(229, 62, 62, 0.1);
    color: var(--ql-purple);
    padding: 14px 18px;
    border-radius: var(--ql-radius);
    margin-bottom: 18px;
    border: 1px solid rgba(229, 62, 62, 0.2);
    border-left: 4px solid #E53E3E;
    font-weight: 500;
}

/* ===== 表格 ===== */
.table, table.table, .history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th, .history-table th {
    background: rgba(74, 124, 89, 0.12);
    color: var(--ql-green-dark);
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(212, 175, 55, 0.25);
}

.table td, .history-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(166, 124, 82, 0.15);
    color: var(--ql-purple);
}

.table tr:hover td { background: rgba(74, 124, 89, 0.05); }

/* ===== 章节标题 ===== */
.section-title,
.admin-card-title,
.admin-panel-title,
.messages-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ql-purple);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.25);
    position: relative;
}

.section-title::before,
.admin-panel-title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: var(--ql-gold-gradient);
}

/* ===== 认证页 ===== */
body.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-card, .login-container {
    width: 100%;
    max-width: 440px;
    animation: qlSlideUp 0.8s ease-out;
}

.auth-card-header, .login-header { border-radius: var(--ql-radius-lg) var(--ql-radius-lg) 0 0; }

.auth-logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    background: var(--ql-gold-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--ql-purple);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
    position: relative;
    z-index: 1;
}

.auth-card-header p, .login-header p {
    color: rgba(248, 245, 240, 0.85);
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* index 登录方式按钮 */
.ql-login-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 36px 32px;
    width: 100%;
}

.ql-login-option {
    display: block;
    width: 85%;
    max-width: 320px;
    padding: 16px 0;
    text-align: center;
    border-radius: var(--ql-radius);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--ql-paper);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.ql-login-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    left: -100%;
    transition: left 0.5s;
}

.ql-login-option:hover::before { left: 100%; }
.ql-login-option:hover { transform: translateY(-2px); }

.ql-login-option.green  { background: linear-gradient(135deg, #4A7C59, #5B8A72); box-shadow: 0 6px 20px rgba(74,124,89,0.35); }
.ql-login-option.teal   { background: linear-gradient(135deg, #669999, #4A7C59); box-shadow: 0 6px 20px rgba(102,153,153,0.35); }
.ql-login-option.gold   { background: linear-gradient(135deg, #D4AF37, #B8860B); box-shadow: 0 6px 20px rgba(212,175,55,0.35); color: #fff; }

/* ===== 积分徽章 ===== */
.points-badge {
    background: var(--ql-gold-gradient);
    color: var(--ql-green-dark);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
    position: relative;
    overflow: hidden;
}

.points-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: qlShimmer 3s infinite;
}

@keyframes qlShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ===== 统计数字 ===== */
.stat-number, .admin-stat-value, .hero-stat-value {
    font-weight: 800;
    background: linear-gradient(135deg, var(--ql-green-dark), var(--ql-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label, .admin-stat-label { color: var(--ql-bronze); font-size: 14px; }

/* ===== 侧栏 / 顶栏（会员+后台共用基调） ===== */
.member-sidebar,
.admin-sidebar {
    background: rgba(45, 80, 22, 0.92) !important;
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(212, 175, 55, 0.2) !important;
    z-index: 300;
}

.member-topbar,
.admin-topbar,
.admin-header {
    background: rgba(45, 80, 22, 0.88) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.member-sidebar-logo,
.admin-brand h1,
.admin-sidebar-brand-text h2 {
    background: var(--ql-title-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

.admin-sidebar-brand-icon,
.member-user-avatar,
.admin-user-avatar,
.hero-avatar {
    background: var(--ql-gold-gradient) !important;
    color: var(--ql-purple) !important;
    font-weight: 800;
}

.member-nav-item.is-active,
.admin-nav-link.active {
    background: rgba(212, 175, 55, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--ql-gold-light) !important;
}

.member-nav-item:hover,
.admin-nav-link:hover {
    background: rgba(74, 124, 89, 0.25) !important;
}

.member-bottom-nav {
    background: rgba(45, 80, 22, 0.95) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.member-bottom-nav-item.is-active { color: var(--ql-gold) !important; }

.member-content,
.admin-content,
.main-container {
    position: relative;
    z-index: 1;
}

/* 会员 hero */
.member-hero {
    background: var(--ql-paper-alpha);
    border: var(--ql-border-gold);
    border-radius: var(--ql-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    box-shadow: var(--ql-shadow);
}

.hero-greeting { color: var(--ql-bronze); font-size: 13px; letter-spacing: 1px; }
.hero-name { color: var(--ql-purple); font-size: 22px; font-weight: 700; }
.hero-progress-bar { height: 6px; background: rgba(74,124,89,0.15); border-radius: 99px; overflow: hidden; }
.hero-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ql-green), var(--ql-gold)); border-radius: 99px; }

/* 卡片内文字色 */
.card h3, .card .stat-label { color: var(--ql-purple); }
.card .stat-number { font-size: 36px; }

.messages-card {
    background: var(--ql-header-gradient) !important;
    color: var(--ql-paper);
}
.messages-card h3 { color: var(--ql-paper) !important; }

.admin-stat,
.admin-module-card,
.stat-card {
    padding: 22px;
    text-align: center;
    transition: transform 0.25s;
}
.admin-stat:hover, .stat-card:hover { transform: translateY(-4px); }

.admin-link {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
    background: linear-gradient(135deg, #D4AF37, #B8860B);
    color: #fff;
    padding: 14px 22px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(212,175,55,0.4);
}

/* modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(45, 80, 22, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.show, .modal[style*="display: flex"], .modal[style*="display:flex"] { display: flex !important; }
.modal-content {
    background: var(--ql-paper-alpha);
    border: var(--ql-border-gold);
    border-radius: var(--ql-radius-lg);
    padding: 28px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--ql-shadow);
}

/* tabs */
.tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(248,245,240,0.15);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: var(--ql-radius);
    margin-bottom: 20px;
    width: fit-content;
}
.tab {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ql-paper);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.tab.active, .tab:hover {
    background: rgba(212, 175, 55, 0.2);
    color: var(--ql-gold-light);
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 8px;
    background: var(--ql-paper-soft);
    color: var(--ql-purple);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.filter-btn.active, .filter-btn:hover {
    background: var(--ql-green);
    color: var(--ql-paper);
    border-color: var(--ql-green);
}

/* badge */
.badge, .type-badge, .status-badge, .admin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
}
.admin-badge { background: #E53E3E; color: #fff; }

/* notification dropdown */
.notification-dropdown {
    background: var(--ql-paper) !important;
    border: var(--ql-border-gold) !important;
    border-radius: var(--ql-radius) !important;
}
.notification-title { color: var(--ql-purple) !important; }

/* responsive auth */
@media (max-width: 480px) {
    .auth-card, .login-container { max-width: 100%; border-radius: 16px; }
    .login-form, .auth-card-body { padding: 28px 22px; }
}

@media (max-width: 767px) {
    .member-content { padding-bottom: calc(var(--bottom-nav-height) + 20px); }
    .admin-link { bottom: calc(var(--bottom-nav-height) + 12px); }
    .member-hero { flex-direction: column; align-items: flex-start; }
}

/* ===== 拆礼盒页 ===== */
.ql-gift-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.ql-gift-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ql-gift-area h2 {
    color: var(--ql-paper);
    margin-bottom: 32px;
    font-size: 22px;
    text-shadow: 0 2px 8px rgba(45,80,22,0.3);
}
.ql-gift-box {
    width: min(400px, 90vw);
    height: min(320px, 72vw);
    position: relative;
    margin-bottom: 32px;
}
.ql-gift-box .box-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(45,80,22,0.25), 0 0 0 2px rgba(212,175,55,0.2);
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: opacity 0.8s;
    cursor: pointer;
}
.ql-gift-box .gift-img {
    display: none;
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    max-width: 65%;
    max-height: 62%;
    z-index: 3;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(212,175,55,0.35);
}
.ql-gift-box.open .gift-img {
    display: block;
    animation: qlGiftUp 1s ease-out;
}
.ql-gift-box.open .box-img { opacity: 0.35; }
@keyframes qlGiftUp {
    0% { top: 120px; opacity: 0; }
    100% { top: 60px; opacity: 1; }
}
.ql-gift-enter {
    display: none;
    padding: 14px 48px;
    font-size: 18px;
    border: none;
    border-radius: var(--ql-radius);
    cursor: pointer;
    background: var(--ql-gold-gradient);
    color: var(--ql-purple);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(212,175,55,0.4);
    font-family: inherit;
    transition: transform 0.2s;
}
.ql-gift-enter:hover { transform: translateY(-2px); }
.ql-gift-box.open ~ .ql-gift-enter { display: inline-block; }

/* ===== 全站鎏金输入（最终覆盖） ===== */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]),
select,
textarea,
.form-control {
    color: var(--ql-input-gold);
    -webkit-text-fill-color: var(--ql-input-gold);
    caret-color: var(--ql-input-gold-focus);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.form-control:focus {
    color: var(--ql-input-gold-focus);
    -webkit-text-fill-color: var(--ql-input-gold-focus);
    caret-color: var(--ql-input-gold-focus);
}