/* =============================================================================
   Velvet Affair  ·  丝绒情事
   红娘 · 蜜月期 · 主题覆盖样式
   编辑级奢侈杂志美学 · 奶油纸 + 深酒红 + 香槟金
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) 字体导入 — 中西混排，衬线显示 + 无衬线正文
   ----------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");

/* -----------------------------------------------------------------------------
   2) 设计令牌
   ----------------------------------------------------------------------------- */
:root {
    /* ——— 色系 ——— */
    --vlt-bg:        #F6EDE0;     /* 奶油纸 */
    --vlt-bg-deep:   #EFE2CD;     /* 米黄阴影 */
    --vlt-paper:     #FBF6EC;     /* 信纸白 */
    --vlt-surface:   #FFFFFF;     /* 卡面 */
    --vlt-wine:      #6B1F2C;     /* 深酒红 */
    --vlt-wine-deep: #4A1019;     /* 夜酒红 */
    --vlt-rose:      #C76B7A;     /* 唇色玫瑰 */
    --vlt-rose-soft: #E5B7BD;     /* 浅桃 */
    --vlt-coral:     #D8567A;     /* 烈焰珊瑚 */
    --vlt-gold:      #C9A66B;     /* 香槟金 */
    --vlt-gold-deep: #A68249;     /* 烫金 */
    --vlt-gold-soft: #E8D6AE;     /* 金箔 */
    --vlt-ink:       #2A1B1F;     /* 墨色正文 */
    --vlt-ink-soft:  #4A3338;     /* 灰墨 */
    --vlt-mute:      #8C7A7E;     /* 灰玫 */
    --vlt-mute-soft: #B8A8AB;     /* 浅灰玫 */
    --vlt-line:      rgba(122, 31, 53, 0.12);
    --vlt-line-soft: rgba(122, 31, 53, 0.06);
    --vlt-danger:    #B33A3A;
    --vlt-success:   #5C7A4A;

    /* ——— 渐变 ——— */
    --vlt-grad-wine:  linear-gradient(135deg, #6B1F2C 0%, #4A1019 60%, #3A0C12 100%);
    --vlt-grad-rose:  linear-gradient(135deg, #C76B7A 0%, #A8485F 100%);
    --vlt-grad-coral: linear-gradient(135deg, #E27488 0%, #B33A5C 100%);
    --vlt-grad-gold:  linear-gradient(135deg, #E5D2A8 0%, #C9A66B 50%, #A68249 100%);
    --vlt-grad-paper: linear-gradient(180deg, #FBF6EC 0%, #F6EDE0 100%);

    /* ——— 阴影 ——— */
    --vlt-shadow-sm: 0 1px 2px rgba(74, 16, 25, 0.06);
    --vlt-shadow-md: 0 4px 16px rgba(74, 16, 25, 0.08);
    --vlt-shadow-lg: 0 12px 36px rgba(74, 16, 25, 0.14);
    --vlt-shadow-glow: 0 0 0 1px rgba(201, 166, 107, 0.25), 0 8px 24px rgba(74, 16, 25, 0.12);

    /* ——— 圆角 ——— */
    --vlt-r-sm: 6px;
    --vlt-r-md: 12px;
    --vlt-r-lg: 18px;
    --vlt-r-xl: 24px;
    --vlt-r-pill: 999px;

    /* ——— 字体族 ——— */
    --vlt-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", serif;
    --vlt-body:    "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --vlt-numeric: "Cormorant Garamond", "Times New Roman", serif;
}

/* -----------------------------------------------------------------------------
   3) 全局基底 — 纸纹 + 字体 + 平滑
   ----------------------------------------------------------------------------- */
html, body {
    font-family: var(--vlt-body) !important;
    color: var(--vlt-ink) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
}

body {
    background: var(--vlt-bg) !important;
    background-image:
        radial-gradient(at 20% 0%, rgba(201, 166, 107, 0.10) 0%, transparent 45%),
        radial-gradient(at 100% 100%, rgba(199, 107, 122, 0.08) 0%, transparent 45%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.12  0 0 0 0 0.18  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") !important;
    background-attachment: fixed, fixed, fixed;
}

/* 顶部点缀的烫金细线（页面横幅） */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--vlt-grad-gold);
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(166, 130, 73, 0.35);
}

::selection { background: var(--vlt-wine); color: var(--vlt-gold-soft); }

/* -----------------------------------------------------------------------------
   4) 通用文字辅助
   ----------------------------------------------------------------------------- */
.vlt-display, h1, h2, h3, .header-title, .modal-title, .price-modal-title,
.section-title, .header h1, .logo h1 {
    font-family: var(--vlt-display) !important;
    font-weight: 600 !important;
    color: var(--vlt-wine-deep) !important;
    letter-spacing: 0.01em !important;
}

/* 数字使用衬线大写感 */
.vlt-num, .price-amount, .balance-value, .invite-rate, .user-age, .item-age,
.detail-age {
    font-family: var(--vlt-numeric) !important;
    font-feature-settings: "lnum", "tnum";
    font-style: italic;
}

/* -----------------------------------------------------------------------------
   5) 顶部 Header（普通页面顶部栏）
   ----------------------------------------------------------------------------- */
.header,
.page-header,
.top-bar,
.chat-header {
    background: var(--vlt-paper) !important;
    border-bottom: 1px solid var(--vlt-line) !important;
    box-shadow: 0 1px 0 var(--vlt-gold-soft), 0 8px 24px rgba(74, 16, 25, 0.04) !important;
    position: relative !important;
}

.header::after,
.page-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--vlt-gold) 20%, var(--vlt-gold) 80%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}

.header-title,
.page-title,
.chat-title {
    color: var(--vlt-wine-deep) !important;
    font-family: var(--vlt-display) !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
}

/* 返回按钮 */
.back-btn,
.btn-back {
    color: var(--vlt-wine) !important;
    transition: all 0.25s ease !important;
}
.back-btn:hover,
.btn-back:hover { color: var(--vlt-coral) !important; transform: translateX(-2px); }

/* -----------------------------------------------------------------------------
   6) 底部导航
   ----------------------------------------------------------------------------- */
.bottom-nav {
    background: var(--vlt-paper) !important;
    border-top: 1px solid var(--vlt-line) !important;
    box-shadow:
        0 -1px 0 var(--vlt-gold-soft),
        0 -8px 32px rgba(74, 16, 25, 0.10) !important;
    padding-top: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    backdrop-filter: blur(12px);
}

.nav-item {
    color: var(--vlt-mute) !important;
    font-family: var(--vlt-body) !important;
    transition: all 0.3s ease !important;
    position: relative;
}

.nav-item .nav-icon,
.nav-item i {
    transition: transform 0.3s ease;
}

.nav-item:hover .nav-icon,
.nav-item:hover i { transform: translateY(-2px); }

.nav-item.active {
    color: var(--vlt-wine) !important;
}

.nav-item.active::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: var(--vlt-grad-gold);
    border-radius: 0;
}

.nav-item.active .nav-icon,
.nav-item.active i {
    color: var(--vlt-coral) !important;
    text-shadow: 0 0 12px rgba(216, 86, 122, 0.35);
}

.nav-label {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    font-weight: 500 !important;
    text-transform: uppercase;
}

/* 中文标签恢复正常字距（针对 .nav-label 中的中文显示更舒适） */
@supports (font-feature-settings: "ss01") {
    .nav-label:lang(zh) { letter-spacing: 0.05em !important; }
}

/* -----------------------------------------------------------------------------
   7) 按钮
   ----------------------------------------------------------------------------- */
.btn,
button.btn,
.btn-primary,
.btn-search,
.submit-btn,
.send-btn,
.code-btn,
.modal-btn-confirm,
.price-confirm-btn,
.go-browse,
.recharge-btn {
    font-family: var(--vlt-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    transition: all 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    border: none !important;
}

/* 主按钮：深酒红墨水底 + 烫金细边 */
.btn-primary,
.submit-btn,
.send-btn,
.btn-search,
.modal-btn-confirm {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border-radius: var(--vlt-r-pill) !important;
    box-shadow:
        inset 0 0 0 1px rgba(201, 166, 107, 0.35),
        0 6px 16px rgba(74, 16, 25, 0.28) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.btn-primary:hover,
.submit-btn:hover,
.send-btn:hover,
.btn-search:hover,
.modal-btn-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 0 0 1px rgba(201, 166, 107, 0.6),
        0 12px 28px rgba(74, 16, 25, 0.4) !important;
    color: #FFF6DD !important;
}

.btn-primary:disabled,
.submit-btn:disabled,
.send-btn:disabled,
.price-confirm-btn:disabled,
.code-btn:disabled {
    background: var(--vlt-mute-soft) !important;
    color: var(--vlt-paper) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 次按钮：奶油纸 + 烫金边 */
.btn-secondary,
.btn-reset {
    background: var(--vlt-paper) !important;
    color: var(--vlt-wine) !important;
    border: 1px solid var(--vlt-gold) !important;
    border-radius: var(--vlt-r-pill) !important;
    box-shadow: var(--vlt-shadow-sm) !important;
}
.btn-secondary:hover,
.btn-reset:hover {
    background: var(--vlt-bg-deep) !important;
    color: var(--vlt-wine-deep) !important;
}

/* 验证码按钮 */
.code-btn {
    background: var(--vlt-grad-rose) !important;
    color: #FFF6E8 !important;
    border-radius: var(--vlt-r-md) !important;
    box-shadow: 0 4px 12px rgba(199, 107, 122, 0.35) !important;
}

/* 价格确认按钮 — 烫金 */
.price-confirm-btn,
.recharge-btn {
    background: var(--vlt-grad-gold) !important;
    color: var(--vlt-wine-deep) !important;
    border-radius: var(--vlt-r-pill) !important;
    box-shadow: 0 6px 18px rgba(201, 166, 107, 0.45) !important;
    text-shadow: 0 1px 0 rgba(255, 246, 221, 0.5);
}
.price-confirm-btn:hover,
.recharge-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 166, 107, 0.6) !important;
}

/* 取消按钮 */
.modal-btn-cancel {
    background: var(--vlt-bg-deep) !important;
    color: var(--vlt-ink-soft) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-pill) !important;
}

/* "去逛逛" — 链接式按钮 */
.go-browse {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border-radius: var(--vlt-r-pill) !important;
    padding: 14px 36px !important;
    box-shadow: 0 6px 18px rgba(74, 16, 25, 0.25) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    font-size: 13px !important;
}

/* 退出 */
.logout-btn {
    background: var(--vlt-paper) !important;
    color: var(--vlt-wine) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-pill) !important;
    letter-spacing: 0.16em !important;
    box-shadow: var(--vlt-shadow-sm) !important;
}
.logout-btn:hover {
    background: var(--vlt-wine) !important;
    color: var(--vlt-gold-soft) !important;
}

/* 链接式按钮 */
.link-btn,
.links a,
.contact-email a,
.auth-footer a {
    color: var(--vlt-wine) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--vlt-gold) !important;
    padding-bottom: 1px;
    transition: all 0.25s ease;
}
.link-btn:hover,
.links a:hover,
.contact-email a:hover {
    color: var(--vlt-coral) !important;
    border-bottom-color: var(--vlt-coral) !important;
}

/* -----------------------------------------------------------------------------
   8) 表单
   ----------------------------------------------------------------------------- */
.form-group label,
.form-label,
label {
    color: var(--vlt-wine) !important;
    font-family: var(--vlt-body) !important;
    letter-spacing: 0.08em !important;
    font-size: 12px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
}

.form-control,
.form-input,
.form-select,
.modal-input,
.input-wrapper input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea,
#verifyCode {
    background: var(--vlt-paper) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-md) !important;
    color: var(--vlt-ink) !important;
    font-family: var(--vlt-body) !important;
    font-size: 15px !important;
    padding: 0 16px !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 1px 2px rgba(74, 16, 25, 0.04) !important;
}

.form-control:focus,
.form-input:focus,
.form-select:focus,
.modal-input:focus,
.input-wrapper input:focus,
input:focus,
select:focus,
textarea:focus,
#verifyCode:focus {
    border-color: var(--vlt-gold) !important;
    background: var(--vlt-surface) !important;
    box-shadow:
        inset 0 1px 2px rgba(74, 16, 25, 0.04),
        0 0 0 3px rgba(201, 166, 107, 0.18) !important;
    outline: none !important;
}

input::placeholder, textarea::placeholder {
    color: var(--vlt-mute-soft) !important;
    font-style: italic !important;
}

/* 单选块组（搜索筛选） */
.radio-group { gap: 8px !important; }
.radio-item {
    background: var(--vlt-paper) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-pill) !important;
    color: var(--vlt-ink-soft) !important;
    font-family: var(--vlt-body) !important;
    transition: all 0.25s ease !important;
}
.radio-item.active {
    background: var(--vlt-grad-wine) !important;
    border-color: var(--vlt-gold) !important;
    color: var(--vlt-gold-soft) !important;
    box-shadow: 0 4px 12px rgba(74, 16, 25, 0.25) !important;
}

/* 区段标题（搜索） */
.section-title {
    color: var(--vlt-wine-deep) !important;
    border-left: none !important;
    padding-left: 0 !important;
    font-family: var(--vlt-display) !important;
    font-size: 20px !important;
    position: relative;
    padding-bottom: 12px !important;
}
.section-title::after {
    content: "❦";
    color: var(--vlt-gold);
    margin-left: 8px;
    font-size: 14px;
    vertical-align: middle;
}

.form-section {
    background: var(--vlt-surface) !important;
    border-radius: var(--vlt-r-lg) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    box-shadow: var(--vlt-shadow-md) !important;
}

/* -----------------------------------------------------------------------------
   9) 登录 / 注册 / 找回 — 卡片
   ----------------------------------------------------------------------------- */
.login-container,
.register-container,
.auth-form {
    background: var(--vlt-paper) !important;
    border-radius: var(--vlt-r-xl) !important;
    border: 1px solid var(--vlt-gold-soft) !important;
    box-shadow:
        var(--vlt-shadow-lg),
        inset 0 0 0 1px rgba(255, 246, 221, 0.5) !important;
    position: relative;
    padding: 56px 40px !important;
    overflow: hidden;
}

/* 装饰：四角烫金小符号 */
.login-container::before,
.register-container::before {
    content: "❦";
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    color: var(--vlt-gold);
    font-size: 20px;
    letter-spacing: 24px;
}

.login-container::after,
.register-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--vlt-grad-gold);
    border-radius: var(--vlt-r-xl) var(--vlt-r-xl) 0 0;
}

/* 登录页 body 背景 — 浪漫深酒红 */
body:has(.login-container),
body:has(.register-container) {
    background:
        radial-gradient(circle at 20% 20%, rgba(216, 86, 122, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(201, 166, 107, 0.15) 0%, transparent 50%),
        var(--vlt-grad-wine) !important;
}

.logo h1,
.header h1,
.auth-title {
    font-family: var(--vlt-display) !important;
    font-weight: 600 !important;
    color: var(--vlt-wine-deep) !important;
    letter-spacing: 0.06em !important;
    font-size: 38px !important;
    margin-top: 16px !important;
}

.logo p {
    font-family: var(--vlt-display) !important;
    font-style: italic !important;
    color: var(--vlt-rose) !important;
    font-size: 16px !important;
    letter-spacing: 0.08em;
}

.logo-icon {
    border-radius: 50% !important;
    border: 2px solid var(--vlt-gold) !important;
    padding: 4px;
    background: var(--vlt-paper);
    box-shadow: 0 0 0 6px rgba(201, 166, 107, 0.15);
}

.divider {
    color: var(--vlt-mute) !important;
    font-family: var(--vlt-display) !important;
    font-style: italic !important;
    position: relative;
    overflow: hidden;
}
.divider::before, .divider::after {
    content: "";
    display: inline-block;
    width: 36%;
    height: 1px;
    background: var(--vlt-line);
    vertical-align: middle;
    margin: 0 12px;
}

.contact-email {
    border-top: 1px solid var(--vlt-line) !important;
    color: var(--vlt-mute) !important;
    font-family: var(--vlt-body) !important;
}

/* -----------------------------------------------------------------------------
   10) 首页（蜜圈）—— 用户卡片瀑布流
   ----------------------------------------------------------------------------- */
.search-bar {
    background: var(--vlt-paper) !important;
    box-shadow: 0 1px 0 var(--vlt-gold-soft), 0 4px 16px rgba(74, 16, 25, 0.05) !important;
}
.search-input {
    background: var(--vlt-bg-deep) !important;
    border-radius: var(--vlt-r-pill) !important;
    color: var(--vlt-ink) !important;
    font-family: var(--vlt-body) !important;
    font-style: italic;
    border: 1px solid var(--vlt-line) !important;
}
.search-icon { color: var(--vlt-wine) !important; }

.user-card {
    background: var(--vlt-surface) !important;
    border-radius: var(--vlt-r-lg) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    box-shadow: var(--vlt-shadow-md) !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    position: relative;
}
.user-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--vlt-r-lg);
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0);
    transition: box-shadow 0.4s ease;
}
.user-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--vlt-shadow-lg) !important;
}
.user-card:hover::after {
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.4);
}

/* 类型徽章 */
.type-badge {
    background: rgba(74, 16, 25, 0.85) !important;
    backdrop-filter: blur(6px);
    color: var(--vlt-gold-soft) !important;
    font-family: var(--vlt-body) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-size: 10px !important;
    border: 1px solid rgba(201, 166, 107, 0.45) !important;
    padding: 5px 11px !important;
}
.twin-badge {
    background: var(--vlt-grad-coral) !important;
    border-color: rgba(255, 246, 221, 0.4) !important;
    color: #FFF6E8 !important;
}
.sister-badge {
    background: var(--vlt-grad-wine) !important;
    border-color: rgba(201, 166, 107, 0.5) !important;
}
.video-badge {
    background: rgba(74, 16, 25, 0.8) !important;
    color: var(--vlt-gold-soft) !important;
    border: 1px solid rgba(201, 166, 107, 0.4) !important;
    backdrop-filter: blur(6px);
}

/* 用户名 */
.user-name { color: var(--vlt-wine-deep) !important; font-family: var(--vlt-display) !important; font-size: 17px !important; font-weight: 600 !important; }
.user-age { color: var(--vlt-rose) !important; font-family: var(--vlt-numeric) !important; font-style: italic !important; font-size: 15px !important; }

.user-detail-item { color: var(--vlt-ink-soft) !important; font-family: var(--vlt-body) !important; }
.user-detail-item i { color: var(--vlt-gold-deep) !important; }

/* 心仪按钮 */
.like-btn { color: var(--vlt-coral) !important; }
.like-btn:hover { background: rgba(216, 86, 122, 0.08) !important; transform: scale(1.1); }
.like-btn.active i { color: var(--vlt-coral) !important; text-shadow: 0 0 12px rgba(216, 86, 122, 0.5); }

/* 搜索条件提示 */
#searchTips {
    color: var(--vlt-wine) !important;
    font-family: var(--vlt-body) !important;
}
#searchTips button {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border-radius: var(--vlt-r-pill) !important;
    border: none !important;
    padding: 4px 12px !important;
    letter-spacing: 0.05em;
}

/* -----------------------------------------------------------------------------
   11) 心仪（favorite）页
   ----------------------------------------------------------------------------- */
.action-bar {
    background: var(--vlt-paper) !important;
    border-bottom: 1px solid var(--vlt-line) !important;
}

.checkbox {
    border: 2px solid var(--vlt-mute-soft) !important;
    border-radius: var(--vlt-r-sm) !important;
    background: var(--vlt-paper) !important;
}
.checkbox.checked {
    background: var(--vlt-grad-wine) !important;
    border-color: var(--vlt-gold) !important;
    color: var(--vlt-gold-soft) !important;
    box-shadow: 0 0 0 2px rgba(201, 166, 107, 0.25);
}
.select-label { color: var(--vlt-wine-deep) !important; font-weight: 500 !important; letter-spacing: 0.05em; }
.selected-count { color: var(--vlt-rose) !important; font-style: italic; font-family: var(--vlt-display) !important; }

.favorite-item {
    background: var(--vlt-surface) !important;
    border-radius: var(--vlt-r-lg) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    box-shadow: var(--vlt-shadow-md) !important;
    transition: all 0.3s ease !important;
}
.favorite-item:hover {
    border-color: var(--vlt-gold-soft) !important;
    transform: translateY(-2px);
    box-shadow: var(--vlt-shadow-lg) !important;
}

.item-name { color: var(--vlt-wine-deep) !important; font-family: var(--vlt-display) !important; font-size: 20px !important; font-weight: 600 !important; }
.item-age { color: var(--vlt-rose) !important; font-family: var(--vlt-numeric) !important; font-style: italic !important; }
.item-detail { color: var(--vlt-ink-soft) !important; }
.item-detail i { color: var(--vlt-gold-deep) !important; }

.price-label { color: var(--vlt-mute) !important; letter-spacing: 0.05em; }
.price-value { color: var(--vlt-wine) !important; font-family: var(--vlt-numeric) !important; font-style: italic !important; font-size: 22px !important; }

.remove-btn {
    background: transparent !important;
    color: var(--vlt-mute) !important;
    border: 1px solid var(--vlt-line) !important;
}
.remove-btn:hover { background: var(--vlt-coral) !important; color: var(--vlt-paper) !important; border-color: var(--vlt-coral) !important; }

.bottom-bar {
    background: var(--vlt-paper) !important;
    border-top: 1px solid var(--vlt-gold-soft) !important;
    box-shadow: 0 -8px 24px rgba(74, 16, 25, 0.08) !important;
}

.favorite-item.insufficient-balance {
    border: 2px solid var(--vlt-coral) !important;
    background: rgba(216, 86, 122, 0.05) !important;
    box-shadow: 0 0 16px rgba(216, 86, 122, 0.25) !important;
}
.favorite-item.insufficient-balance .price-value { color: var(--vlt-coral) !important; }
.insufficient-tag {
    background: var(--vlt-grad-coral) !important;
    color: #FFF6E8 !important;
    border-radius: var(--vlt-r-pill) !important;
    letter-spacing: 0.1em;
}

/* -----------------------------------------------------------------------------
   12) 消息列表 + 聊天
   ----------------------------------------------------------------------------- */
.chat-list { padding: 16px !important; }

.chat-item {
    background: var(--vlt-surface) !important;
    border-radius: var(--vlt-r-lg) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    box-shadow: var(--vlt-shadow-sm) !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--vlt-line-soft) !important;
    transition: all 0.3s ease !important;
}
.chat-item:hover { box-shadow: var(--vlt-shadow-md) !important; transform: translateX(2px); border-color: var(--vlt-gold-soft) !important; }

.chat-avatar,
.header-avatar,
.message-avatar {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border: 2px solid var(--vlt-gold-soft);
    box-shadow: 0 4px 12px rgba(74, 16, 25, 0.2);
}

.chat-name,
.header-name { color: var(--vlt-wine-deep) !important; font-family: var(--vlt-display) !important; font-weight: 600 !important; font-size: 17px !important; }
.chat-last-msg { color: var(--vlt-mute) !important; font-style: italic; }
.chat-time { color: var(--vlt-mute-soft) !important; font-family: var(--vlt-numeric) !important; font-style: italic; }

.badge,
.chat-badge {
    background: var(--vlt-grad-coral) !important;
    color: #FFF6E8 !important;
    border-radius: var(--vlt-r-pill) !important;
    box-shadow: 0 2px 8px rgba(216, 86, 122, 0.4);
    font-family: var(--vlt-numeric) !important;
    font-style: italic;
    border: 1px solid rgba(255, 246, 221, 0.4);
}

/* 聊天 */
.message-container,
.chat-messages {
    background: var(--vlt-bg) !important;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(199, 107, 122, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(201, 166, 107, 0.05) 0%, transparent 50%) !important;
}

.message-bubble {
    border-radius: 16px !important;
    box-shadow: var(--vlt-shadow-sm) !important;
    line-height: 1.65 !important;
    font-family: var(--vlt-body) !important;
}
.message-item:not(.self) .message-bubble,
.message.received .message-bubble {
    background: var(--vlt-surface) !important;
    color: var(--vlt-ink) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    border-radius: 4px 16px 16px 16px !important;
}
.message-item.self .message-bubble,
.message.sent .message-bubble {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border-radius: 16px 4px 16px 16px !important;
    box-shadow: 0 4px 14px rgba(74, 16, 25, 0.25) !important;
}
.message-time { color: var(--vlt-mute-soft) !important; font-family: var(--vlt-numeric) !important; font-style: italic; }

.input-container,
.chat-input-area {
    background: var(--vlt-paper) !important;
    border-top: 1px solid var(--vlt-gold-soft) !important;
    box-shadow: 0 -4px 16px rgba(74, 16, 25, 0.06) !important;
}
.message-input,
.chat-input {
    background: var(--vlt-surface) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-pill) !important;
    color: var(--vlt-ink) !important;
    font-family: var(--vlt-body) !important;
}
.tool-btn { color: var(--vlt-wine) !important; }
.tool-btn:hover { color: var(--vlt-coral) !important; }
.send-btn {
    border-radius: var(--vlt-r-pill) !important;
    width: 72px !important;
    letter-spacing: 0.12em !important;
}

/* -----------------------------------------------------------------------------
   13) "我的" profile 页
   ----------------------------------------------------------------------------- */
.profile-header {
    background: var(--vlt-grad-wine) !important;
    background-image:
        radial-gradient(at 20% 0%, rgba(216, 86, 122, 0.35) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(201, 166, 107, 0.25) 0%, transparent 50%),
        var(--vlt-grad-wine) !important;
    color: var(--vlt-paper) !important;
    position: relative !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    overflow: hidden;
}
.profile-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: var(--vlt-grad-gold);
    opacity: 0.6;
}
.profile-header::after {
    content: "❦";
    position: absolute;
    bottom: 14px; right: 20px;
    color: var(--vlt-gold);
    opacity: 0.4;
    font-size: 22px;
}

.user-avatar {
    background: var(--vlt-paper) !important;
    border: 3px solid var(--vlt-gold) !important;
    color: var(--vlt-wine) !important;
    box-shadow:
        0 0 0 4px rgba(201, 166, 107, 0.18),
        0 8px 24px rgba(74, 16, 25, 0.4) !important;
}

.profile-header .user-name { color: var(--vlt-paper) !important; font-family: var(--vlt-display) !important; font-size: 26px !important; }
.profile-header .user-id { color: var(--vlt-gold-soft) !important; font-family: var(--vlt-numeric) !important; font-style: italic; }

.user-level {
    background: var(--vlt-grad-gold) !important;
    color: var(--vlt-wine-deep) !important;
    border-radius: var(--vlt-r-pill) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(166, 130, 73, 0.4);
    padding: 4px 12px !important;
}

.settings-btn,
.edit-name-btn {
    background: rgba(255, 246, 221, 0.15) !important;
    color: var(--vlt-paper) !important;
    border: 1px solid rgba(201, 166, 107, 0.35) !important;
    backdrop-filter: blur(6px);
    border-radius: var(--vlt-r-md) !important;
}
.settings-btn:hover,
.edit-name-btn:hover {
    background: rgba(201, 166, 107, 0.3) !important;
    border-color: var(--vlt-gold) !important;
}

/* 余额卡 */
.balance-card {
    background: var(--vlt-surface) !important;
    border-radius: var(--vlt-r-xl) !important;
    border: 1px solid var(--vlt-gold-soft) !important;
    box-shadow: var(--vlt-shadow-lg) !important;
    margin: 10px 16px 16px !important;
    position: relative;
    overflow: hidden;
}
.balance-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(255, 246, 221, 0.5), transparent 40%),
        linear-gradient(0deg, rgba(199, 107, 122, 0.06), transparent 40%);
    pointer-events: none;
}
.balance-icon {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border: 1px solid var(--vlt-gold) !important;
    box-shadow: 0 4px 12px rgba(74, 16, 25, 0.2);
}
.balance-label { color: var(--vlt-mute) !important; letter-spacing: 0.1em !important; text-transform: uppercase; font-size: 11px !important; }
.balance-value { color: var(--vlt-wine-deep) !important; font-family: var(--vlt-numeric) !important; font-style: italic !important; font-size: 30px !important; font-weight: 600 !important; }

/* 菜单列表 */
.menu-section,
.menu-list {
    background: var(--vlt-surface) !important;
    border-radius: var(--vlt-r-lg) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    box-shadow: var(--vlt-shadow-md) !important;
    overflow: hidden;
}
.menu-item {
    border-bottom: 1px solid var(--vlt-line-soft) !important;
    transition: all 0.25s ease !important;
}
.menu-item:hover { background: var(--vlt-bg-deep) !important; padding-left: 24px !important; }
.menu-icon {
    background: var(--vlt-bg-deep) !important;
    color: var(--vlt-wine) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-md) !important;
}
.menu-title { color: var(--vlt-ink) !important; font-family: var(--vlt-body) !important; font-weight: 500 !important; }
.menu-desc { color: var(--vlt-mute) !important; font-style: italic; }
.menu-arrow { color: var(--vlt-gold) !important; }
.menu-item i { color: var(--vlt-wine) !important; }

/* -----------------------------------------------------------------------------
   14) 模态框
   ----------------------------------------------------------------------------- */
.modal-overlay,
.price-modal-overlay {
    background: rgba(42, 27, 31, 0.65) !important;
    backdrop-filter: blur(4px);
}
.modal-content,
.price-modal-content {
    background: var(--vlt-paper) !important;
    border-radius: var(--vlt-r-xl) !important;
    border: 1px solid var(--vlt-gold-soft) !important;
    box-shadow: var(--vlt-shadow-lg) !important;
}
.modal-title,
.price-modal-title {
    color: var(--vlt-wine-deep) !important;
    font-family: var(--vlt-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    font-size: 22px !important;
}
.price-modal-header { border-bottom: 1px solid var(--vlt-line) !important; }
.price-modal-close {
    background: var(--vlt-bg-deep) !important;
    color: var(--vlt-wine) !important;
    border: 1px solid var(--vlt-line) !important;
}
.price-modal-close:hover { background: var(--vlt-wine) !important; color: var(--vlt-gold-soft) !important; }
.price-modal-footer { border-top: 1px solid var(--vlt-line) !important; background: var(--vlt-paper) !important; }

/* 价格选项 */
.price-item {
    background: var(--vlt-surface) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-lg) !important;
    transition: all 0.3s ease !important;
}
.price-item.selected {
    background: linear-gradient(135deg, #FFF6E8 0%, #F4E2C0 100%) !important;
    border: 1px solid var(--vlt-gold) !important;
    box-shadow: 0 4px 14px rgba(201, 166, 107, 0.35), inset 0 0 0 1px rgba(201, 166, 107, 0.4) !important;
}
.price-duration { color: var(--vlt-mute) !important; letter-spacing: 0.06em; }
.price-item.selected .price-duration { color: var(--vlt-wine) !important; font-weight: 600; }
.price-amount {
    color: var(--vlt-wine) !important;
    font-family: var(--vlt-numeric) !important;
    font-style: italic !important;
    font-size: 32px !important;
    font-weight: 700 !important;
}
.price-item.selected .price-amount { color: var(--vlt-wine-deep) !important; }
.price-item .price-label { color: var(--vlt-rose) !important; }

/* 支付方式 */
.pay-method-section { border-top: 1px dashed var(--vlt-line) !important; }
.pay-method-title { color: var(--vlt-wine-deep) !important; font-family: var(--vlt-display) !important; font-weight: 600 !important; letter-spacing: 0.05em; }
.pay-method-item {
    background: var(--vlt-paper) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-md) !important;
    color: var(--vlt-ink-soft) !important;
}
.pay-method-item.selected {
    background: linear-gradient(135deg, #FFF6E8 0%, #F4E2C0 100%) !important;
    border-color: var(--vlt-gold) !important;
    box-shadow: 0 2px 8px rgba(201, 166, 107, 0.3) !important;
    color: var(--vlt-wine-deep) !important;
}

/* -----------------------------------------------------------------------------
   15) 上传区 / 资源编辑
   ----------------------------------------------------------------------------- */
.upload-area {
    border: 2px dashed var(--vlt-gold) !important;
    background: var(--vlt-paper) !important;
    border-radius: var(--vlt-r-lg) !important;
    color: var(--vlt-wine) !important;
    transition: all 0.3s ease !important;
}
.upload-area:hover {
    border-color: var(--vlt-coral) !important;
    background: rgba(216, 86, 122, 0.04) !important;
    color: var(--vlt-coral) !important;
}
.preview-item {
    border-radius: var(--vlt-r-md) !important;
    border: 1px solid var(--vlt-gold-soft) !important;
    box-shadow: var(--vlt-shadow-sm) !important;
}
.preview-remove {
    background: rgba(74, 16, 25, 0.85) !important;
    color: var(--vlt-gold-soft) !important;
    border: 1px solid var(--vlt-gold) !important;
}

/* "添加资源" 浮动按钮 */
.btn-add-resource {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border: 1px solid var(--vlt-gold) !important;
    box-shadow: 0 8px 22px rgba(74, 16, 25, 0.4), 0 0 0 4px rgba(201, 166, 107, 0.18) !important;
}
.btn-add-resource:hover { transform: scale(1.08) rotate(90deg); }

/* -----------------------------------------------------------------------------
   16) 详情页
   ----------------------------------------------------------------------------- */
.detail-name { color: var(--vlt-wine-deep) !important; font-family: var(--vlt-display) !important; font-size: 32px !important; font-weight: 600 !important; }
.detail-age { color: var(--vlt-rose) !important; font-family: var(--vlt-numeric) !important; font-style: italic !important; font-size: 22px !important; }

.detail-section-title {
    color: var(--vlt-wine-deep) !important;
    font-family: var(--vlt-display) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--vlt-gold) !important;
    font-size: 20px !important;
    letter-spacing: 0.05em;
}

.detail-item {
    background: var(--vlt-paper) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    border-radius: var(--vlt-r-md) !important;
}
.detail-item i { color: var(--vlt-gold-deep) !important; }
.detail-item-label { color: var(--vlt-mute) !important; letter-spacing: 0.05em; }

.btn-favorite {
    background: var(--vlt-paper) !important;
    color: var(--vlt-wine) !important;
    border: 1px solid var(--vlt-gold) !important;
    border-radius: var(--vlt-r-pill) !important;
    letter-spacing: 0.1em;
    font-weight: 600 !important;
}
.btn-favorite.active {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border-color: var(--vlt-gold) !important;
    box-shadow: 0 4px 14px rgba(74, 16, 25, 0.25);
}

.btn-show-advanced {
    background: var(--vlt-paper) !important;
    border: 1px dashed var(--vlt-gold) !important;
    color: var(--vlt-wine) !important;
    border-radius: var(--vlt-r-md) !important;
    letter-spacing: 0.08em;
}
.btn-show-advanced:hover { background: var(--vlt-bg-deep) !important; }

/* -----------------------------------------------------------------------------
   17) 邀请页 / 等级页
   ----------------------------------------------------------------------------- */
.invite-header {
    background: var(--vlt-grad-wine) !important;
    background-image:
        radial-gradient(at 20% 0%, rgba(216, 86, 122, 0.3) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(201, 166, 107, 0.25) 0%, transparent 50%),
        var(--vlt-grad-wine) !important;
    color: var(--vlt-paper) !important;
    position: relative;
}
.invite-header::after {
    content: "❦";
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    color: var(--vlt-gold);
    opacity: 0.5;
}
.invite-rate {
    color: var(--vlt-gold-soft) !important;
    font-family: var(--vlt-numeric) !important;
    font-style: italic !important;
    font-size: 42px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.invite-item {
    background: var(--vlt-surface) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    border-radius: var(--vlt-r-lg) !important;
    box-shadow: var(--vlt-shadow-md) !important;
}
.invite-nickname { color: var(--vlt-wine) !important; font-family: var(--vlt-display) !important; font-weight: 600 !important; font-size: 17px !important; }
.invite-level {
    background: var(--vlt-grad-gold) !important;
    color: var(--vlt-wine-deep) !important;
    border-radius: var(--vlt-r-pill) !important;
    letter-spacing: 0.1em;
    font-weight: 700 !important;
    text-transform: uppercase;
}
.invite-item-info { color: var(--vlt-mute) !important; }

/* -----------------------------------------------------------------------------
   18) 用户标签
   ----------------------------------------------------------------------------- */
.tag,
.user-tags .tag {
    background: var(--vlt-bg-deep) !important;
    color: var(--vlt-wine) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-pill) !important;
    letter-spacing: 0.05em;
    font-weight: 500 !important;
}
.tag i { color: var(--vlt-gold-deep) !important; }

/* -----------------------------------------------------------------------------
   19) 资源管理 / 切换状态
   ----------------------------------------------------------------------------- */
.resource-item {
    background: var(--vlt-surface) !important;
    border: 1px solid var(--vlt-line-soft) !important;
    border-radius: var(--vlt-r-lg) !important;
    box-shadow: var(--vlt-shadow-md) !important;
}
.btn-toggle-status,
.btn-edit {
    background: var(--vlt-paper) !important;
    border: 1px solid var(--vlt-line) !important;
    border-radius: var(--vlt-r-pill) !important;
    color: var(--vlt-wine) !important;
    letter-spacing: 0.06em;
    font-weight: 500 !important;
}
.btn-toggle-status.active {
    background: var(--vlt-success) !important;
    color: var(--vlt-paper) !important;
    border-color: var(--vlt-success) !important;
}
.btn-edit:hover { background: var(--vlt-bg-deep) !important; }

/* -----------------------------------------------------------------------------
   20) 空状态
   ----------------------------------------------------------------------------- */
.empty-state { color: var(--vlt-mute) !important; font-family: var(--vlt-display) !important; font-style: italic !important; }
.empty-icon { color: var(--vlt-rose-soft) !important; }
.empty-text { color: var(--vlt-mute) !important; font-family: var(--vlt-display) !important; font-style: italic; font-size: 18px !important; }

/* -----------------------------------------------------------------------------
   21) layer.js 弹窗（红娘项目使用 layer）— 软覆盖
   ----------------------------------------------------------------------------- */
.layui-layer {
    border-radius: var(--vlt-r-lg) !important;
    border: 1px solid var(--vlt-gold-soft) !important;
    box-shadow: var(--vlt-shadow-lg) !important;
    font-family: var(--vlt-body) !important;
}
.layui-layer-title {
    background: var(--vlt-grad-wine) !important;
    color: var(--vlt-gold-soft) !important;
    border-bottom: 1px solid var(--vlt-gold) !important;
    font-family: var(--vlt-display) !important;
    letter-spacing: 0.08em;
    border-radius: var(--vlt-r-lg) var(--vlt-r-lg) 0 0 !important;
}
.layui-layer-btn .layui-layer-btn0 {
    background: var(--vlt-grad-wine) !important;
    border-color: var(--vlt-wine) !important;
    color: var(--vlt-gold-soft) !important;
}
.layui-layer-btn .layui-layer-btn1 {
    background: var(--vlt-paper) !important;
    color: var(--vlt-wine) !important;
    border-color: var(--vlt-line) !important;
}

/* -----------------------------------------------------------------------------
   22) 滚动条美化
   ----------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vlt-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--vlt-gold) 0%, var(--vlt-gold-deep) 100%);
    border-radius: var(--vlt-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--vlt-wine); }

/* -----------------------------------------------------------------------------
   23) 响应式微调
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .login-container,
    .register-container,
    .auth-form { padding: 40px 24px !important; }
    .logo h1, .header h1, .auth-title { font-size: 30px !important; }
    .header-title, .page-title, .chat-title { font-size: 18px !important; }
}