/* ============================================================
   在线供需撮合平台 - 响应式样式表
   适配手机端 / 平板端 / 电脑端
   ============================================================ */

/* === CSS 重置 & 基础变量 === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary: #1a73e8;
    --primary-dark: #1557b0;
    --primary-light: #e8f0fe;
    --success: #0d904f;
    --success-light: #e6f4ea;
    --danger: #d93025;
    --danger-light: #fce8e6;
    --warning: #e37400;
    --warning-light: #fef7e0;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --text-muted: #80868b;
    --border: #dadce0;
    --border-light: #e8eaed;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-gray: #f1f3f4;
    --bg-card: #ffffff;
    --bg-input: #fafafa;
    --bg-hover: #f1f3f4;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --transition: 0.2s ease;
    --max-width: 1400px;
    --nav-height: 60px;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg-light);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

.site-content {
    flex: 1;
    padding-top: var(--nav-height);
}

/* === 面包屑导航 (SEO) === */
.breadcrumb {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    font-size: 0.875rem;
}
.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: #666;
}
.breadcrumb li + li::before {
    content: '/';
    margin: 0 6px;
    color: #ccc;
    font-size: 0.75rem;
}
.breadcrumb a {
    color: var(--color-primary, #1a73e8);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
    color: #333;
    font-weight: 500;
}

.dark-mode .breadcrumb li {
    color: #999;
}
.dark-mode .breadcrumb li + li::before {
    color: #555;
}
.dark-mode .breadcrumb a {
    color: #5b9cf5;
}
.dark-mode .breadcrumb [aria-current="page"] {
    color: #ddd;
}

/* === 移动端搜索栏（桌面端隐藏） === */
.mobile-search-bar { display: none; }

/* === 导航栏 === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.nav-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-left: 32px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 8px 14px;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition);
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    background: var(--primary-light);
    color: var(--primary);
}

.nav-register {
    background: var(--primary);
    color: #fff !important;
}
.nav-register:hover {
    background: var(--primary-dark);
}

.nav-user-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-user-name {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition);
    border: 1px solid transparent;
}
.nav-user-name:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* 移动端菜单按钮 */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

/* === 按钮系统 === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; color: inherit; }

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(26,115,232,0.3);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(26,115,232,0.4); transform: translateY(-1px); }

/* 发布按钮 - 更突出 */
.btn-publish {
    color: #fff;
    padding: 16px 40px;
    font-size: 1.125rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #2563eb, #1e40af);
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}
.btn-publish:hover {
    box-shadow: 0 6px 20px rgba(37,99,235,0.5);
    transform: translateY(-2px);
}

.nav-link-publish {
    background: var(--primary);
    color: #fff !important;
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(26,115,232,0.25);
}
.nav-link-publish:hover {
    background: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(26,115,232,0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-gray); }

.btn-success {
    background: var(--success);
    color: #fff;
}
.btn-success:hover { background: #0b7a3e; }

.btn-danger {
    background: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: #b3261e; }

.btn-warning {
    background: #f57c00;
    color: #fff;
}
.btn-warning:hover { background: #e06b00; }

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}
.btn-danger-outline:hover {
    background: var(--danger);
    color: #fff;
}

.btn-block { display: flex; width: 100%; }
.btn-small { padding: 6px 12px; font-size: 0.813rem; }

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

.form-group label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-group .required { color: var(--danger); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-white);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

select { cursor: pointer; appearance: auto; }

.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
}

.radio-label:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.radio-label input[type="radio"] { accent-color: var(--primary); }

/* === 警告/提示 === */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert-error {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid #f5c6cb;
}

.alert-success {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid #c3e6cb;
}

.banner-alert {
    max-width: 600px;
    margin: 16px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 15px;
    animation: bannerSlideIn 0.3s ease-out;
}
.banner-alert .alert-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.banner-alert .alert-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
    line-height: 1;
}
.banner-alert .alert-close:hover {
    opacity: 1;
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.alert-info {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #b6d4fe;
}

/* === 认证页面 === */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height) - 100px);
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-size: 1.75rem;
    margin-bottom: 8px;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 0.938rem;
}

.auth-form .form-group { margin-bottom: 20px; }
.auth-form .btn { margin-top: 8px; padding: 12px; font-size: 1rem; }

.auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.938rem;
}

/* === 英雄搜索区 === */
.hero-section {
    background: linear-gradient(135deg, #1a56db 0%, #0d47a1 40%, #071e3d 100%);
    padding: 80px 20px 72px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* 背景装饰 */
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content { 
    max-width: 960px; 
    margin: 0 auto; 
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.188rem;
    opacity: 0.85;
    margin-bottom: 40px;
    font-weight: 400;
}

.search-box {
    display: flex;
    background: #fff;
    border-radius: var(--radius-full);
    padding: 5px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    position: relative;
    max-width: 780px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 18px 24px !important;
    font-size: 1.125rem !important;
    border-radius: var(--radius-full) !important;
    outline: none;
    color: #333;
}
.search-input:focus { box-shadow: none !important; }
.search-input::placeholder { color: #9aa0a6; }

.search-btn {
    padding: 14px 38px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 1.063rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.search-btn:hover { background: var(--primary-dark); transform: scale(1.02); }

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 100;
    text-align: left;
}

.search-suggestions li { border-bottom: 1px solid var(--border); }
.search-suggestions li:last-child { border-bottom: none; }

.search-suggestions a {
    display: block;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: var(--transition);
}
.search-suggestions a:hover { background: var(--bg-gray); }

.sug-type {
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 500;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stat-card {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all var(--transition);
}

.hero-stat-card:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.hero-stat-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
    display: block;
    opacity: 0.9;
}

.hero-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    display: block;
    line-height: 1.2;
    margin-bottom: 2px;
}

.hero-stat-label {
    font-size: 0.8rem;
    opacity: 0.75;
    font-weight: 400;
}

/* === Hero 快捷分类导航 === */
.hero-quick-cats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.hero-quick-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-full);
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}

.hero-quick-cat:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
    transform: translateY(-1px);
}

.hero-quick-cat.active {
    background: rgba(255,255,255,0.95);
    color: var(--primary);
    border-color: rgba(255,255,255,0.95);
    font-weight: 600;
}

/* === 主布局 === */
.main-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 28px;
    padding: 28px 24px;
}

/* === Tab 频道标题栏 === */
.tab-channel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    background: var(--bg-white);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

.tab-channel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

.tab-channel-title svg {
    flex-shrink: 0;
    color: var(--primary);
}

.tab-channel-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: auto;
}

@media (max-width: 768px) {
    .tab-channel-header {
        flex-wrap: wrap;
        padding: 12px 16px;
        margin-bottom: 12px;
        gap: 6px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .tab-channel-title {
        font-size: 1rem;
    }

    .tab-channel-sub {
        font-size: 0.78rem;
        width: 100%;
        margin-left: 0;
    }
}

/* === 筛选侧边栏 === */
.filter-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    align-self: flex-start;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}

.filter-sidebar h3 {
    font-size: 1.063rem;
    margin: 0;
    padding: 0;
    border: none;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: block;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-option {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.813rem;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-white);
    transition: var(--transition);
    cursor: pointer;
}

.filter-option:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-option.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.filter-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.875rem;
}

.filter-apply { margin-top: 8px; }
.filter-apply + .btn { margin-top: 8px; }

/* === 内容区 === */
.content-area {
    flex: 1;
    min-width: 0;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bg-gray);
    flex-wrap: wrap;
    gap: 14px;
}

.content-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.content-header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tools-separator {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

.result-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-gray);
    padding: 3px 12px;
    border-radius: var(--radius-full);
}

.keyword-highlight {
    color: var(--primary);
    font-weight: 700;
}

.count-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    margin-left: 6px;
    vertical-align: middle;
}

/* === 需求卡片 - CSS Grid 网格布局 === */
.demand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

/* 列数控制（由 JS 动态设置） */
.demand-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
.demand-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
.demand-grid.col-4 { grid-template-columns: repeat(4, 1fr); }

.demand-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    /* === 修复宽度不一致核心 === */
    min-width: 0;           /* 允许grid item收缩，防止内容撑破列宽 */
    overflow: hidden;       /* 裁剪溢出内容 */
    word-break: break-word; /* 长单词/URL强制换行 */
}

.demand-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.demand-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.demand-card-title {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: break-word;
}

.demand-card-title:hover { color: var(--primary); }

/* 主图 */
.demand-card-thumb {
    display: block;
    width: calc(100% + 40px); /* 配合 -20px 负边距，撑满卡片 */
    margin: -20px -20px 14px -20px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
    background: var(--bg-gray);
    aspect-ratio: 16 / 10;
    max-width: none; /* 覆盖通用 img 的 max-width */;
    flex-shrink: 0; /* 不参与 flex 伸缩 */;
}

.demand-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.demand-card:hover .demand-card-thumb img {
    transform: scale(1.06);
}

/* 无缩略图占位：保持与有图卡片相同的高度结构 */
.demand-card-thumb-empty {
    cursor: default;
    pointer-events: none;
    background: linear-gradient(135deg, #f0f2f5 0%, #e8ecf1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.demand-card-thumb-empty::after {
    content: '';
    width: 48px;
    height: 48px;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.demand-card:hover .demand-card-thumb-empty {
    /* 空占位不缩放 */
    transform: none;
}

.demand-card-content {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    flex: 1;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    min-height: 0; /* flex子元素收缩兼容 */
}

.demand-card-footer {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: auto;
    min-width: 0;
}

.demand-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 0;
    margin-bottom: 10px;
}

.card-user { font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-user-link { color: var(--text-secondary); text-decoration: none; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.card-user-link:hover { color: var(--primary); }
.card-time { opacity: 0.7; }
.card-price {
    font-weight: 700;
    color: var(--danger);
    font-size: 0.95rem;
    margin-left: auto;
}

/* 移动端专用价格：默认隐藏，仅在列表视图小屏时显示 */
.card-price-mobile {
    display: none;
}

.card-budget {
    color: var(--danger);
    font-weight: 600;
    font-size: 0.95rem;
}

.demand-card-info {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.card-stat, .card-region {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.card-stat-interest { color: #e37400; }
.card-stat-bookmark { color: #f2a600; }

.card-category {
    background: var(--bg-gray);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    margin-left: auto;
}

/* === 需求类型徽章 === */
.demand-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.type-demand { background: #e8f0fe; color: #1a73e8; }
.type-supply { background: #e6f4ea; color: #0d904f; }

/* 行内标签（移动端列表视图标题行内展示，默认隐藏） */
.demand-card-inline-badges {
    display: none;
}

/* === 状态标签 === */
.demand-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-open { background: #e8f0fe; color: #1a73e8; }
.status-progress { background: #fef7e0; color: #e37400; }
.status-resolved { background: #e6f4ea; color: #0d904f; }
.status-closed { background: #f1f3f4; color: #5f6368; }

.bid-status-pending { color: #e37400; }
.bid-status-accepted { color: #0d904f; }
.bid-status-rejected { color: #d93025; }

/* === 需求列表项 === */
.demand-list { display: flex; flex-direction: column; gap: 12px; }

.demand-item {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    transition: var(--transition);
}

.demand-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

.demand-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.demand-item-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.demand-item-meta {
    display: flex;
    gap: 16px;
    font-size: 0.813rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.demand-item-meta .demand-category {
    background: var(--bg-gray);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

.demand-item-meta .demand-budget {
    color: var(--danger);
    font-weight: 600;
}

.demand-item-meta .demand-date {
    color: var(--text-secondary);
    font-weight: 500;
}

.demand-item-meta .demand-region {
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.demand-item-meta .demand-region svg {
    flex-shrink: 0;
}

/* === 需求列表项操作按钮（删除/恢复/永久删除） === */
.demand-item-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    justify-content: flex-end;
}

.btn-item-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}
.btn-item-action:hover {
    border-color: currentColor;
    background: var(--bg-gray);
}

.btn-item-delete {
    color: #e03131;
    border-color: #fecaca;
}
.btn-item-delete:hover {
    background: #fef2f2;
    border-color: #e03131;
}

.btn-item-restore {
    color: #059669;
    border-color: #a7f3d0;
}
.btn-item-restore:hover {
    background: #ecfdf5;
    border-color: #059669;
}

/* --- 可见性快捷修改（发布记录列表）--- */
.visibility-quick-edit {
    position: relative;
}

.btn-item-visibility {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 14px;
    font-size: 0.8rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-item-visibility:hover {
    border-color: #999;
    background: #f8f9fa;
}

.vis-badge-public {
    color: #059669;
    border-color: #a7f3d0;
    background: #f0fdf4;
}

.vis-badge-password {
    color: #d97706;
    border-color: #fde68a;
    background: #fffbeb;
}

.vis-badge-private {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.vis-arrow {
    margin-left: 2px;
    opacity: 0.5;
    flex-shrink: 0;
}

.vis-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    min-width: 130px;
    overflow: hidden;
}

.vis-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
    color: var(--text-dark, #333);
}

.vis-option:hover {
    background: #f3f4f6;
}

.vis-option.active {
    font-weight: 600;
    color: var(--primary, #4a6cf7);
    background: #eef2ff;
}

/* 暗色模式 */
[data-theme="dark"] .btn-item-visibility {
    background: var(--bg-card, #1f2937);
    border-color: var(--border, #374151);
}

[data-theme="dark"] .vis-badge-public {
    color: #34d399;
    border-color: #065f46;
    background: rgba(5,150,105,0.12);
}

[data-theme="dark"] .vis-badge-password {
    color: #fbbf24;
    border-color: #92400e;
    background: rgba(217,119,6,0.12);
}

[data-theme="dark"] .vis-badge-private {
    color: #f87171;
    border-color: #7f1d1d;
    background: rgba(220,38,38,0.12);
}

[data-theme="dark"] .vis-dropdown {
    background: var(--bg-card, #1f2937);
    border-color: var(--border, #374151);
}

[data-theme="dark"] .vis-option {
    color: var(--text-light, #e5e7eb);
}

[data-theme="dark"] .vis-option:hover {
    background: var(--bg-gray, rgba(75,85,99,0.4));
}

[data-theme="dark"] .vis-option.active {
    background: rgba(74,108,247,0.15);
}

.btn-item-delete-permanent {
    color: #dc2626;
    border-color: #fca5a5;
}
.btn-item-delete-permanent:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* ===== 发布记录快速编辑：商品管理按钮（参考拼多多/淘宝） ===== */
.demand-quick-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-item-edit {
    color: #4b5563;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.btn-item-edit:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
}
.btn-item-edit svg {
    flex-shrink: 0;
}

/* ===== 快速编辑弹窗 ===== */
.qe-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: background .25s;
}
.qe-modal-overlay.qe-visible {
    background: rgba(0,0,0,0.45);
}
.qe-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .25s, opacity .25s;
}
.qe-modal-overlay.qe-visible .qe-modal {
    transform: translateY(0);
    opacity: 1;
}
.qe-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.qe-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.qe-modal-close {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.qe-modal-close:hover { background: #e5e7eb; color: #374151; }
.qe-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.qe-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}
.qe-field-group { margin-bottom: 4px; }
.qe-label {
    display: block;
    font-size: .82rem;
    color: #6b7280;
    margin-bottom: 6px;
    font-weight: 500;
}
.qe-input-wrap {
    position: relative;
}
.qe-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: .95rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    outline: none;
}
.qe-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.qe-textarea-title {
    resize: vertical;
    min-height: 76px;
    line-height: 1.5;
    font-family: inherit;
    overflow-y: auto;
}

.qe-char-count {
    position: absolute;
    right: 12px; bottom: 10px;
    font-size: .75rem;
    color: #9ca3af;
    pointer-events: none;
}
.qe-btn {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .15s;
    white-space: nowrap;
}
.qe-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.qe-btn-cancel {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}
.qe-btn-cancel:hover { background: #e5e7eb; }
.qe-btn-submit {
    background: #3b82f6;
    color: #fff;
}
.qe-btn-submit:hover { background: #2563eb; }
.qe-btn-ai {
    margin-top: 10px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    border: none;
    font-weight: 600;
}
.qe-btn-ai:hover { opacity: .9; transform: translateY(-1px); }
.qe-btn-ai:disabled { opacity: .6; transform: none; }

@keyframes qe-spin {
    to { transform: rotate(360deg); }
}
.qe-spin { animation: qe-spin .8s linear infinite; }

/* Price type selector */
.qe-price-type-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.qe-radio-label {
    font-size: .85rem;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.qe-radio-label input[type="radio"] { accent-color: #3b82f6; }
.qe-price-input-row { margin-bottom: 8px; }

/* Stock control */
.qe-stock-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.qe-stock-btn {
    width: 40px; height: 40px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.qe-stock-btn:hover { background: #e5e7eb; border-color: #9ca3af; }
.qe-input-stock {
    width: 120px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
}
.qe-stock-hint {
    font-size: .75rem;
    color: #9ca3af;
}

/* AI suggestions */
.qe-ai-suggestions {
    margin-top: 12px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    padding: 12px;
    animation: qe-fadeIn .3s;
}
.qe-ai-suggestions-header {
    font-size: .78rem;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 8px;
}
.qe-ai-suggestion-item {
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 6px;
    font-size: .85rem;
    color: #374151;
    cursor: pointer;
    border: 1px solid #e9d5ff;
    transition: all .15s;
}
.qe-ai-suggestion-item:last-child { margin-bottom: 0; }
.qe-ai-suggestion-item:hover {
    background: #ede9fe;
    border-color: #a78bfa;
    color: #6d28d9;
    transform: translateX(3px);
}

/* AI price reference */
.qe-ai-reference {
    margin-top: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 12px;
    animation: qe-fadeIn .3s;
}
.qe-ai-reference-header {
    font-size: .78rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 8px;
}
.qe-ref-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: .82rem;
    border-bottom: 1px dashed #e0f2fe;
}
.qe-ref-row:last-child { border-bottom: none; }
.qe-ref-label { color: #6b7280; }
.qe-ref-value { color: #1f2937; font-weight: 500; }
.qe-ref-highlight { color: #0369a1; font-weight: 700; }
.qe-trend-high { color: #ef4444; }
.qe-trend-low { color: #16a34a; }
.qe-ref-empty {
    font-size: .8rem;
    color: #9ca3af;
    text-align: center;
    padding: 8px;
}

@keyframes qe-fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast */
.qe-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 500;
    color: #fff;
    z-index: 10010;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.qe-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.qe-toast-success { background: linear-gradient(135deg, #059669, #10b981); }
.qe-toast-error { background: linear-gradient(135deg, #dc2626, #ef4444); }

/* ===== 库存显示 ===== */
.demand-stock {
    font-size: .78rem;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #a7f3d0;
}

/* 暗黑模式适配 */
[data-theme="dark"] .btn-item-edit {
    color: #d1d5db;
    background: #1f2937;
    border-color: #374151;
}
[data-theme="dark"] .btn-item-edit:hover {
    background: #111827;
    border-color: #60a5fa;
    color: #93c5fd;
}
[data-theme="dark"] .qe-modal {
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
[data-theme="dark"] .qe-modal-header { background: #111827; border-color: #374151; }
[data-theme="dark"] .qe-modal-title { color: #e5e7eb; }
[data-theme="dark"] .qe-modal-close { color: #6b7280; }
[data-theme="dark"] .qe-modal-close:hover { background: #374151; color: #e5e7eb; }
[data-theme="dark"] .qe-modal-footer { background: #111827; border-color: #374151; }
[data-theme="dark"] .qe-input {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}
[data-theme="dark"] .qe-input:focus { border-color: #60a5fa; }
[data-theme="dark"] .qe-btn-cancel { background: #374151; color: #d1d5db; border-color: #4b5563; }
[data-theme="dark"] .qe-btn-cancel:hover { background: #4b5563; }
[data-theme="dark"] .qe-stock-btn { background: #374151; border-color: #4b5563; color: #d1d5db; }
[data-theme="dark"] .qe-stock-btn:hover { background: #4b5563; }
[data-theme="dark"] .qe-ai-suggestions { background: #1e1b4b; border-color: #4338ca; }
[data-theme="dark"] .qe-ai-suggestion-item { background: #1e293b; border-color: #3730a3; color: #d1d5db; }
[data-theme="dark"] .qe-ai-suggestion-item:hover { background: #312e81; border-color: #6366f1; color: #c7d2fe; }
[data-theme="dark"] .qe-ai-reference { background: #0f172a; border-color: #1e3a5f; }
[data-theme="dark"] .qe-ref-label { color: #94a3b8; }
[data-theme="dark"] .qe-ref-value { color: #e2e8f0; }
[data-theme="dark"] .qe-ref-highlight { color: #38bdf8; }
[data-theme="dark"] .demand-stock { background: #064e3b; color: #34d399; border-color: #065f46; }

/* ===== 发布记录快速编辑 end ===== */

/* === 回收站 === */
.stat-item-trash {
    position: relative;
    overflow: hidden;
}
.stat-item-trash::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    opacity: 0;
    transition: opacity 0.2s;
}
.stat-item-trash:hover::after,
.stat-item-trash.active::after {
    opacity: 1;
}
.stat-item-trash.active {
    border-color: #f59e0b;
}

.trash-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.trash-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.trash-toolbar .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 0.8rem;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: var(--radius, 6px);
    cursor: pointer;
    transition: background 0.2s;
}
.trash-toolbar .btn-danger:hover {
    background: #dc2626;
}

.demand-item-trashed {
    opacity: 0.75;
    background: var(--bg-gray);
    border-left: 3px solid #f59e0b;
}
.demand-item-trashed:hover {
    opacity: 0.9;
}

.trash-deleted-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-full, 20px);
    border: 1px solid #fde68a;
}

.trash-deleted-time {
    color: #f59e0b;
    font-weight: 500;
    font-size: 0.78rem;
}

/* ===== 回收站暗色模式 ===== */
.dark-mode .btn-item-action,
[data-theme="dark"] .btn-item-action {
    background: transparent;
    border-color: #3a3a4a;
    color: #888;
}
.dark-mode .btn-item-delete,
[data-theme="dark"] .btn-item-delete {
    color: #f87171;
    border-color: #4a2020;
}
.dark-mode .btn-item-delete:hover,
[data-theme="dark"] .btn-item-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #f87171;
}
.dark-mode .btn-item-restore,
[data-theme="dark"] .btn-item-restore {
    color: #34d399;
    border-color: #1a3a2a;
}
.dark-mode .btn-item-restore:hover,
[data-theme="dark"] .btn-item-restore:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: #34d399;
}
.dark-mode .btn-item-delete-permanent,
[data-theme="dark"] .btn-item-delete-permanent {
    color: #f87171;
    border-color: #4a2020;
}
.dark-mode .btn-item-delete-permanent:hover,
[data-theme="dark"] .btn-item-delete-permanent:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #f87171;
}
.dark-mode .demand-item-actions,
[data-theme="dark"] .demand-item-actions {
    border-color: #2a2a3a;
}
.dark-mode .demand-item-trashed,
[data-theme="dark"] .demand-item-trashed {
    background: rgba(255, 255, 255, 0.02);
    border-left-color: #b45309;
}
.dark-mode .trash-deleted-badge,
[data-theme="dark"] .trash-deleted-badge {
    background: #2d2410;
    color: #fbbf24;
    border-color: #4a3a10;
}
.dark-mode .trash-deleted-time,
[data-theme="dark"] .trash-deleted-time {
    color: #fbbf24;
}
.dark-mode .trash-toolbar,
[data-theme="dark"] .trash-toolbar {
    border-color: #2a2a3a;
}
.dark-mode .trash-toolbar .btn-danger,
[data-theme="dark"] .trash-toolbar .btn-danger {
    background: #991b1b;
}
.dark-mode .trash-toolbar .btn-danger:hover,
[data-theme="dark"] .trash-toolbar .btn-danger:hover {
    background: #b91c1c;
}

/* === 草稿列表 === */
.draft-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.draft-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.draft-item-main {
    flex: 1;
    min-width: 0;
}

.draft-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.draft-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.draft-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    white-space: nowrap;
    flex-shrink: 0;
}

.draft-item-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.draft-category {
    background: var(--bg-gray);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.draft-budget {
    color: var(--danger);
    font-weight: 600;
}

.draft-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-delete-draft {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.btn-delete-draft:hover {
    background: var(--danger);
    color: #fff;
}

/* 深色模式草稿列表 */
.dark-mode .draft-item {
    background: var(--bg-dark-card, #1e1e2e);
}

.dark-mode .draft-item:hover {
    border-color: var(--primary, #3b82f6);
}

.dark-mode .draft-badge {
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
}

.dark-mode .draft-category {
    background: var(--bg-dark-hover, #2a2a3a);
}

.dark-mode .btn-delete-draft {
    border-color: #ef4444;
    color: #fca5a5;
}

.dark-mode .btn-delete-draft:hover {
    background: #ef4444;
    color: #fff;
}

/* === 订单系统 === */

/* 订单分类子导航（5分类） */
.order-category-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.order-cat-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-white);
    text-decoration: none;
    border-right: 1px solid var(--border);
    transition: all 0.2s;
    white-space: nowrap;
}

.order-cat-tab:last-child { border-right: none; }

.order-cat-tab:hover:not(.active) {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.order-cat-tab.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

.order-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.3);
    color: inherit;
}

.order-cat-tab:not(.active) .order-cat-badge {
    background: var(--primary);
    color: #fff;
}

.order-cat-badge.review-badge {
    background: #ff2442;
    color: #fff;
}

.order-cat-tab.active .order-cat-badge.review-badge {
    background: rgba(255,255,255,0.4);
    color: #fff;
}

/* 旧版订单选项卡（保留兼容） */
.order-tab-switch {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.order-tab-btn {
    padding: 6px 18px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-white);
    text-decoration: none;
    border-right: 1px solid var(--border);
    transition: all 0.15s;
}

.order-tab-btn:last-child { border-right: none; }

.order-tab-btn.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

.order-tab-btn:hover:not(.active) {
    background: var(--bg-gray);
}

/* 订单卡片列表 */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.order-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.order-card:hover {
    box-shadow: var(--shadow-sm);
}

.order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-gray);
    border-bottom: 1px solid var(--border);
}

.order-no {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: monospace;
}

.order-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle;
    transition: all .15s ease;
}
.order-copy-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
}
.order-copy-btn:active { transform: scale(.92); }

.order-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.order-status-pending { background: #fef3c7; color: #92400e; }
.order-status-paid { background: #dbeafe; color: #1e40af; }
.order-status-shipped { background: #d1fae5; color: #065f46; }
.order-status-completed { background: #e0e7ff; color: #3730a3; }
.order-status-cancelled { background: #fee2e2; color: #991b1b; }

.order-card-body {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.order-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f5f5f5;
}

.order-info {
    flex: 1;
    min-width: 0;
}

.order-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 6px 0;
}

.order-price {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.order-total {
    color: #ff2442;
}

.order-total strong {
    font-size: 0.95rem;
}

.order-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.order-card-actions {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* 评价按钮 */
.btn-review {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-review:hover {
    opacity: 0.9;
    color: #fff;
}

/* 追加评价按钮 */
.btn-followup {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-followup:hover {
    opacity: 0.9;
    color: #fff;
}

/* 已评价文字 */
.order-review-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 4px 0 0;
    font-style: italic;
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* 退款状态提示 */
.order-refund-status {
    font-size: 0.82rem;
    color: #e65100;
    margin: 4px 0 0;
    padding: 4px 8px;
    background: #fff3e0;
    border-radius: 4px;
    display: inline-block;
}
    background: var(--bg-gray);
    border-radius: 4px;
    line-height: 1.4;
}

/* 评价弹窗 */
.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.review-modal {
    background: var(--bg-white);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: reviewSlideIn 0.25s ease;
}

@keyframes reviewSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.review-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.review-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.review-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.review-modal-close:hover { color: var(--text-primary); }

.review-modal-body {
    padding: 20px;
}

.review-product-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.review-seller-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.review-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.review-rating-row label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.review-stars {
    display: flex;
    gap: 4px;
}

.review-star {
    cursor: pointer;
    color: #d1d5db;
    transition: all 0.15s;
}

.review-star:hover,
.review-star.active {
    color: #f59e0b;
}

.review-star:hover svg,
.review-star.active svg {
    fill: #f59e0b;
}

.review-char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 评价图片/视频上传预览 */
.review-upload-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.review-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.review-preview-grid .preview-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.review-preview-grid .preview-item img,
.review-preview-grid .preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-preview-grid .preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    padding: 0;
}
.review-preview-grid .preview-remove:hover { background: rgba(239,68,68,0.8); }

/* 评价卡片中的图片展示 */
.review-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.review-imgs a {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-imgs a:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.review-imgs a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 评价卡片中的视频 */
.review-video {
    margin-top: 6px;
}
.review-video video {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* 匿名评价徽标 */
.review-anonymous-badge {
    display: inline-block;
    font-size: 0.72rem;
    color: #8b5cf6;
    background: rgba(139,92,246,0.1);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* 追加评价区域 */
.review-followup {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-light, #f8fafc);
    border-radius: 8px;
    border-left: 3px solid #8b5cf6;
    font-size: 0.85rem;
}
.review-followup .followup-label {
    font-size: 0.72rem;
    color: #8b5cf6;
    font-weight: 600;
    margin-bottom: 3px;
}
.review-followup .followup-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* 响应式：订单分类导航 */
@media (max-width: 600px) {
    .order-category-tabs {
        flex-wrap: wrap;
    }

    .order-cat-tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.8rem;
        border-bottom: 1px solid var(--border);
    }

    .review-modal {
        margin: 0 10px;
        border-radius: 12px;
    }
}

/* 深色模式订单 */
.dark-mode .order-card { background: var(--bg-dark-card, #1e1e2e); }
.dark-mode .order-card-header { background: #2a2a3a; border-color: #333; }
.dark-mode .order-copy-btn { color: #a0aec0; border-color: #3a3a4a; }
.dark-mode .order-copy-btn:hover { color: var(--primary); border-color: var(--primary); background: rgba(91,156,245,.12); }
.dark-mode .order-card-actions { border-color: #333; }
.dark-mode .order-thumb { background: #2a2a3a; }
.dark-mode .order-tab-btn { background: #2a2a3a; }
.dark-mode .order-tab-btn:hover:not(.active) { background: #333; }
.dark-mode .order-cat-tab { background: #2a2a3a; border-color: #333; }
.dark-mode .order-cat-tab:hover:not(.active) { background: #333; color: #e2e8f0; }
.dark-mode .order-category-tabs { border-color: #333; }
.dark-mode .order-review-text { background: #2a2a3a; }
.dark-mode .order-refund-status { background: #3d2a1a; color: #ff9800; }
.dark-mode .btn-warning { background: #e06b00; }
.dark-mode .btn-warning:hover { background: #c25d00; }
.dark-mode .btn-danger-outline { color: #ef5350; border-color: #ef5350; }
.dark-mode .btn-danger-outline:hover { background: #ef5350; color: #1a1a2e; }
.dark-mode .review-modal { background: #1e1e2e; }
.dark-mode .review-modal-header { border-color: #333; }
.dark-mode .review-star { color: #4a4a5a; }

.dark-mode .order-status-pending { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.dark-mode .order-status-paid { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.dark-mode .order-status-shipped { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.dark-mode .order-status-completed { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.dark-mode .order-status-cancelled { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

/* === 详情页 === */
.demand-detail-page {
    max-width: 1300px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.demand-detail-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.demand-detail-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    border: 1px solid var(--border);
}

.demand-detail-header { margin-bottom: 24px; position: relative; }

/* ========== 右上角操作下拉菜单 ========== */
.demand-action-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.demand-action-toggle {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #666);
    transition: all 0.2s ease;
    padding: 0;
}

.demand-action-toggle:hover,
.demand-action-toggle.active {
    background: var(--bg-hover, #f0f0f0);
    color: var(--text-primary, #333);
    border-color: var(--primary, #1a73e8);
}

.demand-action-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 180px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 20;
    animation: dropdownIn 0.2s ease;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary, #333);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.dropdown-item:hover {
    background: var(--bg-hover, #f5f5f5);
}

.dropdown-item svg {
    flex-shrink: 0;
    color: var(--text-secondary, #666);
}

.dropdown-item-danger {
    color: var(--danger, #e53e3e);
    border-top: 1px solid var(--border, #e0e0e0);
}

.dropdown-item-danger:hover {
    background: #fef2f2;
}

.dropdown-item-danger svg {
    color: var(--danger, #e53e3e);
}

/* ========== 供需评论区 ========== */
/* 继承父容器 demand-detail-page 的 max-width 约束，保持与详情卡对齐 */
.comments-section {
    padding: 32px 36px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary, #2563eb);
}

.comments-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.comments-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== 评论区显示/隐藏开关 ===== */
.comments-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.comments-toggle-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.2s;
}
.comments-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}
.comments-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.comments-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.25s ease;
}
.comments-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.comments-toggle-switch input:checked + .comments-toggle-slider {
    background: var(--primary, #2563eb);
}
.comments-toggle-switch input:checked + .comments-toggle-slider::before {
    transform: translateX(18px);
}
.comments-toggle:hover .comments-toggle-label {
    color: var(--text-secondary);
}

/* 发表表单 */
.comment-form-container {
    margin-bottom: 24px;
}

.comment-textarea {
    width: 100%;
    min-height: 88px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.938rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

.comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.comment-char-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.comment-login-hint,
.comment-muted-hint {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--bg-hover);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

.comment-login-hint a {
    color: var(--primary);
    font-weight: 500;
}

/* 评论列表 */
.comments-loading {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.comments-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.938rem;
}

/* === 用户中心 - 评论管理列表 === */
.my-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.my-comment-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.my-comment-item:last-child {
    border-bottom: none;
}

.my-comment-content {
    flex: 1;
    min-width: 0;
}

.my-comment-text {
    color: var(--text-primary);
    font-size: 0.938rem;
    line-height: 1.6;
    margin-bottom: 8px;
    word-break: break-word;
}

.my-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.my-comment-demand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.my-comment-demand a {
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-comment-demand a:hover {
    text-decoration: underline;
}

.my-comment-demand.comment-demand-deleted {
    color: var(--text-muted);
    font-style: italic;
}

.my-comment-time {
    white-space: nowrap;
}

.btn-my-comment-delete {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.btn-my-comment-delete:hover {
    background: #fce4ec;
    color: #c62828;
    border-color: #ef9a9a;
}

.dark-mode .btn-my-comment-delete:hover {
    background: #3d1a2a;
    color: #ef5350;
    border-color: #5a2a3a;
}

.comments-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 0 4px;
}

/* 单条评论 */
.comment-item {
    display: flex;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-light);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-author {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
}

.comment-author-link {
    color: var(--text-primary);
    text-decoration: none;
}

.comment-author-link:hover {
    color: var(--primary);
}

.comment-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.comment-delete-btn {
    margin-left: auto;
    padding: 4px 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    opacity: 0;
}

.comment-item:hover .comment-delete-btn {
    opacity: 1;
}

.comment-delete-btn:hover {
    color: var(--danger);
    background: rgba(217,48,37,0.08);
}

.comment-content {
    font-size: 0.938rem;
    line-height: 1.7;
    color: var(--text-primary);
    word-break: break-word;
}

.comment-actions {
    margin-top: 8px;
}

.comment-reply-btn {
    padding: 3px 10px;
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.813rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.comment-reply-btn:hover {
    background: rgba(26,115,232,0.08);
}

/* 回复列表 */
.comment-replies {
    margin-top: 14px;
    padding-left: 24px;
    border-left: 2px solid var(--border-light);
}

.comment-reply-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.comment-reply-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 回复表单 */
.reply-form-container {
    margin-top: 12px;
}

.reply-textarea {
    width: 100%;
    min-height: 60px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reply-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.08);
}

.reply-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.reply-form-actions .btn {
    font-size: 0.813rem;
    padding: 6px 14px;
}

/* 分页 */
.comments-pagination {
    margin-top: 20px;
    text-align: center;
}

/* 卡片评论数 */
.card-stat-comment {
    color: var(--text-muted);
}

/* ========== 反馈/举报弹窗 ========== */
.report-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.report-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.report-modal {
    position: relative;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: var(--bg-card, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.report-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.report-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text-secondary, #888);
    transition: all 0.15s ease;
}

.report-modal-close:hover {
    background: var(--bg-hover, #f0f0f0);
    color: var(--text-primary, #333);
}

.report-modal-body {
    padding: 16px 24px;
}

.report-modal-tip {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

.report-modal-body textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    color: var(--text-primary, #333);
    background: var(--bg-input, #fff);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.report-modal-body textarea:focus {
    outline: none;
    border-color: var(--primary, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

/* 举报原因选项 */
.report-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.report-reason-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary, #333);
    background: var(--bg-card, #fff);
}

.report-reason-item:hover {
    border-color: var(--primary, #1a73e8);
    background: var(--bg-hover, #f8faff);
}

.report-reason-item input[type=radio] {
    accent-color: var(--primary, #1a73e8);
    margin: 0;
}

.report-reason-item:has(input:checked) {
    border-color: var(--primary, #1a73e8);
    background: #eff6ff;
    color: var(--primary, #1a73e8);
    font-weight: 500;
}

.report-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 24px 20px;
}

/* 暗色模式适配 */
.dark-mode .demand-action-toggle {
    border-color: var(--border, #3a3a4a);
    background: var(--bg-card, #1e1e2e);
    color: var(--text-secondary, #aaa);
}

.dark-mode .demand-action-toggle:hover,
.dark-mode .demand-action-toggle.active {
    background: var(--bg-hover, #2a2a3a);
    border-color: var(--primary, #4dabf7);
    color: var(--text-primary, #eee);
}

.dark-mode .demand-action-dropdown {
    background: var(--bg-card, #1e1e2e);
    border-color: var(--border, #3a3a4a);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.dark-mode .dropdown-item {
    color: var(--text-primary, #e0e0e0);
}

.dark-mode .dropdown-item:hover {
    background: var(--bg-hover, #2a2a3a);
}

.dark-mode .dropdown-item-danger {
    color: #f87171;
    border-top-color: var(--border, #3a3a4a);
}

.dark-mode .dropdown-item-danger:hover {
    background: rgba(248,113,113,0.1);
}

/* ===== 评论暗色模式 ===== */
.dark-mode .comments-section {
    background: #1e1e2e;
    border-color: #2a2a3a;
}

.dark-mode .comments-header {
    border-color: #2a2a3a;
}

.dark-mode .comment-textarea,
.dark-mode .reply-textarea {
    background: #171723;
    border-color: #3a3a4a;
    color: #e0e0e0;
}

.dark-mode .comment-textarea:focus,
.dark-mode .reply-textarea:focus {
    border-color: #4dabf7;
    box-shadow: 0 0 0 3px rgba(77,171,247,0.15);
}

.dark-mode .comment-item {
    border-color: #2a2a3a;
}

.dark-mode .comment-replies {
    border-color: #2a2a3a;
}

.dark-mode .comment-reply-item {
    border-color: #252538;
}

.dark-mode .comment-login-hint,
.dark-mode .comment-muted-hint {
    background: #252538;
    color: #999;
}

.dark-mode .comment-content,
.dark-mode .comment-author,
.dark-mode .comment-author-link {
    color: #e0e0e0;
}

.dark-mode .comment-delete-btn:hover {
    background: rgba(248,113,113,0.12);
}

.dark-mode .comment-reply-btn:hover {
    background: rgba(77,171,247,0.12);
}

/* 评论区开关暗色模式 */
.dark-mode .comments-toggle-label,
[data-theme="dark"] .comments-toggle-label {
    color: #888;
}
.dark-mode .comments-toggle-slider,
[data-theme="dark"] .comments-toggle-slider {
    background: #444;
}
.dark-mode .comments-toggle-switch input:checked + .comments-toggle-slider,
[data-theme="dark"] .comments-toggle-switch input:checked + .comments-toggle-slider {
    background: #6366f1;
}

/* 内联评价暗色模式 */
.dark-mode .demand-reviews-inline,
[data-theme="dark"] .demand-reviews-inline {
    border-color: #2a2a3a;
}
.dark-mode .reviews-inline-avg,
[data-theme="dark"] .reviews-inline-avg {
    background: linear-gradient(135deg, #2d2410 0%, #261f0e 100%);
    border-color: #4a3a10;
}
.dark-mode .reviews-inline-score,
[data-theme="dark"] .reviews-inline-score {
    color: #fbbf24;
}
.dark-mode .review-inline-item,
[data-theme="dark"] .review-inline-item {
    border-color: #2a2a3a;
}
.dark-mode .review-inline-item:hover,
[data-theme="dark"] .review-inline-item:hover {
    background: rgba(255,255,255,0.02);
}
.dark-mode .review-inline-name,
[data-theme="dark"] .review-inline-name {
    color: #e0e0e0;
}
.dark-mode .review-inline-content,
[data-theme="dark"] .review-inline-content {
    color: #a0a0b0;
}
.dark-mode .review-followup,
[data-theme="dark"] .review-followup {
    background: #252535;
    border-left-color: #7c3aed;
}
.dark-mode .review-imgs a,
[data-theme="dark"] .review-imgs a {
    border-color: #3a3a4a;
}
.dark-mode .reviews-inline-more .btn-text,
[data-theme="dark"] .reviews-inline-more .btn-text {
    border-color: #3a3a4a;
    color: #818cf8;
}
.dark-mode .reviews-inline-more .btn-text:hover,
[data-theme="dark"] .reviews-inline-more .btn-text:hover {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.dark-mode .report-modal {
    background: #1e1e2e;
}

.dark-mode .report-modal-body textarea {
    background: var(--bg-input, #171723);
    border-color: var(--border, #3a3a4a);
    color: var(--text-primary, #eee);
}

.dark-mode .report-reason-item {
    background: var(--bg-card, #1e1e2e);
    border-color: var(--border, #3a3a4a);
    color: var(--text-primary, #e0e0e0);
}

.dark-mode .report-reason-item:hover {
    border-color: var(--primary, #4dabf7);
}

.dark-mode .report-reason-item:has(input:checked) {
    background: rgba(77,171,247,0.15);
    border-color: var(--primary, #4dabf7);
    color: var(--primary, #4dabf7);
}

.dark-mode .report-modal-backdrop {
    background: rgba(0,0,0,0.7);
}

.demand-detail-type {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.demand-detail-card h1 {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 14px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.demand-detail-meta {
    display: flex;
    gap: 20px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border);
}

.meta-item.budget {
    color: var(--danger);
    font-weight: 600;
}

.demand-detail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--primary-light, #eef2ff);
    border-radius: var(--radius-full);
    font-size: 0.813rem;
    color: var(--primary, #2563eb);
    font-weight: 500;
    transition: background 0.2s;
}
.tag:hover { background: var(--primary, #2563eb); color: #fff; }

.demand-category-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--bg-gray);
    border-radius: var(--radius-full);
    font-size: 0.813rem;
    color: var(--text-secondary);
}

/* ===== 通用版块标题 ===== */
.demand-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary, #2563eb);
    position: relative;
}
.demand-section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-dark, #1d4ed8);
}
.demand-section-title svg {
    flex-shrink: 0;
    color: var(--primary, #2563eb);
}

.demand-detail-body {
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.demand-detail-body h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.demand-detail-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.demand-content {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-gray, #f9fafb);
    border-radius: var(--radius);
    padding: 20px;
}

/* ===== 买家评价内联区（详情卡内，紧随详情之后） ===== */
.demand-reviews-inline {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.reviews-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.reviews-inline-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.reviews-inline-header h3 svg {
    flex-shrink: 0;
    color: var(--warning, #f59e0b);
}
.reviews-inline-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 2px;
}
.reviews-inline-avg {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-full, 20px);
    border: 1px solid #fde68a;
}
.reviews-inline-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: #d97706;
    line-height: 1;
}
.reviews-inline-stars {
    font-size: 0.78rem;
    color: #f59e0b;
    letter-spacing: 1px;
}

.review-inline-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.review-inline-item:last-child {
    border-bottom: none;
}
.review-inline-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.01));
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 4px;
}

.review-inline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.review-inline-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-gray, #f0f0f0);
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.review-inline-name {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-primary);
}
.review-inline-stars {
    font-size: 0.72rem;
    color: #f59e0b;
    letter-spacing: 0.5px;
    margin-left: 2px;
}
.review-inline-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: auto;
}
.review-inline-content {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 36px;
    word-break: break-word;
}

.reviews-inline-empty,
.reviews-inline-loading {
    text-align: center;
    padding: 28px 0 20px;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.reviews-inline-more {
    margin-top: 10px;
    text-align: center;
}
.reviews-inline-more .btn-text {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-full, 20px);
    padding: 6px 20px;
    font-size: 0.813rem;
    color: var(--primary, #2563eb);
    cursor: pointer;
    transition: all 0.2s;
}
.reviews-inline-more .btn-text:hover {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}

.demand-detail-assignee {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.demand-detail-assignee h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

/* === 侧边栏卡 === */
.demand-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 88px;
}

.user-card, .demand-actions-card, .bids-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.user-card {
    text-align: center;
    position: relative;
    padding-top: 0;
    overflow: hidden;
}

.user-card::before {
    content: '';
    display: block;
    height: 60px;
    margin: -24px -24px 0;
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, #7c3aed 100%);
}

.user-card-avatar {
    margin-top: -32px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.user-card-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    object-fit: cover;
}

.user-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.user-rating { font-size: 0.875rem; color: var(--warning, #f59e0b); margin-bottom: 6px; }
.user-since { font-size: 0.813rem; color: var(--text-muted); margin-bottom: 10px; }
.user-bio { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; padding: 0 8px; }

.demand-actions-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; color: var(--text-primary); }

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bids-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-top: 20px;
}
.bids-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.bids-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

/* === 购买卡（侧边栏内，紧凑版） === */
.purchase-sidebar-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: sticky;
    top: 88px;
    z-index: 10;
}

.purchase-sidebar-card::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary, #2563eb), #7c3aed);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.purchase-price-section {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;
    padding-top: 4px;
}

.purchase-symbol {
    font-size: 1rem;
    font-weight: 700;
    color: #ff2442;
    margin-right: 2px;
}

.purchase-price-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ff2442;
    line-height: 1;
    letter-spacing: -0.5px;
}

.purchase-price-suffix {
    font-size: 0.875rem;
    color: #ff2442;
    margin-left: 3px;
    font-weight: 600;
}

/* 可变产品价格区间显示 */
.purchase-price-sep {
    font-size: 1.2rem;
    color: #999;
    margin: 0 2px;
    font-weight: 400;
    line-height: 1;
}
.purchase-price-max {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ff2442;
    line-height: 1;
    letter-spacing: -0.5px;
}
.purchase-bar-price-max {
    font-size: 1rem;
    font-weight: 700;
    color: #ff2442;
    margin-left: 2px;
}
.purchase-bar-sep {
    color: #999;
    margin: 0 2px;
    font-size: 0.9rem;
}

/* 主内容区可变产品价格 */
.price-variable {
    color: var(--danger, #e74c3c);
    font-weight: 700;
}
.price-range-sep {
    color: #999;
    font-weight: 400;
    margin: 0 4px;
}

.purchase-cat-row {
    margin-bottom: 6px;
}

.purchase-cat-tag {
    display: inline-block;
    font-size: 0.688rem;
    color: #ff2442;
    background: rgba(255, 36, 66, 0.08);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
}

.purchase-service-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.purchase-service-tag {
    font-size: 0.688rem;
    color: #ff2442;
    background: rgba(255, 36, 66, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
}

.purchase-payment-methods {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: #999;
    align-items: center;
}

.purchase-payment-method {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.688rem;
    color: #666;
}

.purchase-payment-alipay { color: #1677ff; }
.purchase-payment-wechat { color: #07c160; }

.purchase-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
}

.purchase-sold {
    font-size: 0.75rem;
    color: #999;
}

.purchase-stock-sep { color: #ddd; font-size: 0.75rem; }

.purchase-stock {
    font-size: 0.75rem;
    color: #999;
}

.purchase-stock-low {
    color: #ff2442;
    font-weight: 600;
}

.purchase-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 6px;
}

.purchase-qty-label {
    font-size: 0.813rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.purchase-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #f5f5f5;
    font-size: 1rem;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.qty-btn:hover { background: #e8e8e8; }
.qty-btn:active { background: #ddd; }

.qty-input {
    width: 42px;
    height: 28px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    background: #fff;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.purchase-qty-stock {
    font-size: 0.688rem;
    color: #bbb;
    white-space: nowrap;
}

.purchase-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
}

.purchase-total-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ff2442;
}

.purchase-soldout {
    text-align: center;
    padding: 12px 0;
    font-size: 0.875rem;
    color: #999;
    font-weight: 600;
}

/* 立即购买按钮（侧边栏内，圆角精致版） */
.btn-purchase-primary {
    display: block;
    width: 100%;
    padding: 11px 0;
    background: linear-gradient(135deg, #ff2442, #ff4057);
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 0.938rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.btn-purchase-primary:hover {
    background: linear-gradient(135deg, #e81f3a, #ff2442);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 36, 66, 0.35);
}

.btn-purchase-primary:active {
    transform: scale(0.97);
}

.purchase-hint {
    text-align: center;
    font-size: 0.688rem;
    color: #bbb;
    margin-top: 6px;
    margin-bottom: 0;
}

/* 移动端底部悬浮购买条 */
.purchase-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

.purchase-sticky-bar.visible {
    display: flex;
}

.purchase-bar-left {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.purchase-bar-symbol {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff2442;
}

.purchase-bar-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ff2442;
}

.purchase-bar-suffix {
    font-size: 0.8rem;
    color: #ff2442;
}

.purchase-bar-sold {
    font-size: 0.75rem;
    color: #999;
    margin-left: 6px;
}

.btn-purchase-sticky {
    padding: 10px 28px;
    background: linear-gradient(135deg, #ff2442, #ff4057);
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 购买确认弹窗 */
.purchase-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.45);
    align-items: flex-end;
    justify-content: center;
}

.purchase-modal {
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.purchase-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.purchase-modal-header h3 {
    font-size: 1.05rem;
    margin: 0;
}

.purchase-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.purchase-modal-body {
    padding: 16px 20px;
}

.purchase-modal-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 16px;
}

.purchase-modal-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #eee;
}

.purchase-modal-item-info {
    flex: 1;
    min-width: 0;
}

.purchase-modal-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.purchase-modal-price {
    font-size: 0.9rem;
    color: #ff2442;
    font-weight: 600;
    margin: 0;
}

.purchase-modal-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.purchase-modal-field {
    margin-bottom: 12px;
}

.purchase-modal-field label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 6px;
}

.purchase-modal-field input,
.purchase-modal-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    box-sizing: border-box;
    background: #fafafa;
    transition: border-color 0.2s;
}

.purchase-modal-field input:focus,
.purchase-modal-field textarea:focus {
    border-color: #ff2442;
    background: #fff;
    outline: none;
}

/* ============================================================
   支付方式选择（确认订单弹窗）
   ============================================================ */
.payment-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 640px) {
    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
    }
}
.payment-method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: #fff;
    user-select: none;
}
.payment-method-item:hover {
    border-color: #c0c0c0;
    background: #fafafa;
}
.payment-method-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}
.payment-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    transition: background 0.2s;
}
.payment-method-item.selected .payment-method-icon {
    background: rgba(59, 130, 246, 0.1);
}
.payment-method-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: #444;
    transition: color 0.2s;
}
.payment-method-item.selected .payment-method-name {
    color: #3b82f6;
}
.payment-method-check {
    display: none;
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.65rem;
    color: #fff;
    background: #3b82f6;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
}
.payment-method-item.selected .payment-method-check {
    display: block;
}

/* 深色模式 */
.dark-mode .payment-method-item {
    background: #2a2a3a;
    border-color: #3a3a4a;
}
.dark-mode .payment-method-item:hover {
    border-color: #555;
    background: #333;
}
.dark-mode .payment-method-item.selected {
    border-color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
}
.dark-mode .payment-method-name {
    color: #ccc;
}
.dark-mode .payment-method-item.selected .payment-method-name {
    color: #60a5fa;
}
.dark-mode .payment-method-icon {
    background: #333;
}
.dark-mode .payment-method-item.selected .payment-method-icon {
    background: rgba(59, 130, 246, 0.18);
}

/* 手机端调整为两列 */
@media (max-width: 480px) {
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }
}

.purchase-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    position: sticky;
    bottom: 0;
    background: #fff;
}

.purchase-modal-total {
    font-size: 0.9rem;
    color: #333;
}

.purchase-modal-total-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ff2442;
}

.btn-purchase-submit {
    padding: 12px 32px;
    background: linear-gradient(135deg, #ff2442, #ff4057);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.btn-purchase-submit:hover {
    box-shadow: 0 4px 14px rgba(255, 36, 66, 0.35);
}

.btn-purchase-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 深色模式购买区 */
.dark-mode .purchase-sidebar-card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .purchase-sidebar-card::before {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}

.dark-mode .purchase-price-num,
.dark-mode .purchase-symbol,
.dark-mode .purchase-price-suffix,
.dark-mode .purchase-price-max,
.dark-mode .purchase-bar-price-max { color: #ff6b81; }

.dark-mode .purchase-service-tag {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.12);
}

.dark-mode .purchase-cat-tag {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.15);
}

.dark-mode .purchase-stats-row { border-bottom-color: #333; }

/* 深色模式：详情页全局 */
[data-theme="dark"] .demand-detail-card,
.dark-mode .demand-detail-card,
[data-theme="dark"] .user-card,
.dark-mode .user-card,
[data-theme="dark"] .demand-actions-card,
.dark-mode .demand-actions-card,
[data-theme="dark"] .bids-card,
.dark-mode .bids-card {
    background: #1e1e2e;
    border-color: #2a2a3a;
}

[data-theme="dark"] .user-card::before,
.dark-mode .user-card::before {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

[data-theme="dark"] .demand-detail-body .demand-content,
.dark-mode .demand-content {
    background: #1a1a2a;
    color: #cbd5e1;
}

[data-theme="dark"] .demand-info-grid,
.dark-mode .demand-info-grid {
    background: #2a2a3a;
    border-color: #2a2a3a;
}

[data-theme="dark"] .info-item,
.dark-mode .info-item {
    background: #1e1e2e;
}

[data-theme="dark"] .info-item:first-child,
.dark-mode .info-item:first-child {
    background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(124,58,237,0.08) 100%);
    border-color: #2a2a3a;
}

[data-theme="dark"] .demand-detail-meta,
.dark-mode .demand-detail-meta {
    border-color: #2a2a3a;
}

[data-theme="dark"] .doc-item,
.dark-mode .doc-item {
    background: #1e1e2e;
    border-color: #2a2a3a;
}
[data-theme="dark"] .doc-item:hover,
.dark-mode .doc-item:hover {
    border-color: #6366f1;
}

[data-theme="dark"] .gallery-item,
.dark-mode .gallery-item {
    background: #1a1a2a;
}

[data-theme="dark"] .interest-actions-card,
.dark-mode .interest-actions-card {
    background: #1e1e2e;
    border-color: #2a2a3a;
}

[data-theme="dark"] .grouped-children-table,
.dark-mode .grouped-children-table {
    border-color: #2a2a3a;
}
[data-theme="dark"] .grouped-children-table th,
.dark-mode .grouped-children-table th {
    background: linear-gradient(135deg, #1f1f33 0%, #1a1a2e 100%);
    border-color: #2a2a3a;
}
[data-theme="dark"] .grouped-children-table td,
.dark-mode .grouped-children-table td {
    border-color: #2a2a3a;
}
[data-theme="dark"] .grouped-children-table tbody tr:hover,
.dark-mode .grouped-children-table tbody tr:hover {
    background: rgba(99,102,241,0.08);
}

.dark-mode .purchase-sticky-bar,
.dark-mode .purchase-modal,
.dark-mode .purchase-modal-header,
.dark-mode .purchase-modal-footer {
    background: #1e1e2e;
}

.dark-mode .purchase-sticky-bar {
    border-top-color: #333;
}

.dark-mode .purchase-modal-item {
    background: #2a2a3a;
}

.dark-mode .purchase-modal-title { color: #ddd; }

.dark-mode .purchase-modal-field input,
.dark-mode .purchase-modal-field textarea {
    background: #2a2a3a;
    border-color: #444;
    color: #ddd;
}

.dark-mode .purchase-modal-field input:focus,
.dark-mode .purchase-modal-field textarea:focus {
    border-color: #ff6b81;
    background: #333;
}

.dark-mode .qty-input { background: #2a2a3a; color: #ddd; border-color: #555; }
.dark-mode .qty-btn { background: #2a2a3a; color: #ccc; }
.dark-mode .qty-btn:hover { background: #333; }
.dark-mode .purchase-total-row { border-top-color: #333; }
.dark-mode .purchase-modal-close { background: #333; color: #ccc; }

/* 弹窗底部区域 */
.purchase-modal-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.purchase-modal-payment-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #1677ff;
    white-space: nowrap;
}

.purchase-modal-payment-wechat {
    color: #07c160;
}

/* 悬浮条支付标签 */
.purchase-bar-paytag {
    font-size: 0.625rem;
    color: #1677ff;
    background: rgba(22, 119, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.purchase-bar-wechat-tag {
    color: #07c160;
    background: rgba(7, 193, 96, 0.08);
}

@media (max-width: 768px) {
    .purchase-sidebar-card {
        display: none;
    }
    /* 移动端始终显示底部悬浮购买条，位于底部导航栏上方 */
    .purchase-sticky-bar {
        display: flex !important;
        bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: 10px;
    }
    /* 移动端购买条内文字适配小屏 */
    .purchase-bar-paytag {
        display: none;
    }
    .purchase-bar-price {
        font-size: 1.125rem;
    }
    .purchase-bar-left {
        gap: 4px;
    }
    /* 移动端：可变产品悬浮条"选择规格"引导文字 */
    .purchase-bar-select-hint {
        display: inline-flex;
        align-items: center;
        font-size: 0.75rem;
        color: #999;
        background: #f0f0f0;
        padding: 2px 8px;
        border-radius: 10px;
        white-space: nowrap;
    }
    .purchase-bar-select-hint::after {
        content: '›';
        margin-left: 2px;
        font-size: 0.85rem;
        font-weight: 700;
    }
    .btn-purchase-sticky {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
    .purchase-modal {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }
}

/* ============================================================
   移动端：可变产品变体规格选择底部面板
   ============================================================ */
.mobile-var-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    animation: fadeIn 0.25s ease;
}
.mobile-var-overlay.open {
    display: block;
}
.mobile-var-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    overflow: hidden;
    flex-direction: column;
}
.mobile-var-panel.open {
    display: flex;
    animation: mobileVarSlideUp 0.3s ease;
}
@keyframes mobileVarSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.mobile-var-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.mobile-var-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #222;
}
.mobile-var-close {
    width: 30px;
    height: 30px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    line-height: 1;
}
.mobile-var-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}
.mobile-var-attrs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mobile-var-attr-group .purchase-attr-label {
    margin-bottom: 8px;
}
.mobile-var-attr-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mobile-var-btn {
    padding: 8px 18px;
    font-size: 0.875rem;
}
.mobile-var-selected-info {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f8f8f8;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #555;
}
.mobile-var-selected-label {
    color: #999;
}
.mobile-var-selected-text {
    color: #222;
    font-weight: 500;
}
.mobile-var-confirm {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    background: var(--primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.mobile-var-confirm:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}
.mobile-var-confirm:not(:disabled):hover {
    background: var(--primary-dark, #2563eb);
}
.mobile-var-confirm:not(:disabled):active {
    background: var(--primary-darker, #1d4ed8);
}

/* 深色模式适配 */
.dark-mode .mobile-var-panel {
    background: #1e1e2e;
}
.dark-mode .mobile-var-header {
    border-bottom-color: #333;
}
.dark-mode .mobile-var-header h3 {
    color: #eee;
}
.dark-mode .mobile-var-close {
    background: #2a2a3a;
    color: #ccc;
}
.dark-mode .mobile-var-selected-info {
    background: #2a2a3a;
    color: #ccc;
}
.dark-mode .mobile-var-selected-text {
    color: #eee;
}
.dark-mode .purchase-bar-select-hint {
    background: #2a2a3a;
    color: #aaa;
}

/* 移动端面板打开时隐藏底部导航和悬浮条（避免遮挡） */
body.mobile-var-open .purchase-sticky-bar {
    z-index: 9900;
}
body.mobile-var-open .mobile-bottom-nav {
    display: none;
}

/* === 应标卡 === */
.bids-card { margin-top: 0; }

.bid-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.bid-item:last-child { border-bottom: none; padding-bottom: 0; }

.bid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.bid-user { font-weight: 600; }
.bid-time { color: var(--text-muted); }

.bid-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.bid-accept-form { margin-top: 8px; }

/* === 应标备注 === */
.bid-remarks {
    font-size: 0.813rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 6px 10px;
    background: var(--bg-gray);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    border-left: 3px solid var(--border);
}

/* === 应标报价类型切换 === */
.price-type-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.price-type-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-white);
    transition: all var(--transition);
    user-select: none;
}

.price-type-option:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.price-type-option input[type="radio"] {
    accent-color: var(--primary);
    margin: 0;
}

.price-type-option:has(input:checked) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}

/* 报价输入行 */
.bid-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.bid-price-unit {
    font-size: 0.938rem;
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0;
}

.bid-price-input {
    width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    transition: border-color var(--transition);
}

.bid-price-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-light);
}

/* 应标说明文本框 - 支持用户自由拖拽缩放 */
#bid_message {
    resize: both;
    min-width: 280px;
    max-width: 100%;
    min-height: 100px;
    max-height: 400px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* 拖拽手柄视觉增强 */
#bid_message::-webkit-resizer {
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--primary) var(--primary) transparent;
    border-radius: 0 0 4px 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}

#bid_message:hover::-webkit-resizer {
    opacity: 0.8;
}

/* === 应标承接折叠开关 === */
.bid-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    transition: margin-bottom 0.3s ease, opacity 0.25s ease;
}

.bid-section-header.has-collapsed {
    margin-bottom: 0;
    opacity: 0.7;
}

.bid-section-header.has-collapsed:hover {
    opacity: 1;
}

.bid-section-header h3 {
    margin: 0;
    flex: 1;
}

.bid-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card, #fff);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
    padding: 0;
}

.bid-section-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 2px 8px rgba(26,115,232,0.12);
}

.bid-section-toggle svg {
    transition: transform 0.3s ease;
}

.bid-section-toggle.collapsed svg {
    transform: rotate(-90deg);
}

/* 折叠内容容器 */
.bid-section-collapsible {
    overflow: hidden;
    opacity: 1;
    max-height: 3000px;
    transition: opacity 0.25s ease, max-height 0.4s ease, margin 0.3s ease;
}

.bid-section-collapsible.bid-collapsed {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.bid-price-sep {
    color: var(--text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* === 附件上传开关 === */
.attachment-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attachment-toggle-label {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.25s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* === 应标附件上传区域 === */
.form-hint {
    font-size: 0.813rem;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

.bid-upload-section {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s;
}

.bid-upload-section:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.02);
}

.bid-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
}

.bid-upload-label svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.bid-upload-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.bid-upload-input {
    display: block;
    width: 100%;
    padding: 0 14px 12px 14px;
    font-size: 0.813rem;
    color: var(--text-muted);
    cursor: pointer;
}

.bid-upload-input::file-selector-button {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-gray);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    margin-right: 8px;
    transition: background 0.2s;
}

.bid-upload-input::file-selector-button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* 暗色模式 */
.dark .bid-upload-section:hover {
    background: rgba(59, 130, 246, 0.04);
}

.dark .toggle-slider {
    background: #555;
}

.dark .toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}

.dark .bid-upload-input::file-selector-button {
    background: var(--bg-dark-card, #1a1a2e);
    color: var(--text-secondary);
    border-color: var(--border);
}

.dark .bid-upload-input::file-selector-button:hover {
    background: var(--primary);
    color: #fff;
}

/* === 应标附件展示（应标列表中） === */
.bid-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.bid-file-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.813rem;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--bg-white);
    transition: all 0.2s;
    max-width: 260px;
}

.bid-file-item:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.05);
    color: var(--primary);
}

.bid-file-item svg {
    flex-shrink: 0;
}

.bid-file-item.file-image svg { color: #e37400; }
.bid-file-item.file-doc svg { color: #1565c0; }
.bid-file-item.file-audio svg { color: #6a1b9a; }
.bid-file-item.file-video svg { color: #c62828; }

.bid-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.bid-file-size {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* 暗色模式 - 附件展示 */
.dark .bid-file-item {
    background: var(--bg-dark-card, #1a1a2e);
    border-color: var(--border);
}

.dark .bid-file-item:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .bid-files {
        gap: 6px;
    }

    .bid-file-item {
        max-width: 100%;
    }

    .bid-file-name {
        max-width: 80px;
    }

    .bid-upload-label {
        padding: 10px 12px;
    }
}

/* 表单标签 */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-label .required {
    color: var(--danger);
    margin-left: 2px;
}

/* === 卡片统计：意向度/收藏量 === */
.card-stat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.card-stat-interest {
    color: #e37400;
    font-weight: 500;
}

.card-stat-bookmark {
    color: #f0a500;
    font-weight: 500;
}

.card-stat-bid {
    color: var(--primary);
    font-weight: 600;
}

.text-muted { color: var(--text-muted); font-size: 0.875rem; }

/* === 分页 === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-white);
    transition: var(--transition);
}

.page-link:hover { border-color: var(--primary); color: var(--primary); }

.page-link.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.page-info {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0 12px;
}

/* === 瀑布流下拉刷新 === */
.pull-refresh-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary-light, #e8f0fe);
    color: var(--primary, #1a73e8);
    font-size: 0.813rem;
    transition: height 0.2s ease;
}

.pull-refresh-icon {
    position: relative;
    width: 26px;
    height: 26px;
}

.pull-refresh-icon svg {
    transition: transform 0.3s ease;
}

.pull-refresh-indicator.pulling .pull-refresh-icon svg {
    transform: rotate(180deg);
}

.pull-refresh-indicator.release .pull-refresh-icon svg {
    transform: rotate(180deg);
}

.pull-refresh-spinner {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    border: 2.5px solid rgba(26,115,232,0.2);
    border-top-color: var(--primary, #1a73e8);
    border-radius: 50%;
    animation: pull-spin 0.7s linear infinite;
}

.pull-refresh-indicator.refreshing .pull-refresh-spinner {
    display: block;
}

.pull-refresh-indicator.refreshing .pull-refresh-icon svg {
    display: none;
}

@keyframes pull-spin {
    to { transform: rotate(360deg); }
}

/* === 瀑布流底部加载器 === */
.waterfall-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.waterfall-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: waterfall-spin 0.7s linear infinite;
}

@keyframes waterfall-spin {
    to { transform: rotate(360deg); }
}

.waterfall-end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0 40px;
    color: var(--text-muted);
    font-size: 0.813rem;
    opacity: 0.7;
}

.waterfall-end span {
    position: relative;
}

.waterfall-end span::before,
.waterfall-end span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background: var(--border);
}

.waterfall-end span::before { right: 100%; margin-right: 12px; }
.waterfall-end span::after { left: 100%; margin-left: 12px; }

.waterfall-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.waterfall-error a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.waterfall-error a:hover { text-decoration: underline; }

/* === 瀑布流卡片入场动画 === */
.waterfall-enter {
    opacity: 0;
    transform: translateY(16px);
    animation: waterfall-fade-in 0.35s ease forwards;
    will-change: transform, opacity;
    contain: layout style; /* 防止动画期间的布局重计算波及相邻元素 */
}

@keyframes waterfall-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 暗色模式适配 */
.dark-mode .pull-refresh-indicator {
    background: var(--primary-light, #1e3a5f);
    color: var(--primary, #5b9cf5);
}

.dark-mode .pull-refresh-spinner {
    border-color: rgba(91,156,245,0.2);
    border-top-color: var(--primary, #5b9cf5);
}

.dark-mode .waterfall-spinner {
    border-color: #3a3a5c;
    border-top-color: var(--primary, #5b9cf5);
}

.dark-mode .waterfall-end span::before,
.dark-mode .waterfall-end span::after {
    background: var(--border);
}

/* === 用户中心 - 功能菜单折叠（桌面端 + 手机端通用） === */
.function-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    margin: 0 20px;
    background: var(--bg-white);
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
}

.function-menu-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
}

.btn-function-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-gray);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-function-menu-toggle:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-function-menu-toggle .toggle-arrow {
    transition: transform 0.3s ease;
}

.btn-function-menu-toggle.collapsed .toggle-arrow {
    transform: rotate(-90deg);
}

/* 功能菜单容器 - 折叠动画 */
.function-menu-wrapper {
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                margin 0.3s ease;
}

.function-menu-wrapper.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* === 用户中心 - 抖音风格菜单（桌面端隐藏，手机端显示） === */
.douyin-menu { display: none; }
.douyin-stats { display: none; }

/* === 用户中心 - 桌面端统计行 === */
.profile-header-stats { display: flex; }
.header-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 0 4px;
    min-width: 56px;
}
a.header-stat-item:hover { color: var(--primary); text-decoration: none; }
a.header-stat-item:hover .header-stat-num { color: var(--primary); }
.header-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.2s;
}
.header-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.header-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 8px;
    align-self: center;
}

/* === 用户中心 === */
.profile-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px;
}

.profile-header {
    display: flex;
    gap: 28px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 36px 36px 32px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.profile-header-left { flex-shrink: 0; }
.profile-header-right { flex: 1; min-width: 0; }
.profile-header-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.profile-header-text { flex: 1; min-width: 0; }

/* === 个人信息头部折叠开关 === */
.profile-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.profile-name-row h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card, #fff);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
    padding: 0;
}

.profile-header-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light, rgba(59, 130, 246, 0.06));
}

.profile-header-toggle svg {
    transition: transform 0.25s ease;
}

.profile-header-toggle.collapsed svg {
    transform: rotate(-90deg);
}

.profile-header-collapsible {
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.3s ease;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .profile-name-row h2 {
        font-size: 1.25rem;
    }

    .profile-header-toggle {
        width: 30px;
        height: 30px;
    }
}

/* 暗色模式 */
.dark-mode .profile-header-toggle {
    background: var(--bg-dark-card, #1e1e2e);
    border-color: #3a3a5c;
    color: #888;
}

.dark-mode .profile-header-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.profile-info h2 { font-size: 1.5rem; margin-bottom: 4px; font-weight: 700; color: var(--text-primary); }
.profile-email { color: var(--text-secondary); font-size: 0.938rem; }
.profile-date { color: var(--text-muted); font-size: 0.813rem; margin-top: 4px; }

/* 简介预览 */
.profile-bio-preview {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    border-left: 3px solid var(--primary-light);
    max-width: 480px;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    color: var(--text-primary);
}

.stat-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.stat-item.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-section {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.profile-section h3 {
    font-size: 1.063rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.profile-form textarea { margin-bottom: 12px; }

/* === 表单分组卡片 === */
.form-group-card {
    background: var(--bg-gray);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group-card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}

.form-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}

.form-group-title svg {
    color: var(--primary);
    flex-shrink: 0;
}

.input-disabled {
    background: var(--bg-gray) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.btn-save-profile {
    margin-top: 8px;
    padding: 12px 32px;
    font-size: 1rem;
}

/* === 所在地级联选择（选项卡式）=== */
.location-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
}

.loc-tab-label {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

.loc-select {
    flex: 1;
    min-width: 100px;
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-white, #fff);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s;
}

.loc-select:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* === 动态添加区域 === */
.extra-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border, #e5e7eb);
}

.extra-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.extra-section-title {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
}

.btn-add-extra {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary, #2563eb);
    background: rgba(37,99,235,0.06);
    border: 1px solid rgba(37,99,235,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-add-extra:hover {
    background: rgba(37,99,235,0.12);
    border-color: var(--primary, #2563eb);
}

.btn-add-extra svg {
    flex-shrink: 0;
}

/* === 动态条目 === */
.extra-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 0;
    transition: all 0.2s ease;
}

.extra-item:last-child {
    margin-bottom: 0;
}

.extra-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-white, #fff);
    transition: border-color 0.2s;
}

.extra-input:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.extra-input-full {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-white, #fff);
    transition: border-color 0.2s;
}

.extra-input-full:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.extra-input-bank {
    flex: 0 0 100px;
    min-width: 80px;
    padding: 7px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.extra-input-bank:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.extra-input-num {
    flex: 1;
    min-width: 120px;
    padding: 7px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.extra-input-num:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.extra-select-type {
    flex: 0 0 85px;
    padding: 7px 6px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 0.813rem;
    color: var(--text-primary);
    background: var(--bg-white, #fff);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}

.btn-remove-extra {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}

.btn-remove-extra:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* === 移动端适配 === */
@media (max-width: 768px) {
    .location-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px;
    }

    .loc-tab-label {
        font-size: 0.75rem;
    }

    .loc-select {
        width: 100%;
        min-width: auto;
    }

    .extra-item {
        flex-wrap: wrap;
        gap: 6px;
    }

    .extra-input-bank {
        flex: 1 1 auto;
        min-width: 0;
    }

    .extra-select-type {
        flex: 0 0 70px;
    }
}

/* === 暗色模式适配 === */
.dark-mode .loc-select,
.dark-mode .extra-input,
.dark-mode .extra-input-full,
.dark-mode .extra-input-bank,
.dark-mode .extra-input-num,
.dark-mode .extra-select-type {
    background: #1a1a2e;
    border-color: #374151;
    color: #e5e7eb;
}

.dark-mode .btn-add-extra {
    color: #60a5fa;
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.2);
}

.dark-mode .btn-add-extra:hover {
    background: rgba(96,165,250,0.16);
    border-color: #60a5fa;
}

.dark-mode .extra-section {
    border-color: #374151;
}

.dark-mode .btn-remove-extra {
    color: #f87171;
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.2);
}

.dark-mode .btn-remove-extra:hover {
    background: #dc2626;
    color: #fff;
}

/* === 账户安全双栏布局 === */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.account-card h3,
.theme-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon {
    color: var(--primary);
    flex-shrink: 0;
}

.btn-block { width: 100%; }

.theme-card {
    border: none;
    box-shadow: var(--shadow-sm);
}

/* ===== 隐私设置样式 ===== */
.privacy-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.privacy-switch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--bg-gray, #f7f8fa);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}

.privacy-switch-item:hover {
    background: var(--bg-hover, #eef0f5);
}

.privacy-switch-info {
    flex: 1;
    min-width: 0;
}

.privacy-switch-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.privacy-switch-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 自定义 Toggle Switch（与 checkbox 联动） */
.toggle-switch-wrap {
    flex-shrink: 0;
}

.toggle-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-switch-label {
    display: block;
    width: 48px;
    height: 26px;
    background: #d1d5db;
    border-radius: 26px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
}

.toggle-switch-label::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch-input:checked + .toggle-switch-label {
    background: var(--primary, #1a73e8);
}

.toggle-switch-input:checked + .toggle-switch-label::before {
    transform: translateX(22px);
}

.toggle-switch-input:focus-visible + .toggle-switch-label {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
}

/* 显示数量滑块控制 */
.display-count-control {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.display-count-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border, #e0e0e0);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.display-count-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary, #1a73e8);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.display-count-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary, #1a73e8);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.display-count-value-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-white, #fff);
}

.display-count-input {
    width: 56px;
    padding: 8px 8px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary, #1a73e8);
    -moz-appearance: textfield;
}

.display-count-input::-webkit-inner-spin-button,
.display-count-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.display-count-input:focus {
    outline: none;
    background: var(--bg-hover, #f0f4ff);
}

.display-count-suffix {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-gray, #f7f8fa);
    border-left: 1px solid var(--border, #e0e0e0);
}

/* 隐私预览卡片 */
.privacy-preview-card {
    background: var(--bg-gray, #fafbfc) !important;
    border: 1px dashed var(--border, #e0e0e0) !important;
}

.privacy-preview-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.privacy-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.privacy-preview-item.privacy-visible {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.privacy-preview-item.privacy-hidden {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.privacy-preview-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.privacy-preview-detail {
    font-size: 0.8rem;
    opacity: 0.7;
}

.privacy-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding: 10px 12px;
    background: #fffbe6;
    border-radius: var(--radius);
    border: 1px solid #fef3c7;
    margin: 0;
}

.privacy-note::before {
    content: '💡 ';
}

/* 深色模式隐私设置适配 */
.dark-mode .privacy-switch-item {
    background: var(--bg-dark-card, #1e1e2e);
}

.dark-mode .privacy-switch-item:hover {
    background: var(--bg-dark-hover, #2a2a3a);
}

.dark-mode .toggle-switch-label {
    background: #4b5563;
}

.dark-mode .toggle-switch-input:checked + .toggle-switch-label {
    background: var(--primary, #3b82f6);
}

.dark-mode .display-count-slider {
    background: #4b5563;
}

.dark-mode .display-count-value-wrap {
    background: var(--bg-dark-card, #1e1e2e);
    border-color: #3a3a4a;
}

.dark-mode .display-count-input {
    background: var(--bg-dark-card, #1e1e2e);
    color: var(--primary, #60a5fa);
}

.dark-mode .display-count-suffix {
    background: var(--bg-dark-hover, #2a2a3a);
    border-color: #3a3a4a;
}

.dark-mode .privacy-preview-card {
    background: var(--bg-dark-card, #1a1a2e) !important;
    border-color: #3a3a4a !important;
}

.dark-mode .privacy-preview-item.privacy-visible {
    background: rgba(5, 150, 105, 0.12);
    color: #6ee7b7;
    border-color: rgba(5, 150, 105, 0.3);
}

.dark-mode .privacy-preview-item.privacy-hidden {
    background: rgba(220, 38, 38, 0.1);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.25);
}

.dark-mode .privacy-note {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
}

/* 社交tab样式优化 */
.profile-social-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 20px;
}


/* === 发布页 === */
.publish-page {
    max-width: none;
    margin: 0;
    padding: 0;
}

.publish-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.publish-header {
    margin-bottom: 32px;
}

.publish-header h1 {
    font-size: 1.85rem;
    margin: 0 0 20px 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.publish-form .form-group { margin-bottom: 20px; }
.publish-form .required { color: var(--danger); }
.publish-form .form-group label { font-size: 1rem; }
.publish-form .form-hint { font-size: 0.85rem; }

.publish-form .btn {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* === 类型选择下拉框 === */
.type-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.type-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

/* === 内容文本域 === */
.publish-content-textarea {
    display: block;
    width: 100%;
    min-height: 280px;
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.75;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.publish-content-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.publish-content-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

@media (max-width: 600px) {
    .publish-content-textarea {
        min-height: 560px;
    }
}

/* === 详情编辑器工具栏 === */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: -1px;
    background: var(--bg-gray, #f8f9fa);
    border: 1px solid var(--border, #e0e0e0);
    border-bottom: none;
    border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}

.editor-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.875rem;
    color: var(--primary, #1a73e8);
    background: var(--bg-white, #fff);
    border: 1px solid var(--primary, #1a73e8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.editor-tool-btn:hover {
    background: var(--primary, #1a73e8);
    color: #fff;
}

.editor-tool-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.editor-tool-btn-preview.active {
    background: var(--primary, #1a73e8);
    color: #fff;
}

.editor-tool-btn-preview.active:hover {
    background: var(--primary-dark, #1557b0);
}

.editor-tool-hint {
    font-size: 0.78rem;
    color: var(--text-muted, #999);
    margin-left: auto;
}

/* 上传中旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ===== 详情编辑器 - 可视编辑器面板 ===== */
.content-preview-panel {
    min-height: 280px;
    padding: 16px 18px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-primary, #333);
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-top: none;
    border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
    overflow-y: auto;
    max-height: 600px;
    resize: vertical;
}

.content-preview-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
    outline: none;
    min-height: 240px;
    cursor: text;
}

/* 聚焦时高亮边框 */
.content-preview-body:focus {
    outline: 2px solid var(--primary, #4f46e5);
    outline-offset: 0px;
    border-radius: 4px;
}

/* 空编辑器占位提示 */
.content-preview-body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #999);
    pointer-events: none;
    display: block;
}

.preview-text-line {
    white-space: pre-wrap;
    margin-bottom: 4px;
    min-height: 1.5em;
}

/* ---- 图片包装器 ---- */
.preview-image-wrapper {
    position: relative;
    margin: 12px 0;
    text-align: center;
    border-radius: 8px;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

/* 拖拽中的图片 */
.preview-image-wrapper.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* 拖入目标提示 */
.preview-image-wrapper.drag-over {
    box-shadow: 0 0 0 2px var(--primary, #4f46e5), 0 4px 16px rgba(79, 70, 229, 0.25);
}

.preview-image {
    max-width: 100%;
    max-height: 480px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: contain;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.preview-image:hover {
    transform: scale(1.02);
}

/* ---- 可视编辑器图片工具栏按钮 ---- */
.ve-delete-btn,
.ve-drag-handle {
    position: absolute;
    top: 6px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.preview-image-wrapper:hover .ve-delete-btn,
.preview-image-wrapper:hover .ve-drag-handle {
    opacity: 1;
}

.ve-delete-btn {
    right: 6px;
}

.ve-delete-btn:hover {
    background: rgba(220, 38, 38, 0.85);
}

.ve-drag-handle {
    left: 6px;
    cursor: grab;
}

.ve-drag-handle:active {
    cursor: grabbing;
    background: rgba(79, 70, 229, 0.75);
}

.preview-broken-image {
    padding: 12px;
    background: #fff3cd;
    border: 1px dashed #ffc107;
    border-radius: 6px;
    color: #856404;
    font-size: 0.85rem;
    text-align: center;
}

.preview-empty {
    text-align: center;
    color: var(--text-muted, #999);
    padding: 60px 20px;
    font-size: 0.95rem;
}

/* 预览模式时 textarea 隐藏后不让工具栏圆角丢失 */
.editor-toolbar + .content-preview-panel {
    border-top: none;
}

/* 暗色模式 - 可视编辑器面板 */
.dark-mode .content-preview-panel {
    background: #1e1e2e;
    border-color: #444;
    color: #ddd;
}

.dark-mode .content-preview-body:focus {
    outline-color: #818cf8;
}

.dark-mode .preview-image {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .preview-image-wrapper.drag-over {
    box-shadow: 0 0 0 2px #818cf8, 0 4px 16px rgba(129, 140, 248, 0.3);
}

.dark-mode .preview-broken-image {
    background: #3a2f1a;
    border-color: #856404;
    color: #ffc107;
}

.dark-mode .preview-empty {
    color: #777;
}

.dark-mode .ve-delete-btn,
.dark-mode .ve-drag-handle {
    background: rgba(255, 255, 255, 0.15);
    color: #ddd;
}

.dark-mode .ve-delete-btn:hover {
    background: rgba(220, 38, 38, 0.75);
}

.dark-mode .ve-drag-handle:active {
    background: rgba(129, 140, 248, 0.5);
}

/* 手机端可视编辑器 */
@media (max-width: 600px) {
    .content-preview-panel {
        min-height: 560px;
        padding: 12px 14px;
        max-height: none;
    }
    .content-preview-body {
        min-height: 520px;
    }
    .preview-image {
        max-height: 320px;
    }
    /* 手机端始终显示按钮 */
    .ve-delete-btn,
    .ve-drag-handle {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }
    .ve-delete-btn {
        right: 4px;
        top: 4px;
    }
    .ve-drag-handle {
        left: 4px;
        top: 4px;
    }
}

/* 工具栏与 textarea 衔接：去掉 textarea 顶部圆角 */
.editor-toolbar + .publish-content-textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 暗色模式 */
.dark-mode .editor-toolbar {
    background: #2a2a3a;
    border-color: #444;
}

.dark-mode .editor-tool-btn {
    background: #333;
    border-color: var(--primary, #4a9eff);
    color: var(--primary, #4a9eff);
}

.dark-mode .editor-tool-btn:hover {
    background: var(--primary, #4a9eff);
    color: #fff;
}

/* 手机端适配 */
@media (max-width: 600px) {
    .editor-toolbar {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }
    .editor-tool-btn {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .editor-tool-hint {
        font-size: 0.7rem;
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
    }
}

/* === 发布进度条 === */
.publish-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 8px;
    position: relative;
}

.publish-progress::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.publish-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: var(--transition);
}

.progress-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-white);
    border: 2px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
}

.publish-progress-step.active .progress-dot {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 6px rgba(26, 115, 232, 0.12);
}

.publish-progress-step.active .progress-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}


.progress-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.publish-progress-step.active .progress-label {
    color: var(--primary);
    font-weight: 600;
}

/* === Section 卡片 === */
.form-section-card {
    background: var(--bg-gray);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.form-section-card:hover {
    border-color: #c5cae9;
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
}

.form-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8edf9;
    color: var(--primary);
    flex-shrink: 0;
}

.form-section-icon-price {
    background: #e8f5e9;
    color: #2e7d32;
}

.form-section-icon-contact {
    background: #fff3e0;
    color: #e65100;
}

.form-section-icon-media {
    background: #f3e5f5;
    color: #7b1fa2;
}

.form-section-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-section-title-group h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    border: none;
    color: var(--text-primary);
}

.form-section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.form-section-body {
    padding: 24px;
}

/* 媒体附件折叠状态 */
.form-section-card.section-collapsed {
    opacity: 0.7;
}

.form-section-card.section-collapsed .form-section-header {
    border-bottom-color: transparent;
}

.form-section-card.section-collapsed .form-section-toggle .toggle-slider {
    background: #d1d5db;
}

/* 快速导入个人资料按钮 */
.profile-import-btn {
    transition: all 0.2s;
}

.profile-import-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb, 79, 70, 229), 0.06);
}

/* 移动端：导入按钮文字缩写 */
@media (max-width: 600px) {
    .profile-import-btn .import-btn-text {
        display: none;
    }
    .profile-import-btn {
        padding: 6px 8px;
        font-size: 0;
    }
}

.form-section-body .form-group:last-child {
    margin-bottom: 0;
}

/* === 增强型 Radio 按钮 === */
.radio-group-enhanced {
    display: flex;
    gap: 12px;
}

.radio-label-enhanced {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--bg-white);
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.radio-label-enhanced:hover {
    border-color: var(--primary);
    background: #f5f8ff;
}

.radio-label-enhanced.active {
    border-color: var(--primary);
    background: #f0f5ff;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.1);
}

.radio-label-enhanced input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.radio-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-gray);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.radio-label-enhanced.active .radio-icon {
    background: #e8edf9;
    color: var(--primary);
}

/* === 类型选项卡：需求/供给（一级，大尺寸） === */
.radio-tab-type {
    padding: 20px 24px;
    gap: 16px;
    border-radius: var(--radius-lg);
    border-width: 2px;
}

.radio-tab-type .radio-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.radio-tab-type .radio-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.radio-tab-type .radio-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* === 价格选项卡：固定/区间（二级，紧凑尺寸） === */
.radio-tab-price {
    padding: 10px 14px;
    gap: 10px;
    border-radius: var(--radius-sm);
    border-width: 1.5px;
}

.radio-tab-price .radio-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.radio-tab-price .radio-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.radio-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* === 价格输入增强 === */
.price-row {
    margin-top: -4px;
    margin-bottom: 20px;
}

.price-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    transition: border-color 0.2s ease;
    overflow: hidden;
}

.price-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.price-prefix,
.price-suffix {
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--bg-gray);
    user-select: none;
}

.price-prefix { border-right: 1px solid var(--border); }
.price-suffix { border-left: 1px solid var(--border); }

.price-input {
    flex: 1;
    border: none !important;
    padding: 10px 12px;
    font-size: 0.95rem;
    background: transparent;
    outline: none;
    min-width: 0;
}

/* === 时效 + 长期有效 === */
.expire-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.expire-input-wrapper {
    flex: 1;
    min-width: 200px;
    transition: opacity 0.25s ease;
}

.expire-input-wrapper input[type="date"] {
    width: 100%;
}

.expire-permanent-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

.expire-permanent-label:hover {
    border-color: var(--primary);
    background: #f0f5ff;
}

.expire-permanent-label:has(input:checked) {
    border-color: var(--success);
    background: #f0fdf4;
}

.expire-permanent-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--success);
    cursor: pointer;
}

.expire-permanent-text {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
}

.expire-permanent-label:has(input:checked) .expire-permanent-text {
    color: var(--success);
}

/* 暗色模式 */
.dark-mode .expire-permanent-label {
    background: #1e1e2e;
    border-color: #2a2a40;
}

.dark-mode .expire-permanent-label:hover {
    border-color: var(--primary);
    background: #1a2a4a;
}

.dark-mode .expire-permanent-label:has(input:checked) {
    border-color: #0d904f;
    background: #0f2d1f;
}

/* === 增强型上传区域 === */
.file-upload-area-enhanced {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--bg-gray);
}

.file-upload-area-enhanced:hover {
    border-color: var(--primary);
    background: #f5f8ff;
}

.file-upload-area-enhanced .file-input {
    display: none;
}

.file-upload-label-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-muted);
}

.file-upload-label-enhanced svg {
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

.file-upload-area-enhanced:hover .file-upload-label-enhanced svg {
    opacity: 1;
}

.upload-text-main {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.upload-text-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.file-upload-area-small {
    padding: 18px 20px;
}

.file-upload-area-compact {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
}

.file-upload-area-compact .file-upload-label-enhanced {
    flex-direction: row;
    gap: 6px;
}

.file-upload-area-compact .upload-text-main {
    font-size: 0.82rem;
}

/* === 操作按钮区 === */
.form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.form-actions .btn-publish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 40px;
    font-size: 1.1rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), #0d47a1);
    box-shadow: 0 4px 14px rgba(26,115,232,0.35);
}

.form-actions .btn-publish:hover {
    box-shadow: 0 6px 22px rgba(26,115,232,0.5);
    transform: translateY(-2px);
}

.form-actions-sub {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-action-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.875rem;
}

/* === 空状态 === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state p { margin-bottom: 6px; font-size: 1rem; color: var(--text-secondary); }
.empty-state p:first-of-type { font-weight: 500; color: var(--text-primary); font-size: 1.1rem; }
.empty-state .btn { margin-top: 20px; }

/* === 推荐区域 === */
.recommend-section {
    margin-bottom: 36px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff 50%, #f8fafc 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(26,115,232,0.1);
}

.dark-mode .recommend-section {
    background: linear-gradient(135deg, #1e2040 0%, #1a1a2e 50%, #16213e 100%);
    border-color: rgba(139,156,255,0.12);
}

.recommend-section h3 {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === 最近浏览区域 === */
.recent-section {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.recent-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.recent-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.recent-scroll::-webkit-scrollbar {
    height: 4px;
}

.recent-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.recent-item {
    flex-shrink: 0;
    width: 180px;
    padding: 12px 14px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition);
}

.recent-item:hover {
    background: var(--bg-white);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.recent-item-title {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.recent-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.recent-item-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--danger);
}

/* 推荐栏目开关 */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: 4px;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 22px;
    position: relative;
    transition: background 0.25s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color, #1a73e8);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.recommend-collapsed h3 {
    margin-bottom: 4px;
}

/* 暗色模式适配 */
.dark-mode .toggle-slider {
    background: #4b5563;
}

.dark-mode .toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color, #3b82f6);
}

/* === 头像占位 === */
.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.avatar-placeholder.large {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.avatar-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* === 页脚 === */
.site-footer {
    background: var(--text-primary);
    color: #fff;
    padding: 40px 20px 0;
    margin-top: 60px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
}

.footer-section h4 {
    font-size: 1rem;
    margin-bottom: 16px;
    font-weight: 600;
}

.footer-section p {
    font-size: 0.875rem;
    opacity: 0.7;
    line-height: 1.6;
}

.footer-section a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin-bottom: 8px;
    transition: var(--transition);
}
.footer-section a:hover { color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0;
    text-align: center;
    font-size: 0.813rem;
    opacity: 0.6;
}

.avatar-placeholder.xlarge {
    width: 100px;
    height: 100px;
    font-size: 2.5rem;
}

/* === 用户头像图片 === */
.user-avatar-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    width: 64px;
    height: 64px;
}

.user-avatar-img.large {
    width: 80px;
    height: 80px;
}

.user-avatar-img.xlarge {
    width: 100px;
    height: 100px;
}

.user-avatar-img.small {
    width: 28px;
    height: 28px;
}

/* === 表单行（双列布局） === */
.form-row {
    display: flex;
    gap: 20px;
}

.form-group-half {
    flex: 1;
}

.field-hint {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    vertical-align: middle;
}

.form-hint {
    display: block;
    font-size: 0.813rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* === 文件上传 === */
.file-upload-area {
    margin-bottom: 16px;
}

.file-input {
    display: none;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.file-upload-label:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.upload-icon {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

/* === 图片预览 === */
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.625rem;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === 已有图片（编辑模式） === */
.existing-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.existing-image-item {
    position: relative;
    width: 90px;
}

.thumb-preview {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.keep-image-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
    cursor: pointer;
}

/* === 图片拖拽排序（相关图片）=== */
.image-sort-hint {
    font-weight: 400;
    color: var(--text-muted, #999);
    font-size: 0.78rem;
    margin-left: 4px;
}

.image-sort-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 50px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-gray, #fafbfc);
    border: 2px dashed transparent;
    transition: border-color 0.2s, background 0.2s;
}

.image-sort-container:has(.sort-image-item) {
    border-color: var(--border, #e5e7eb);
}

/* --- 可排序图片项 --- */
.sort-image-item {
    position: relative;
    width: 110px;
    background: var(--bg-white, #fff);
    border-radius: 10px;
    border: 2px solid var(--border, #e5e7eb);
    overflow: hidden;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s, opacity 0.2s;
    user-select: none;
}

.sort-image-item:hover {
    border-color: var(--primary, #4a6cf7);
    box-shadow: 0 4px 16px rgba(74,108,247,0.15);
    transform: translateY(-2px);
}

.sort-image-item:active {
    cursor: grabbing;
}

/* --- 拖拽状态 --- */
.sort-image-item.sort-dragging {
    opacity: 0.45;
    transform: scale(0.95);
    border-color: var(--primary, #4a6cf7);
    box-shadow: 0 8px 24px rgba(74,108,247,0.2);
}

.sort-image-item.sort-drag-over {
    border-color: var(--primary, #4a6cf7);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(74,108,247,0.15);
    transform: scale(1.04);
    background: var(--primary-light, #f0f4ff);
}

/* --- 拖拽手柄 --- */
.sort-drag-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
    color: #fff;
    cursor: grab;
    transition: background 0.15s;
}

.sort-drag-handle:hover {
    background: rgba(0,0,0,0.65);
}

.sort-drag-handle:active {
    cursor: grabbing;
}

/* --- 图片预览 --- */
.sort-image-preview {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background: #f0f0f0;
}

.sort-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 图片徽章 --- */
.sort-image-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sort-badge-existing {
    background: rgba(74,108,247,0.9);
    color: #fff;
}

.sort-badge-new {
    background: rgba(39,174,96,0.9);
    color: #fff;
}

/* --- 删除按钮 --- */
.sort-image-remove {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231,76,60,0.85);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    padding: 0;
}

.sort-image-remove:hover {
    background: #e74c3c;
    transform: scale(1.15);
}

/* --- 序号指示器 --- */
.sort-image-order {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

/* --- 深色模式 --- */
.dark-mode .image-sort-container {
    background: #1a1a2e;
    border-color: #2a2a3e;
}

.dark-mode .sort-image-item {
    background: #1e1e2e;
    border-color: #333;
}

.dark-mode .sort-image-item:hover {
    border-color: #5b7ef5;
}

.dark-mode .sort-image-item.sort-drag-over {
    background: #252540;
    border-color: #5b7ef5;
}

.dark-mode .sort-image-preview {
    background: #252540;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .sort-image-item {
        width: 95px;
    }
    .sort-image-preview {
        height: 85px;
    }
    .sort-image-badge {
        font-size: 0.6rem;
        padding: 1px 5px;
    }
}

/* === 详情页信息网格 === */
.demand-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 0;
    margin-bottom: 20px;
    background: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: var(--bg-card, #fff);
    min-height: 58px;
    justify-content: center;
}

.info-item:first-child {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--primary-light, #eef2ff) 0%, #f8f9ff 100%);
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.info-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.info-item:first-child .info-label {
    font-size: 0.8rem;
    color: var(--primary, #2563eb);
}

.info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

.info-item:first-child .info-value {
    font-size: 1.125rem;
    font-weight: 700;
    flex: 1;
}

.price-value {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--danger, #e63946) !important;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.info-item:first-child .price-value {
    font-size: 1.5rem !important;
}

.info-value {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-primary);
}

.price-value {
    color: var(--danger);
    font-size: 1.125rem;
    font-weight: 700;
}

.info-remaining {
    font-size: 0.75rem;
    color: var(--success);
    font-weight: 400;
}

.text-expired {
    color: var(--danger) !important;
}

/* === 图片画廊 === */
.demand-images-section {
    padding: 24px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.demand-images-section h2,
.demand-images-section h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.demand-images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.gallery-item {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 4 / 3;
    position: relative;
    cursor: pointer;
    background: var(--bg-gray, #f9fafb);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.gallery-link {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
    pointer-events: none;
}
.gallery-item:hover::after {
    background: rgba(0,0,0,0.06);
}

/* === 过期徽章 === */
.demand-expired-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    background: var(--danger-light);
    color: var(--danger);
    font-weight: 600;
}

.card-expired-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 0.625rem;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-weight: 600;
    z-index: 1;
}

/* === 卡片区域/价格展示 === */
.card-region {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* 卡片 meta 行内的地区标签（首页列表视图可见） */
.demand-card-meta .card-region-meta {
    color: var(--primary);
    font-weight: 500;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* 列表视图下地区高亮 */
.demand-grid.list-view .card-region-meta {
    color: var(--primary);
    font-weight: 600;
}

.card-price {
    color: var(--danger);
    font-weight: 700;
    font-size: 0.875rem;
    margin-left: auto;
}

.demand-card { position: relative; }

/* === 应标报价 === */
.bid-price {
    font-size: 0.875rem;
    color: var(--danger);
    font-weight: 600;
    margin-bottom: 4px;
}

/* === 头像上传区域 === */
.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.avatar-upload-form {
    text-align: center;
}

.avatar-upload-btn {
    cursor: pointer;
    font-size: 0.813rem;
}

/* === 警告提示 === */
.alert-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.875rem;
}

/* === 表单操作区 === */
.form-actions {
    margin-top: 32px;
}

/* ============================================================
   响应式设计 - 平板端 (768px - 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .demand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .demand-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
    .demand-grid.col-3 { grid-template-columns: repeat(2, 1fr); }
    .demand-grid.col-4 { grid-template-columns: repeat(2, 1fr); }

    .demand-card {
        padding: 18px;
    }

    .hero-content h1 { font-size: 2.25rem; }

    .hero-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .hero-quick-cats {
        gap: 8px;
    }

    .hero-quick-cat {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    .demand-detail-page {
        max-width: 900px;
    }

    .demand-detail-main {
        grid-template-columns: 1fr;
    }

    .demand-detail-sidebar { order: 0; }
    .demand-detail-card { order: 1; }

    .demand-detail-card {
        padding: 20px 16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .demand-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        border-radius: 0;
        margin: 0 -16px;
    }
    .info-item {
        padding: 12px 14px;
        min-height: 48px;
    }
    .info-item:first-child {
        padding: 14px 18px;
    }
    .info-item:first-child .price-value {
        font-size: 1.25rem !important;
    }

    .demand-images-gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

    /* 平板：侧边栏移动到详情卡下方，转为水平紧凑布局 */
    .demand-detail-sidebar .user-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        text-align: left;
        padding: 20px;
    }

    .demand-detail-sidebar .user-card-avatar {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .demand-detail-sidebar .user-card-avatar img {
        width: 48px;
        height: 48px;
    }

    .demand-detail-sidebar .user-card h4 {
        margin-bottom: 4px;
    }

    .demand-detail-sidebar .user-rating,
    .demand-detail-sidebar .user-since,
    .demand-detail-sidebar .user-bio {
        width: 100%;
    }

    .demand-detail-sidebar .user-follow-stats {
        margin-right: auto;
    }

    .demand-detail-sidebar .user-card-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .demand-detail-sidebar .user-card-actions .btn {
        flex: 0 1 auto;
        min-width: 100px;
    }

    /* 评论区平板适配 */
    .comments-section {
        padding: 24px 20px;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
    }

    .comment-item {
        padding: 14px 0;
        gap: 10px;
    }

    .comment-replies {
        padding-left: 16px;
    }

    /* 购买卡、意向卡、操作卡平板适配 */
    .purchase-card {
        padding: 16px 20px;
    }

    .interest-actions-card {
        padding: 16px 20px;
    }

    .demand-actions-card {
        padding: 20px;
    }

    .bids-card {
        padding: 20px;
    }
}

/* ============================================================
   响应式设计 - 手机端 (< 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root { --nav-height: 56px; }

    /* 导航 */
    .nav-toggle { display: flex; }

    .nav-menu {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--bg-white);
        border-bottom: 2px solid var(--border);
        flex-direction: column;
        padding: 12px 16px 16px;
        margin-left: 0;
        box-shadow: var(--shadow-lg);
        gap: 0;
    }

    .nav-menu.show { display: flex; }

    .nav-links, .nav-actions {
        flex-direction: column;
        width: 100%;
        gap: 2px;
    }

    .nav-actions {
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .nav-link {
        padding: 14px 18px;
        width: 100%;
        font-size: 1.05rem;
        border-radius: 10px;
        font-weight: 500;
    }

    .nav-link-publish {
        padding: 14px 18px !important;
        font-size: 1.05rem !important;
    }

    .nav-user-menu {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        padding: 14px 18px;
        background: var(--primary-light, #e8f0fe);
        border-radius: 12px;
    }

    .nav-user-name {
        flex: 1;
        padding: 0;
        border: none;
        font-size: 1.05rem;
        background: transparent;
    }
    .nav-user-name:hover {
        background: transparent;
        border-color: transparent;
        color: var(--primary);
    }

    /* ===== 移动端顶部横向频道导航（类 App Tab） ===== */
    :root {
        --mt-tab-h: 44px;
    }

    .site-content {
        padding-top: calc(var(--nav-height) + var(--mt-tab-h));
    }

    .mobile-top-tabs {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        height: var(--mt-tab-h);
        background: var(--bg-white);
        border-bottom: 1px solid var(--border);
        z-index: 999;
        overflow: hidden;
    }

    .mt-tabs-inner {
        display: flex;
        align-items: stretch;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 0 8px;
    }
    .mt-tabs-inner::-webkit-scrollbar { display: none; }

    .mt-tab {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 16px;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mt-tab:hover,
    .mt-tab:active {
        color: var(--text-primary);
    }

    .mt-tab.active {
        color: var(--primary);
        font-weight: 700;
    }

    .mt-tab-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }

    .mt-tab-label {
        line-height: 1;
    }

    /* 底部游标指示线 */
    .mt-tab-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 0;
        border-radius: 3px 3px 0 0;
        background: var(--primary);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    /* 主布局 */
    .main-container {
        flex-direction: column;
        padding: 16px 12px;
        gap: 16px;
    }

    .filter-sidebar {
        width: 100%;
        position: static;
    }

    /* 手机端折叠态：隐藏表单内容，仅显示标题栏 */
    .filter-sidebar.collapsed .filter-group,
    .filter-sidebar.collapsed .btn,
    .filter-sidebar.collapsed form > a {
        display: none;
    }
    .filter-sidebar.collapsed .filter-header {
        margin-bottom: 0;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    .filter-options { gap: 4px; }

    .filter-option {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* 英雄区 */
    .hero-section { padding: 56px 20px 48px; }

    .hero-content h1 { font-size: 2rem; }

    .hero-subtitle { font-size: 1rem; margin-bottom: 28px; }

    .search-box { max-width: 640px; }

    /* === 抖音风格：移动端导航搜索栏 === */
    .mobile-search-bar {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 8px;
        background: var(--bg-gray, #f1f3f4);
        border-radius: 20px;
        padding: 8px 16px;
        margin: 0 10px;
        cursor: pointer;
        transition: background 0.2s;
        max-width: none;
    }

    .mobile-search-bar:active { background: #e2e5e7; }

    .mobile-search-icon {
        color: var(--text-muted, #999);
        flex-shrink: 0;
    }

    .mobile-search-placeholder {
        font-size: 0.9rem;
        color: var(--text-muted, #999);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-brand {
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .nav-toggle {
        flex-shrink: 0;
        padding: 6px;
    }

    .nav-toggle-bar {
        width: 22px;
        height: 2.5px;
    }

    /* 移动端 Hero 区域精简 */
    .hero-section {
        padding: 40px 16px 36px;
    }

    .hero-content h1 { font-size: 1.5rem; margin-bottom: 4px; }
    .hero-subtitle { font-size: 0.85rem; margin-bottom: 20px; }

    .hero-section .search-box {
        max-width: 100%;
        margin: 0;
    }

    .hero-section .search-input {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        scroll-margin-top: calc(var(--nav-height) + var(--mt-tab-h) + 12px);
    }

    .hero-section .search-btn {
        padding: 10px 22px;
        font-size: 0.9rem;
    }

    .hero-stats {
        gap: 12px;
        margin-top: 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-stat-card {
        padding: 14px 10px;
    }

    .hero-stat-value { font-size: 1.4rem; }
    .hero-stat-label { font-size: 0.7rem; }
    .hero-stat-icon { font-size: 1.2rem; }

    /* 快捷分类 */
    .hero-quick-cats {
        gap: 6px;
        margin-top: 18px;
    }

    .hero-quick-cat {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* 搜索框在移动端保持一行（不拆分） */
    .search-box {
        flex-direction: row;
        border-radius: var(--radius-full);
        padding: 4px;
        background: #fff;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    .search-input {
        border-radius: var(--radius-full) !important;
        border: none !important;
        margin-bottom: 0;
    }

    .search-btn {
        width: auto;
        border-radius: var(--radius-full);
        padding: 10px 24px;
        font-size: 0.9rem;
    }

    .search-input {
        padding: 14px 18px !important;
        font-size: 0.938rem !important;
    }

    .search-btn {
        padding: 12px 28px;
        font-size: 0.938rem;
    }



    /* 需求卡片 */
    .demand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .demand-grid.col-2,
    .demand-grid.col-3,
    .demand-grid.col-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 移动端隐藏列数切换器 */
    .col-toggle { display: none !important; }

    .demand-card {
        padding: 20px;
    }

    /* 内容标题 */
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .content-header h2 { font-size: 1.15rem; }

    /* 详情页 */
    .demand-detail-page {
        padding: 0;
    }

    .demand-detail-card {
        padding: 18px 14px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .demand-detail-card h1 { font-size: 1.2rem; }

    .demand-detail-meta { flex-direction: column; gap: 6px; }

    .demand-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        border-radius: 0;
        margin: 0 -14px;
    }
    .info-item { padding: 10px 12px; min-height: 44px; }
    .info-item:first-child { padding: 12px 16px; }
    .info-item:first-child .price-value { font-size: 1.15rem !important; }

    .demand-images-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 评论区手机适配 */
    .comments-section {
        padding: 16px 14px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .comments-header {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .comments-header h3 {
        font-size: 1rem;
    }

    .comment-form-container {
        margin-bottom: 16px;
    }

    .comment-textarea {
        min-height: 72px;
        padding: 10px 12px;
        font-size: 0.875rem;
    }

    .comment-form-actions {
        margin-top: 8px;
    }

    .comment-char-count {
        display: none;
    }

    .comment-form-actions .btn {
        width: 100%;
        font-size: 0.9rem;
        padding: 10px;
    }

    .comment-item {
        padding: 12px 0;
        gap: 8px;
    }

    .comment-avatar {
        width: 32px;
        height: 32px;
    }

    .comment-author {
        font-size: 0.875rem;
    }

    .comment-time {
        font-size: 0.75rem;
    }

    .comment-content {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .comment-reply-btn {
        font-size: 0.75rem;
        padding: 2px 8px;
    }

    /* 删除按钮在移动端始终可见 */
    .comment-delete-btn {
        opacity: 0.6;
        padding: 2px 4px;
    }

    .comment-replies {
        padding-left: 14px;
        border-left-width: 2px;
    }

    .comment-reply-item {
        padding: 10px 0;
    }

    .reply-textarea {
        min-height: 48px;
        font-size: 0.813rem;
        padding: 8px 10px;
    }

    .reply-form-actions .btn {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .comment-login-hint,
    .comment-muted-hint {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .comments-pagination {
        margin-top: 12px;
    }

    /* 评论区开关手机端适配 */
    .comments-toggle {
        gap: 5px;
    }
    .comments-toggle-label {
        font-size: 0.73rem;
    }
    .comments-toggle-switch {
        width: 36px;
        height: 20px;
    }
    .comments-toggle-slider::before {
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
    }
    .comments-toggle-switch input:checked + .comments-toggle-slider::before {
        transform: translateX(16px);
    }

    /* 内联评价手机端适配 */
    .demand-reviews-inline {
        margin-top: 18px;
        padding-top: 16px;
    }
    .reviews-inline-header {
        margin-bottom: 10px;
        gap: 6px;
    }
    .reviews-inline-header h3 {
        font-size: 0.88rem;
    }
    .reviews-inline-avg {
        padding: 3px 8px;
    }
    .reviews-inline-score {
        font-size: 1rem;
    }
    .reviews-inline-stars {
        font-size: 0.7rem;
    }
    .review-inline-item {
        padding: 10px 0;
    }
    .review-inline-item:hover {
        margin: 0 -8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .review-inline-avatar {
        width: 24px;
        height: 24px;
    }
    .review-inline-name {
        font-size: 0.78rem;
    }
    .review-inline-stars {
        font-size: 0.68rem;
    }
    .review-inline-time {
        font-size: 0.68rem;
    }
    .review-inline-content {
        font-size: 0.813rem;
        padding-left: 32px;
    }
    .reviews-inline-empty,
    .reviews-inline-loading {
        padding: 20px 0 14px;
        font-size: 0.813rem;
    }

    /* 手机端：详情页模块卡片紧凑化 */
    .demand-detail-sidebar { display: none; }

    .demand-detail-sidebar .user-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        text-align: left;
        padding: 16px;
    }

    .demand-detail-sidebar .user-card-avatar {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .demand-detail-sidebar .user-card-avatar img {
        width: 40px;
        height: 40px;
    }

    .demand-detail-sidebar .user-card h4 {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .demand-detail-sidebar .user-rating,
    .demand-detail-sidebar .user-since,
    .demand-detail-sidebar .user-bio {
        width: 100%;
        font-size: 0.8rem;
    }

    .demand-detail-sidebar .user-card-actions {
        flex-direction: row;
        gap: 6px;
        width: 100%;
        margin-top: 8px;
    }

    .demand-detail-sidebar .user-card-actions .btn {
        flex: 1;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .interest-actions-card {
        padding: 14px 16px;
    }

    .interest-actions-card h3 {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .interest-buttons {
        gap: 8px;
    }

    .interest-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        min-width: 0;
        flex: 1 0 auto;
    }

    .demand-actions-card {
        padding: 16px;
    }

    .demand-actions-card h3 {
        font-size: 0.95rem;
    }

    .action-buttons {
        gap: 6px;
    }

    .action-buttons .btn {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .bids-card {
        padding: 16px;
    }

    .bids-card h3 {
        font-size: 0.95rem;
    }

    /* 认证 */
    .auth-card { padding: 24px 20px; }

    /* 用户中心 */
    .profile-page { padding: 16px 12px; }

    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px 20px;
        gap: 16px;
    }
    .profile-header-main {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .profile-header-stats { display: none; }
    .profile-bio-preview {
        max-width: 100%;
        text-align: left;
        margin: 10px 0 0;
    }

    .profile-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    .stat-item { padding: 16px 12px; }
    .stat-number { font-size: 1.375rem; }

    .profile-section { padding: 16px; }

    /* 回收站移动端适配 */
    .demand-item-actions {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
    }
    .btn-item-action {
        padding: 3px 10px;
        font-size: 0.73rem;
        gap: 3px;
    }
    .btn-item-action svg {
        width: 13px;
        height: 13px;
    }
    .demand-item-trashed {
        border-left-width: 2px;
    }
    .trash-toolbar {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        padding: 8px 0;
    }
    .trash-toolbar .btn-danger {
        width: 100%;
        justify-content: center;
    }
    .trash-deleted-badge {
        font-size: 0.68rem;
        padding: 1px 6px;
    }
    .trash-deleted-time {
        font-size: 0.73rem;
        display: block;
        width: 100%;
    }
    .stat-item-trash .stat-number {
        color: #f59e0b;
    }

    /* 发布 */
    .publish-page { padding: 0; }
    .publish-layout { padding: 20px 12px; }
    .publish-card { padding: 24px 18px; }
    .publish-header h1 { font-size: 1.5rem; }
    .publish-progress { padding: 0 4px; }
    .publish-progress::before { left: 24px; right: 24px; }
    .progress-label { font-size: 0.75rem; }
    .form-section-body { padding: 18px 16px; }
    .form-section-header { padding: 14px 16px; }
    .radio-group-enhanced { flex-direction: column; }
    .radio-tab-type { padding: 16px 18px; }
    .radio-tab-type .radio-icon { width: 38px; height: 38px; }
    .radio-tab-type .radio-title { font-size: 1rem; }
    .radio-tab-price { padding: 10px 14px; }
    .publish-form .btn { width: 100%; justify-content: center; }
    .form-row { flex-direction: column; gap: 0; }
    .form-actions-sub { flex-direction: column; }
    .form-actions-sub .btn { flex: none; width: 100%; }
    .btn-action-sub { justify-content: center; }
    .price-input-wrapper { font-size: 0.9rem; }
    .file-upload-area-enhanced { padding: 20px 14px; }

    /* 分页 */
    .pagination { gap: 4px; }

    /* 页脚 */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .site-footer { padding: 32px 16px 0; }

    /* === 抖音风格：彩色标签筛选 === */
    .filter-options {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .filter-options::-webkit-scrollbar { display: none; }

    .filter-option {
        flex-shrink: 0;
        padding: 7px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        border: none;
        background: var(--bg-gray);
        color: var(--text-secondary);
        transition: all 0.2s;
        white-space: nowrap;
    }

    .filter-option.active {
        background: var(--primary);
        color: #fff;
    }

    /* 分类彩色标签（首页卡片内） */
    .card-category {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        background: #e3f2fd;
        color: #1565c0;
    }

    .card-region {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        background: #fce4ec;
        color: #c62828;
    }

    /* === 抖音风格：个人中心 === */
    .douyin-menu { display: block; }
    .douyin-stats { display: flex; }

    .profile-page {
        padding: 0;
        max-width: 100%;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 32px 20px 20px;
        gap: 16px;
        background: var(--bg-white);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        margin-bottom: 0;
        border: none;
    }

    .profile-avatar-section {
        margin: 0 auto;
    }

    .profile-avatar .user-avatar-img,
    .profile-avatar .avatar-placeholder {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid var(--primary-light);
    }

    .profile-info h2 {
        font-size: 1.35rem;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .profile-username { font-size: 0.9rem; margin-bottom: 2px; }
    .profile-email { font-size: 0.9rem; color: var(--text-muted); }
    .profile-date { font-size: 0.8rem; margin-top: 2px; }

    /* 抖音风格统计行 */
    .douyin-stats {
        display: flex;
        justify-content: center;
        gap: 32px;
        padding: 8px 0 4px;
    }

    .douyin-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    .douyin-stat-num {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .douyin-stat-label {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    /* 抖音风格菜单列表（位于折叠容器内，顶部与头部衔接） */
    .douyin-menu {
        margin: 0 12px 12px;
        background: var(--bg-white);
        border-radius: 0 0 12px 12px;
        overflow: hidden;
    }

    .douyin-menu-item {
        display: flex;
        align-items: center;
        padding: 18px 16px;
        border-bottom: 1px solid var(--border);
        text-decoration: none;
        color: var(--text-primary);
        transition: background 0.15s;
        gap: 14px;
        cursor: pointer;
    }

    .douyin-menu-item:last-child { border-bottom: none; }

    .douyin-menu-item:active {
        background: var(--bg-gray);
    }

    .douyin-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    [data-menu="history"] .douyin-menu-icon { background: #e3f2fd; color: #1565c0; }
    [data-menu="history-bids"] .douyin-menu-icon { background: #e8f5e9; color: #2e7d32; }
    [data-menu="history-interests"] .douyin-menu-icon { background: #fff3e0; color: #e65100; }
    [data-menu="history-draft"] .douyin-menu-icon { background: #fce4ec; color: #c62828; }
    [data-menu="orders"] .douyin-menu-icon { background: #f3e5f5; color: #6a1b9a; }
    [data-menu="addresses"] .douyin-menu-icon { background: #e8f5e9; color: #2e7d32; }
    [data-menu="social"] .douyin-menu-icon { background: #e0f7fa; color: #00838f; }
    [data-menu="profile"] .douyin-menu-icon { background: #e8eaf6; color: #283593; }
    [data-menu="account"] .douyin-menu-icon { background: #efebe9; color: #4e342e; }
    [data-menu="privacy"] .douyin-menu-icon { background: #e0f2f1; color: #00695c; }
    [data-menu="myreports"] .douyin-menu-icon { background: #fff9c4; color: #f9a825; }
    [data-menu="aianalysis"] .douyin-menu-icon { background: #ede7f6; color: #4527a0; }
    [data-menu="mycomments"] .douyin-menu-icon { background: #e3f2fd; color: #0d47a1; }
    [data-menu="theme"] .douyin-menu-icon { background: #f5f5f5; color: #616161; }

    .douyin-menu-text {
        flex: 1;
        font-size: 1.05rem;
        font-weight: 500;
    }

    .douyin-menu-badge {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-right: -4px;
    }

    .douyin-menu-value {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-right: -4px;
    }

    .douyin-menu-arrow {
        font-size: 1.6rem;
        color: #ccc;
        font-weight: 300;
        line-height: 1;
    }

    /* 隐藏桌面端标签（用菜单替代） */
    .profile-tabs,
    .profile-tabs-wrapper {
        display: none;
    }

    /* 功能菜单折叠开关 - 手机端适配 */
    .function-menu-header {
        margin: 0 12px;
        padding: 10px 16px;
        border-radius: 12px 12px 0 0;
    }

    .function-menu-title { font-size: 0.9rem; }
    .btn-function-menu-toggle { width: 32px; height: 32px; }

    .profile-stats {
        display: none;
    }

    .profile-section {
        border-radius: 12px;
        margin: 12px;
        padding: 20px 16px;
    }

    .profile-section h3 {
        font-size: 1.05rem;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    /* 移动端：表单分组卡片 */
    .form-group-card {
        padding: 14px 12px;
        margin-bottom: 12px;
    }

    .form-group-title {
        font-size: 0.95rem;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    /* 移动端：账户安全双栏变单栏 */
    .account-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 移动端：保存按钮 */
    .btn-save-profile {
        width: 100%;
        padding: 14px;
        font-size: 1rem;
        justify-content: center;
    }
}

/* ============================================================
   响应式设计 - 小屏手机 (< 480px)
   ============================================================ */
@media (max-width: 480px) {
    .demand-card-header { flex-wrap: wrap; }

    .hero-section { padding: 32px 12px 28px; }
    .hero-content h1 { font-size: 1.25rem; }
    .hero-subtitle { font-size: 0.8rem; margin-bottom: 16px; }
    .hero-section .search-input { padding: 10px 14px !important; font-size: 0.85rem !important; }
    .hero-section .search-btn { padding: 9px 18px; font-size: 0.85rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .hero-stat-card { padding: 12px 8px; }
    .hero-stat-value { font-size: 1.25rem; }
    .hero-stat-label { font-size: 0.65rem; }
    .hero-stat-icon { font-size: 1rem; }
    .hero-quick-cats { gap: 5px; margin-top: 14px; }
    .hero-quick-cat { padding: 5px 10px; font-size: 0.7rem; }

    .demand-card-title { font-size: 1rem; }
    .demand-card { padding: 16px; }

    /* 小屏保持双列显示 */
    .demand-grid,
    .demand-grid.col-2,
    .demand-grid.col-3,
    .demand-grid.col-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .main-container { padding: 12px 8px; gap: 12px; }
    .content-header h2 { font-size: 1.1rem; }

    .profile-stats { grid-template-columns: 1fr 1fr; }

    /* 小屏搜索栏适配 */
    .mobile-search-bar {
        margin: 0 8px;
        padding: 7px 12px;
        max-width: 240px;
    }

    .mobile-search-placeholder { font-size: 0.85rem; }

    .nav-brand { font-size: 1rem; }

    /* 小屏 douyin 菜单（折叠容器内） */
    .douyin-menu {
        margin: 0 8px 8px;
        border-radius: 0 0 10px 10px;
    }

    .douyin-menu-item {
        padding: 15px 14px;
        gap: 12px;
    }

    .douyin-menu-text { font-size: 1rem; }

    .function-menu-header {
        margin: 0 8px;
        padding: 8px 14px;
        border-radius: 10px 10px 0 0;
    }

    .function-menu-title { font-size: 0.85rem; }
    .btn-function-menu-toggle { width: 30px; height: 30px; }

    .douyin-stats {
        gap: 24px;
    }

    .douyin-stat-num { font-size: 1rem; }

    /* 小屏 filter tags */
    .filter-option {
        padding: 5px 12px;
        font-size: 0.75rem;
    }
}

    .action-buttons { flex-direction: column; }
    .action-buttons .btn, .action-buttons form { width: 100%; }
    .action-buttons .btn { justify-content: center; }

    .radio-group { flex-direction: column; }

    /* 发布页小屏适配 */
    .publish-page { padding: 0; }
    .publish-layout { padding: 12px 8px; }
    .publish-card { padding: 18px 14px; }
    .publish-header h1 { font-size: 1.375rem; margin-bottom: 16px; }
    .publish-progress { padding: 0 2px; }
    .publish-progress::before { left: 16px; right: 16px; top: 7px; }
    .progress-dot { width: 16px; height: 16px; }
    .progress-label { font-size: 0.7rem; }
    .form-section-body { padding: 14px 12px; }
    .form-section-header { padding: 12px 14px; gap: 10px; }
    .form-section-icon { width: 34px; height: 34px; border-radius: 8px; }
    .form-section-title-group h3 { font-size: 1rem; }
    .form-section-desc { font-size: 0.78rem; }
    .radio-group-enhanced { flex-direction: column; gap: 8px; }
    .radio-label-enhanced { padding: 12px 14px; }
    .radio-icon { width: 32px; height: 32px; }
    .radio-tab-type { padding: 14px 16px; }
    .radio-tab-type .radio-icon { width: 34px; height: 34px; }
    .radio-tab-type .radio-title { font-size: 0.95rem; }
    .radio-tab-price { padding: 8px 12px; }
    .radio-tab-price .radio-icon { width: 24px; height: 24px; }
    .radio-tab-price .radio-title { font-size: 0.85rem; }
    .btn-publish { font-size: 1.05rem; padding: 15px 28px; }
    .nav-link-publish { padding: 10px 18px !important; font-size: 0.9rem !important; }
    .form-actions { margin-top: 24px; padding-top: 18px; }
    .form-actions-sub { flex-direction: column; gap: 8px; }
    .form-actions-sub .btn { width: 100%; }
    .file-upload-area-enhanced { padding: 16px 12px; }
    /* 发布栏目 - 移动端优化 */
    .publish-meta-box { margin-bottom: 16px; border-radius: 10px; }
    .publish-meta-header { padding: 14px 14px; cursor: pointer; touch-action: manipulation; }
    .publish-meta-header-left { gap: 10px; }
    .publish-meta-header-left h3 { font-size: 0.95rem; }
    .publish-meta-header-desc { font-size: 0.75rem; }
    .publish-meta-body { padding: 14px; }
    .publish-meta-row { flex-wrap: wrap; gap: 8px; }
    .publish-meta-value { font-size: 0.82rem; padding: 6px 10px; }
    .publish-meta-sub-row { flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 8px; }
    .publish-meta-sub-row .publish-meta-label { min-width: auto; }
    .publish-edit-link { font-size: 0.82rem; padding: 6px 10px; }

/* ============================================================
   v3 新增 - 深色模式
   ============================================================ */
.dark-mode,
html.dark-mode {
    --primary: #5b9cf5;
    --primary-dark: #3b7dd8;
    --primary-light: #1e3a5f;
    --success: #34a853;
    --success-light: #0d2818;
    --danger: #f28b82;
    --danger-light: #3c1b1b;
    --warning: #f9ab00;
    --warning-light: #3d2c00;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --text-muted: #70757a;
    --border: #3c4043;
    --bg-white: #1e1e2e;
    --bg-light: #121212;
    --bg-gray: #2d2d3f;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.25);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
}

.dark-mode .demand-card:hover {
    box-shadow: 0 0 0 1px var(--primary), 0 4px 12px rgba(91,156,245,0.15);
    border-color: var(--primary);
}

.dark-mode .demand-card-thumb-empty {
    background: linear-gradient(135deg, #252540 0%, #1e1e32 100%);
}
.dark-mode .demand-card-thumb-empty::after {
    opacity: 0.35;
}

.dark-mode .search-btn { background: var(--primary); }
.dark-mode .search-btn:hover { background: var(--primary-dark); }

.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a3a6e 0%, #0d1b3e 40%, #050d1e 100%);
}
.dark-mode .search-input {
    color: #202124;
    background: #fff !important;
}
.dark-mode .search-input::placeholder { color: #9aa0a6; }

.dark-mode .nav-link-publish {
    background: var(--primary);
    color: #fff !important;
}

.dark-mode .btn-publish {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: #fff;
}

.dark-mode .filter-option:hover { border-color: var(--primary); color: var(--primary); }

/* 深色模式 - Tab 频道标题栏 */
.dark-mode .tab-channel-header {
    background: var(--bg-dark-card, #1a1a2e);
    border-color: var(--border, #2a2a3a);
}

.dark-mode .radio-label:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
}

.dark-mode input:focus, .dark-mode select:focus, .dark-mode textarea:focus {
    box-shadow: 0 0 0 3px rgba(91,156,245,0.2);
}

/* 抖音风格暗色模式 */
.dark-mode .mobile-search-bar {
    background: #2d2d3a;
    color: var(--text-secondary);
}

.dark-mode .mobile-search-placeholder { color: var(--text-muted); }

.dark-mode .douyin-menu {
    background: var(--bg-white);
}

.dark-mode .douyin-menu-item {
    border-bottom-color: var(--border);
}

.dark-mode [data-menu="history"] .douyin-menu-icon { background: #1a3a5e; color: #5b9cf5; }
.dark-mode [data-menu="history-bids"] .douyin-menu-icon { background: #1a3d2a; color: #4caf50; }
.dark-mode [data-menu="history-interests"] .douyin-menu-icon { background: #3d2a1a; color: #ff9800; }
.dark-mode [data-menu="history-draft"] .douyin-menu-icon { background: #3d1a2a; color: #ef5350; }
.dark-mode [data-menu="orders"] .douyin-menu-icon { background: #2a1a3d; color: #ab47bc; }
.dark-mode [data-menu="addresses"] .douyin-menu-icon { background: #1a3d2a; color: #66bb6a; }
.dark-mode [data-menu="social"] .douyin-menu-icon { background: #1a2d3d; color: #26c6da; }
.dark-mode [data-menu="profile"] .douyin-menu-icon { background: #1a1a3d; color: #7986cb; }
.dark-mode [data-menu="account"] .douyin-menu-icon { background: #3d2a1a; color: #a1887f; }
.dark-mode [data-menu="privacy"] .douyin-menu-icon { background: #1a3d3a; color: #4db6ac; }
.dark-mode [data-menu="myreports"] .douyin-menu-icon { background: #3d3a1a; color: #fdd835; }
.dark-mode [data-menu="aianalysis"] .douyin-menu-icon { background: #2a1a3d; color: #b39ddb; }
.dark-mode [data-menu="mycomments"] .douyin-menu-icon { background: #1a2d5e; color: #64b5f6; }
.dark-mode [data-menu="theme"] .douyin-menu-icon { background: #2d2d2d; color: #9e9e9e; }

/* 暗色模式 - 功能菜单折叠 */
.dark-mode .function-menu-header {
    background: var(--bg-white);
    border-color: var(--border);
}

.dark-mode .btn-function-menu-toggle {
    background: var(--bg-gray);
    border-color: var(--border);
    color: var(--text-secondary);
}

.dark-mode .btn-function-menu-toggle:hover {
    background: var(--primary);
    color: #fff;
}

.dark-mode .card-category {
    background: #1a3a5e;
    color: #5b9cf5;
}

/* 暗色模式 - 功能菜单选项卡（profile-tab / stat-item）*/
.dark-mode .profile-tabs {
    background: var(--bg-white);
    border-color: var(--border);
}

.dark-mode .profile-tab {
    color: var(--text-secondary);
    border-right-color: var(--border);
}

.dark-mode .profile-tab:hover {
    background: var(--bg-gray);
    color: var(--primary);
}

.dark-mode .profile-tab.active {
    background: #2563eb;
    color: #fff;
}

.dark-mode .stat-item {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-primary);
}

.dark-mode .stat-item:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.dark-mode .stat-item.active {
    background: #1a3a5e;
    border-color: var(--primary);
    color: #e8eaed;
}

.dark-mode .stat-item.active .stat-number {
    color: #60a5fa;
}

.dark-mode .stat-item.active .stat-label {
    color: #93c5fd;
}

.dark-mode .card-region {
    background: #3d1a2a;
    color: #ef5350;
}

/* 暗色模式：表单分组卡片 */
.dark-mode .form-group-card {
    background: #1e1e2e;
    border-color: transparent;
}

.dark-mode .form-group-card:hover {
    border-color: var(--border);
}

.dark-mode .form-group-title {
    border-bottom-color: var(--border);
}

.dark-mode .profile-bio-preview {
    background: #1e1e2e;
    border-left-color: #1a3a5e;
}

/* 暗色模式：header stats divider */
.dark-mode .header-stat-divider {
    background: var(--border);
}

/* 暗色模式：发布页 Section 卡片 */
.dark-mode .form-section-card {
    background: #1a1a2e;
    border-color: #2a2a40;
}

.dark-mode .form-section-card:hover {
    border-color: #3a3a55;
}

.dark-mode .form-section-header {
    background: #1e1e32;
    border-bottom-color: #2a2a40;
}

.dark-mode .form-section-card.section-collapsed {
    opacity: 0.6;
}

.dark-mode .form-section-card.section-collapsed .form-section-toggle .toggle-slider {
    background: #4b5563;
}

.dark-mode .profile-import-btn:hover {
    border-color: var(--primary-light, #818cf8);
    color: var(--primary-light, #818cf8);
    background: rgba(129, 140, 248, 0.1);
}

.dark-mode .form-section-icon {
    background: #1a2a4a;
    color: #5b9cf5;
}

.dark-mode .form-section-icon-price {
    background: #1a3a2a;
    color: #4caf50;
}

.dark-mode .form-section-icon-contact {
    background: #3a2a1a;
    color: #ff9800;
}

.dark-mode .form-section-icon-media {
    background: #2a1a3a;
    color: #ab47bc;
}

/* 暗色模式：进度条 */
.dark-mode .publish-progress::before {
    background: #2a2a40;
}

.dark-mode .progress-dot {
    background: #1e1e32;
    border-color: #3a3a55;
}

.dark-mode .publish-progress-step.active .progress-dot {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 6px rgba(91, 156, 245, 0.15);
}

/* 暗色模式：增强 Radio */
.dark-mode .radio-label-enhanced {
    border-color: #2a2a40;
    background: #1e1e32;
}

.dark-mode .radio-label-enhanced:hover {
    border-color: var(--primary);
    background: #1a2a4a;
}

.dark-mode .radio-label-enhanced.active {
    border-color: var(--primary);
    background: #1a2a4a;
}

.dark-mode .radio-icon {
    background: #252540;
}

.dark-mode .radio-label-enhanced.active .radio-icon {
    background: #1a3a5e;
    color: #5b9cf5;
}

/* 暗色模式：类型选项卡（需求/供给） */
.dark-mode .radio-tab-type .radio-icon {
    background: #1e1e38;
}

.dark-mode .radio-tab-type.active .radio-icon {
    background: #1a3a5e;
    color: #5b9cf5;
}

/* 暗色模式：价格选项卡（固定/区间） */
.dark-mode .radio-tab-price .radio-icon {
    background: #222238;
}

.dark-mode .radio-tab-price.active .radio-icon {
    background: #1a3a5e;
    color: #5b9cf5;
}

/* 暗色模式：价格输入 */
.dark-mode .price-input-wrapper {
    border-color: #2a2a40;
    background: #1e1e32;
}

.dark-mode .price-prefix,
.dark-mode .price-suffix {
    background: #252540;
    color: #9aa0a6;
}

.dark-mode .price-prefix { border-right-color: #2a2a40; }
.dark-mode .price-suffix { border-left-color: #2a2a40; }

.dark-mode .price-input {
    color: var(--text-primary);
}

/* 暗色模式：上传区域 */
.dark-mode .file-upload-area-enhanced {
    border-color: #2a2a40;
    background: #1a1a2e;
}

.dark-mode .file-upload-area-enhanced:hover {
    border-color: var(--primary);
    background: #1a2a4a;
}

.dark-mode .upload-text-main {
    color: #9aa0a6;
}

.dark-mode .upload-text-sub {
    color: #6a7080;
}

/* 暗色模式：操作区 */
.dark-mode .form-actions {
    border-top-color: #2a2a40;
}

.dark-mode .btn-action-sub {
    border-color: #2a2a40;
}

/* ============================================================
   v3 新增 - Toast 通知系统
   ============================================================ */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + 16px);
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--text-primary);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    max-width: 360px;
    word-break: break-word;
}

.toast.toast-success { background: var(--success); }
.toast.toast-error { background: var(--danger); }
.toast.toast-info { background: var(--primary); }

@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* ============================================================
   v3 新增 - 回到顶部按钮
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    box-shadow: var(--shadow-md);
    z-index: 900;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* ============================================================
   v3 新增 - 骨架屏加载
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--bg-gray) 25%, #e0e0e0 50%, var(--bg-gray) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius);
}

.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--bg-gray) 25%, #3d3d50 50%, var(--bg-gray) 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    height: 180px;
    border-radius: var(--radius);
}

.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-title { height: 24px; width: 80%; margin-bottom: 12px; }

/* ============================================================
   v3 新增 - NEW 标签
   ============================================================ */
.card-new-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--success);
    color: #fff;
    font-size: 0.625rem;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-weight: 700;
    z-index: 1;
    letter-spacing: 0.5px;
}

.card-video-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    font-size: 0.625rem;
    margin-left: 2px;
}

.card-doc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--warning, #f59e0b);
    color: #fff;
    border-radius: 50%;
    font-size: 0.625rem;
    margin-left: 2px;
}

.card-bid-count {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.75rem;
}

/* ============================================================
   v3 新增 - 视频嵌入
   ============================================================ */
.demand-video-section {
    padding: 24px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.demand-video-section h2,
.demand-video-section h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
}

.video-wrapper iframe,
.video-wrapper .native-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.native-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

.video-fallback {
    padding: 20px;
    text-align: center;
    background: var(--bg-gray);
    border-radius: var(--radius);
}

/* ============================================================
   v3 新增 - 用户中心子标签 + 昵称/用户名
   ============================================================ */
.profile-username {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.profile-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 20px;
}

.profile-tab {
    flex: 1;
    text-align: center;
    padding: 14px 16px;
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-right: 1px solid var(--border);
    transition: var(--transition);
    cursor: pointer;
}

.profile-tab:last-child { border-right: none; }

.profile-tab:hover {
    background: var(--bg-gray);
    color: var(--primary);
    text-decoration: none;
}

.profile-tab.active {
    background: var(--bg-gray);
    color: var(--text-primary);
    font-weight: 600;
}


/* 标签页排序功能 */
.profile-tabs-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 20px;
}

.profile-tabs-wrapper .profile-tabs {
    margin-bottom: 0;
    flex: 1;
}

/* 折叠容器内 - 桌面端标签栏顶部圆角与折叠头部衔接 */
.function-menu-wrapper .profile-tabs {
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: none;
}

.btn-sort-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    height: auto;
}

.btn-sort-tabs:hover {
    background: var(--bg-gray);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-sort-tabs.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.profile-tab.sortable {
    cursor: grab;
    user-select: none;
    position: relative;
}

.profile-tab.sortable::before {
    content: '⋮⋮';
    display: inline-block;
    margin-right: 4px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: inherit;
    opacity: 0.5;
    vertical-align: middle;
}

.profile-tab.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.profile-tab.drag-over {
    background: var(--bg-gray) !important;
    border-left: 2px solid var(--primary);
    box-shadow: inset 0 0 8px rgba(59, 130, 246, 0.15);
}

/* 响应式：排序按钮适配小屏 */
@media (max-width: 480px) {
    .profile-tabs-wrapper {
        flex-direction: column;
        gap: 6px;
    }

    .btn-sort-tabs {
        width: 100%;
        justify-content: center;
        padding: 8px;
    }

    .profile-tab.sortable::before {
        content: '';
        margin-right: 0;
    }
}

/* ============================================================
   v3 新增 - 主题选择器
   ============================================================ */
.theme-options {
    display: flex;
    gap: 12px;
}

.theme-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.theme-option:hover {
    border-color: var(--primary);
}

.theme-option.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.theme-option input[type="radio"] { display: none; }

.theme-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.theme-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================================
   v3 新增 - 登录页忘记密码链接
   ============================================================ */
.form-extra {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    margin-top: -8px;
}

.forgot-link {
    font-size: 0.813rem;
    color: var(--text-muted);
    transition: var(--transition);
}

.forgot-link:hover { color: var(--primary); }

/* ============================================================
   v3 新增 - 章节描述文字
   ============================================================ */
.section-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.section-desc strong { color: var(--text-primary); }

/* ============================================================
   v3 新增 - 复制联系方式按钮
   ============================================================ */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--bg-gray);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    margin-left: 6px;
}

.copy-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.copy-btn.copied {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

/* ============================================================
   v3 新增 - 最近浏览（Cookie 驱动）
   ============================================================ */
.recent-section {
    margin-bottom: 32px;
}

.recent-section h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.recent-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.recent-scroll::-webkit-scrollbar { height: 4px; }
.recent-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.recent-item {
    flex: 0 0 200px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    transition: var(--transition);
    white-space: normal;
}

.recent-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.recent-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.recent-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.recent-item-price {
    color: var(--danger);
    font-weight: 600;
    font-size: 0.813rem;
    margin-top: 4px;
}

/* ============================================================
   v3 新增 - 响应式的 profile-tabs
   ============================================================ */
@media (max-width: 480px) {
    .theme-options {
        flex-direction: column;
    }

    .profile-tabs {
        flex-wrap: wrap;
    }

    .profile-tab {
        flex: 1 1 auto;
        padding: 10px 12px;
        font-size: 0.813rem;
    }

    .recent-item {
        flex: 0 0 160px;
    }
}

/* ============================================================
   v3 新增 - 可选标签样式
   ============================================================ */
.form-group .optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.75rem;
}

/* ============================================================
   v4 新增 - 意向操作卡片
   ============================================================ */
.interest-actions-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-top: 20px;
}

.interest-actions-card h2,
.interest-actions-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.interest-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.interest-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-white);
    cursor: pointer;
    font-size: 0.938rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: center;
}

.interest-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.interest-btn:active { transform: translateY(0); }

.interest-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 有意向 - 激活态 */
.interest-btn.interest-interested.active {
    background: var(--success-light);
    border-color: var(--success);
    color: var(--success);
    font-weight: 600;
}

/* 不感兴趣 - 激活态 */
.interest-btn.interest-not-interested.active {
    background: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 600;
}

/* 收藏 - 激活态 */
.interest-btn.interest-bookmark.active {
    background: #f0f0f0;
    border-color: #555;
    color: #1a1a1a;
    font-weight: 600;
}

.dark-mode .interest-btn.interest-bookmark.active {
    background: #2a2a2a;
    border-color: #888;
    color: #e0e0e0;
}

.interest-icon {
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
}

.interest-count {
    font-size: 0.75rem;
    background: var(--bg-gray);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-left: 2px;
    min-width: 18px;
    text-align: center;
}

/* ===== v4 新增 - 文档下载列表 ===== */
.demand-documents-section {
    padding: 24px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.demand-documents-section h2,
.demand-documents-section h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card, #fff);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-wrap: wrap;
    transition: box-shadow 0.2s ease;
}
.doc-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: var(--primary, #2563eb);
}

.doc-icon {
    flex-shrink: 0;
    color: var(--primary, #2563eb);
}
.doc-name {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}
.doc-size {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.doc-icon {
    font-size: 1.25rem;
}

.doc-link {
    flex: 1;
    min-width: 0;
    color: var(--primary);
    font-weight: 500;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-link:hover { text-decoration: underline; }

.doc-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.doc-download-btn {
    font-size: 0.75rem;
    padding: 4px 12px;
    white-space: nowrap;
}

/* ============================================================
   v4 新增 - 文件上传预览（文档/视频）
   ============================================================ */
.video-preview-container,
.document-preview-container {
    margin-top: 8px;
}

.preview-icon {
    font-size: 1.25rem;
}

.preview-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.existing-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    margin-bottom: 8px;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.file-icon { font-size: 1.125rem; }
.file-name { color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 0.75rem; color: var(--text-muted); }

.keep-file-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.existing-documents { margin-bottom: 12px; }

/* ============================================================
   v4 新增 - 智能分类提示
   ============================================================ */
#smart-category-hint {
    font-size: 0.813rem;
    padding: 6px 12px;
    background: var(--primary-light);
    border-radius: var(--radius-full);
    display: inline-block;
    margin-top: 4px;
    transition: all 0.2s ease;
    user-select: none;
}

#smart-category-hint:hover {
    background: var(--primary);
    color: #fff !important;
}

/* ============================================================
   v4 新增 - 意向标记标签（用户中心）
   ============================================================ */
.interest-tag-interested {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--success-light);
    color: var(--success);
    font-weight: 500;
}

.interest-tag-not_interested {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-gray);
    color: var(--text-muted);
    font-weight: 500;
}

.interest-tag-bookmark {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #fff8e1;
    color: #f57f17;
    font-weight: 500;
}

.dark-mode .interest-tag-bookmark {
    background: #3d2c00;
    color: #fdd835;
}

.interest-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================
   v5 新增 - 密码查看切换按钮
   ============================================================ */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    transition: color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.password-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-gray);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* ============================================================
   v5 新增 - 消息提醒徽章
   ============================================================ */
.nav-msg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.688rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--danger);
    border-radius: var(--radius-full);
    margin-left: 4px;
    vertical-align: middle;
}

.nav-msg-badge:empty {
    display: none;
}

/* ============================================================
   v5 新增 - 站内信/聊天页面
   ============================================================ */
.messages-page {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.messages-container {
    display: flex;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    height: calc(100vh - 150px);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* 对话列表侧栏 */
.conversations-sidebar {
    width: 320px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-light);
    flex-shrink: 0;
}

.conversations-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.conversation-item:hover {
    background: var(--bg-white);
}

.conversation-item.active {
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
}

.conversation-item .conv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-size: 1rem;
    overflow: hidden;
}

.conversation-item .conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-info .conv-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-info .conv-last-msg {
    font-size: 0.813rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.conversation-meta {
    text-align: right;
    flex-shrink: 0;
}

.conversation-meta .conv-time {
    font-size: 0.688rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.conversation-meta .conv-unread {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.688rem;
    font-weight: 600;
    line-height: 18px;
    color: #fff;
    background: var(--danger);
    border-radius: var(--radius-full);
    text-align: center;
    margin-top: 4px;
}

.conv-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ======== 多功能面板容器（全局，覆盖桌面/平板/移动端） ======== */
.chat-tool-panel {
    display: none;
    background: #f7f7f7;
    border-top: 0.5px solid #e8e8e8;
    overflow: hidden;
    z-index: 9;
}
.chat-tool-panel.visible {
    display: block;
}

/* --- 表情包面板 --- */
.chat-emoji-panel {
    max-height: 260px;
    overflow-y: auto;
}
.emoji-tabs {
    display: flex;
    padding: 6px 12px;
    gap: 2px;
    background: #fafafa;
    border-bottom: 0.5px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1;
}
.emoji-tab {
    width: 32px; height: 32px;
    border: none; background: none;
    font-size: 1rem; cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.emoji-tab.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.emoji-tab:hover { background: #eee; }
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px 6px;
}
.emoji-grid button {
    width: 100%; aspect-ratio: 1;
    border: none; background: none;
    font-size: 1.4rem; cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s;
}
.emoji-grid button:hover { background: #e0e0e0; transform: scale(1.25); }

/* --- 更多功能面板 --- */
.chat-more-panel {
    padding: 16px 12px 20px;
    background: #f7f7f7;
}
.more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 4px;
}
.more-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    padding: 8px 4px;
    transition: transform 0.1s;
}
.more-item:hover { transform: scale(0.95); }
.more-item-icon {
    width: 52px; height: 52px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.more-item-label {
    font-size: 0.75rem;
    color: #555;
}

/* 聊天区域 */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 0.938rem;
}

.chat-header .back-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    line-height: 1;
}

/* ============================================================
   聊天页 - 随机供需推荐（手机端底部导航栏"聊天"内）
   ============================================================ */
.chat-random-demands {
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle, #f8fafc);
}

.chat-random-demands.demands-collapsed .chat-random-demands-header {
    padding-bottom: 8px;
}

.chat-random-demands.demands-collapsed {
    border-bottom-color: transparent;
}

.chat-random-demands-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    cursor: default;
    user-select: none;
}

.chat-random-demands-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-random-demands-title svg {
    color: var(--primary);
    flex-shrink: 0;
}

.chat-random-demands-body {
    display: flex;
    gap: 8px;
    padding: 0 20px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 紧凑供需卡片 */
.chat-demand-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 200px;
    min-width: 180px;
    padding: 10px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-demand-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-decoration: none;
}

.chat-demand-card .cdc-type-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.chat-demand-card .cdc-type-badge.type-demand {
    background: #fef3c7; color: #92400e;
}

.chat-demand-card .cdc-type-badge.type-supply {
    background: #dbeafe; color: #1e40af;
}

.chat-demand-card .cdc-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chat-demand-card .cdc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.chat-demand-card .cdc-price {
    font-weight: 600;
    color: var(--primary);
}

.chat-demand-card .cdc-time { flex-shrink: 0; }

.chat-demand-card .cdc-region {
    flex-shrink: 0;
    color: var(--primary);
    font-weight: 500;
}

/* 深色模式 */
.dark-mode .chat-random-demands {
    background: var(--bg-dark-card, #1a1a2e);
}

.dark-mode .chat-demand-card {
    background: var(--bg-dark-subtle, #16213e);
    border-color: var(--border-dark, #2a2a3e);
}

.dark-mode .chat-demand-card:hover {
    border-color: var(--primary-light, #818cf8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.dark-mode .chat-demand-card .cdc-type-badge.type-demand {
    background: rgba(251,191,36,0.15); color: #fbbf24;
}

.dark-mode .chat-demand-card .cdc-type-badge.type-supply {
    background: rgba(59,130,246,0.15); color: #60a5fa;
}

.dark-mode .chat-demand-card .cdc-price {
    color: var(--primary-light, #818cf8);
}

/* 响应式：手机端 */
@media (max-width: 768px) {
    .chat-random-demands-header {
        padding: 6px 14px;
    }
    .chat-random-demands-body {
        padding: 0 14px 8px;
        gap: 6px;
    }
    .chat-demand-card {
        flex: 0 0 160px;
        min-width: 140px;
        padding: 8px 10px;
        border-radius: 8px;
    }
    .chat-demand-card .cdc-title { font-size: 0.8rem; }
    .chat-demand-card .cdc-meta { font-size: 0.68rem; }
}

/* ======== 聊天转账/红包卡片（微信风格） ======== */
.msg-type-transfer .chat-bubble,
.msg-type-redpacket .chat-bubble {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    min-width: 180px;
    max-width: 220px;
}

/* 转账气泡：微信浅橙米色卡 */
.msg-type-transfer .chat-bubble {
    background: #fdf3cf !important;
    color: #7a5a1e !important;
    border: 1px solid #f1e0a6 !important;
}
.dark-mode .msg-type-transfer .chat-bubble {
    background: #3d3520 !important;
    color: #e8c67a !important;
    border-color: #5a4a2a !important;
}

/* 红包气泡：微信橙红渐变卡 */
.msg-type-redpacket .chat-bubble {
    background: linear-gradient(135deg, #fe9a3c 0%, #f5502c 100%) !important;
    color: #fff !important;
    border: none !important;
}

.transfer-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transfer-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    opacity: 0.85;
}

.transfer-icon {
    font-size: 1rem;
    line-height: 1;
}

.transfer-amount {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}
.msg-type-transfer .transfer-amount { color: #c8821a; }
.dark-mode .msg-type-transfer .transfer-amount { color: #ffc53d; }
.msg-type-redpacket .transfer-amount { color: #fff; }

.transfer-remark {
    font-size: 0.72rem;
    opacity: 0.7;
    line-height: 1.3;
    word-break: break-all;
}

.transfer-status {
    margin-top: 4px;
    text-align: center;
}

.transfer-status-claimed {
    font-size: 0.75rem;
    opacity: 0.6;
}

.transfer-status-pending {
    font-size: 0.72rem;
    opacity: 0.6;
}
.msg-type-redpacket .transfer-status-pending,
.msg-type-redpacket .transfer-status-claimed {
    color: rgba(255,255,255,0.75);
}

/* 确认收款按钮：微信绿 #07c160 */
.transfer-claim-btn {
    display: inline-block;
    padding: 5px 16px;
    border: none;
    border-radius: 4px;
    background: #07c160;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.transfer-claim-btn:hover {
    background: #06ad56;
}
.transfer-claim-btn:active {
    background: #059a4c;
}
.transfer-claim-btn.claimed,
.transfer-claim-btn:disabled {
    background: #c8c8c8;
    color: #fff;
    cursor: default;
}

/* ======== 转账弹窗 ======== */
.transfer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transfer-modal {
    background: #fff;
    border-radius: 12px;
    width: 320px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.transfer-modal-header {
    position: relative;
    padding: 16px 18px 12px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.transfer-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.transfer-modal-icon {
    font-size: 1.2rem;
}
.transfer-modal-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #999;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.transfer-modal-close:hover {
    background: #f5f5f5;
    color: #333;
}

.transfer-modal-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transfer-wallet-info {
    font-size: 0.78rem;
    color: #888;
    text-align: right;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
}

.transfer-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

.transfer-amount-input {
    width: 100%;
    height: 42px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    color: #333;
    box-sizing: border-box;
}
.transfer-amount-input:focus {
    outline: none;
    border-color: #07c160;
    box-shadow: 0 0 0 3px rgba(7,193,96,0.1);
}

.transfer-remark-input {
    width: 100%;
    height: 38px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 0.85rem;
    color: #333;
    box-sizing: border-box;
}
.transfer-remark-input:focus {
    outline: none;
    border-color: #07c160;
    box-shadow: 0 0 0 3px rgba(7,193,96,0.1);
}

.transfer-modal-footer {
    padding: 0 18px 18px;
}

.transfer-submit-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #07c160;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.transfer-submit-btn:hover {
    background: #06ad56;
}
.transfer-submit-btn:active {
    background: #059a4c;
}
.transfer-submit-btn:disabled {
    background: #a0d8b0;
    cursor: default;
}

/* 深色模式弹窗 */
.dark-mode .transfer-modal {
    background: #1e1e2e;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.dark-mode .transfer-modal-header {
    border-bottom-color: #2a2a3e;
    color: #e0e0e0;
}
.dark-mode .transfer-modal-close {
    color: #888;
}
.dark-mode .transfer-modal-close:hover {
    background: #2a2a3e;
    color: #fff;
}
.dark-mode .transfer-wallet-info {
    color: #aaa;
    border-bottom-color: #2a2a3e;
}
.dark-mode .transfer-label {
    color: #bbb;
}
.dark-mode .transfer-amount-input,
.dark-mode .transfer-remark-input {
    background: #2a2a3e;
    border-color: #3a3a4e;
    color: #e0e0e0;
}
.dark-mode .transfer-amount-input:focus,
.dark-mode .transfer-remark-input:focus {
    border-color: #07c160;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .transfer-modal {
        width: 300px;
    }
    .transfer-amount-input {
        font-size: 1.1rem;
        height: 40px;
    }
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-gray);
}

.chat-message {
    display: flex;
    max-width: 68%;
    animation: msgFadeIn 0.2s ease;
}

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

.chat-message.msg-sent {
    align-self: flex-end;
}

.chat-message.msg-received {
    align-self: flex-start;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
}

.msg-sent .chat-bubble {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg-received .chat-bubble {
    background: var(--bg-white);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* ======== 图片/视频消息气泡 ======== */
.chat-bubble-media {
    padding: 4px !important;
    background: transparent !important;
    overflow: hidden;
    border-radius: 12px !important;
}

.msg-image-wrap img {
    display: block;
    max-width: 240px;
    max-height: 320px;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.msg-image-wrap img:hover {
    opacity: 0.9;
}

.msg-video-wrap video {
    display: block;
    max-width: 280px;
    max-height: 360px;
    border-radius: 10px;
    cursor: pointer;
}

.msg-media-error {
    padding: 20px 16px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    background: var(--bg-gray);
    border-radius: 10px;
}

/* ======== 图片预览灯箱 ======== */
.chat-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxIn 0.2s ease;
}
@keyframes lightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.chat-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: background 0.2s;
}
.chat-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

.chat-lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
    -webkit-user-select: none;
}

.chat-message .msg-time {
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 14px;
}

.msg-sent .msg-time {
    text-align: right;
}

.chat-input-area {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    background: var(--bg-white);
}

.chat-input-area textarea {
    flex: 1;
    resize: none;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.875rem;
    min-height: 42px;
    max-height: 130px;
    outline: none;
    transition: border-color var(--transition);
}

.chat-input-area textarea:focus {
    border-color: var(--primary);
}

.chat-input-area .btn-send {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

.chat-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.938rem;
}

.chat-placeholder-inner {
    text-align: center;
    max-width: 300px;
}

.chat-placeholder-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.chat-placeholder-inner h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.chat-placeholder-inner p {
    font-size: 0.813rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   v8 新增 - 增强站内信：页面标题栏
   ============================================================ */
.msg-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.msg-page-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.msg-page-actions {
    display: flex;
    gap: 8px;
}

.msg-action-icon {
    font-size: 0.75rem;
    letter-spacing: -2px;
}

/* ============================================================
   v8 新增 - 增强站内信：左侧面板
   ============================================================ */
.msg-left-panel {
    width: 300px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-light);
    flex-shrink: 0;
}

/* 选项卡 */
.msg-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.msg-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition);
}

.msg-tab:hover {
    color: var(--primary);
}

.msg-tab.active {
    color: var(--primary);
}

.msg-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

.msg-tab-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    background: var(--danger);
    border-radius: 8px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* 标签内容区 */
.msg-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    flex-direction: column;
}

.msg-tab-content.active {
    display: flex;
}

/* 搜索框 */
.msg-search-box {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-white);
}

.msg-search-box input {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.813rem;
    outline: none;
    background: var(--bg-gray);
    transition: all var(--transition);
}

.msg-search-box input:focus {
    border-color: var(--primary);
    background: var(--bg-white);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.msg-search-clear {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.msg-search-clear:hover {
    color: var(--danger);
}

/* 更新会话列表项 */
.conv-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.conv-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.conversation-item.has-unread .conv-name {
    font-weight: 700;
    color: var(--text-primary);
}

.conv-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    opacity: 0.4;
}

.conv-empty-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px !important;
    line-height: 1.4;
}

/* 通知列表 */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.notification-item:hover {
    background: var(--bg-white);
}

.notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.notification-info {
    flex: 1;
    min-width: 0;
}

.notif-content {
    font-size: 0.813rem;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-time {
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.notif-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ============================================================
   v8 新增 - 增强站内信：聊天区域
   ============================================================ */
.chat-header {
    justify-content: space-between;
}

.chat-info-toggle {
    background: none;
    border: 1px solid var(--border);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-left: auto;
    transition: all var(--transition);
}

.chat-info-toggle:hover {
    background: var(--bg-gray);
    color: var(--primary);
    border-color: var(--primary);
}

/* 日期分隔线 */
.msg-date-separator {
    text-align: center;
    margin: 8px 0;
    position: relative;
}

.msg-date-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.msg-date-separator span {
    position: relative;
    background: var(--bg-gray);
    padding: 4px 14px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-radius: 10px;
    font-weight: 500;
}

/* 加载更多 */
.load-more-area {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 8px;
}

.load-more-btn {
    padding: 6px 16px;
    font-size: 0.813rem;
}

.load-more-info {
    display: block;
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 消息增强 */
.msg-inner {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.msg-avatar-link {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.msg-avatar-link:active { opacity: 0.75; }

.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.msg-avatar-link:hover .msg-avatar {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.msg-avatar-self {
    /* 仅作为标识类，视觉位置由 flex-direction 控制 */
}
.msg-sent .msg-inner {
    flex-direction: row-reverse;
}

.msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-avatar .avatar-placeholder.sm {
    width: 28px;
    height: 28px;
    font-size: 0.688rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-gray);
    color: var(--text-secondary);
    font-weight: 600;
}

.msg-bubble-wrap {
    position: relative;
    min-width: 0;
}

/* 删除按钮 */
.msg-delete-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: 0.625rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.chat-message.msg-sent:hover .msg-delete-btn {
    display: flex;
}

@media (hover: none) {
    .chat-message.msg-sent .msg-delete-btn {
        display: flex;
        opacity: 0.4;
    }
}

.msg-delete-btn:hover {
    transform: scale(1.2);
}

/* 系统消息气泡 */
.msg-system .chat-message {
    display: flex;
    justify-content: center;
}

.msg-system-bubble {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fbbf24 !important;
    font-size: 0.813rem !important;
    text-align: center;
    border-radius: 10px !important;
    max-width: 85%;
    margin: 0 auto;
}

.msg-system .msg-inner {
    justify-content: center;
}

.msg-system .msg-bubble-wrap {
    text-align: center;
}

/* 已读状态 */
.msg-read-status {
    font-size: 0.625rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ============================================================
   v8 新增 - 增强站内信：右侧对方信息面板
   ============================================================ */
.partner-info-panel {
    width: 250px;
    border-left: 1px solid var(--border);
    display: none;
    flex-direction: column;
    background: var(--bg-white);
    flex-shrink: 0;
    overflow-y: auto;
}

.partner-info-panel.visible {
    display: flex;
}

.partner-info-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.938rem;
}

.partner-info-header h3 {
    font-size: 0.938rem;
    margin: 0;
}

.partner-info-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 4px;
    line-height: 1;
}

.partner-info-close:hover {
    color: var(--danger);
}

.partner-info-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.partner-info-placeholder,
.partner-info-loading {
    color: var(--text-muted);
    text-align: center;
    padding: 20px 0;
    font-size: 0.813rem;
}

/* 对方信息卡片 */
.partner-profile-card {
    text-align: center;
    margin-bottom: 16px;
}

.partner-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.partner-avatar-fallback {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.partner-profile-card h4 {
    font-size: 0.938rem;
    margin: 0 0 4px;
}

.partner-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 6px;
}

.partner-bio {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 对方统计 */
.partner-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.partner-stat-item {
    padding: 10px 8px;
    text-align: center;
    background: var(--bg-gray);
}

.partner-stat-item strong {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.partner-stat-item span {
    font-size: 0.625rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* 对方元数据 */
.partner-meta {
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-align: center;
}

/* 关联需求 */
.partner-demands {
    margin-bottom: 12px;
}

.partner-demands h5 {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.partner-demand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.813rem;
    transition: color var(--transition);
}

.partner-demand-link:hover {
    color: var(--primary);
}

.partner-demand-link small {
    margin-left: auto;
    font-size: 0.688rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.partner-demand-type {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.partner-demand-type.type-demand {
    background: #dbeafe;
    color: #1d4ed8;
}

.partner-demand-type.type-supply {
    background: #d1fae5;
    color: #059669;
}

/* 操作按钮区 */
.partner-actions {
    margin-top: 8px;
}

.partner-actions .btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

/* 删除确认弹窗适配 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-dialog {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 400px;
    overflow: hidden;
}

.modal-dialog.modal-sm {
    max-width: 360px;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 1rem;
}

.modal-body {
    padding: 16px 20px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ============================================================
   v11 - 拼多多风格：移动端聊天体验升级
   ============================================================ */
@media (max-width: 768px) {
    /* 全屏聊天容器 */
    .messages-page {
        max-width: 100%;
        margin: 0;
        padding: 0;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .messages-container {
        flex: 1;
        flex-direction: column;
        position: relative;
        min-height: 0;
        overflow: hidden;
    }

    .msg-page-header {
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    /* ======== 会话列表（全屏） ======== */
    .msg-left-panel {
        width: 100%;
        display: none;
        border-right: none;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background: #f5f5f5;
        flex-direction: column;
    }

    .msg-left-panel.visible {
        display: flex;
    }

    /* PDD风格标签栏 */
    .msg-tabs {
        display: flex;
        background: #fff;
        border-bottom: 0.5px solid #f0f0f0;
        padding: 0 16px;
        gap: 0;
        flex-shrink: 0;
    }
    .msg-tab {
        flex: 1;
        text-align: center;
        padding: 12px 0 10px;
        font-size: 0.938rem;
        font-weight: 500;
        color: #888;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        position: relative;
        transition: color 0.15s;
    }
    .msg-tab.active {
        color: #E4393C;
        font-weight: 600;
        border-bottom-color: #E4393C;
    }
    .msg-tab-badge {
        position: absolute;
        top: 6px;
        right: 8px;
        background: #E4393C;
        color: #fff;
        font-size: 0.625rem;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        border-radius: 8px;
        padding: 0 5px;
        text-align: center;
    }

    /* PDD风格会话列表项 */
    .conversation-item {
        background: #fff;
        margin: 0;
        padding: 14px 16px;
        border-bottom: 0.5px solid #f0f0f0;
        border-radius: 0;
        transition: background 0.15s;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }
    .conversation-item:active {
        background: #f5f5f5;
    }
    .conversation-item.active {
        background: #fafafa;
        border-left: none;
    }

    /* PDD风格会话头像（大圆角方形） */
    .conversation-item .conv-avatar {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        flex-shrink: 0;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        font-weight: 600;
        color: #bbb;
        overflow: hidden;
    }
    .conversation-item .conv-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    .conversation-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .conv-name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .conversation-info .conv-name {
        font-size: 0.95rem;
        font-weight: 600;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%;
    }
    .conversation-info .conv-last-msg {
        font-size: 0.813rem;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .conversation-meta {
        flex-shrink: 0;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        min-width: 44px;
    }
    .conversation-meta .conv-time {
        font-size: 0.688rem;
        color: #bbb;
        white-space: nowrap;
    }
    .conversation-meta .conv-unread {
        background: #E4393C;
        color: #fff;
        font-size: 0.688rem;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 9px;
        text-align: center;
        padding: 0 6px;
        font-weight: 600;
    }

    /* 搜索框 */
    .msg-search-box {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #f5f5f5;
    }
    .msg-search-box input {
        width: 100%;
        height: 36px;
        border: none;
        border-radius: 6px;
        background: #fff;
        padding: 0 12px;
        font-size: 0.875rem;
        color: #333;
        outline: none;
        box-sizing: border-box;
    }
    .msg-search-box input::placeholder {
        color: #c0c0c0;
    }

    /* ======== 聊天区（全屏沉浸） ======== */
    .chat-area {
        display: none;
        width: 100%;
        flex: 1;
        min-height: 0;
        background: #f0f0f0;
        position: relative;
    }

    .chat-area.visible {
        display: flex;
        flex-direction: column;
    }

    /* PDD风格顶部导航栏 */
    .chat-header {
        flex-shrink: 0;
        padding: 12px 16px;
        background: #fff;
        border-bottom: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        font-size: 1rem;
        font-weight: 600;
        color: #222;
        position: sticky;
        top: 0;
        z-index: 10;
        min-height: 50px;
    }

    .chat-header .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        font-size: 1.25rem;
        color: #333;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        border-radius: 50%;
        transition: background 0.15s;
    }
    .chat-header .back-btn:active {
        background: #f0f0f0;
    }

    #chat-partner-name-header {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.05rem;
        color: #222;
    }

    .chat-info-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        font-size: 1.15rem;
        color: #666;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        border-radius: 50%;
        transition: background 0.15s;
    }
    .chat-info-toggle:active {
        background: #f0f0f0;
    }

    /* ======== 消息滚动区 ======== */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 12px 14px;
        background: #f0f0f0;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* ======== 日期分隔 ======== */
    .msg-date-separator {
        text-align: center;
        margin: 16px 0 10px;
        font-size: 0.72rem;
        color: #b2b2b2;
    }
    .msg-date-separator span {
        background: #e8e8e8;
        padding: 2px 12px;
        border-radius: 10px;
    }

    /* ======== 消息气泡 ======== */
    .chat-message {
        max-width: 78%;
        margin-bottom: 12px;
        animation: pddMsgIn 0.25s ease;
    }
    @keyframes pddMsgIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .msg-inner {
        display: flex;
        align-items: flex-end;
        gap: 8px;
    }

    /* 头像链接（可点击访问主页） */
    .msg-avatar-link {
        display: flex;
        flex-shrink: 0;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .msg-avatar-link:active { opacity: 0.7; }

    /* 对方头像 */
    .msg-avatar {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        flex-shrink: 0;
        overflow: hidden;
        align-self: flex-end;
        margin-bottom: 2px;
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .msg-avatar-link:hover .msg-avatar {
        transform: scale(1.12);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    /* 自己的头像（在右侧） */
    .msg-avatar-self {
        margin-left: 6px;
        margin-right: 0;
    }
    .msg-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .avatar-placeholder.sm {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        background: #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 600;
        color: #999;
    }

    /* 消息气泡包裹 */
    .msg-bubble-wrap {
        position: relative;
        max-width: 100%;
    }

    /* 对方消息（左边白色气泡 - PDD风格） */
    .msg-received .chat-bubble {
        background: #fff;
        color: #222;
        border-radius: 4px 18px 18px 18px;
        padding: 10px 14px;
        font-size: 0.938rem;
        line-height: 1.45;
        word-break: break-word;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
        position: relative;
        display: inline-block;
        max-width: 100%;
    }
    /* 对方气泡尾部小三角 */
    .msg-received .chat-bubble::after {
        content: '';
        position: absolute;
        left: -5px;
        bottom: 6px;
        width: 0; height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 6px solid #fff;
    }

    /* 我方消息（右边红色气泡 - PDD红） */
    .msg-sent {
        margin-left: auto;
    }
    .msg-sent .msg-inner {
        flex-direction: row-reverse;
    }
    .msg-sent .chat-bubble {
        background: #E4393C;
        color: #fff;
        border-radius: 18px 4px 18px 18px;
        padding: 10px 14px;
        font-size: 0.938rem;
        line-height: 1.45;
        word-break: break-word;
        position: relative;
        display: inline-block;
        max-width: 100%;
    }
    /* 自己气泡尾部小三角 */
    .msg-sent .chat-bubble::after {
        content: '';
        position: absolute;
        right: -5px;
        bottom: 6px;
        width: 0; height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 6px solid #E4393C;
    }

    /* ======== 消息分组（连续同发送方） ======== */
    .msg-grouped {
        margin-top: 1px !important;
    }
    .msg-grouped .msg-avatar-link {
        visibility: hidden;
        pointer-events: none;
    }
    .msg-grouped.msg-received .chat-bubble::after,
    .msg-grouped.msg-sent .chat-bubble::after {
        display: none;
    }
    /* 分组内气泡圆角修正 */
    .msg-grouped.msg-received .chat-bubble {
        border-radius: 18px;
    }
    .msg-grouped.msg-sent .chat-bubble {
        border-radius: 18px;
    }
    .msg-grouped .msg-time {
        display: none;
    }
    /* 分组首条保持圆角三角 */
    .msg-start + .msg-grouped {
        margin-top: 1px !important;
    }

    /* 消息时间 */
    .msg-time {
        font-size: 0.65rem;
        color: #999;
        margin-top: 3px;
        padding: 0 4px;
    }
    .msg-sent .msg-time {
        text-align: right;
    }
    .msg-received .msg-time {
        text-align: left;
        padding-left: 44px;
    }

    /* 已读状态 */
    .msg-read-status {
        font-size: 0.6rem;
        color: #ccc;
        margin-left: 4px;
    }

    /* 系统消息居中 */
    .msg-system .msg-inner {
        justify-content: center;
    }
    .msg-system .msg-system-bubble {
        background: transparent;
        color: #b2b2b2;
        font-size: 0.75rem;
        padding: 4px 12px;
        text-align: center;
        max-width: 85vw;
        word-break: break-word;
    }
    .msg-system.msg-recalled .msg-system-bubble {
        font-style: italic;
        opacity: 0.7;
    }
    .msg-system .msg-time {
        display: none;
    }

    /* 消息操作按钮（常显，半透明） */
    .msg-actions {
        opacity: 0.5;
        display: inline-flex;
        align-items: center;
        gap: 1px;
        margin-right: 4px;
        vertical-align: bottom;
    }
    .msg-recall-btn, .msg-delete-btn {
        background: none;
        border: none;
        font-size: 0.7rem;
        color: #fff;
        opacity: 0.55;
        padding: 2px 4px;
        cursor: pointer;
        border-radius: 3px;
        line-height: 1;
    }
    .msg-recall-btn:active, .msg-delete-btn:active {
        opacity: 1;
        background: rgba(255,255,255,0.2);
    }

    /* --- 移动端面板微调（touch优化） --- */
    .chat-emoji-panel {
        -webkit-overflow-scrolling: touch;
    }
    .emoji-grid button {
        -webkit-tap-highlight-color: transparent;
    }
    .emoji-grid button:active { background: #e0e0e0; transform: scale(1.25); }
    .emoji-tab:active { background: #eee; }
    .more-item {
        -webkit-tap-highlight-color: transparent;
    }
    .more-item:active { transform: scale(0.9); }

    /* --- 语音录制覆盖层 --- */
    .chat-voice-overlay {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        z-index: 100;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 20px;
        color: #fff;
    }
    .voice-wave-container {
        display: flex; align-items: center; justify-content: center;
        gap: 3px; height: 60px;
    }
    .voice-wave-bar {
        width: 4px; background: #E4393C;
        border-radius: 2px;
        animation: voiceWave 0.8s ease-in-out infinite;
    }
    .voice-wave-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
    .voice-wave-bar:nth-child(2) { height: 36px; animation-delay: 0.1s; }
    .voice-wave-bar:nth-child(3) { height: 50px; animation-delay: 0.2s; }
    .voice-wave-bar:nth-child(4) { height: 36px; animation-delay: 0.3s; }
    .voice-wave-bar:nth-child(5) { height: 50px; animation-delay: 0.4s; }
    .voice-wave-bar:nth-child(6) { height: 30px; animation-delay: 0.5s; }
    .voice-wave-bar:nth-child(7) { height: 44px; animation-delay: 0.6s; }
    @keyframes voiceWave {
        0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
        50% { transform: scaleY(1); opacity: 1; }
    }
    .voice-text-preview {
        font-size: 1rem; color: #fff;
        max-width: 80vw; text-align: center;
        min-height: 24px;
    }
    .voice-tip {
        font-size: 0.8rem; color: rgba(255,255,255,0.6);
    }
    .voice-cancel-btn {
        background: rgba(255,255,255,0.2); color: #fff;
        border: 1px solid rgba(255,255,255,0.3); border-radius: 20px;
        padding: 8px 28px; font-size: 0.9rem; cursor: pointer;
    }
    .voice-cancel-btn:active { background: rgba(255,255,255,0.35); }

    /* ======== 输入条 ======== */
    .chat-input-area {
        flex-shrink: 0;
        display: flex;
        align-items: flex-end;
        gap: 4px;
        padding: 6px 8px;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
        background: #f7f7f7;
        border-top: 0.5px solid #e8e8e8;
        position: sticky;
        bottom: 0;
        z-index: 10;
        min-height: 48px;
    }

    /* 工具按钮通用 */
    .chat-tool-btn {
        flex-shrink: 0;
        width: 34px; height: 34px;
        border: none; background: none;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        color: #666;
        border-radius: 50%;
        padding: 0;
        transition: background 0.15s, color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .chat-tool-btn:active { background: #e8e8e8; }
    .chat-tool-btn.active { color: #E4393C; }

    .chat-input-area textarea {
        flex: 1;
        resize: none;
        padding: 9px 14px;
        border: 0.5px solid #e0e0e0;
        border-radius: 22px;
        font-size: 0.95rem;
        line-height: 1.4;
        background: #fff;
        color: #333;
        outline: none;
        min-height: 36px;
        max-height: 120px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .chat-input-area textarea:focus {
        border-color: #E4393C;
        box-shadow: 0 0 0 2px rgba(228,57,60,0.08);
    }
    .chat-input-area textarea::placeholder {
        color: #b8b8b8;
    }

/* ============================================================
   浏览记录系统 & 直播页面
   ============================================================ */

/* --- 直播广场 --- */
.live-page-container,
.live-room-container,
.history-page-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}
.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.live-card {
    display: block;
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.live-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.live-card-cover {
    position: relative;
    width: 100%;
    padding-top: 75%;
    background: #1a1a2e;
    overflow: hidden;
}
.live-card-cover img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.live-card-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.3);
}
.live-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: #ff2442;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.live-badge-large { font-size: 0.875rem; padding: 4px 12px; border-radius: 6px; }
.live-offline-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
}
.live-viewers {
    position: absolute;
    bottom: 8px; right: 8px;
    display: flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.688rem;
    padding: 2px 8px;
    border-radius: 10px;
}
.live-viewers-large { font-size: 0.813rem; padding: 4px 12px; }
.live-card-info { padding: 10px 12px 12px; }
.live-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 8px;
}
.live-card-author {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.live-card-avatar {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* --- 直播详情 --- */
.live-room-header { margin-bottom: 16px; }
.live-room-back {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
}
.live-room-back:hover { color: var(--primary); }
.live-room-player {
    position: relative;
    width: 100%;
    max-height: 500px;
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.live-room-cover {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
}
.live-room-placeholder {
    padding: 100px 20px;
    color: rgba(255,255,255,0.4);
}
.live-room-info { margin-top: 20px; }
.live-room-title { font-size: 1.25rem; margin: 0 0 16px; }
.live-room-author {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
}
.live-room-author-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.live-room-author-name { font-size: 0.938rem; font-weight: 500; }
.live-room-author-role {
    display: inline-block;
    font-size: 0.688rem;
    background: #ff2442;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
}
.live-room-desc {
    background: var(--bg-gray);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ========== 浏览记录 ========== */

/* --- 开关条 --- */
.bh-switch-bar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 8px 0 12px;
    border-bottom: none;
    margin-bottom: 0;
}
.bh-switch-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.813rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.bh-toggle {
    position: relative;
    display: inline-block;
    width: 42px; height: 24px;
    cursor: pointer;
}
.bh-toggle input { opacity: 0; width: 0; height: 0; }
.bh-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}
.bh-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.bh-toggle input:checked + .bh-toggle-slider { background: #ff2442; }
.bh-toggle input:checked + .bh-toggle-slider::before { transform: translateX(18px); }

/* --- 分类子Tabs --- */
.bh-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 12px;
}
.bh-tab {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.bh-tab:hover { color: var(--text-primary); }
.bh-tab.active {
    color: #ff2442;
    border-bottom-color: #ff2442;
}

/* --- 工具条 --- */
.bh-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    margin-bottom: 8px;
}
.bh-toolbar.view-mode { justify-content: flex-end; }
.bh-toolbar.manage-mode {
    justify-content: space-between;
    background: #fff8f8;
    border-radius: 8px;
    padding: 10px 14px;
}
.bh-select-all-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.813rem;
    cursor: pointer;
    color: var(--text-secondary);
}
.bh-selected-count {
    font-size: 0.813rem;
    color: #ff2442;
    font-weight: 500;
}
.bh-toolbar-btn {
    font-size: 0.75rem;
    padding: 5px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.bh-toolbar-btn:hover { background: var(--bg-gray); }
.bh-delete-btn {
    background: #ff2442;
    color: #fff;
    border-color: #ff2442;
}
.bh-delete-btn:hover { background: #e0203a; }
.bh-done-btn { border-color: #ff2442; color: #ff2442; }

/* --- 浏览记录列表 --- */
.bh-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bh-date-group-header {
    grid-column: 1 / -1;          /* 占满整行 */
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 2px 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    animation: msgFadeIn 0.3s ease both;
}
.bh-date-group-header:first-child { margin-top: 4px; }
.bh-date-group-label { position: relative; padding-left: 12px; }
.bh-date-group-label::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 14px; border-radius: 2px;
    background: #ff2442;
}
.bh-card-time {
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.bh-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- 浏览记录卡片 --- */
.bh-card {
    position: relative;
    background: var(--bg-white);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.15s, box-shadow 0.15s;
}
.bh-card:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.1); }
.bh-card--selectable { box-shadow: 0 0 0 2px transparent; }
.bh-card--selectable:has(.bh-check:checked) { box-shadow: 0 0 0 2px #ff2442; }

.bh-card-content {
    display: flex; flex-direction: column;
}
.bh-card-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f0f0f0;
}
.bh-card-cover-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    display: flex; align-items: center; justify-content: center;
    color: #ccc;
}
.bh-card-cover-placeholder::after {
    content: '';
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.08);
    border-radius: 50%;
}
.bh-card--user .bh-card-cover {
    aspect-ratio: 1 / 1;
    border-radius: 0;
}
.bh-card--user .bh-card-cover-placeholder::after {
    border-radius: 50%;
}

/* 视频图标 */
.bh-video-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 32px; height: 32px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}

/* 卡片关闭按钮 */
.bh-card-close {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 2;
    padding: 0;
}
.bh-card:hover .bh-card-close { opacity: 1; }
.bh-card-close:hover { background: rgba(255,0,0,0.7); }

/* 复选框 */
.bh-checkbox {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 3;
    display: none;
}
.bh-card--selectable .bh-checkbox { display: block; }
.bh-card--selectable .bh-card-close { display: none; }
.bh-check {
    width: 18px; height: 18px;
    accent-color: #ff2442;
    cursor: pointer;
}

/* 卡片信息 */
.bh-card-info { padding: 8px 10px; }
.bh-card-title {
    font-size: 0.813rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.bh-card-meta {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.bh-card-price {
    font-size: 0.813rem;
    font-weight: 600;
    color: #ff2442;
}
.bh-card-location {
    font-size: 0.688rem;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 80px;
}
.bh-card-viewers {
    font-size: 0.688rem;
    color: var(--text-muted);
}
.bh-card-status {
    font-size: 0.625rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: #e0e0e0;
    color: #666;
}
.bh-card-status.is-live {
    background: #ff2442;
    color: #fff;
}
.bh-card-username {
    font-size: 0.688rem;
    color: var(--text-muted);
}

/* 加载更多 */
.bh-load-more {
    display: flex; justify-content: center;
    padding: 20px 0;
}

/* 用户卡片特殊样式 */
.bh-card--user .bh-card-cover {
    border-radius: 10px 10px 0 0;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .live-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .bh-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .bh-toolbar-btn {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    .bh-switch-label { font-size: 0.75rem; }
    /* 移动端无 hover，删除按钮常驻显示 */
    .bh-card-close { opacity: 1; }
}

/* ======== 桌面端：根据屏宽自适应列数，避免卡片过大 ======== */
@media (min-width: 769px) {
    .bh-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
}
@media (min-width: 1100px) {
    .bh-list {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}
@media (min-width: 1500px) {
    .bh-list {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }
}


    /* 语音按住说话按钮 */
    .chat-voice-hold-btn {
        flex: 1;
        border: 0.5px solid #e0e0e0;
        border-radius: 22px;
        background: #fff;
        color: #333;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        min-height: 36px;
        display: flex; align-items: center; justify-content: center;
        user-select: none;
        -webkit-user-select: none;
        transition: background 0.15s;
    }
    .chat-voice-hold-btn:active {
        background: #e0e0e0;
        border-color: #E4393C;
    }

    /* PDD风格发送按钮 */
    .btn-send-pdd {
        flex-shrink: 0;
        background: #E4393C;
        color: #fff;
        border: none;
        border-radius: 16px;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        min-height: 32px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.15s;
        letter-spacing: 0.5px;
    }
    .btn-send-pdd:active {
        background: #c9302c;
        transform: scale(0.94);
    }

    /* 旧发送按钮隐藏（移动端） */
    .btn-send { display: none !important; }

    /* ======== 右侧信息面板（遮罩层） ======== */
    .partner-info-panel {
        display: none !important;
    }
    .partner-info-panel.visible {
        display: flex !important;
        width: 100%;
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 100;
        border-left: none;
        background: #f5f5f5;
    }

    /* ======== 新消息横幅 ======== */
    .new-msg-banner {
        top: 60px;
        background: #E4393C;
        color: #fff;
        padding: 7px 20px;
        border-radius: 16px;
        font-size: 0.8rem;
        text-align: center;
        box-shadow: 0 2px 8px rgba(228,57,60,0.3);
    }

    /* ======== Toast 通知 ======== */
    .chat-toast {
        top: auto;
        bottom: 100px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: calc(100vw - 32px);
        width: fit-content;
        font-size: 0.85rem;
        border-radius: 10px;
        white-space: normal;
        text-align: center;
    }

    /* ======== 消息发送中/失败 ======== */
    .msg-sending { opacity: 0.55; }
    .msg-sending .chat-bubble {
        animation: pddSendPulse 1s ease-in-out infinite;
    }
    @keyframes pddSendPulse {
        0%, 100% {box-shadow: 0 0 0 0 rgba(228,57,60,0.3)}
        50% {box-shadow: 0 0 0 4px rgba(228,57,60,0)}
    }
    .msg-failed { opacity: 0.7; cursor: pointer; }
    .msg-failed .chat-bubble {
        border: 1px dashed #E4393C !important;
        background: #fff !important;
        color: #E4393C !important;
    }

    /* 加载动画 */
    .msg-loading {
        padding: 40px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .msg-loading-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d0d0d0;
        animation: msgLoadingBounce 1.2s ease-in-out infinite;
    }
    .msg-loading-dot:nth-child(2) { animation-delay: 0.15s; }
    .msg-loading-dot:nth-child(3) { animation-delay: 0.3s; }
    @keyframes msgLoadingBounce {
        0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
        40% { opacity: 1; transform: scale(1.2); }
    }

    /* ======== 隐藏桌面元素 ======== */
    .chat-placeholder {
        display: none;
    }

    /* PDD风格空会话页面 */
    .conv-empty {
        padding: 80px 30px;
        text-align: center;
        color: #999;
        font-size: 0.9rem;
    }
    .conv-empty-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        background: #e8e8e8;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
    }
    .conv-empty p {
        margin: 4px 0;
    }
    .conv-empty-hint {
        font-size: 0.78rem;
        color: #bbb;
    }

    /* 通知列表项 */
    .notification-item {
        background: #fff;
        padding: 14px 16px;
        border-bottom: 0.5px solid #f0f0f0;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
    }
    .notification-item:active {
        background: #f5f5f5;
    }
    .notif-icon {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        background: #fff3f3;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    .notification-info {
        flex: 1;
        min-width: 0;
    }
    .notif-content {
        font-size: 0.875rem;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .notif-time {
        font-size: 0.688rem;
        color: #bbb;
        margin-top: 2px;
    }
    .notif-unread-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #E4393C;
        flex-shrink: 0;
        margin-top: 4px;
    }

    /* 隐藏PC端页面标题栏中的按钮文字 */
    .msg-page-header h1 { font-size: 1.05rem; }
    .msg-page-actions .btn {
        font-size: 0.8rem;
        padding: 5px 12px;
    }
}

/* ============================================================
   v9 新增 - 智能聊天增强：连接状态 / 新消息横幅 / 加载动画
   ============================================================ */

/* 连接状态指示灯 */
.msg-conn-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.msg-conn-online  { background: var(--success, #10b981); }
.msg-conn-polling { background: var(--primary, #3b82f6); animation: connPulse 1.2s ease-in-out infinite; }
.msg-conn-error  { background: var(--danger, #ef4444); }
.msg-conn-offline { background: var(--text-muted, #9ca3af); }

@keyframes connPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* 新消息提醒横幅 */
.new-msg-banner {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 6px 18px;
    border-radius: 16px;
    font-size: 0.813rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: bannerSlideIn 0.3s ease;
    white-space: nowrap;
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 消息加载动画（三点跳跃） */
.msg-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 0;
}

.msg-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: msgLoadBounce 1.4s ease-in-out infinite;
}

.msg-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.msg-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes msgLoadBounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* 消息发送中状态（淡出+脉冲） */
.msg-sending {
    opacity: 0.6;
}

.msg-sending .chat-bubble {
    animation: sendPulse 1s ease-in-out infinite;
}

@keyframes sendPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

/* 消息发送失败状态 */
.msg-failed {
    opacity: 0.7;
    cursor: pointer;
}

.msg-failed .chat-bubble {
    border: 1px dashed var(--danger);
    background: #fef2f2 !important;
    color: var(--text-primary) !important;
}

/* 加载错误重试 */
.msg-error {
    text-align: center;
    padding: 40px 0;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.875rem;
}

.msg-error:hover {
    text-decoration: underline;
}

/* 聊天区域相对定位（供 new-msg-banner 使用） */
.chat-area {
    position: relative;
}

/* textarea 自适应过渡 */
#chat-input {
    transition: height 0.15s ease;
    resize: none;
    overflow-y: auto;
}

/* 删除按钮增加过渡 */
.msg-delete-btn {
    transition: transform 0.15s ease;
}

/* 优化未读小圆点 */
.conv-unread-dot[data-pulse] {
    animation: unreadPulse 2s ease-in-out infinite;
}

@keyframes unreadPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
}

/* Toast 通知（与 JS 中 .chat-toast 配对） */
.chat-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff;
    z-index: 99999;
    font-size: 0.875rem;
    font-weight: 500;
    animation: toastSlideIn 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chat-toast-success { background: var(--success, #10b981); }
.chat-toast-error   { background: var(--danger, #ef4444); }
.chat-toast-info    { background: var(--primary, #3b82f6); }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   v9 新增 - 响应式增强
   ============================================================ */
@media (max-width: 768px) {
    .msg-conn-status {
        display: none;
    }

    .new-msg-banner {
        top: 48px;
        font-size: 0.75rem;
        padding: 5px 14px;
    }

    .chat-toast {
        top: 70px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: calc(100vw - 20px);
        width: fit-content;
        text-align: center;
        font-size: 0.813rem;
    }
}

/* ============================================================
   v6 新增 - 用户关注功能
   ============================================================ */

/* 关注统计 */
.user-follow-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 12px 0 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.follow-stat-item {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.follow-stat-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* 关注按钮 */
.user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.follow-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-full);
    background: var(--bg-white);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.follow-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(26,115,232,0.25);
}

.follow-btn:active {
    transform: translateY(0);
}

.follow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.follow-btn.following {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.follow-btn.following:hover {
    background: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger);
}

.follow-icon {
    font-weight: 700;
    font-size: 1rem;
}

/* 社交标签页 */
.profile-social-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.social-tab {
    flex: 1;
    text-align: center;
    padding: 12px 16px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
    cursor: pointer;
}

.social-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

.social-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* 关注/粉丝用户列表 */
.follow-user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.follow-user-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.follow-user-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.follow-user-avatar {
    flex-shrink: 0;
}

.follow-user-avatar .user-avatar-img,
.follow-user-avatar .avatar-placeholder {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
}

.follow-user-info {
    flex: 1;
    min-width: 0;
}

.follow-user-name {
    font-weight: 600;
    font-size: 0.938rem;
    color: var(--text-primary);
    transition: var(--transition);
}

.follow-user-name:hover {
    color: var(--primary);
    text-decoration: none;
}

.follow-user-bio {
    font-size: 0.813rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.follow-user-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .follow-user-item {
        flex-wrap: wrap;
    }

    .follow-user-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* ============================================================
   v5 新增 - 管理后台
   ============================================================ */
.admin-page {
    max-width: var(--max-width);
    margin: 20px auto;
    padding: 0 20px;
}

.admin-header {
    margin-bottom: 24px;
}

.admin-header h1 {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}

.admin-tab:hover {
    color: var(--primary);
}

.admin-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* === 管理后台搜索栏 === */
.admin-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.admin-search-input {
    flex: 1;
    min-width: 180px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--bg-white);
    color: var(--text-primary);
    transition: border-color var(--transition);
}

.admin-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

.admin-search-select {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--bg-white);
    color: var(--text-primary);
    min-width: 120px;
    cursor: pointer;
}

.admin-search-select:focus {
    outline: none;
    border-color: var(--primary);
}

.admin-search-btn {
    padding: 8px 18px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 500;
    transition: background var(--transition);
    white-space: nowrap;
}

.admin-search-btn:hover { background: var(--primary-dark); }

.admin-search-clear {
    padding: 8px 16px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.admin-search-clear:hover {
    background: var(--bg-gray);
    color: var(--text-primary);
}

/* 搜索结果信息 */
.admin-search-info {
    font-size: 0.813rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.admin-search-info strong {
    color: var(--primary);
    font-weight: 600;
}

.admin-add-btn {
    background: var(--primary);
    color: #fff;
    border: none;
}

.admin-add-btn:hover {
    background: var(--primary-dark, #1d4ed8);
    color: #fff;
}

/* 编辑/禁言/删除按钮颜色 */
.admin-btn-sm.btn-edit {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.admin-btn-sm.btn-edit:hover {
    background: #c8e6c9;
}

.admin-btn-sm.btn-warning {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.admin-btn-sm.btn-warning:hover {
    background: #ffe0b2;
}

.admin-btn-sm.btn-danger {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.admin-btn-sm.btn-danger:hover {
    background: #ffcdd2;
}

.dark .admin-btn-sm.btn-edit {
    background: #1a3d2a;
    color: #66bb6a;
    border-color: #2d5a3d;
}

.dark .admin-btn-sm.btn-warning {
    background: #3d2a1a;
    color: #ff9800;
    border-color: #5a3d2a;
}

.dark .admin-btn-sm.btn-danger {
    background: #3d1a1a;
    color: #ef5350;
    border-color: #5a2a2a;
}

/* 禁言期限选项 */
.mute-duration-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mute-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.813rem;
    transition: all 0.2s;
    user-select: none;
}

.mute-option:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.04);
}

.mute-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
    font-weight: 600;
    color: var(--primary);
}

.dark .mute-option:has(input:checked) {
    background: rgba(59, 130, 246, 0.12);
}

.admin-modal.user-form-modal { max-width: 480px; }
.admin-modal.mute-modal { max-width: 520px; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.admin-table th {
    background: var(--bg-gray);
    padding: 12px 16px;
    text-align: left;
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.admin-table td {
    padding: 10px 16px;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: var(--bg-light);
}

.admin-table .role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.role-badge-super_admin {
    background: #fce4ec;
    color: #c62828;
}

.dark-mode .role-badge-super_admin {
    background: #4a1525;
    color: #ef9a9a;
}

.role-badge-admin {
    background: #e3f2fd;
    color: #1565c0;
}

.dark-mode .role-badge-admin {
    background: #0d2137;
    color: #90caf9;
}

.role-badge-user {
    background: #e8f5e9;
    color: #2e7d32;
}

.dark-mode .role-badge-user {
    background: #1a3a1c;
    color: #a5d6a7;
}

.admin-btn-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-white);
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-primary);
    text-decoration: none;
    display: inline-block;
}

.admin-btn-sm:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.admin-btn-sm.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.admin-btn-sm.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.admin-btn-sm.btn-success {
    color: var(--success);
    border-color: var(--success);
}

.admin-btn-sm.btn-success:hover {
    background: var(--success);
    color: #fff;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-stat-card {
    background: var(--bg-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    text-align: center;
}

.admin-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.admin-stat-card .stat-label {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* 操作确认弹窗 */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.admin-modal {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.admin-modal h3 {
    font-size: 1.125rem;
    margin-bottom: 12px;
}

.admin-modal p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.admin-modal .btn {
    margin-right: 8px;
}

/* 批量操作 */
.admin-batch-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* 移动端适配（管理后台表格等） */
@media (max-width: 768px) {
    .admin-table {
        display: block;
        overflow-x: auto;
    }

    .admin-table th,
    .admin-table td {
        white-space: nowrap;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   v14 新增 - 反馈举报管理
   ============================================================ */

/* Tab 上的待处理数量徽章 */
.report-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.688rem;
    font-weight: 700;
    color: #fff;
    background: var(--danger);
    border-radius: 10px;
    margin-left: 6px;
    line-height: 1;
}

/* 反馈举报类型徽章 */
.report-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.report-type-badge.type-report {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.report-type-badge.type-feedback {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

/* 状态徽章 */
.report-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.report-status-badge.status-pending {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.report-status-badge.status-done {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.report-status-badge.status-dismissed {
    background: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* 内容预览 */
.report-content-preview {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

/* 回复指示器 */
.report-reply-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    cursor: help;
}

/* ===== 管理后台弹窗增强 ===== */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.admin-modal {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.2s ease-out;
}

.admin-modal.report-detail-modal { max-width: 620px; }
.admin-modal.report-delete-modal { max-width: 420px; }

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    margin-bottom: 4px;
}

.admin-modal-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.15s;
    line-height: 1;
}

.modal-close-btn:hover {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.admin-modal-body {
    padding: 16px 24px;
}

.admin-modal-footer {
    padding: 12px 24px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ===== 管理员编辑用户资料弹窗 ===== */
.admin-modal.user-profile-modal {
    max-width: 700px;
}

.user-profile-static {
    background: var(--bg-gray, #f5f7fa);
    border-radius: var(--radius, 8px);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}
.profile-static-label {
    color: var(--text-muted, #888);
    font-weight: 500;
}

/* 资料编辑标签页 */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border, #eee);
    margin-bottom: 16px;
}
.profile-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted, #888);
    transition: all 0.2s;
}
.profile-tab:hover {
    color: var(--text-primary, #333);
    background: var(--bg-gray, #f5f7fa);
}
.profile-tab.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}

/* 资料面板 */
.profile-panel {
    animation: profileFadeIn 0.2s ease;
}
@keyframes profileFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 资料表单网格布局 */
.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.profile-form-grid .form-group {
    margin-bottom: 0;
}
.profile-form-grid .form-group-full {
    grid-column: 1 / -1;
}
.profile-form-grid .form-label {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    margin-bottom: 4px;
    display: block;
}
.profile-form-grid .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius, 6px);
    font-size: 0.875rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.profile-form-grid .form-control:focus {
    border-color: var(--primary, #3b82f6);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* 详情弹窗网格 */
.report-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.report-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-detail-item .detail-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-detail-item .detail-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.report-detail-content {
    margin-bottom: 8px;
}

.report-detail-content .detail-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.report-detail-content .detail-content-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-gray);
    padding: 14px;
    border-radius: var(--radius);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* 原内容预览区 */
.report-original-content {
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 暗色模式适配 */
.dark .report-type-badge.type-report {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.25);
}

.dark .report-type-badge.type-feedback {
    background: rgba(37, 99, 235, 0.12);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.25);
}

.dark .report-status-badge.status-pending {
    background: rgba(217, 119, 6, 0.12);
    color: #fcd34d;
    border-color: rgba(217, 119, 6, 0.25);
}

.dark .report-status-badge.status-done {
    background: rgba(22, 163, 74, 0.12);
    color: #86efac;
    border-color: rgba(22, 163, 74, 0.25);
}

.dark .report-status-badge.status-dismissed {
    background: rgba(107, 114, 128, 0.1);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.2);
}

.dark .report-reply-indicator {
    background: rgba(22, 163, 74, 0.12);
    color: #86efac;
    border-color: rgba(22, 163, 74, 0.25);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .admin-reports-table .admin-btn-group {
        flex-wrap: wrap;
    }

    .report-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-modal {
        max-width: 95vw;
        max-height: 85vh;
    }

    .report-content-preview {
        max-width: 140px;
    }
}

/* ============================================================
   v15 用户我的反馈/举报记录
   ============================================================ */

/* 反馈卡片容器 */
.my-reports-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 单个反馈卡片 */
.my-report-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: box-shadow 0.2s;
}

.my-report-card:hover {
    box-shadow: var(--shadow-sm);
}

/* 卡片头部：类型 + 状态 */
.my-report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* 卡片元信息行 */
.my-report-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.813rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 8px;
}

.my-report-demand-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-report-demand-link:hover {
    text-decoration: underline;
}

.my-report-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* 反馈内容 */
.my-report-content {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-gray);
    padding: 12px 14px;
    border-radius: var(--radius);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 管理员回复区块 */
.my-report-reply {
    margin-top: 12px;
    border-left: 3px solid var(--primary);
    padding-left: 14px;
}

.my-report-reply-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.my-report-reply-header svg {
    flex-shrink: 0;
}

.my-report-reply-time {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

.my-report-reply-body {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.04);
    padding: 10px 14px;
    border-radius: 0 var(--radius) var(--radius) 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 暗色模式适配 */
.dark .my-report-card {
    background: var(--bg-dark-card, #1a1a2e);
}

.dark .my-report-content {
    background: rgba(255, 255, 255, 0.03);
}

.dark .my-report-reply-body {
    background: rgba(59, 130, 246, 0.06);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .my-report-card {
        padding: 14px 16px;
    }

    .my-report-demand-link {
        max-width: 200px;
    }

    .my-report-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.user-profile-page {
    max-width: var(--max-width);
    margin: 20px auto;
    padding: 0 20px;
}

/* 用户 header 卡片 */
.user-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 30px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.user-profile-avatar .user-avatar-img,
.user-profile-avatar .avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    font-size: 2.25rem;
    flex-shrink: 0;
    border: 3px solid var(--primary-light);
}

.user-profile-info {
    flex: 1;
    min-width: 0;
}

.user-profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.user-profile-username {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.user-profile-bio {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 14px;
    max-width: 560px;
}

.user-profile-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.profile-detail-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.profile-detail-item .detail-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.profile-detail-item a {
    color: var(--primary);
    text-decoration: none;
}

.profile-detail-item a:hover {
    text-decoration: underline;
}

/* 操作按钮区 */
.user-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 130px;
}

.user-profile-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.user-profile-actions .follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    background: var(--bg-white);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.user-profile-actions .follow-btn:hover {
    background: var(--primary);
    color: #fff;
}

.user-profile-actions .follow-btn.following {
    background: var(--primary-light);
}

.user-profile-actions .follow-btn.following:hover {
    background: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger);
}

.user-profile-actions .follow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 统计卡片 */
.user-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.profile-stat-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    transition: box-shadow var(--transition);
}

.profile-stat-card:hover {
    box-shadow: var(--shadow-sm);
}

.profile-stat-card .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.profile-stat-card .stat-label {
    font-size: 0.813rem;
    color: var(--text-muted);
}

/* 供需记录区域 + 标签页 */
.user-profile-records {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.records-tabs {
    display: flex;
    border-bottom: 2px solid var(--bg-gray);
}

.records-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px;
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
}

.records-tab:hover {
    color: var(--primary);
    background: var(--bg-gray);
}

.records-tab.active {
    color: var(--primary);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

.records-tab .tab-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.records-content {
    padding: 20px 24px;
}

/* 承接记录列表 */
.accepted-bids-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.accepted-bid-item {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: box-shadow var(--transition);
}

.accepted-bid-item:hover {
    box-shadow: var(--shadow-sm);
}

.accepted-bid-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 8px;
}

.accepted-bid-title-row .demand-item-title {
    font-size: 0.938rem;
    color: var(--text-primary);
}

.accepted-bid-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.813rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.accepted-bid-message {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.bid-message-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.813rem;
}

.accepted-bid-price {
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--primary-dark);
}

/* ============================================================
   v7 新增 - 用户名链接样式
   ============================================================ */

/* 全局用户名链接基础样式 */
a[class*="user-link"],
.meta-user-link,
.card-user-link,
.bid-user-link,
.admin-user-link,
.chat-user-link,
.conv-user-link,
.follow-user-name-link,
.user-card-name-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition);
    border-bottom: 1px solid transparent;
}

a[class*="user-link"]:hover,
.meta-user-link:hover,
.card-user-link:hover,
.bid-user-link:hover,
.admin-user-link:hover,
.chat-user-link:hover,
.conv-user-link:hover,
.follow-user-name-link:hover,
.user-card-name-link:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}

/* 需求详情 meta 区的用户名链接 */
.demand-detail-meta .meta-user-link {
    font-weight: 600;
}

/* 需求卡片卡片中的用户名链接 */
.card-user-link {
    font-size: 0.813rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.card-user-link:hover {
    color: var(--primary);
}

/* 发布者卡片中的用户名链接 */
.user-card-name-link {
    font-size: inherit;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom-color: var(--primary-light);
}

.user-card-name-link:hover {
    color: var(--primary);
}

/* 应标列表用户名链接 */
.bid-user-link {
    font-weight: 600;
    font-size: 0.938rem;
}

/* 后台管理用户名链接 */
.admin-user-link {
    font-weight: 500;
}

/* 关注列表用户名链接 */
.follow-user-name-link {
    font-weight: 600;
    font-size: 0.938rem;
    color: var(--text-primary);
}

.follow-user-name-link:hover {
    color: var(--primary);
}

/* 私信页面用户名链接 */
.chat-user-link,
.conv-user-link {
    font-weight: 600;
}

/* user.php 头像 xlarge 尺寸 */
.avatar-placeholder.xlarge {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-img.xlarge {
    object-fit: cover;
}

/* user.php 响应式 */
@media (max-width: 640px) {
    .user-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .user-profile-details {
        justify-content: center;
    }

    .user-profile-actions {
        width: 100%;
        flex-direction: row;
    }

    .user-profile-actions .btn {
        flex: 1;
    }

    .user-profile-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .records-tab {
        font-size: 0.813rem;
        padding: 12px 12px;
    }

    .records-tab .tab-count {
        display: none;
    }

    .records-content {
        padding: 14px 16px;
    }

    .accepted-bid-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   v8 新增 - 富文本编辑器
   ============================================================ */

.rich-editor-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
    position: relative;
}

.rich-editor-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: var(--bg-gray);
    border-bottom: 1px solid var(--border);
    user-select: none;
    align-items: center;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.813rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.tool-btn svg { pointer-events: none; }

.tool-btn:hover {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text-primary);
}

.tool-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.tool-spacer { flex: 1; }

.tool-select {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-white);
    font-size: 0.813rem;
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    max-width: 80px;
}

.tool-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 5px 4px;
    align-self: center;
}

.editor-content {
    min-height: 320px;
    max-height: 320px;
    padding: 16px;
    font-size: 0.938rem;
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--bg-white);
    outline: none;
    overflow-y: auto;
    word-wrap: break-word;
    transition: min-height 0.3s ease, max-height 0.3s ease;
    resize: vertical;
}

.editor-content.is-empty::before {
    content: attr(placeholder);
    color: var(--text-muted);
    pointer-events: none;
    display: block;
}

.editor-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 16px 0 8px;
}

.editor-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 14px 0 6px;
}

.editor-content p {
    margin: 0 0 10px;
}

.editor-content ul, .editor-content ol {
    margin: 8px 0;
    padding-left: 24px;
    list-style: initial;
}
.editor-content ol { list-style: decimal; }

.editor-content blockquote {
    margin: 12px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--primary);
    background: var(--bg-gray);
    color: var(--text-secondary);
}

.editor-content pre {
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    font-family: 'Consolas','Monaco','Courier New',monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 8px 0;
    cursor: pointer;
    transition: opacity 0.2s;
}
.editor-content img:hover { opacity: 0.9; }

.editor-content a {
    color: var(--primary);
    text-decoration: underline;
}

.editor-content a:hover {
    color: var(--primary-dark);
}

/* 编辑器底部状态栏 */
.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-gray);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.editor-char-count {
    font-weight: 500;
}

.editor-hint {
    opacity: 0.7;
}

/* 图片插入面板 */
.editor-img-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
}

.editor-img-dialog {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    animation: modalIn 0.25s ease;
}

.editor-img-dialog h4 {
    padding: 16px 20px;
    margin: 0;
    font-size: 1.063rem;
    border-bottom: 1px solid var(--border);
}

.img-insert-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.img-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}
.img-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.img-tab-btn:hover { color: var(--primary); }

.img-insert-panel {
    padding: 20px;
}

.img-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.img-drop-zone:hover,
.img-drop-zone.dragover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.img-drop-icon {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--primary);
}

.img-drop-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.img-upload-preview {
    text-align: center;
}
.img-upload-preview img,
#img-url-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.img-preview-actions,
.img-url-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.img-upload-progress {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.img-url-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 12px;
}
.img-url-input:focus { border-color: var(--primary); }

#img-url-preview {
    margin-bottom: 12px;
}

.img-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

/* ============================================================
   v8 新增 - 发布预览弹窗
   ============================================================ */

.preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    padding: 20px;
}

.preview-modal {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    animation: modalIn 0.25s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.preview-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.preview-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.preview-close:hover {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.preview-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.preview-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* 预览内容样式 */
.preview-demand .preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-gray);
}

.preview-demand .preview-type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.preview-demand .preview-type.type-demand { background: var(--primary-light); color: var(--primary); }
.preview-demand .preview-type.type-supply { background: var(--success-light, #d4edda); color: var(--success, #155724); }

.preview-demand .preview-cat,
.preview-demand .preview-tags {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.preview-demand .preview-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-primary);
}

.preview-demand .preview-content {
    font-size: 0.938rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.preview-demand .preview-content h3 { font-size: 1.2rem; margin: 20px 0 8px; }
.preview-demand .preview-content h4 { font-size: 1.05rem; margin: 16px 0 6px; }
.preview-demand .preview-content p { margin: 0 0 10px; }
.preview-demand .preview-content ul, .preview-content ol { margin: 8px 0; padding-left: 22px; }
.preview-demand .preview-content blockquote { margin: 12px 0; padding: 8px 16px; border-left: 3px solid var(--primary); background: var(--bg-gray); }
.preview-demand .preview-content img { max-width: 100%; border-radius: var(--radius); margin: 8px 0; }
.preview-demand .preview-content a { color: var(--primary); }

/* ============================================================
   v8 新增 - 草稿箱
   ============================================================ */

.draft-modal {
    max-width: 580px;
}

.draft-list {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: box-shadow var(--transition);
    gap: 12px;
}

.draft-item:hover {
    box-shadow: var(--shadow-sm);
}

.draft-item-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    flex: 1;
    min-width: 0;
}

.draft-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 0.688rem;
    font-weight: 600;
    flex-shrink: 0;
}

.draft-type.type-demand { background: var(--primary-light); color: var(--primary); }
.draft-type.type-supply { background: var(--success-light, #d4edda); color: var(--success, #155724); }

.draft-title {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.draft-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.draft-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ============================================================
   v8 新增 - Toast 通知 + 表单布局
   ============================================================ */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toastIn 0.3s ease;
    transition: opacity 0.3s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.toast-success { background: var(--success, #28a745); }
.toast-error { background: var(--danger, #dc3545); }
.toast-info { background: var(--primary, #1a73e8); }

.form-actions-sub {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.form-actions-sub .btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 18px;
    font-size: 0.938rem;
}

/* ============================================================
   v11 新增 - 筛选器折叠
   ============================================================ */

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.filter-header h3 {
    font-size: 1.063rem;
    margin: 0;
    padding: 0;
    border: none;
}

/* 筛选器头部内的 toggle 开关 */
.filter-header .toggle-switch {
    margin-left: 8px;
    flex-shrink: 0;
}

.filter-sidebar.collapsed {
    width: 48px;
    padding: 12px 8px;
    min-width: 48px;
}

.filter-sidebar.collapsed .filter-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    justify-content: center;
}

.filter-sidebar.collapsed .filter-header h3,
.filter-sidebar.collapsed .filter-group,
.filter-sidebar.collapsed .btn,
.filter-sidebar.collapsed form > a {
    display: none;
}

.filter-sidebar.collapsed .filter-header .toggle-switch {
    margin: 0;
}

/* 响应式：平板端 (769px-1024px) 折叠后保持表单可见但缩小间距 */
@media (min-width: 769px) and (max-width: 1024px) {
    .filter-sidebar.collapsed {
        width: 100%;
        min-width: auto;
        padding: 12px 16px;
    }
    .filter-sidebar.collapsed .filter-header h3,
    .filter-sidebar.collapsed .filter-group,
    .filter-sidebar.collapsed .btn,
    .filter-sidebar.collapsed form > a {
        display: block;
    }
    .filter-sidebar.collapsed .filter-header {
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
}

/* ============================================================
   v11 新增 - 图片幻灯片
   ============================================================ */

.slideshow-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slideshow-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
}

.slideshow-close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 10;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s ease;
}
.slideshow-close:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.08);
}

.slideshow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s ease;
}
.slideshow-nav:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-50%) scale(1.08);
}
.slideshow-prev { left: 20px; }
.slideshow-next { right: 20px; }

.slideshow-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 85vh;
    padding: 20px;
}

.slideshow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 75vh;
}

.slideshow-container img {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    user-select: none;
    -webkit-user-drag: none;
}

.slideshow-counter {
    margin-top: 16px;
    color: rgba(255,255,255,0.8);
    font-size: 0.938rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.slideshow-caption {
    color: rgba(255,255,255,0.5);
    font-size: 0.813rem;
    margin-top: 4px;
}

/* 缩略图点击提示 */
.gallery-link {
    cursor: zoom-in;
    position: relative;
}
.gallery-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s ease;
    border-radius: var(--radius);
}
.gallery-link:hover::after {
    background: rgba(0,0,0,0.08);
}

/* 移动端适配 */
@media (max-width: 640px) {
    .slideshow-nav {
        width: 40px;
        height: 40px;
    }
    .slideshow-nav svg { width: 28px; height: 28px; }
    .slideshow-prev { left: 8px; }
    .slideshow-next { right: 8px; }
    .slideshow-close { top: 10px; right: 10px; width: 38px; height: 38px; }
    .slideshow-content { padding: 10px; }
    .slideshow-container img { max-width: 95vw; max-height: 70vh; }
}

/* ============================================================
   v10 新增 - 价格筛选
   ============================================================ */

.price-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-filter-input {
    flex: 1;
    padding: 7px 10px !important;
    font-size: 0.813rem !important;
    min-width: 0;
}

.price-filter-sep {
    color: var(--text-muted);
    font-size: 0.813rem;
    flex-shrink: 0;
}

/* ============================================================
   v10 新增 - 编辑器模式切换
   ============================================================ */

.editor-mode-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
}

.editor-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 0.813rem;
    cursor: pointer;
    transition: all var(--transition);
}

.editor-mode-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.editor-mode-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.editor-code-textarea {
    width: 100%;
    min-height: 320px;
    max-height: 650px;
    padding: 16px;
    border: none;
    outline: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--text-primary);
    background: #fafafa;
    resize: vertical;
    overflow-y: auto;
}

.dark-mode .editor-code-textarea {
    background: #0d0d1a;
    color: #e8eaed;
}

/* ============================================================
   v9 新增 - 视图切换（网格/列表）
   ============================================================ */

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
    line-height: 1;
}

.view-toggle-btn:last-child {
    border-right: none;
}

.view-toggle-btn:hover {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

.view-toggle-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
}

/* === 列数切换器 === */
.col-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.col-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    background: var(--bg-white);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    padding: 0 10px;
    transition: all var(--transition);
    line-height: 1;
}

.col-toggle-btn:last-child {
    border-right: none;
}

.col-toggle-btn:hover {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.col-toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

.col-toggle-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 4px;
    white-space: nowrap;
}

/* === 信息展示开关（缩略图/视频/文档） === */
.display-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.display-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    background: var(--bg-white);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 8px;
    transition: all var(--transition);
    line-height: 1;
}

.display-toggle-btn:last-child {
    border-right: none;
}

.display-toggle-btn:hover {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.display-toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

.display-toggle-btn.active svg {
    stroke: #fff;
}

/* 隐藏规则：通过 grid 容器上的 class 控制子元素显隐 */
.demand-grid.hide-thumb .demand-card-thumb { display: none !important; }
.demand-grid.hide-video .card-video-badge { display: none !important; }
.demand-grid.hide-docs .card-doc-badge { display: none !important; }

/* 隐去缩略图时卡片内边距修复 */
.demand-grid.hide-thumb .demand-card {
    /* 保持正常内边距，无需负 margin 修正 */;
}

/* 列表视图：卡片变为横排 */
.demand-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 列表视图：显示缩略图，隐藏购物车按钮 */
.demand-grid.list-view .card-cart-action {
    display: none !important;
}

.demand-grid.list-view .demand-card {
    display: grid;
    grid-template-columns: 80px auto minmax(0, 1fr) auto;
    grid-template-areas:
        "thumb type title footer"
        "thumb type content footer";
    gap: 0 16px;
    align-items: center;
    padding: 14px 20px;
    margin-bottom: 0;
}

/* 桌面端列表视图缩略图 */
.demand-grid.list-view .demand-card-thumb {
    display: block;
    grid-area: thumb;
    width: 80px;
    height: 60px;
    margin: 0;
    border-radius: var(--radius);
    aspect-ratio: auto;
    max-width: 80px;
    flex-shrink: 0;
}
.demand-grid.list-view .demand-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.demand-grid.list-view .demand-card-thumb-empty {
    display: flex;
    grid-area: thumb;
    width: 80px;
    height: 60px;
    margin: 0;
    border-radius: var(--radius);
    aspect-ratio: auto;
    flex-shrink: 0;
}

.demand-grid.list-view .demand-card-header {
    grid-area: type;
    margin-bottom: 0;
    flex-shrink: 0;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.demand-grid.list-view .demand-card-title-row {
    grid-area: title;
    min-width: 0;
}

.demand-grid.list-view .demand-card-title {
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 0.938rem;
    align-self: end;
    display: block;
}

.demand-grid.list-view .demand-card-content {
    display: none;
}

.demand-grid.list-view .demand-card-footer {
    grid-area: footer;
    border-top: none;
    padding-top: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    justify-self: end;
    min-width: 0;
}

.demand-grid.list-view .demand-card-meta {
    margin-bottom: 0;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 0.8rem;
}

.demand-grid.list-view .demand-card-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.demand-grid.list-view .card-stat {
    font-size: 0.7rem;
}

.demand-grid.list-view .card-category {
    font-size: 0.7rem;
}

.demand-grid.list-view .card-expired-tag {
    grid-area: thumb;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px 0 6px 0;
    z-index: 2;
    margin: 0;
    align-self: start;
    justify-self: start;
}

.demand-grid.list-view .card-new-tag {
    grid-area: thumb;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px 0 6px 0;
    z-index: 2;
    margin: 0;
    align-self: start;
    justify-self: start;
}

/* 响应式：小屏下列表视图 → 紧凑科学排版 */
@media (max-width: 640px) {
    /* ── 卡片容器：左侧缩略图 + 右侧信息 Grid 布局 ── */
    .demand-grid.list-view .demand-card {
        display: grid;
        grid-template-columns: 70px 1fr;
        grid-template-areas:
            "thumb badges"
            "thumb title"
            "thumb footer";
        gap: 2px 10px;
        padding: 10px 14px;
        width: 100%;
        box-sizing: border-box;
        align-items: start;
    }

    /* 移动端列表视图缩略图 */
    .demand-grid.list-view .demand-card-thumb {
        display: block;
        grid-area: thumb;
        width: 70px;
        height: 70px;
        margin: 0;
        border-radius: 6px;
        aspect-ratio: auto;
        max-width: 70px;
        flex-shrink: 0;
    }
    .demand-grid.list-view .demand-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    .demand-grid.list-view .demand-card-thumb-empty {
        display: flex;
        grid-area: thumb;
        width: 70px;
        height: 70px;
        margin: 0;
        border-radius: 6px;
        aspect-ratio: auto;
        flex-shrink: 0;
    }

    /* 过期/新标签 → 叠加在缩略图左上角 */
    .demand-grid.list-view .card-expired-tag {
        grid-area: thumb;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 0.6rem;
        padding: 2px 6px;
        border-radius: 4px 0 6px 0;
        z-index: 2;
        margin: 0;
    }
    .demand-grid.list-view .card-new-tag {
        grid-area: thumb;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 0.6rem;
        padding: 2px 6px;
        border-radius: 4px 0 6px 0;
        z-index: 2;
        margin: 0;
    }

    /* ── Header：移动端列表视图隐藏原 header，改用行内标签 ── */
    .demand-grid.list-view .demand-card-header {
        display: none;
    }

    .demand-grid.list-view .demand-card-inline-badges {
        grid-area: badges;
        display: inline-block;
        vertical-align: middle;
        white-space: nowrap;
    }

    .demand-grid.list-view .demand-card-inline-badges .demand-type-badge {
        font-size: 0.7rem;
        padding: 1px 7px;
        margin-right: 4px;
    }

    .demand-grid.list-view .demand-card-inline-badges .demand-status {
        font-size: 0.7rem;
        margin-right: 4px;
    }

    .demand-grid.list-view .demand-card-inline-badges .demand-status.status-progress {
        color: var(--success);
    }
    .demand-grid.list-view .demand-card-inline-badges .demand-status.status-open {
        color: var(--primary);
    }
    .demand-grid.list-view .demand-card-inline-badges .demand-status.status-closed {
        color: var(--text-muted);
    }

    /* ── 标题行：标签+标题+价格 全部左对齐 ── */
    .demand-grid.list-view .demand-card-title-row {
        grid-area: title;
        display: block;
        text-align: left;
    }

    .demand-grid.list-view .demand-card-title {
        display: inline;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        font-size: 0.938rem;
        margin-bottom: 0;
        word-break: break-word;
    }

    .demand-grid.list-view .card-price-mobile {
        display: inline;
        font-weight: 700;
        color: var(--danger);
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* ── Footer：meta + info 合并为单行自适应流 ── */
    .demand-grid.list-view .demand-card-meta .card-price {
        display: none;
    }

    .demand-grid.list-view .demand-card-footer {
        grid-area: footer;
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        width: 100%;
    }

    /* 消除 meta / info 包装层 → 子元素直接参与 footer 流式布局 */
    .demand-grid.list-view .demand-card-meta {
        display: contents;
    }

    .demand-grid.list-view .demand-card-info {
        display: contents;
    }

    /* 统一子项字号 */
    .demand-grid.list-view .card-stat {
        font-size: 0.7rem;
    }

    .demand-grid.list-view .card-category {
        font-size: 0.7rem;
    }

    .demand-grid.list-view .card-user,
    .demand-grid.list-view .card-time,
    .demand-grid.list-view .card-region-meta {
        font-size: 0.72rem;
    }
}

/* ============================================================
   v8 响应式
   ============================================================ */

@media (max-width: 640px) {
    .editor-toolbar {
        gap: 1px;
        padding: 4px 5px;
    }

    .tool-btn {
        width: 28px;
        height: 26px;
        font-size: 0.75rem;
    }

    .editor-content {
        min-height: 180px;
        padding: 12px;
        font-size: 0.875rem;
    }

    .preview-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .preview-body {
        padding: 16px;
    }

    .preview-header {
        padding: 12px 16px;
    }

    .preview-footer {
        padding: 12px 16px;
    }

    .preview-demand .preview-title {
        font-size: 1.15rem;
    }

    .draft-modal {
        max-width: 100%;
    }

    .draft-item {
        flex-direction: column;
        align-items: stretch;
    }

    .draft-item-actions {
        justify-content: flex-end;
    }
}

/* ============================================================
   AI 智能助手侧边栏布局
   ============================================================ */
.publish-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px 40px;
}

.publish-main {
    flex: 1;
    min-width: 0;
    max-width: 1000px;
}

.publish-sidebar {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}

.ai-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ai-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f0f5ff 0%, #e8edf9 100%);
    border-bottom: 1px solid var(--border);
}

.ai-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
}

.ai-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-panel-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #e8f5e9;
    color: #2e7d32;
    margin-left: 6px;
}

.ai-panel-body {
    padding: 20px;
    min-height: 200px;
    max-height: calc(100vh - var(--nav-height) - 200px);
    overflow-y: auto;
}

.ai-panel-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

.ai-footer-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ai-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-refresh-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* === AI 状态区 === */
.ai-state {
    text-align: center;
    padding: 20px 0;
}

.ai-state-idle .ai-icon-lg {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 12px;
}

.ai-state-idle p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.ai-state-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 0;
}

.ai-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-state-loading p {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ai-state-error p {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 20px 0;
}

/* === AI 结果卡片 === */
.ai-result-card {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bg-gray);
}

.ai-result-card:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ai-result-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* --- 类型检测 --- */
.ai-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ai-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.ai-type-badge.type-demand {
    background: #fff3e0;
    color: #e65100;
}

.ai-type-badge.type-supply {
    background: #e8f5e9;
    color: #2e7d32;
}

.ai-type-confidence {
    font-size: 0.72rem;
    font-weight: 600;
}

.ai-type-reason {
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    transition: background 0.2s ease;
}

.ai-type-reason:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* --- 质量评分 --- */
.ai-quality-score-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ai-quality-ring {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.ai-quality-ring svg {
    transform: rotate(-90deg);
}

.ai-ring-bg {
    stroke: var(--bg-gray);
}

.ai-ring-fill {
    stroke: var(--primary);
    stroke-linecap: round;
    transition: stroke 0.4s ease, stroke-dasharray 0.6s ease;
}

.ai-quality-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.ai-quality-details {
    flex: 1;
    min-width: 0;
}

.ai-quality-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 0.72rem;
}

.ai-quality-item span:first-child {
    width: 36px;
    color: var(--text-muted);
    text-align: right;
}

.ai-quality-item span:last-child {
    width: 32px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary);
}

.ai-quality-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-gray);
    overflow: hidden;
}

.ai-quality-bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--primary);
    transition: width 0.5s ease;
}

.ai-quality-level {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

.ai-level-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* --- 分类推荐 --- */
.ai-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease;
    margin-bottom: 4px;
}

.ai-cat-item:hover {
    background: var(--bg-light);
}

.ai-cat-top {
    background: var(--primary-light);
}

.ai-cat-name {
    width: 60px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}

.ai-cat-bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--bg-gray);
    overflow: hidden;
}

.ai-cat-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), #7c4dff);
    transition: width 0.5s ease;
}

.ai-cat-pct {
    width: 36px;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
}

/* --- 标签推荐 --- */
.ai-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-tag-item {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    border-radius: var(--radius-full);
    background: var(--bg-gray);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.ai-tag-item:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* --- 价格参考 --- */
.ai-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ai-price-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ai-price-avg {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
}

.ai-price-range-text {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ai-price-samples {
    color: var(--text-muted);
    opacity: 0.7;
}

/* --- 改进建议 --- */
.ai-tip-item {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.5;
}

.ai-tip-warning {
    background: var(--warning-light);
    color: #8b5a00;
}

.ai-tip-info {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.ai-tip-tip {
    background: var(--success-light);
    color: #1b5e20;
}

.ai-tip-icon {
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* === 侧边栏折叠（移动端） === */
@media (max-width: 900px) {
    .publish-layout {
        flex-direction: column;
        padding: 0 12px 24px;
        gap: 16px;
    }

    .publish-main {
        max-width: 100%;
    }

    .publish-sidebar {
        width: 100%;
        position: static;
    }

    .ai-panel-body {
        max-height: none;
    }

    .ai-collapsed .ai-panel-body,
    .ai-collapsed .ai-panel-footer {
        display: none;
    }

    .ai-collapsed .ai-panel-header {
        border-bottom: none;
        border-radius: var(--radius-lg);
    }

    .ai-panel-header {
        cursor: pointer;
    }
}

/* ============================================================
   暗色模式 - AI 侧边栏适配
   ============================================================ */
.dark-mode .ai-panel {
    background: #1e1e2e;
    border-color: #3a3a5c;
}

.dark-mode .ai-panel-header {
    background: linear-gradient(135deg, #1e1e3a 0%, #252545 100%);
    border-bottom-color: #3a3a5c;
}

.dark-mode .ai-panel-footer {
    background: #1a1a2e;
    border-top-color: #3a3a5c;
}

.dark-mode .ai-refresh-btn {
    background: #2a2a4a;
    border-color: #3a3a5c;
    color: #aaa;
}

.dark-mode .ai-refresh-btn:hover {
    background: #3a3a5c;
}

.dark-mode .ai-ring-bg {
    stroke: #3a3a5c;
}

.dark-mode .ai-cat-top {
    background: #252540;
}

.dark-mode .ai-tag-item {
    background: #2a2a4a;
    color: #ccc;
    border-color: transparent;
}

.dark-mode .ai-tag-item:hover {
    background: #3a3a5c;
}

.dark-mode .ai-tip-warning {
    background: #3d3520;
    color: #ffb74d;
}

.dark-mode .ai-tip-info {
    background: #1e2a4a;
    color: #90caf9;
}

.dark-mode .ai-tip-tip {
    background: #1a3020;
    color: #81c784;
}

.dark-mode .ai-type-reason {
    background: #2a2a4a;
}

.dark-mode .ai-type-reason:hover {
    background: #3a3a5c;
}

.dark-mode .ai-cat-item:hover {
    background: #2a2a4a;
}

.dark-mode .ai-quality-bar {
    background: #3a3a5c;
}

.dark-mode .ai-cat-bar {
    background: #3a3a5c;
}

.dark-mode .ai-result-card {
    border-bottom-color: #3a3a5c;
}

.dark-mode .publish-layout {
    background: transparent;
}

.dark-mode .publish-main .publish-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   v17 新增 - 管理后台用户供需信息弹窗 + IP 列
   ============================================================ */

/* 供需数可点击链接 */
.admin-demand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.813rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

.admin-demand-link:hover {
    background: var(--primary);
    color: #fff;
}

/* IP 单元格 */
.admin-ip-cell {
    font-size: 0.75rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--text-secondary);
    background: var(--bg-gray);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* 用户供需弹窗 */
.user-demands-modal {
    max-width: 680px;
    max-height: 80vh;
}

.user-demands-modal .admin-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* 供需统计摘要 */
.demand-summary {
    padding: 8px 12px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* 供需列表项 */
.demand-list-item {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    transition: box-shadow 0.2s ease;
}

.demand-list-item:last-child {
    margin-bottom: 0;
}

.demand-list-item:hover {
    box-shadow: var(--shadow-sm);
}

.demand-list-item.demand-item-deleted {
    opacity: 0.65;
    background: var(--bg-gray);
}

.demand-list-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.demand-list-title {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demand-list-title:hover {
    color: var(--primary);
    text-decoration: underline;
}

.demand-list-meta {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* 供需类型徽章 */
.demand-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.688rem;
    font-weight: 600;
}

.demand-type-badge.type-demand {
    background: #fff3e0;
    color: #e65100;
}

.demand-type-badge.type-supply {
    background: #e8f5e9;
    color: #2e7d32;
}

/* 供需状态徽章 */
.demand-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.688rem;
    font-weight: 600;
}

.demand-status-badge.status-open {
    background: #fff8e1;
    color: #f57f17;
}

.demand-status-badge.status-progress {
    background: #e3f2fd;
    color: #1565c0;
}

.demand-status-badge.status-resolved {
    background: #e8f5e9;
    color: #2e7d32;
}

.demand-status-badge.status-closed {
    background: #f5f5f5;
    color: #757575;
}

/* 已删除标签 */
.demand-deleted-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.688rem;
    font-weight: 600;
    background: #ffebee;
    color: #c62828;
    margin-left: 4px;
    vertical-align: middle;
}

/* 供需列表项底部信息 */
.demand-list-item-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================
   v17 暗色模式适配
   ============================================================ */

.dark .admin-demand-link {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.dark .admin-demand-link:hover {
    background: var(--primary);
    color: #fff;
}

.dark .admin-ip-cell {
    background: rgba(255, 255, 255, 0.04);
    color: #bbb;
}

.dark .demand-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: #3a3a5c;
}

.dark .demand-list-item {
    border-color: #3a3a5c;
}

.dark .demand-list-item.demand-item-deleted {
    background: rgba(255, 255, 255, 0.02);
}

.dark .demand-type-badge.type-demand {
    background: rgba(230, 81, 0, 0.12);
    color: #ffb74d;
}

.dark .demand-type-badge.type-supply {
    background: rgba(46, 125, 50, 0.12);
    color: #81c784;
}

.dark .demand-status-badge.status-open {
    background: rgba(245, 127, 23, 0.12);
    color: #ffcc02;
}

.dark .demand-status-badge.status-progress {
    background: rgba(21, 101, 192, 0.12);
    color: #90caf9;
}

.dark .demand-status-badge.status-resolved {
    background: rgba(46, 125, 50, 0.12);
    color: #81c784;
}

.dark .demand-status-badge.status-closed {
    background: rgba(117, 117, 117, 0.1);
    color: #9e9e9e;
}

.dark .demand-deleted-tag {
    background: rgba(198, 40, 40, 0.12);
    color: #ef9a9a;
}

.dark .demand-list-title {
    color: #e0e0e0;
}

.dark .demand-list-title:hover {
    color: var(--primary);
}

/* ============================================================
   v17 移动端适配
   ============================================================ */
@media (max-width: 768px) {
    .user-demands-modal {
        max-width: 95vw;
    }

    .demand-list-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .demand-list-title {
        white-space: normal;
    }

    .demand-list-item-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-ip-cell {
        font-size: 0.688rem;
    }
}

/* ============================================================
   AI 智能用户画像 — 个人主页智能展示区块
   ============================================================ */
.ai-insights-section {
    margin: 20px 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ai-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea0d 0%, #764ba20d 100%);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}
.dark-mode .ai-section-header {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
}

.ai-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.ai-section-title svg { color: #667eea; }

.ai-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    letter-spacing: 0.5px;
}

.ai-update-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 行布局 */
.ai-row-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
}
.ai-row-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 20px 16px;
}

/* 综合评分卡片 */
.ai-score-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: var(--bg-gray);
    border-radius: var(--radius);
}
.dark-mode .ai-score-card {
    background: #1e1e2e;
}

.ai-score-circle-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.ai-score-ring {
    width: 120px;
    height: 120px;
}
.ai-ring-bg { stroke: var(--border); }
.dark-mode .ai-ring-bg { stroke: #333; }
.ai-ring-fill {
    stroke: url(#aiGradient);
    transition: stroke-dasharray 0.8s ease;
}

.ai-score-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
}
.ai-score-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #667eea;
}
.ai-score-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ai-score-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-score-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}
.ai-score-item-label {
    width: 48px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.ai-mini-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.ai-mini-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.6s ease;
}
.ai-score-item-val {
    width: 32px;
    text-align: right;
    font-weight: 600;
    font-size: 0.8rem;
}

/* 智能标签卡片 */
.ai-tags-card {
    padding: 16px;
    background: var(--bg-gray);
    border-radius: var(--radius);
}
.dark-mode .ai-tags-card {
    background: #1e1e2e;
}
.ai-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ai-card-title svg { color: #667eea; }

.ai-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: transform 0.15s;
}
.ai-tag:hover { transform: scale(1.04); }
.ai-tag-skill {
    background: #667eea18;
    color: #5568d0;
    border: 1px solid #667eea30;
}
.ai-tag-domain {
    background: #764ba218;
    color: #764ba2;
    border: 1px solid #764ba230;
}
.ai-tag-status {
    background: #10b98118;
    color: #059669;
    border: 1px solid #10b98130;
}
.ai-tag-badge {
    background: #f59e0b18;
    color: #b45309;
    border: 1px solid #f59e0b30;
}
.dark-mode .ai-tag-skill { background: #667eea20; color: #a5b4fc; }
.dark-mode .ai-tag-domain { background: #764ba220; color: #c4b5fd; }
.dark-mode .ai-tag-status { background: #10b98120; color: #6ee7b7; }
.dark-mode .ai-tag-badge { background: #f59e0b20; color: #fcd34d; }

.ai-style-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
}
.ai-style-label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea15, #764ba215);
    color: #667eea;
    font-weight: 600;
    font-size: 0.78rem;
}
.ai-style-stat {
    color: var(--text-muted);
}

/* 领域分布卡片 */
.ai-domain-card {
    padding: 16px;
    background: var(--bg-gray);
    border-radius: var(--radius);
}
.dark-mode .ai-domain-card { background: #1e1e2e; }

.ai-domain-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.ai-domain-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}
.ai-domain-name {
    width: 72px;
    flex-shrink: 0;
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.ai-domain-bar-track {
    flex: 1;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.dark-mode .ai-domain-bar-track { background: #333; }
.ai-domain-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    min-width: 36px;
    transition: width 0.6s ease;
}
.ai-domain-bar-label {
    font-size: 0.7rem;
    color: #fff;
    font-weight: 600;
}
.ai-domain-summary {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 4px 0 0;
}
.ai-domain-summary strong {
    color: #667eea;
}

/* 洞察卡片 */
.ai-insights-card {
    padding: 16px;
    background: var(--bg-gray);
    border-radius: var(--radius);
}
.dark-mode .ai-insights-card { background: #1e1e2e; }

.ai-insights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-white);
    transition: background 0.2s;
}
.dark-mode .ai-insight-item { background: #28283a; }
.ai-insight-item:hover { background: var(--bg-gray); }
.ai-insight-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
.ai-insight-role .ai-insight-icon { color: #667eea; }
.ai-insight-activity .ai-insight-icon { color: #f59e0b; }
.ai-insight-quality .ai-insight-icon { color: #10b981; }
.ai-insight-speed .ai-insight-icon { color: #3b82f6; }
.ai-insight-focus .ai-insight-icon { color: #8b5cf6; }
.ai-insight-pattern .ai-insight-icon { color: #6366f1; }
.ai-insight-social .ai-insight-icon { color: #ec4899; }

/* 摘要行 */
.ai-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    padding: 0 20px 16px;
}
.ai-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-gray);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.dark-mode .ai-summary-item { background: #1e1e2e; }
.ai-summary-icon { font-size: 1.1rem; flex-shrink: 0; }
.ai-summary-text strong { color: var(--text-primary); }

.ai-no-data {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    margin: 0;
    padding: 10px 0;
}

/* 响应式 */
@media (max-width: 768px) {
    .ai-row-top,
    .ai-row-bottom {
        grid-template-columns: 1fr;
    }
    .ai-score-card {
        flex-direction: column;
        text-align: center;
    }
    .ai-score-details { width: 100%; }
}

/* ============================================================
   收货地址簿
   ============================================================ */

/* --- 地址列表 --- */
.address-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- 地址卡片 --- */
.address-card {
    position: relative;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.address-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.address-card.address-default {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* 默认标签 */
.address-default-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px 4px 12px;
    border-radius: 0 var(--radius) 0 var(--radius-lg);
    line-height: 1.4;
}

/* 卡片内容区 */
.address-card-body {
    padding-right: 0;
}

.address-name-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.address-name-phone strong {
    color: var(--text-primary);
}

.address-phone {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.address-full {
    margin: 4px 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-all;
}

.address-postal {
    color: var(--text-muted);
    font-size: 0.813rem;
}

/* 卡片操作按钮 */
.address-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

/* --- 地址编辑弹窗 --- */
.address-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.address-modal {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.address-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 1;
}

.address-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.address-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-gray);
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
}

.address-modal-close:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.address-modal-body {
    padding: 16px 20px;
}

.address-modal-body .form-group {
    margin-bottom: 14px;
}

.address-modal-body .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.address-modal-body .form-group input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--bg-white);
    color: var(--text-primary);
    transition: border-color var(--transition);
    box-sizing: border-box;
}

.address-modal-body .form-group input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.address-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
}

/* --- 下单页地址选择器 --- */
.address-select-wrapper {
    position: relative;
}

.address-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--bg-white);
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
    appearance: auto;
}

.address-select:focus {
    border-color: var(--primary);
    outline: none;
}

.address-select-hint {
    display: block;
    margin-top: 6px;
}

/* --- 地址弹窗 - 默认地址开关 --- */
.address-default-row {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.address-default-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.address-default-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.address-default-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.address-default-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.25s ease;
}

.address-default-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.address-default-switch input:checked + .address-default-slider {
    background: var(--primary);
}

.address-default-switch input:checked + .address-default-slider::before {
    transform: translateX(20px);
}

.address-default-switch input:focus-visible + .address-default-slider {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
}

.address-default-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ============================================================
   深色模式 - 收货地址簿
   ============================================================ */

.dark-mode .address-card {
    background: #1e1e2e;
    border-color: #333;
}

.dark-mode .address-card:hover {
    border-color: var(--primary);
}

.dark-mode .address-card.address-default {
    background: rgba(26, 115, 232, 0.1);
    border-color: var(--primary);
}

.dark-mode .address-default-tag {
    background: var(--primary);
    color: #fff;
}

.dark-mode .address-name-phone strong {
    color: #ddd;
}

.dark-mode .address-phone,
.dark-mode .address-full {
    color: #aaa;
}

.dark-mode .address-postal {
    color: #888;
}

.dark-mode .address-card-actions {
    border-top-color: #333;
}

.dark-mode .address-modal-overlay {
    background: rgba(0,0,0,0.7);
}

.dark-mode .address-modal,
.dark-mode .address-modal-header,
.dark-mode .address-modal-footer {
    background: #1e1e2e;
}

.dark-mode .address-modal-header {
    border-bottom-color: #333;
}

.dark-mode .address-modal-footer {
    border-top-color: #333;
}

.dark-mode .address-modal-header h3 {
    color: #ddd;
}

.dark-mode .address-modal-close {
    background: #333;
    color: #ccc;
}

.dark-mode .address-modal-close:hover {
    background: #4a2020;
    color: #ff6b6b;
}

.dark-mode .address-modal-body .form-group label {
    color: #aaa;
}

.dark-mode .address-modal-body .form-group input[type="text"] {
    background: #2a2a3a;
    border-color: #444;
    color: #ddd;
}

.dark-mode .address-modal-body .form-group input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.dark-mode .address-select {
    background: #2a2a3a;
    border-color: #444;
    color: #ddd;
}

.dark-mode .address-select:focus {
    border-color: var(--primary);
}

.dark-mode .address-default-row {
    border-top-color: #333;
}

.dark-mode .address-default-slider {
    background: #555;
}

.dark-mode .address-default-switch input:checked + .address-default-slider {
    background: var(--primary);
}

.dark-mode .address-default-text {
    color: #ddd;
}

/* ============================================================
   响应式 - 收货地址簿
   ============================================================ */

@media (max-width: 640px) {
    .address-card {
        padding: 12px 14px;
    }

    .address-name-phone {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .address-card-actions {
        flex-wrap: wrap;
    }

    .address-card-actions .btn-small {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .address-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin-top: auto;
        align-self: flex-end;
        animation: slideUpMobile 0.25s ease-out;
    }

    @keyframes slideUpMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .address-modal-body {
        padding: 12px 16px;
    }

    .address-modal-header {
        padding: 14px 16px;
    }

    .address-modal-footer {
        padding: 12px 16px;
    }
}

/* ============================================================
   店铺收款设置
   ============================================================ */

/* 状态提示条 */
.shop-payment-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 14px;
}

.shop-payment-status-success {
    background: #e6f7e9;
    color: #0d904f;
    border: 1px solid #b7ebc2;
}

.shop-payment-status-error {
    background: #fce8e6;
    color: #d93025;
    border: 1px solid #f5c6cb;
}

/* 配置卡片 */
.shop-payment-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color var(--transition);
}

.shop-payment-card:hover {
    border-color: var(--primary);
}

.shop-payment-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-gray);
}

.shop-payment-card-header h4 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.shop-payment-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shop-payment-icon.alipay-icon {
    background: #e8f4ff;
}

.shop-payment-icon.wechat-icon {
    background: #e8f8ee;
}

.shop-config-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 10px;
}

.shop-config-status.status-active {
    background: #e6f7e9;
    color: #0d904f;
}

.shop-config-status.status-disabled {
    background: #f0f0f0;
    color: #999;
}

.shop-config-status.status-none {
    background: #fff3e0;
    color: #e37400;
}

.shop-payment-card-header .btn {
    margin-left: auto;
    flex-shrink: 0;
}

.shop-payment-card-body {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.shop-payment-card-body .form-group {
    margin-bottom: 12px;
}

.shop-payment-card-body .form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.shop-payment-card-body .form-group input[type="text"],
.shop-payment-card-body .form-group textarea,
.shop-payment-card-body .shop-select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-white);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color var(--transition);
}

.shop-payment-card-body .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.shop-payment-card-body .form-group input:focus,
.shop-payment-card-body .form-group textarea:focus,
.shop-payment-card-body .shop-select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.shop-payment-card-body .shop-select {
    cursor: pointer;
    appearance: auto;
}

.shop-form-actions {
    padding-top: 4px;
}

/* 温馨提示 */
.shop-payment-tips {
    margin-top: 16px;
    background: var(--bg-gray);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.shop-payment-tips h5 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.shop-payment-tips ul {
    margin: 0;
    padding-left: 18px;
}

.shop-payment-tips li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.shop-payment-tips code {
    background: var(--bg-white);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* ============================================================
   深色模式 - 店铺收款设置
   ============================================================ */

.dark-mode .shop-payment-card {
    background: #1e1e2e;
    border-color: #333;
}

.dark-mode .shop-payment-card:hover {
    border-color: var(--primary);
}

.dark-mode .shop-payment-card-header {
    background: #252535;
}

.dark-mode .shop-payment-card-header h4 {
    color: #ddd;
}

.dark-mode .shop-payment-icon.alipay-icon {
    background: #1a2a4a;
}

.dark-mode .shop-payment-icon.wechat-icon {
    background: #1a3a2a;
}

.dark-mode .shop-config-status.status-active {
    background: #1a3a2a;
    color: #4caf50;
}

.dark-mode .shop-config-status.status-disabled {
    background: #2a2a3a;
    color: #777;
}

.dark-mode .shop-config-status.status-none {
    background: #2a2a1a;
    color: #ffb74d;
}

.dark-mode .shop-payment-card-body {
    border-top-color: #333;
}

.dark-mode .shop-payment-card-body .form-group label {
    color: #aaa;
}

.dark-mode .shop-payment-card-body .form-group input[type="text"],
.dark-mode .shop-payment-card-body .form-group textarea,
.dark-mode .shop-payment-card-body .shop-select {
    background: #2a2a3a;
    border-color: #444;
    color: #ddd;
}

.dark-mode .shop-payment-card-body .form-group input:focus,
.dark-mode .shop-payment-card-body .form-group textarea:focus,
.dark-mode .shop-payment-card-body .shop-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.dark-mode .shop-payment-tips {
    background: #222232;
}

.dark-mode .shop-payment-tips h5 {
    color: #ddd;
}

.dark-mode .shop-payment-tips li {
    color: #aaa;
}

.dark-mode .shop-payment-tips code {
    background: #2a2a3a;
    border-color: #444;
    color: #ddd;
}

.dark-mode .shop-payment-status-success {
    background: #1a3a2a;
    color: #4caf50;
    border-color: #2a4a3a;
}

.dark-mode .shop-payment-status-error {
    background: #2a1a1a;
    color: #ff6b6b;
    border-color: #4a2020;
}

/* ============================================================
   v5 新增 - 移动端底部导航栏（类 App 底部 Tab）
   ============================================================ */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --bottom-nav-h: 56px;
    }

    /* body 底部留白，避免内容被导航遮挡 */
    body {
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    /* ===== 底部导航容器 ===== */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bg-white, #fff);
        border-top: 1px solid var(--border, #e5e5e5);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
        z-index: 1000;
        justify-content: space-around;
        align-items: stretch;
    }

    /* ===== 导航项 ===== */
    .mbn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-muted, #999);
        text-decoration: none;
        font-size: 10px;
        line-height: 1;
        padding: 4px 2px 2px;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mbn-item:hover {
        color: var(--text-muted, #999);
    }

    .mbn-item.active,
    .mbn-item:active {
        color: var(--primary, #1a73e8);
    }

    /* ===== 图标容器 ===== */
    .mbn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }

    .mbn-icon svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    /* ===== 标签文字 ===== */
    .mbn-label {
        white-space: nowrap;
    }

    /* ===== 回到顶部按钮调整 ===== */
    .back-to-top {
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* ===== 聊天页底部输入区适配 ===== */
    .chat-input-area {
        margin-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== 深色模式适配 ===== */
.dark-mode .mobile-bottom-nav {
    background: var(--bg-dark-card, #1a1a2e);
    border-top-color: var(--border, #2a2a3a);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .mbn-item:hover {
    color: var(--text-muted, #888);
}

.dark-mode .mbn-item.active,
.dark-mode .mbn-item:active {
    color: var(--primary, #4dabf7);
}

/* ===== 深色模式 - 顶部频道导航 ===== */
.dark-mode .mobile-top-tabs {
    background: var(--bg-dark-card, #1a1a2e);
    border-bottom-color: var(--border, #2a2a3a);
}

/* ========== 全局购物车样式 ========== */

/* 导航购物车图标 */
.nav-cart-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 4px;
}

.nav-cart-icon {
    transition: transform 0.2s;
}

.nav-cart-link:hover .nav-cart-icon {
    transform: scale(1.1);
}

.nav-cart-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 0.625rem;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
}

/* 卡片加入购物车按钮 */
.card-cart-action {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--border-light, #f0f0f0);
}

.btn-card-add-cart {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 18px;
    background: var(--bg-white, #fff);
    color: var(--text-secondary, #666);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-card-add-cart:hover {
    background: linear-gradient(135deg, #ff2442, #ff4057);
    border-color: transparent;
    color: #fff;
}

.btn-card-add-cart:hover svg {
    stroke: #fff;
}

.btn-card-add-cart.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 详情页加入购物车按钮 */
.btn-purchase-cart {
    display: block;
    width: 100%;
    padding: 9px 0;
    margin-top: 8px;
    background: #fff;
    color: #ff2442;
    border: 1.5px solid #ff2442;
    border-radius: 22px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-purchase-cart:hover {
    background: rgba(255, 36, 66, 0.05);
}

.btn-purchase-cart:active {
    transform: scale(0.97);
}

/* 移动端悬浮条购物车按钮 */
.btn-purchase-sticky-cart {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    transition: all 0.2s;
}

.btn-purchase-sticky-cart:hover {
    border-color: #ff2442;
    color: #ff2442;
}

/* 全局购物车 Toast */
.card-cart-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: #fff;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 0.875rem;
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-cart-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.card-cart-toast-error {
    background: #e74c3c;
}

/* 暗色模式购物车 */
.dark-mode .btn-card-add-cart {
    background: var(--bg-dark-card, #1a1a2e);
    border-color: var(--border, #3a3a4a);
    color: var(--text-secondary, #aaa);
}

.dark-mode .btn-card-add-cart:hover {
    background: linear-gradient(135deg, #ff2442, #ff4057);
    color: #fff;
    border-color: transparent;
}

.dark-mode .btn-purchase-cart {
    background: transparent;
    color: #ff6b81;
    border-color: #ff6b81;
}

.dark-mode .btn-purchase-cart:hover {
    background: rgba(255, 107, 129, 0.1);
}

.dark-mode .btn-purchase-sticky-cart {
    border-color: #555;
    color: #aaa;
}

.dark-mode .card-cart-action {
    border-top-color: var(--border, #2a2a3a);
}

/* ===== 全局购物车 Toast 响应式定位 ===== */
@media (max-width: 768px) {
    .card-cart-toast {
        bottom: 120px;
        left: 5%;
        right: 5%;
        max-width: none;
        transform: translateY(20px);
        font-size: 0.8rem;
        padding: 10px 16px;
        white-space: normal;
        text-align: center;
    }
    .card-cart-toast.visible {
        transform: translateY(0);
    }
}

/* ===== 平板端：购买侧栏优化 (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .demand-detail-main {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 20px;
    }
    .demand-info-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* 侧边栏转为紧凑双列 */
    .demand-detail-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .demand-detail-sidebar .user-card {
        grid-column: 1 / -1;
    }

    /* 购买卡：水平两栏布局 */
    .purchase-sidebar-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 24px;
        padding: 20px 24px;
        position: static;
    }

    /* 左侧：价格 + 元信息 + 统计 */
    .purchase-sidebar-card::before {
        content: '';
        display: block;
        width: 100%;
    }
    .purchase-price-section {
        order: 0;
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    .purchase-price-num { font-size: 1.5rem; }
    .purchase-cat-row { order: 1; }
    .purchase-service-row { order: 2; }
    .purchase-payment-methods { order: 3; }
    .purchase-stats-row {
        order: 4;
        border: none;
        padding: 0;
        margin: 0;
    }

    /* 右侧：数量 + 合计 + 按钮 */
    .purchase-qty-row {
        order: 5;
        flex: 1 0 auto;
        justify-content: flex-end;
        gap: 14px;
        margin: 0;
    }
    .purchase-total-row {
        order: 6;
        justify-content: flex-end;
        padding: 0;
        border: none;
        flex: 0 0 auto;
    }
    .btn-purchase-primary {
        order: 7;
        width: auto;
        min-width: 140px;
    }
    .btn-purchase-cart {
        order: 8;
        width: auto;
        min-width: 140px;
    }
    .purchase-hint {
        order: 9;
        width: 100%;
        text-align: right;
        margin-top: 4px;
        font-size: 0.75rem;
    }
}

/* ===== 手机端悬浮购买条增强 (≤ 480px 细分) ===== */
@media (max-width: 480px) {
    .purchase-sticky-bar {
        padding: 8px 10px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px));
    }
    .purchase-bar-left {
        flex: 1;
        min-width: 0;
        flex-wrap: wrap;
        gap: 3px;
    }
    .purchase-bar-symbol { font-size: 0.75rem; }
    .purchase-bar-price { font-size: 1.05rem; }
    .purchase-bar-sold { font-size: 0.65rem; display: none; }
    .btn-purchase-sticky {
        padding: 9px 16px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    .btn-purchase-sticky-cart {
        padding: 6px;
        flex-shrink: 0;
    }
    .btn-purchase-sticky-cart svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== 极小屏购买条 (≤ 374px) ===== */
@media (max-width: 374px) {
    .purchase-sticky-bar {
        padding: 6px 8px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }
    .purchase-bar-price { font-size: 0.95rem; }
    .purchase-bar-suffix { font-size: 0.65rem; }
    .btn-purchase-sticky {
        padding: 7px 12px;
        font-size: 0.78rem;
        border-radius: 20px;
    }
    .btn-purchase-sticky-cart {
        padding: 5px;
    }
    .btn-purchase-sticky-cart svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== 导航栏购物车图标 - 小屏优化 ===== */
@media (max-width: 480px) {
    .nav-cart-link {
        padding: 4px 6px;
    }
    .nav-cart-icon {
        width: 16px;
        height: 16px;
    }
    .nav-cart-badge {
        top: -5px;
        right: -8px;
        min-width: 14px;
        height: 14px;
        font-size: 0.563rem;
        line-height: 14px;
    }
}

/* ===== 可变产品：变体属性选择器 ===== */
.purchase-variation-attrs {
    margin-bottom: 16px;
}
.purchase-attr-group {
    margin-bottom: 12px;
}
.purchase-attr-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    margin-bottom: 6px;
    font-weight: 600;
}
.purchase-attr-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.purchase-attr-btn {
    padding: 6px 14px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-white, #fff);
    color: var(--text, #333);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
    min-width: 44px;
    text-align: center;
}
.purchase-attr-btn:hover {
    border-color: var(--primary, #1a73e8);
    color: var(--primary, #1a73e8);
}
.purchase-attr-btn.active {
    background: var(--primary, #1a73e8);
    color: #fff;
    border-color: var(--primary, #1a73e8);
}
.purchase-attr-btn.unavailable {
    color: #ccc;
    border-color: #e8e8e8;
    background: #f9f9f9;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.55;
}
.purchase-attr-btn.unavailable:hover {
    border-color: #e8e8e8;
    color: #ccc;
}

/* 无匹配变体库存提示 */
.purchase-stock-none {
    color: #e74c3c;
    font-weight: 500;
}

.purchase-var-info {
    margin-bottom: 8px;
}
.purchase-var-sku {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
}

/* ===== 可变产品：变体构建器（发布页） ===== */
.variation-builder {
    background: var(--bg-hover, #f9fafb);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}
.variation-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.variation-header-row h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.attr-def-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.attr-name-input {
    flex: 0 0 140px;
    padding: 6px 10px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 5px;
    font-size: 0.875rem;
}
.attr-values-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 5px;
    font-size: 0.875rem;
}

/* ===== 移动端优化：属性卡片 & 标签芯片 ===== */
.attr-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}
.attr-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.attr-card-header .attr-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}
.attr-card-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted, #999);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.attr-card-remove:hover {
    background: var(--danger-bg, #fee2e2);
    color: var(--danger, #ef4444);
}
.attr-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.attr-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.attr-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--tag-bg, #eef2ff);
    border: 1px solid var(--tag-border, #c7d2fe);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--tag-color, #4338ca);
    animation: tagPopIn 0.2s ease-out;
}
@keyframes tagPopIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.attr-tag-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attr-tag-remove {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.1);
    color: var(--tag-color, #4338ca);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s;
}
.attr-tag-remove:hover { background: var(--danger, #ef4444); color: #fff; }
.attr-tag-input {
    flex: 1;
    min-width: 120px;
    padding: 6px 12px;
    border: 1px dashed var(--border, #d0d0d0);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-card, #fff);
    outline: none;
    transition: border-color 0.15s;
}
.attr-tag-input:focus { border-color: var(--primary, #2563eb); border-style: solid; }
.attr-values-hidden { display: none; }

/* ===== 空状态 ===== */
.var-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    border: 2px dashed var(--border, #e0e0e0);
    border-radius: 12px;
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 0.85rem;
}

/* ===== 变体区域标题 ===== */
.var-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 12px;
    flex-wrap: wrap;
}
.var-section-title-wrap { flex: 1; min-width: 0; }
.var-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.var-section-desc {
    display: block;
    color: var(--text-muted, #999);
    font-size: 0.78rem;
    font-weight: 400;
    margin-top: 3px;
}
.var-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0 7px;
}
.var-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ===== 快速操作工具栏 ===== */
.var-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--border, #eee);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.var-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid var(--border, #d0d0d0);
    border-radius: 20px;
    background: var(--bg-card, #fff);
    color: var(--text, #333);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.var-toolbar-btn:hover { background: var(--bg-hover, #f3f4f6); border-color: var(--primary, #2563eb); }
.var-toolbar-btn-danger { color: var(--danger, #ef4444); }
.var-toolbar-btn-danger:hover { background: var(--danger-bg, #fee2e2); border-color: var(--danger, #ef4444); }

/* ===== 响应式显示控制 ===== */
.var-desktop-only { display: block; }
.var-mobile-only { display: none; }
@media (max-width: 768px) {
    .var-desktop-only { display: none !important; }
    .var-mobile-only { display: block; }
}

/* ===== 移动端变体卡片 ===== */
.var-cards-container { display: flex; flex-direction: column; gap: 10px; }
.var-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.var-card:active { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.var-card-inactive { opacity: 0.55; }

/* 卡片头部 - 可折叠 */
.var-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.var-card-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted, #999);
    transition: transform 0.2s;
}
.var-card-expanded .var-card-toggle { transform: rotate(180deg); }
.var-card-chevron { transition: transform 0.2s; }

.var-card-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.var-card-attrs {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.var-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
}
.var-card-price { color: var(--price-color, #ef4444); font-weight: 600; }
.var-card-stock { color: var(--text-muted, #999); }
.var-card-sku-hint {
    color: var(--text-muted, #bbb);
    font-size: 0.72rem;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 卡片开关 */
.var-card-enable-switch {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.var-card-enable-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.var-card-switch-track {
    display: block;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--border, #d0d0d0);
    position: relative;
    transition: background 0.25s;
}
.var-card-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.25s;
}
.var-card-enable-switch input:checked + .var-card-switch-track {
    background: var(--primary, #2563eb);
}
.var-card-enable-switch input:checked + .var-card-switch-track::after {
    transform: translateX(18px);
}

/* 卡片展开体 */
.var-card-body {
    display: none;
    padding: 0 12px 14px;
    border-top: 1px solid var(--border, #eee);
}
.var-card-expanded .var-card-body { display: block; }

.var-card-fields { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.var-card-field { display: flex; flex-direction: column; gap: 4px; }
.var-card-field-row { display: flex; gap: 10px; }
.var-card-field-half { flex: 1; min-width: 0; }
.var-card-label {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    font-weight: 500;
}
.var-card-input {
    padding: 9px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--bg-input, #fafafa);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.var-card-input:focus {
    border-color: var(--primary, #2563eb);
    background: var(--bg-card, #fff);
    outline: none;
}
.var-card-actions {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.var-card-btn-remove {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: var(--danger-bg, #fee2e2);
    color: var(--danger, #ef4444);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.var-card-btn-remove:hover { background: var(--danger, #ef4444); color: #fff; }

/* ===== 移动端底部固定操作栏 ===== */
.publish-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: var(--bg-card, #fff);
    border-top: 1px solid var(--border, #e5e5e5);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    gap: 10px;
    flex-direction: row;
    align-items: center;
    min-height: 60px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
}
.publish-mobile-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.publish-mobile-btn:active { transform: scale(0.97); }
.publish-mobile-draft {
    flex: 0 0 auto;
    min-width: 110px;
    background: var(--bg-hover, #f3f4f6);
    color: var(--text, #555);
}
.publish-mobile-draft:hover { background: var(--border, #e0e0e0); }
.publish-mobile-submit {
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(37,99,235,0.25);
}
.publish-mobile-submit:hover { background: var(--primary-dark, #1d4ed8); box-shadow: 0 4px 15px rgba(37,99,235,0.35); }

/* 移动端显示底部栏，页面内发布按钮也保持可见 */
@media (max-width: 768px) {
    .publish-mobile-bar { display: flex !important; }
    .publish-form { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== 暗色模式适配 ===== */
[data-theme="dark"] .attr-card { background: #1e2235; border-color: #2d3348; }
[data-theme="dark"] .attr-card-header .attr-name-input { background: #161925; border-color: #2d3348; color: #e2e8f0; }
[data-theme="dark"] .attr-tag { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.3); color: #a5b4fc; }
[data-theme="dark"] .attr-tag-remove { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .attr-tag-remove:hover { background: var(--danger, #ef4444); }
[data-theme="dark"] .attr-tag-input { background: #161925; border-color: #2d3348; color: #e2e8f0; }
[data-theme="dark"] .attr-tag-input:focus { border-color: var(--primary, #3b82f6); }
[data-theme="dark"] .var-empty-state { border-color: #2d3348; color: #64748b; }
[data-theme="dark"] .var-toolbar { border-color: #2d3348; }
[data-theme="dark"] .var-toolbar-btn { background: #1e2235; border-color: #2d3348; color: #cbd5e1; }
[data-theme="dark"] .var-toolbar-btn:hover { background: #2a2f45; }
[data-theme="dark"] .var-card { background: #1e2235; border-color: #2d3348; }
[data-theme="dark"] .var-card-body { border-color: #2d3348; }
[data-theme="dark"] .var-card-input { background: #161925; border-color: #2d3348; color: #e2e8f0; }
[data-theme="dark"] .var-card-input:focus { background: #1e2235; border-color: var(--primary, #3b82f6); }
[data-theme="dark"] .var-card-btn-remove { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .publish-mobile-bar { background: #1a1d2e; border-color: #2d3348; }
[data-theme="dark"] .publish-mobile-draft { background: #272a3d; color: #cbd5e1; }
[data-theme="dark"] .publish-mobile-submit { background: var(--primary, #3b82f6); color: #fff; box-shadow: 0 2px 12px rgba(59,130,246,0.3); }

.variation-table-wrapper {
    overflow-x: auto;
    margin-bottom: 8px;
}
.variation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.variation-table th {
    background: var(--bg-hover, #f0f0f0);
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: 2px solid var(--border, #e0e0e0);
}
.variation-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border, #f0f0f0);
    vertical-align: middle;
}
.variation-table input[type="text"],
.variation-table input[type="number"] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 4px;
    font-size: 0.8rem;
    box-sizing: border-box;
}
.var-attrs-input { min-width: 160px; }
.var-sku-input { min-width: 80px; }
.var-price-input { min-width: 70px; }
.var-stock-input { min-width: 60px; }

/* ===== 成组产品：子产品选择器（发布页） ===== */
.grouped-builder {
    background: var(--bg-hover, #f9fafb);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}
.grouped-search-row {
    position: relative;
    margin: 12px 0;
}
.grouped-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.grouped-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.grouped-search-item {
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border, #f5f5f5);
}
.grouped-search-item:hover {
    background: var(--bg-hover, #f0f4ff);
}
.grouped-search-title {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text, #333);
}
.grouped-search-price {
    color: var(--primary, #e63946);
    font-weight: 600;
    font-size: 0.85rem;
    margin-left: 12px;
}
.grouped-children-list {
    margin-top: 12px;
}
.grouped-child-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--bg-white, #fff);
}
.grouped-child-title {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text, #333);
}
.grouped-child-price {
    color: var(--primary, #e63946);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ===== 成组产品：子产品列表（详情页） ===== */
.grouped-children-section {
    margin-top: 28px;
    padding: 24px 0 0;
    border-top: 1px solid var(--border, #e0e0e0);
}
.grouped-children-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.grouped-children-title svg { color: var(--primary, #2563eb); }
.grouped-children-table-wrapper {
    overflow-x: auto;
}
.grouped-children-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.grouped-children-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f5 100%);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border, #e0e0e0);
    letter-spacing: 0.02em;
}
.grouped-children-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #f0f0f0);
}
.grouped-children-table tbody tr:hover {
    background: var(--bg-hover, #f8f9ff);
}
.grouped-children-table tbody tr:last-child td {
    border-bottom: none;
}
    border-bottom: 1px solid var(--border, #f0f0f0);
    vertical-align: middle;
}
.grouped-child-row:hover td {
    background: var(--bg-hover, #fafbfc);
}
.grouped-child-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.grouped-child-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, #eee);
}
.grouped-child-name {
    font-weight: 600;
    color: var(--text, #333);
    text-decoration: none;
    font-size: 0.9rem;
}
.grouped-child-name:hover {
    color: var(--primary, #1a73e8);
}
.grouped-child-seller {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    margin-top: 2px;
}
.grouped-child-price {
    color: var(--primary, #e63946);
    font-weight: 700;
    font-size: 1rem;
}
.grouped-child-stock {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
}
.grouped-child-soldout {
    color: #e63946;
    font-size: 0.8rem;
    font-weight: 600;
}
.grouped-child-qty {
    display: inline-flex;
}
.grouped-child-qty-input {
    width: 46px !important;
}
.grouped-child-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* ===== 暗色模式：变体和成组产品 ===== */
.dark-mode .variation-builder,
.dark-mode .grouped-builder {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .variation-table th {
    background: #2a2a3e;
    border-color: #444;
}
.dark-mode .grouped-children-table th {
    background: #2a2a3e;
    border-color: #444;
    color: #aaa;
}
.dark-mode .grouped-child-row:hover td {
    background: #1e1e2e;
}
.dark-mode .purchase-attr-btn {
    background: #2a2a3e;
    border-color: #444;
    color: #ccc;
}
.dark-mode .purchase-attr-btn:hover {
    border-color: #5b9cf5;
    color: #5b9cf5;
}
.dark-mode .purchase-attr-btn.active {
    background: #4a6cf7;
    border-color: #4a6cf7;
}
.dark-mode .purchase-attr-btn.unavailable {
    background: #1c1c2e;
    border-color: #333;
    color: #555;
}
.dark-mode .purchase-attr-btn.unavailable:hover {
    border-color: #333;
    color: #555;
}
.dark-mode .grouped-search-item:hover {
    background: #2a2a3e;
}
.dark-mode .attr-name-input,
.dark-mode .attr-values-input,
.dark-mode .variation-table input[type="text"],
.dark-mode .variation-table input[type="number"],
.dark-mode .grouped-search {
    background: #1a1a2e;
    border-color: #444;
    color: #ddd;
}
.dark-mode .grouped-search-dropdown {
    background: #1e1e2e;
    border-color: #444;
}
.dark-mode .grouped-child-item {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .grouped-child-name {
    color: #ddd;
}

/* 深色模式：可变产品价格区间 */
.dark-mode .purchase-price-sep,
.dark-mode .purchase-bar-sep,
.dark-mode .price-range-sep {
    color: #666;
}
.dark-mode .price-variable {
    color: #ff6b81;
}

/* ============================================================
   可见性设置 (WooCommerce 风格)
   ============================================================ */
.visibility-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.visibility-option-card {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px solid var(--border, #e0e0e0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-white, #fff);
    text-align: center;
    user-select: none;
}

.visibility-option-card:hover {
    border-color: var(--primary-light, #c5d5f7);
    background: var(--bg-gray, #f8f9ff);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.visibility-option-card.active {
    border-color: var(--primary, #4a6cf7);
    background: var(--primary-light, #eef2ff);
    box-shadow: 0 0 0 3px rgba(74,108,247,0.1);
}

.visibility-option-card .visibility-icon {
    color: var(--text-muted, #999);
    transition: color 0.2s;
}

.visibility-option-card.active .visibility-icon {
    color: var(--primary, #4a6cf7);
}

.visibility-option-card .visibility-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #333);
}

.visibility-option-card .visibility-desc {
    font-size: 0.78rem;
    color: var(--text-muted, #999);
    line-height: 1.3;
}

/* 密码输入组 */
.password-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    transition: border-color 0.2s;
}

.password-input-group:focus-within {
    border-color: var(--primary, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74,108,247,0.1);
}

.password-input-group input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: 0.9rem;
    background: transparent;
    color: var(--text-primary, #333);
}

.password-input-group input::placeholder {
    color: var(--text-muted, #bbb);
}

.password-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: none;
    border: none;
    color: var(--text-muted, #999);
    cursor: pointer;
    transition: color 0.15s;
}

.password-toggle-btn:hover {
    color: var(--primary, #4a6cf7);
}

/* 密码保护页面 */
.password-protect-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.password-protect-card {
    background: var(--bg-white, #fff);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.password-protect-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary, #4a6cf7);
    opacity: 0.8;
}

.password-protect-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary, #222);
}

.password-protect-desc {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    margin: 0 0 24px;
}

.password-protect-card .alert-error {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 8px;
    color: #cf1322;
    font-size: 0.85rem;
}

.password-form {
    margin-bottom: 0;
}

.password-form .password-form-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.password-form .password-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    font-size: 0.95rem;
    outline: none;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #333);
    text-align: center;
    letter-spacing: 2px;
    transition: border-color 0.2s;
}

.password-form .password-input:focus {
    border-color: var(--primary, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74,108,247,0.1);
}

.password-back-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted, #999);
    text-decoration: none;
    transition: color 0.15s;
}

.password-back-link:hover {
    color: var(--primary, #4a6cf7);
}

.dark-mode .password-protect-card {
    background: #1e1e2e;
    border: 1px solid #333;
}

.dark-mode .password-protect-card h2 {
    color: #e0e0e0;
}

.dark-mode .password-protect-card .alert-error {
    background: #3a1a1a;
    border-color: #5c1a1a;
    color: #ff7777;
}

.dark-mode .password-form .password-input {
    background: #1a1a2e;
    border-color: #444;
    color: #ddd;
}

.dark-mode .visibility-option-card {
    background: #1e1e2e;
    border-color: #333;
}

.dark-mode .visibility-option-card:hover {
    background: #252540;
    border-color: #444;
}

.dark-mode .visibility-option-card.active {
    border-color: #5b7ef5;
    background: #1a2540;
}

.dark-mode .password-input-group {
    border-color: #444;
    background: #1a1a2e;
}

.dark-mode .password-input-group input {
    color: #ddd;
}

/* ============================================================
   发布栏目 (WooCommerce 风格)
   ============================================================ */

/* --- 发布栏目容器 --- */
.publish-meta-box {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
}

.publish-meta-box:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* --- 发布栏目头部 --- */
.publish-meta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-gray, #f8f9fb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition: background 0.15s;
}

.publish-meta-header:hover {
    background: var(--bg, #f0f2f5);
}

.publish-meta-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.publish-meta-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary, #4a6cf7);
    color: #fff;
    flex-shrink: 0;
}

.publish-meta-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1a2e);
    line-height: 1.2;
}

.publish-meta-header-desc {
    font-size: 0.78rem;
    color: var(--text-muted, #999);
    margin: 0;
    line-height: 1.3;
}

.publish-meta-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.publish-meta-toggle-icon {
    font-size: 1.1rem;
    color: var(--text-muted, #999);
    transition: transform 0.2s;
}

/* --- 发布栏目主体 --- */
.publish-meta-body {
    padding: 16px 20px;
    transition: opacity 0.2s;
}

/* --- 发布栏目行 --- */
.publish-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border, #eee);
    position: relative;
}

.publish-meta-row:last-of-type {
    border-bottom: none;
}

.publish-meta-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #555);
    min-width: 75px;
    flex-shrink: 0;
}

.publish-meta-value {
    font-size: 0.85rem;
    color: var(--text-primary, #333);
    font-weight: 500;
    flex: 1;
}

/* --- 编辑链接 --- */
.publish-edit-link {
    font-size: 0.78rem;
    color: var(--primary, #4a6cf7);
    text-decoration: none;
    font-weight: 500;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.publish-edit-link:hover {
    background: var(--primary-light, #eef2ff);
    text-decoration: underline;
}

/* --- 编辑面板 --- */
.publish-edit-panel {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: var(--bg-gray, #f8f9fb);
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
}

/* --- 可见性单选列表 --- */
.visibility-radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visibility-radio-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.visibility-radio-item:hover {
    background: var(--bg-white, #fff);
    border-color: var(--border, #e5e7eb);
}

.visibility-radio-item input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--primary, #4a6cf7);
    flex-shrink: 0;
}

.vis-radio-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vis-radio-text strong {
    font-size: 0.88rem;
    color: var(--text-primary, #333);
}

.vis-radio-text small {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
}

/* --- 发布时间类型 --- */
.publish-date-type {
    display: flex;
    gap: 20px;
}

.publish-date-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--text-primary, #333);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
    transition: all 0.15s;
}

.publish-date-radio:hover {
    border-color: var(--primary, #4a6cf7);
    background: var(--primary-light, #f0f4ff);
}

.publish-date-radio input[type="radio"] {
    accent-color: var(--primary, #4a6cf7);
}

/* --- 预定时间选择器 --- */
.publish-schedule-fields {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.schedule-date-col,
.schedule-time-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.schedule-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-at-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted, #999);
    padding-bottom: 8px;
}

.schedule-date-input,
.schedule-time-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #333);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.schedule-date-input:focus,
.schedule-time-input:focus {
    border-color: var(--primary, #4a6cf7);
    box-shadow: 0 0 0 3px rgba(74,108,247,0.1);
}

/* --- 编辑面板按钮 --- */
.publish-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border, #e5e7eb);
}

/* --- 主发布按钮 --- */
.publish-meta-primary-action {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.btn-publish-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary, #4a6cf7);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(74,108,247,0.25);
}

.btn-publish-submit:hover {
    background: var(--primary-dark, #3451d1);
    box-shadow: 0 4px 16px rgba(74,108,247,0.4);
    transform: translateY(-1px);
}

.btn-publish-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(74,108,247,0.2);
}

.btn-publish-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- 次要操作按钮 --- */
.publish-meta-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    justify-content: center;
}

.publish-action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--text-secondary, #666);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}

.publish-action-link:hover {
    color: var(--primary, #4a6cf7);
    background: var(--bg-gray, #f5f5f5);
}

.publish-action-link svg {
    flex-shrink: 0;
}

.publish-action-cancel {
    color: #e74c3c;
}

.publish-action-cancel:hover {
    color: #c0392b;
    background: #fdf2f2;
}

/* --- 深色模式 --- */
.dark-mode .publish-meta-box {
    background: #1e1e2e;
    border-color: #333;
}

.dark-mode .publish-meta-header {
    background: #252540;
    border-bottom-color: #333;
}

.dark-mode .publish-meta-header:hover {
    background: #2a2a45;
}

.dark-mode .publish-meta-header h3 {
    color: #e0e0e0;
}

.dark-mode .publish-meta-label {
    color: #aaa;
}

.dark-mode .publish-meta-value {
    color: #ddd;
}

.dark-mode .publish-meta-row {
    border-bottom-color: #2a2a3e;
}

.dark-mode .publish-edit-panel {
    background: #1a1a2e;
    border-color: #333;
}

.dark-mode .visibility-radio-item {
    background: #1a1a2e;
}

.dark-mode .visibility-radio-item:hover {
    background: #252540;
    border-color: #444;
}

.dark-mode .vis-radio-text strong {
    color: #e0e0e0;
}

.dark-mode .schedule-date-input,
.dark-mode .schedule-time-input {
    background: #1a1a2e;
    border-color: #444;
    color: #ddd;
}

.dark-mode .schedule-date-input:focus,
.dark-mode .schedule-time-input:focus {
    border-color: #5b7ef5;
}

.dark-mode .publish-date-radio {
    color: #ddd;
    border-color: #444;
}

.dark-mode .publish-date-radio:hover {
    background: #252540;
    border-color: #5b7ef5;
}

.dark-mode .publish-edit-link:hover {
    background: #252540;
}

.dark-mode .publish-action-link {
    color: #aaa;
}

.dark-mode .publish-action-link:hover {
    color: #5b7ef5;
    background: #252540;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .publish-meta-header {
        padding: 12px 16px;
    }
    .publish-meta-body {
        padding: 12px 16px;
    }
    .publish-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .publish-meta-label {
        min-width: auto;
    }
    .publish-edit-link {
        margin-left: 0;
    }
    .publish-date-type {
        flex-direction: column;
        gap: 8px;
    }
    .publish-schedule-fields {
        flex-wrap: wrap;
    }
    .schedule-at-label {
        display: none;
    }
    .publish-meta-secondary-actions {
        justify-content: flex-start;
    }
}

/* ============================================================
   实名认证 - 页面样式（参照淘宝/抖音/微博）
   ============================================================ */

/* --- 认证主容器 --- */
.verify-container {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 16px;
}

.verify-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
    padding: 40px 32px;
}

/* --- 页面标题 --- */
.verify-header {
    text-align: center;
    margin-bottom: 32px;
}

.verify-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #111827);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.verify-header h1 svg {
    color: var(--primary, #6366f1);
    flex-shrink: 0;
}

.verify-subtitle {
    color: var(--text-muted, #6b7280);
    font-size: 14px;
    margin: 0;
}

/* --- 消息提示 --- */
.verify-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.verify-alert.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.verify-alert.error svg { color: #ef4444; flex-shrink: 0; margin-top: 1px; }

.verify-alert.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.verify-alert.success svg { color: #10b981; flex-shrink: 0; margin-top: 1px; }

/* --- 认证状态区块 --- */
.verify-status-block {
    text-align: center;
    padding: 40px 20px;
    border-radius: 14px;
    margin-bottom: 24px;
}

.verify-status-block.verified { background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border: 1px solid #bbf7d0; }
.verify-status-block.pending  { background: linear-gradient(135deg, #eff6ff, #f0f9ff); border: 1px solid #bfdbfe; }
.verify-status-block.rejected { background: linear-gradient(135deg, #fef2f2, #fff5f5); border: 1px solid #fecaca; }

.verify-status-icon {
    margin-bottom: 16px;
}

.verify-status-block.verified .verify-status-icon svg { color: #10b981; }
.verify-status-block.pending  .verify-status-icon svg { color: #f59e0b; }
.verify-status-block.rejected .verify-status-icon svg { color: #ef4444; }

.verify-status-block h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.verify-status-block.verified h2 { color: #059669; }
.verify-status-block.pending  h2 { color: #d97706; }
.verify-status-block.rejected h2 { color: #dc2626; }

.verify-status-block > p {
    color: var(--text-muted, #6b7280);
    font-size: 14px;
    margin: 0 0 20px;
}

/* 审核中旋转动画 */
.verify-status-animation {
    margin-bottom: 16px;
}

.pending-spinner {
    animation: verify-spin 2s linear infinite;
    color: #f59e0b;
}

@keyframes verify-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- 认证详情行 --- */
.verify-details {
    max-width: 360px;
    margin: 0 auto;
    background: rgba(255,255,255,.6);
    border-radius: 10px;
    padding: 16px 20px;
}

.verify-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: 14px;
}

.verify-detail-row:last-child { border-bottom: none; }

.verify-detail-label { color: var(--text-muted, #6b7280); }

.verify-detail-value {
    color: var(--text-primary, #111827);
    font-weight: 500;
}

/* --- 驳回原因 --- */
.verify-reject-reason {
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #991b1b;
    font-size: 14px;
    text-align: left;
}

/* --- 底部说明 --- */
.verify-footnote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
}

.verify-footnote svg { flex-shrink: 0; }

/* --- 提交表单 --- */
.verify-form {
    margin-top: 8px;
}

.verify-form-section {
    margin-bottom: 24px;
}

.verify-form-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 6px;
}

.form-hint {
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    margin: 0 0 16px;
}

.verify-form .form-group {
    margin-bottom: 18px;
}

.verify-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #374151);
    margin-bottom: 8px;
}

.verify-form .form-group label svg { color: var(--primary, #6366f1); flex-shrink: 0; }

.verify-form .form-group input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border, #d1d5db);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary, #111827);
    background: var(--input-bg, #f9fafb);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.verify-form .form-group input:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    background: var(--card-bg, #fff);
}

.verify-form .form-group.has-error input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.form-error {
    display: block;
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    min-height: 0;
}

/* --- 认证须知列表 --- */
.verify-notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.verify-notice-list li {
    position: relative;
    padding: 6px 0 6px 20px;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    line-height: 1.6;
}

.verify-notice-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary, #6366f1);
    opacity: .5;
}

/* --- 提交按钮 --- */
.form-actions {
    text-align: center;
    margin-top: 28px;
}

.btn-submit-verify {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 40px;
    background: var(--primary, #6366f1);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
}

.btn-submit-verify:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,.4);
}

.btn-submit-verify:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.btn-submit-verify svg { flex-shrink: 0; }

/* ============================================================
   认证徽章（仿淘宝/抖音 V 图标）
   ============================================================ */
.verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

.verify-badge.verified {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
    border: 1px solid #6ee7b7;
}

.verify-badge.verified svg { color: #10b981; }

.verify-badge.pending {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #93c5fd;
}

.verify-badge.pending svg { color: #3b82f6; }

.verify-badge.rejected {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.verify-badge.rejected svg { color: #ef4444; }

/* --- 迷你徽章（表格用） --- */
.verify-badge-mini {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.verify-badge-mini.verified { background: #ecfdf5; color: #059669; }
.verify-badge-mini.rejected { background: #fef2f2; color: #dc2626; }

/* ============================================================
   Profile 内联认证状态
   ============================================================ */
.verify-inline-success,
.verify-inline-pending,
.verify-inline-rejected,
.verify-inline-unverified {
    text-align: center;
    padding: 32px 20px;
}

.verify-inline-success h3 { color: #059669; font-size: 18px; margin: 12px 0 6px; }
.verify-inline-pending  h3 { color: #d97706; font-size: 18px; margin: 12px 0 6px; }
.verify-inline-rejected h3 { color: #dc2626; font-size: 18px; margin: 12px 0 6px; }
.verify-inline-unverified h3 { color: var(--text-muted, #6b7280); font-size: 18px; margin: 12px 0 6px; }

.verify-inline-success p,
.verify-inline-pending p,
.verify-inline-rejected p,
.verify-inline-unverified p {
    color: var(--text-muted, #6b7280);
    font-size: 14px;
    margin: 0 0 16px;
}

.reject-reason {
    color: #991b1b;
    background: #fef2f2;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    display: inline-block;
}

.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary, #6366f1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
}

.btn-primary-sm:hover { background: #4f46e5; color: #fff; text-decoration: none; }

.btn-link {
    color: var(--primary, #6366f1);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.btn-link:hover { text-decoration: underline; }

.verify-pending-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: verify-spin 1s linear infinite;
    margin: 0 auto;
}

/* ============================================================
   顶部提醒横幅
   ============================================================ */
.verify-reminder-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-bottom: 1px solid #c7d2fe;
    padding: 8px 16px;
    position: relative;
}

.verify-reminder-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #3730a3;
}

.verify-reminder-content svg { color: #6366f1; flex-shrink: 0; }

.verify-reminder-content a {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    background: var(--primary, #6366f1);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 8px;
    transition: background .2s;
}

.verify-reminder-content a:hover { background: #4f46e5; color: #fff; text-decoration: none; }

.verify-reminder-close {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.verify-reminder-close:hover { color: #6b7280; }

/* ============================================================
   管理员审核面板
   ============================================================ */
.verify-subtabs {
    display: flex;
    gap: 2px;
    background: var(--surface-bg, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 20px;
    width: fit-content;
}

.verify-subtab {
    padding: 7px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.verify-subtab.active {
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.verify-subtab:hover:not(.active) { color: var(--text-primary, #374151); }

.v-subtab-count {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

.verify-panel { display: none; }
.verify-panel.active { display: block; }

.verify-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted, #6b7280);
    font-size: 14px;
}

.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary, #6366f1);
    border-radius: 50%;
    animation: verify-spin .8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

.verify-actions { white-space: nowrap; }

.btn-approve {
    padding: 5px 14px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    transition: background .2s;
}

.btn-approve:hover { background: #059669; }
.btn-approve:disabled { opacity: .6; cursor: not-allowed; }

.btn-reject-verify {
    padding: 5px 14px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.btn-reject-verify:hover { background: #dc2626; }

.btn-danger {
    padding: 8px 20px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.btn-danger:hover { background: #dc2626; }
.btn-danger:disabled { opacity: .6; cursor: not-allowed; }

.btn-cancel {
    padding: 8px 20px;
    background: var(--surface-bg, #f3f4f6);
    color: var(--text-primary, #374151);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
}

.btn-cancel:hover { background: #e5e7eb; }

.verify-history-filter {
    margin-bottom: 16px;
}

.verify-history-filter select {
    padding: 8px 14px;
    border: 1.5px solid var(--border, #d1d5db);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, #374151);
    background: var(--card-bg, #fff);
    cursor: pointer;
}

/* --- 模态框 --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-box {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    padding: 28px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,.15);
}

.modal-sm { max-width: 420px; }

.modal-box h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 20px;
}

.modal-box .form-group {
    margin-bottom: 20px;
}

.modal-box .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #374151);
    margin-bottom: 6px;
}

.modal-box .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border, #d1d5db);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary, #111827);
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.modal-box .form-group textarea:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
    .verify-card {
        padding: 24px 16px;
    }

    .verify-header h1 { font-size: 20px; }

    .verify-status-block {
        padding: 24px 16px;
    }

    .verify-status-block h2 { font-size: 18px; }

    .verify-details {
        max-width: 100%;
        padding: 12px 14px;
    }

    .verify-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .btn-submit-verify {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .verify-reminder-banner {
        flex-direction: column;
        text-align: center;
        padding: 10px 16px;
    }

    .verify-reminder-content {
        flex-wrap: wrap;
        justify-content: center;
    }

    .verify-reminder-close {
        position: relative;
        right: auto;
        margin-top: 6px;
    }

    .verify-subtabs { width: 100%; }
    .verify-subtab { flex: 1; text-align: center; justify-content: center; }

    .verify-actions {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .btn-approve,
    .btn-reject-verify {
        margin-right: 0;
        text-align: center;
    }
}

/* ============================================================
   深色模式
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .verify-card {
        background: var(--dark-card-bg, #1f2937);
    }

    .verify-header h1 { color: #f9fafb; }

    .verify-status-block.verified { background: linear-gradient(135deg, #064e3b20, #065f4620); border-color: #065f4640; }
    .verify-status-block.pending  { background: linear-gradient(135deg, #1e3a5f20, #1e40af20); border-color: #1e40af40; }
    .verify-status-block.rejected { background: linear-gradient(135deg, #7f1d1d20, #991b1b20); border-color: #991b1b40; }

    .verify-details {
        background: rgba(255,255,255,.05);
    }

    .verify-detail-row { border-color: rgba(255,255,255,.06); }

    .verify-reject-reason { background: rgba(127,29,29,.15); border-color: rgba(153,27,27,.3); }

    .verify-form .form-group input {
        background: var(--dark-input-bg, #374151);
        border-color: #4b5563;
        color: #f9fafb;
    }

    .verify-form .form-group input:focus {
        background: var(--dark-card-bg, #1f2937);
    }

    .verify-reminder-banner {
        background: linear-gradient(135deg, #1e1b4b20, #312e8120);
        border-color: #4338ca40;
    }

    .verify-reminder-content { color: #c7d2fe; }
}




.landline-row {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 420px;
}
.landline-input {
    min-width: 0;
    flex: 1 1 auto;
}
.landline-input:first-child {
    flex: 0 0 88px;
    max-width: 88px;
}
.landline-input:nth-child(2) {
    flex: 1 1 180px;
    max-width: 200px;
}
.landline-input:last-child {
    flex: 0 0 96px;
    max-width: 96px;
}

/* 手机端：区号/分机允许收缩，电话号码框占满剩余空间，确保能完整输入 */
@media (max-width: 480px) {
    .landline-row {
        max-width: 100%;
        gap: 6px;
    }
    .landline-input:first-child {
        flex: 0 1 85px;
        max-width: 90px;
        min-width: 75px;
    }
    .landline-input:nth-child(2) {
        flex: 1 1 auto;
        max-width: none;
    }
    .landline-input:last-child {
        flex: 0 1 84px;
        max-width: 140px;
        min-width: 110px;
    }
}

/* ===== 账户注销危险区 ===== */
.danger-zone {
    margin-top: 32px;
    padding: 24px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-lg, 12px);
}
.danger-zone-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--danger, #ef4444);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.danger-zone-desc {
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    line-height: 1.6;
    margin: 0 0 8px;
}
.danger-zone .btn-danger {
    padding: 8px 20px;
    background: var(--danger, #ef4444);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.danger-zone .btn-danger:hover {
    background: #dc2626;
}
.deletion-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.deletion-notice {
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    min-width: 250px;
}
.dark .danger-zone {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== 管理后台-系统设置 ===== */
.settings-form {
    margin-top: 12px;
}
.setting-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.setting-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.setting-group label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin-bottom: 6px;
}
.setting-group input[type="number"],
.setting-group select {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #111827);
}
.setting-group select {
    min-width: 120px;
}
.setting-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

/* 注销确认弹窗关闭按钮 */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.modal-close-btn:hover {
    color: var(--text-primary, #111827);
}

/* ===== 订单改价 & 备注 & 倒计时样式 ===== */

/* 改价标签 */
.price-adjusted-tag {
    display: inline-block;
    background: #fff3e0;
    color: #e67700;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

/* 公开备注 */
.order-public-remark {
    font-size: 0.82rem;
    color: var(--accent-color, #4361ee);
    background: rgba(67, 97, 238, 0.06);
    border-left: 3px solid var(--accent-color, #4361ee);
    padding: 6px 12px;
    margin: 4px 0 8px;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* 私密备注 */
.order-private-remark {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    background: rgba(107, 114, 128, 0.06);
    border-left: 3px solid #ccc;
    padding: 6px 12px;
    margin: 4px 0 8px;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* 订单倒计时 */
.order-countdown {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    padding: 4px 0;
    margin: 0;
}

.order-countdown .countdown-text {
    margin-left: 4px;
}

/* 改价按钮 */
.btn-price-adjust {
    background: #fff3e0 !important;
    color: #e67700 !important;
    border: 1px solid #ffcc80 !important;
}
.btn-price-adjust:hover {
    background: #ffe0b2 !important;
}

/* 备注按钮 */
.btn-remark {
    background: #e8f0fe !important;
    color: #4361ee !important;
    border: 1px solid #c5d4f8 !important;
}
.btn-remark:hover {
    background: #d3e3fd !important;
}

/* 模态头部（改价/备注弹窗用） */
#adjust-price-modal .modal-header,
#remark-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

#adjust-price-modal .modal-header h3,
#remark-modal .modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.modal-close:hover {
    color: var(--text-primary, #111827);
}