/* ============================================
   图片导航站点 - 前台样式（电脑端）
   视觉体系：品牌渐变 #667eea→#764ba2 · 分层阴影 · 统一圆角 · 微交互
   ============================================ */
:root {
    --brand: #667eea;
    --brand-2: #764ba2;
    --brand-grad: linear-gradient(135deg, #667eea, #764ba2);
    --bg: #f4f5fa;
    --card: #ffffff;
    --t1: #2e3040;
    --t2: #565b6f;
    --t3: #8b90a4;
    --line: #edeff6;
    --red: #ff4d4f;
    --green: #52c41a;
    --blue: #3d8bff;
    --gold: #faad14;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --sh-sm: 0 1px 2px rgba(37,41,74,.05), 0 2px 8px rgba(37,41,74,.06);
    --sh-md: 0 4px 18px rgba(37,41,74,.10);
    --sh-lg: 0 14px 36px rgba(37,41,74,.16);
    --ring: 0 0 0 3px rgba(102,126,234,.16);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background:var(--bg); color:var(--t1); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
::selection { background:rgba(102,126,234,.22); }
a:focus-visible, button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* 细滚动条 */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#cdd2e3; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#b2b9d2; }
::-webkit-scrollbar-track { background:transparent; }

/* 顶部导航 */
.header { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 14px rgba(72,84,180,.28); }
.header-inner { max-width:1280px; margin:0 auto; padding:0 16px; display:flex; align-items:center; height:60px; }
.logo { font-size:22px; font-weight:bold; margin-right:30px; white-space:nowrap; letter-spacing:.5px; }
.logo a { color:#fff; }
.nav { display:flex; flex:1; gap:4px; overflow:visible; align-items:center; }
.nav a { padding:8px 9px; border-radius:8px; font-size:15px; white-space:nowrap; transition:background .2s var(--ease), box-shadow .2s var(--ease); }
.nav a:hover { background:rgba(255,255,255,.14); }
.nav a.active { background:rgba(255,255,255,.22); font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }

/* “更多”省份二级菜单 */
.more-wrap { position:relative; }
.more-btn { display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
.more-caret { font-size:11px; transition:transform .2s; }
.more-wrap.open .more-caret { transform:rotate(180deg); }
.more-panel { display:none; position:absolute; top:calc(100% + 8px); right:0; width:380px; max-width:90vw; background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:12px; grid-template-columns:repeat(3, 1fr); gap:8px; z-index:1000; }
.more-wrap.open .more-panel { display:grid; animation:popIn .18s var(--ease); }
.more-panel a { display:block; text-align:center; padding:9px 6px; border-radius:8px; font-size:13px; color:#555; background:#f7f8fc; white-space:nowrap; transition:background .15s, color .15s, transform .15s; }
.more-panel a:hover { background:var(--brand); color:#fff; transform:translateY(-1px); }
.more-panel a.active { background:var(--brand); color:#fff; }
/* 宽屏：第6-11个省份直接显示在导航上，面板内隐藏（中窄屏由媒体查询展开） */
.more-panel a.pe1, .more-panel a.pe2 { display:none; }

.user-area { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.user-area a { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; font-size:14px; transition:background .2s var(--ease), transform .2s var(--ease); }
.user-area a:active { transform:scale(.96); }
.user-area .ua-icon { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.user-area .btn-login { background:rgba(255,255,255,.2); }
.user-area .btn-login:hover { background:rgba(255,255,255,.32); }
.user-area .btn-reg { background:#fff; color:var(--brand); font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.user-area .btn-reg:hover { transform:translateY(-1px); }
.user-area .btn-member { background:rgba(255,255,255,.2); }
.user-area .btn-member:hover { background:rgba(255,255,255,.32); }
.mobile-toggle { display:none; font-size:24px; cursor:pointer; }

/* 主体布局 */
.container { max-width:1280px; margin:20px auto; padding:0 16px; }
.layout { display:flex; gap:20px; }

/* ============ 幻灯片 + 注册登录区域 ============ */
.hero-section { display:flex; gap:16px; max-width:1280px; margin:16px auto; padding:0 16px; }
.hero-slides { position:relative; flex:0 0 900px; max-width:70%; height:350px; border-radius:14px; overflow:hidden; box-shadow:var(--sh-md); }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); }
.hero-slide.active { opacity:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; border:none; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; transition:background .18s; z-index:5; }
.hero-arrow:hover { background:rgba(0,0,0,.6); }
.hero-prev { left:10px; } .hero-next { right:10px; }
.hero-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:5; }
.hero-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:background .18s; }
.hero-dot.active { background:#fff; }
.hero-side { flex:1; min-width:0; }
/* 注册登录框 */
.register-box { background:var(--card); border-radius:14px; padding:18px 20px; height:350px; box-shadow:var(--sh-md); display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.register-box h3 { font-size:16px; margin:0 0 10px; color:var(--t1); text-align:center; }
.reg-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.reg-row label { flex:0 0 40px; font-size:13px; color:var(--t3); text-align:right; }
.reg-row input { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; transition:border-color .18s, box-shadow .18s; }
.reg-row input:focus { border-color:var(--brand); outline:none; box-shadow:var(--ring); }
/* 性别 + 验证码同行 */
.reg-row-gender { gap:8px; }
.reg-row-gender .radio-inline { display:inline-flex; align-items:center; gap:3px; font-size:13px; color:var(--t2); flex-shrink:0; margin:0; white-space:nowrap; }
.reg-row-gender .radio-inline input { flex:0 0 auto; width:auto; margin:0; }
.reg-captcha-input { flex:1; min-width:0; }
.reg-captcha-img { height:34px; width:68px; flex-shrink:0; border:1px solid var(--line); border-radius:8px; cursor:pointer; object-fit:cover; }
.btn-reg { flex:1; padding:9px; border:none; border-radius:8px; background:linear-gradient(135deg,#5fb8ff,#3d8bff); color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s, transform .12s; }
.btn-reg:hover { filter:brightness(1.08); }
.btn-reg:active { transform:scale(.97); }
.btn-login-link { flex:1; text-align:center; padding:9px; border-radius:8px; background:#eaf3ff; color:#3d8bff; font-size:14px; font-weight:600; transition:background .15s; }
.btn-login-link:hover { background:#d8eaff; }
/* 会员信息框 */
.member-box { background:var(--card); border-radius:14px; padding:20px; height:350px; box-shadow:var(--sh-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; }
.member-box-avatar { width:64px; height:64px; border-radius:50%; background:#e4e6eb; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.avatar-upload-btn { cursor:pointer; color:#aaa; display:flex; align-items:center; justify-content:center; }
.avatar-upload-btn:hover { color:var(--brand); }
.member-box-name { font-size:15px; font-weight:600; color:var(--t1); }
.member-box-level { display:flex; align-items:center; gap:6px; }
.level-tag { font-size:12px; padding:2px 10px; border-radius:10px; background:#ffe0e0; color:#ff4d4f; font-weight:600; }
.expire-tag { font-size:12px; padding:2px 10px; border-radius:10px; background:#e8ffe8; color:#52c41a; font-weight:600; }
.member-box-stats { display:flex; gap:16px; font-size:13px; color:var(--t3); }
.member-box-stats b { color:var(--t1); font-size:14px; }
.member-box-actions { display:flex; gap:10px; width:100%; margin-top:4px; }
.mb-action-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:10px; border-radius:10px; background:var(--brand-grad); color:#fff; font-size:13px; font-weight:600; transition:filter .15s, transform .12s; }
.mb-action-btn:hover { filter:brightness(1.08); }
.mb-action-btn:active { transform:scale(.97); }
@media (max-width:768px) {
    .hero-section { flex-direction:column; }
    .hero-slides { flex:none; max-width:100%; width:100%; height:200px; }
    .hero-side { width:100%; }
    .register-box, .member-box { height:auto; min-height:200px; }
}

/* 左侧省份导航（电脑端，一行3个） */
.sidebar { width:260px; flex-shrink:0; }
.sidebar-card { background:var(--card); border-radius:var(--r-md); padding:16px; box-shadow:var(--sh-sm); position:sticky; top:80px; max-height:calc(100vh - 100px); overflow-y:auto; }
.sidebar-card h3 { font-size:16px; margin-bottom:12px; color:var(--brand); padding-bottom:10px; border-bottom:1px solid var(--line); }
.province-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.province-grid a { display:block; text-align:center; padding:8px 4px; background:#f7f8fc; border-radius:8px; font-size:13px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s, color .15s, transform .15s, box-shadow .15s; }
.province-grid a:hover { background:#eef0fa; color:var(--brand); transform:translateY(-1px); }
.province-grid a.active { background:var(--brand); color:#fff; font-weight:600; box-shadow:0 3px 10px rgba(102,126,234,.35); }

/* 主内容顶部筛选条（分类 / 城市） */
.filter-bar { display:flex; align-items:flex-start; gap:12px; background:var(--card); border-radius:var(--r-md); padding:12px 16px; margin-bottom:14px; box-shadow:var(--sh-sm); }
.filter-label { flex-shrink:0; font-size:14px; font-weight:600; color:var(--brand); padding:5px 0; white-space:nowrap; }
.filter-tags { flex:1; display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; }
.filter-tags.city-tags { grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); }
.filter-tags a { display:block; text-align:center; padding:5px 8px; background:#f7f8fc; border-radius:8px; font-size:13px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s, color .15s, transform .15s, box-shadow .15s; }
.filter-tags a:hover { background:#eef0fa; color:var(--brand); transform:translateY(-1px); }
.filter-tags a.active { background:var(--brand); color:#fff; font-weight:600; box-shadow:0 3px 10px rgba(102,126,234,.35); }
/* 分类名后的数量数字徽标（导航背景色提亮显示） */
.filter-tags a .cat-count { display:none; }

/* 主内容区 */
.main { flex:1; min-width:0; }
/* 列表区域AJAX筛选加载态 */
#listArea { transition:opacity .15s; }
#listArea.is-loading { opacity:.55; pointer-events:none; }
.section-title { font-size:18px; font-weight:600; margin-bottom:16px; color:var(--t1); padding-left:10px; border-left:4px solid var(--brand); display:flex; align-items:baseline; gap:10px; }
.section-count { font-size:12px; color:var(--t3); font-weight:400; }

/* 图片网格：电脑端一行4个 */
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.card { background:var(--card); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1); cursor:pointer; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); }
.card-img { position:relative; width:100%; padding-top:130%; background:#f0f2f5; overflow:hidden; }
.card-img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.card:hover .card-img img { transform:scale(1.06); }
.card-body { padding:10px 12px; }
.card-name { font-size:14px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; }
.card-region { font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.card-age { flex-shrink:0; font-size:12px; color:var(--red); font-weight:600; }
.card-rating { display:flex; align-items:center; gap:4px; margin-top:5px; }
.card-rating .star-rating { font-size:12px; line-height:1; }
.card-rating-num { font-size:11px; color:var(--t3); }

/* 星级评分 */
.star-rating { display:inline-block; line-height:1; }
.star-rating .star-on { color:var(--gold); }
.star-rating .star-half { color:var(--gold); opacity:.6; }
.star-rating .star-off { color:#ddd; }
.card-stars { font-size:12px; margin-top:4px; }
.expired-tag { color:var(--red); font-weight:600; }
.remain-days { color:var(--green); font-weight:600; }

/* 图片缩略图删除角标 */
.img-thumb-wrap { position:relative; display:inline-block; width:100px; height:100px; }
.img-thumb-wrap img { width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.img-del { position:absolute; top:-8px; right:-8px; width:22px; height:22px; background:var(--red); color:#fff; border-radius:50%; text-align:center; line-height:20px; cursor:pointer; font-size:14px; box-shadow:0 2px 6px rgba(255,77,79,.4); transition:transform .15s, background .15s; }
.img-del:hover { background:#d9363e; transform:scale(1.1); }

/* 分页 */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; flex-wrap:wrap; }
.pagination a, .pagination span { padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#666; font-size:13px; transition:all .18s var(--ease); }
.pagination a:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-1px); box-shadow:var(--sh-sm); }
.pagination .current { background:var(--brand-grad); color:#fff; border-color:transparent; font-weight:600; box-shadow:0 3px 10px rgba(102,126,234,.35); }

/* 表单页通用 */
.form-card { background:var(--card); border-radius:var(--r-md); padding:30px; box-shadow:var(--sh-sm); max-width:500px; margin:40px auto; }
.form-card h2 { text-align:center; margin-bottom:24px; color:var(--t1); }
.form-group { margin-bottom:18px; }
.form-group label { display:block; margin-bottom:6px; color:var(--t2); font-weight:500; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; font-family:inherit; background:#fbfbfe; transition:border-color .18s, box-shadow .18s, background .18s; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color:#d6daea; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--brand); outline:none; background:#fff; box-shadow:var(--ring); }
/* 单选/复选框不随表单控件撑满整行 */
.form-group input[type="radio"], .form-group input[type="checkbox"] { width:auto; padding:0; margin:0 5px 0 0; vertical-align:middle; display:inline-block; cursor:pointer; accent-color:var(--brand); }
.form-group .hint { font-size:12px; color:var(--t3); margin-top:4px; }
.btn-primary { display:block; width:100%; padding:12px; background:var(--brand-grad); color:#fff; border:none; border-radius:var(--r-sm); font-size:16px; cursor:pointer; font-weight:600; letter-spacing:1px; box-shadow:0 6px 16px rgba(102,126,234,.35); transition:filter .18s, transform .12s, box-shadow .18s; }
.btn-primary:hover { filter:brightness(1.08); box-shadow:0 8px 20px rgba(102,126,234,.42); }
.btn-primary:active { transform:translateY(1px); box-shadow:0 3px 8px rgba(102,126,234,.3); }
.form-link { text-align:center; margin-top:16px; color:var(--t3); font-size:13px; }
.form-link a { color:var(--brand); font-weight:500; }
.form-link a:hover { text-decoration:underline; }

/* 详情页 */
.detail-card { background:var(--card); border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-sm); }
.detail-cover { width:100%; max-width:500px; margin:0 auto 20px; border-radius:var(--r-md); overflow:hidden; }
.detail-cover img { width:100%; }
.detail-title { text-align:center; font-size:22px; margin-bottom:16px; color:var(--t1); }
.detail-meta { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; max-width:600px; margin:0 auto 20px; }
.meta-item { background:#f7f8fc; padding:12px; border-radius:var(--r-sm); text-align:center; }
.meta-item .label { font-size:12px; color:var(--t3); }
.meta-item .value { font-size:16px; font-weight:600; color:var(--brand); margin-top:4px; }
.detail-contact { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.contact-tag { padding:8px 16px; background:#fff7e6; border:1px solid #ffd591; color:#fa8c16; border-radius:20px; font-size:14px; }
.detail-section-title { font-size:16px; font-weight:600; margin:20px 0 12px; padding-left:10px; border-left:4px solid var(--brand); }
.detail-gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.detail-gallery img { width:100%; border-radius:var(--r-sm); cursor:zoom-in; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.detail-gallery img:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }

/* 会员中心 */
.member-layout { display:flex; gap:20px; }
.member-sidebar { width:200px; flex-shrink:0; }
.member-menu { background:var(--card); border-radius:var(--r-md); padding:12px; box-shadow:var(--sh-sm); }
.member-menu a { display:block; padding:10px 14px; border-radius:8px; color:#555; margin-bottom:4px; transition:background .18s, color .18s, box-shadow .18s; }
.member-menu a:hover { background:#f0f2ff; color:var(--brand); }
.member-menu a.active { background:var(--brand-grad); color:#fff; box-shadow:0 4px 12px rgba(102,126,234,.35); }
.member-main { flex:1; min-width:0; }
.member-card { background:var(--card); border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-sm); }
.member-card h3 { font-size:18px; margin-bottom:16px; color:var(--t1); }
.vip-info { background:radial-gradient(120% 140% at 85% -20%, rgba(255,255,255,.25), transparent 45%), linear-gradient(135deg,#667eea,#764ba2); color:#fff; padding:20px; border-radius:var(--r-md); margin-bottom:20px; box-shadow:0 8px 22px rgba(102,126,234,.32); }
.vip-info .level { font-size:20px; font-weight:bold; }
.vip-info .expire { font-size:13px; opacity:.92; margin-top:6px; }
.level-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.level-card { border:2px solid var(--line); border-radius:var(--r-md); padding:20px; text-align:center; cursor:pointer; background:#fff; transition:all .2s var(--ease); }
.level-card:hover { border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-md); }
.level-card.selected { border-color:var(--brand); background:#f5f6ff; box-shadow:0 6px 18px rgba(102,126,234,.25); }
.level-card .name { font-size:18px; font-weight:600; color:var(--t1); }
.level-card .price { font-size:28px; color:var(--red); font-weight:bold; margin:10px 0; }
.level-card .desc { font-size:12px; color:var(--t3); }

/* 表格 */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:12px; text-align:left; border-bottom:1px solid var(--line); }
.table th { background:#f7f8fc; color:var(--t2); font-weight:600; font-size:13px; }
.table td { font-size:13px; }
.table tr { transition:background .15s; }
.table tr:hover td { background:#fafbff; }
.table .thumb { width:60px; height:60px; object-fit:cover; border-radius:8px; }
.btn-sm { padding:4px 10px; border-radius:6px; font-size:12px; cursor:pointer; border:none; display:inline-block; transition:filter .15s, transform .15s; }
.btn-sm:active { transform:scale(.95); }
.btn-edit { background:var(--blue); color:#fff; }
.btn-del { background:var(--red); color:#fff; }
.btn-view { background:var(--green); color:#fff; }
.btn-success { background:var(--green); color:#fff; }
.btn-edit:hover, .btn-del:hover, .btn-view:hover, .btn-success:hover { filter:brightness(1.12); }

/* 提示 */
.alert { padding:12px 16px; border-radius:var(--r-sm); margin-bottom:16px; font-size:14px; }
.alert-success { background:#f6ffed; border:1px solid #b7eb8f; color:var(--green); }
.alert-error { background:#fff2f0; border:1px solid #ffccc7; color:var(--red); }
.alert-info { background:#e6f7ff; border:1px solid #91d5ff; color:var(--blue); }

/* 底部 */
.footer { padding:30px 16px; color:var(--t3); font-size:13px; border-top:1px solid var(--line); margin-top:40px; background:#fff; }
.footer-inner { max-width:1240px; margin:0 auto; }
.footer-friend-links { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.footer-fl-label { color:var(--t1); font-weight:600; font-size:13px; }
.footer-friend-links a { color:var(--t3); font-size:13px; text-decoration:none; transition:color .15s; }
.footer-friend-links a:hover { color:var(--brand); }
.footer-row { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.footer-left { text-align:left; line-height:1.8; }
.footer-copyright { margin:0; color:var(--t2); }
.footer-beian { margin:4px 0 0; }
.footer-beian a { color:var(--t3); text-decoration:none; transition:color .15s; }
.footer-beian a:hover { color:var(--brand); }
.footer-beian-sep { margin:0 6px; color:#ccc; }
.footer-badges { display:flex; align-items:center; gap:12px; margin-top:12px; }
.footer-badges img { height:40px; width:auto; display:block; }
.footer-right { display:flex; align-items:flex-start; gap:18px; }
.footer-qrcodes { display:flex; gap:8px; flex-wrap:nowrap; }
.footer-qr { width:100px; height:100px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; }
.footer-contact { min-width:0; }
.footer-contact-title { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:10px; }
.footer-contact-list { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin-bottom:12px; }
.footer-contact-item { font-size:13px; color:var(--t2); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.fc-label { color:var(--t3); font-size:12px; }

/* ============ 响应式：平板/小屏电脑（769-1200px）顶部导航收纳 ============ */
/* .nav 直接子 <a> 顺序：首页(1) + 省份1-11(2-12)；“更多”按钮在 div 内不受影响 */
@media (max-width: 1200px) and (min-width: 769px) {
    .logo { margin-right:16px; }
    .nav { gap:2px; }
    .nav a { padding:8px 10px; font-size:14px; }
    .user-area { gap:8px; }
    .user-area a { padding:6px 12px; font-size:13px; }
    /* 只直接显示前7个省份，第8-11个收入“更多”面板 */
    .nav > a:nth-of-type(n+9) { display:none; }
    .more-panel a.pe1 { display:block; }
}
@media (max-width: 900px) and (min-width: 769px) {
    /* 更窄：直接显示前5个省份，第6-11个全部收入“更多”面板 */
    .nav > a:nth-of-type(n+7) { display:none; }
    .more-panel a.pe1, .more-panel a.pe2 { display:block; }
}

/* ============ 响应式：手机端 ============ */
@media (max-width: 768px) {
    .header-inner { height:54px; padding:0 12px; }
    .logo { font-size:18px; margin-right:12px; }
    .nav { position:fixed; top:54px; left:0; right:0; background:#667eea; flex-direction:column; align-items:stretch; gap:0; padding:10px; display:none; max-height:70vh; overflow-y:auto; box-shadow:var(--sh-lg); }
    .nav.open { display:flex; animation:popIn .2s var(--ease); }
    .nav a { padding:12px 16px; }
    .mobile-toggle { display:block; }

    /* 手机端“更多”面板：内嵌平铺，一行3个 */
    .more-wrap { position:static; }
    .more-btn { padding:12px 16px; }
    .more-panel { position:static; width:100%; max-width:none; box-shadow:none; border-radius:0; background:transparent; padding:0 16px 10px; grid-template-columns:repeat(3, 1fr); }
    .more-wrap.open .more-panel { display:grid; animation:none; }
    .more-panel a { background:rgba(255,255,255,.12); color:#fff; padding:10px 4px; font-size:13px; }
    .more-panel a:hover, .more-panel a.active { background:rgba(255,255,255,.3); color:#fff; }

    .container { margin:12px auto; padding:0 12px; }
    .layout { flex-direction:column; }
    .sidebar { width:100%; }
    .sidebar-card { position:static; max-height:none; }

    .filter-bar { flex-direction:column; gap:8px; padding:10px 12px; }
    .filter-label { padding:0; }
    .filter-tags { grid-template-columns:repeat(5, 1fr); }
    .filter-tags a { font-size:12px; padding:5px 4px; }
    .filter-tags.city-tags { grid-template-columns:repeat(3, 1fr); }
    .filter-tags.city-tags a { font-size:13px; padding:5px 8px; }

    /* 手机端一行2个 */
    .grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .card-body { padding:8px 10px; }
    .card-name { font-size:13px; }
    .card-region, .card-age { font-size:11px; }

    .detail-meta { grid-template-columns:repeat(2, 1fr); }
    .detail-gallery { grid-template-columns:repeat(2, 1fr); }

    .member-layout { flex-direction:column; }
    .member-sidebar { width:100%; }
    .member-menu { display:flex; flex-wrap:wrap; gap:6px; padding:8px; }
    .member-menu a { flex:1; min-width:80px; text-align:center; padding:8px; font-size:13px; margin:0; }

    .form-card { padding:20px; margin:20px auto; }

    .level-grid { grid-template-columns:1fr; }

    .table th:nth-child(n+5), .table td:nth-child(n+5) { display:none; }
}

@media (max-width: 480px) {
    .grid { gap:8px; }
    .card-body { padding:6px 8px; }
    .card-name { font-size:12px; }
}

/* ============================================
   详情页新版（顶部信息区 + 下部全宽照片）
   ============================================ */
.detail-top { display:flex; gap:24px; align-items:flex-start; }
.detail-top .dt-left { width:180px; height:240px; flex-shrink:0; overflow:hidden; border-radius:10px; box-shadow:0 6px 18px rgba(37,41,74,.16); }
.detail-top .dt-left img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; display:block; transition:transform .4s var(--ease); }
.detail-top .dt-left:hover img { transform:scale(1.04); }

.detail-top .dt-mid { flex:1; min-width:0; display:flex; flex-direction:column; }
.dt-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.dt-name { font-size:22px; color:var(--t1); margin-right:6px; line-height:1.3; }

/* 点赞/喜欢按钮 */
.react-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border:1px solid var(--line); background:#f7f8fc; color:#666; border-radius:18px; font-size:13px; cursor:pointer; transition:all .2s var(--ease); }
.react-btn svg { fill:currentColor; }
.react-btn:hover { border-color:var(--brand); color:var(--brand); background:#f0f2ff; transform:translateY(-1px); }
.react-btn:active { transform:scale(.95); }
.react-btn .count { font-style:normal; font-size:12px; color:var(--t3); }
.react-btn.like.active { background:#eef2ff; border-color:var(--brand); color:var(--brand); }
.react-btn.love.active { background:#fff0f3; border-color:#ff5c7a; color:#ff4d6d; }
.react-btn.love.active .count { color:#ff4d6d; }

/* 资料信息行 */
.dt-info { display:flex; flex-wrap:wrap; gap:8px 22px; padding:14px 16px; background:#f7f8fc; border-radius:10px; margin-bottom:18px; }
.dt-info span { font-size:14px; color:#787d92; }
.dt-info b { color:var(--t1); font-weight:600; margin-left:2px; }

/* 两个主操作按钮 */
.dt-actions { display:flex; gap:14px; margin-bottom:16px; }
.dt-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 26px; border:1px solid var(--brand); background:#fff; color:var(--brand); border-radius:var(--r-sm); font-size:15px; font-weight:500; cursor:pointer; transition:all .2s var(--ease); }
.dt-btn:hover { box-shadow:0 4px 14px rgba(102,126,234,.25); transform:translateY(-1px); }
.dt-btn:active { transform:translateY(1px); box-shadow:none; }
.dt-btn.btn-contact { background:var(--brand-grad); color:#fff; border-color:transparent; min-width:150px; box-shadow:0 6px 16px rgba(102,126,234,.35); }
.dt-btn.btn-contact:hover { filter:brightness(1.08); }
.dt-btn.btn-follow { min-width:130px; }
.dt-btn.btn-follow.followed { background:#f0f2ff; color:#888; border-color:#d8dcef; box-shadow:none; }
.dt-sub { margin-top:auto; color:var(--t3); font-size:12.5px; }

/* 右侧二维码区 */
.detail-top .dt-right { width:190px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; border-left:1px solid var(--line); padding-left:24px; }
.qr-box { width:150px; height:150px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fafafa; box-shadow:var(--sh-sm); }
.qr-box img { width:100%; height:100%; object-fit:contain; }
.qr-tip { margin-top:10px; font-size:13px; color:#666; font-weight:600; }
.dt-safe { display:flex; gap:18px; margin-top:auto; padding-top:14px; }
.link-btn { display:inline-flex; align-items:center; gap:4px; background:none; border:none; color:var(--t3); font-size:13px; cursor:pointer; padding:4px; transition:color .15s, transform .15s; }
.link-btn svg { fill:currentColor; }
.link-btn:hover { color:var(--red); transform:translateY(-1px); }
.link-btn.blocked { color:var(--red); }

/* 下部照片区：照片撑满整个DIV */
.detail-photos { margin-top:0; }
.detail-photos .detail-section-title { margin-top:0; }
.photos-wrap { width:100%; }
.photos-wrap img { display:block; width:100%; border-radius:10px; margin-bottom:14px; cursor:zoom-in; box-shadow:0 2px 12px rgba(37,41,74,.10); transition:box-shadow .2s var(--ease); }
.photos-wrap img:hover { box-shadow:0 8px 24px rgba(37,41,74,.16); }
.photos-wrap img:last-child { margin-bottom:0; }

/* 综合评价星级 */
.dt-rating { margin-top:14px; display:flex; align-items:center; gap:8px; font-size:14px; }
.dt-rating-label { color:#666; }
.dt-rating-num { color:var(--gold); font-weight:600; }
.dt-rating-count { color:var(--t3); font-size:12px; }

/* 点评模块：一行一个项目 */
.detail-reviews { margin-top:20px; }
.review-form { background:#f7f8fc; border-radius:10px; padding:16px; margin-bottom:16px; }
.review-dims { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.review-dim { display:flex; align-items:center; gap:8px; }
.rd-label { color:var(--t2); font-size:13px; flex-shrink:0; min-width:48px; }
.rd-stars { cursor:pointer;width: 170px;margin-top: -3px;}
.rd-star { color:#ddd; font-size:20px; transition:color .15s, transform .15s; }
.rd-star:hover { transform:scale(1.15); }
.rd-star.on { color:var(--gold); }
.review-form textarea { width:100%; min-height:60px; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; box-sizing:border-box; background:#fff; transition:border-color .18s, box-shadow .18s; }
.review-form textarea:focus { border-color:var(--brand); outline:none; box-shadow:var(--ring); }
.review-list { display:flex; flex-direction:column; gap:0; }
.review-item { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:1px solid #f0f0f0; }
.review-item:last-child { border-bottom:none; }
.ri-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ri-name { font-size:13px; color:var(--t1); font-weight:600; }
.ri-date { font-size:11px; color:var(--t3); }
.ri-right { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ri-dims { display:flex; flex-wrap:nowrap; white-space:nowrap; align-items:center; gap:10px; font-size:11px; color:#888; overflow-x:auto; }
.ri-dim-line { display:inline-flex; align-items:center; gap:2px; padding:2px 0; font-size:11px; }
.ri-dim-name { color:#666; font-size:11px; }
.ri-dim-score { color:var(--gold); font-weight:600; font-size:11px; }
.ri-content { display:block; color:#555; font-size:13px; word-break:break-all; margin-top:2px; }
/* 详情页右侧点评区：跟随页面滚动，到照片底部自动停止 */
.detail-reviews { background:transparent; }
.review-sticky { position:sticky; top:80px; background:#fff; border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-md); }

/* 详情页底部两栏布局响应式：窄屏堆叠 */
@media (max-width:768px) {
    .detail-bottom-row { flex-direction:column !important; }
    .detail-bottom-row > div { width:100% !important; }
    .review-sticky { position:static; }
}

/* 弹窗 */
.modal-mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(30,32,54,.55); z-index:9000; align-items:center; justify-content:center; padding:16px; animation:fadeIn .2s var(--ease); }
.modal-box { background:#fff; border-radius:14px; width:420px; max-width:100%; box-shadow:0 24px 64px rgba(30,32,54,.3); overflow:hidden; animation:popIn .24s var(--ease); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-head h3 { font-size:17px; color:var(--t1); }
.modal-close { font-size:24px; color:var(--t3); cursor:pointer; line-height:1; transition:color .15s, transform .15s; }
.modal-close:hover { color:var(--t1); transform:rotate(90deg); }
.modal-body { padding:20px; }
.modal-body textarea { width:100%; min-height:110px; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:14px; font-family:inherit; resize:vertical; transition:border-color .18s, box-shadow .18s; }
.modal-body textarea:focus { border-color:var(--brand); outline:none; box-shadow:var(--ring); }
.contact-row { display:flex; padding:10px 0; border-bottom:1px dashed #f0f0f0; font-size:15px; }
.contact-row:last-child { border-bottom:none; }
.ci-label { width:70px; color:var(--t3); flex-shrink:0; }
.ci-value { color:var(--t1); font-weight:600; word-break:break-all; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.modal-foot .dt-btn { padding:8px 20px; font-size:14px; min-width:auto; }

/* 图片缩略图预览（发布表单） */
.thumb-preview { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.thumb-preview .thumb-item { position:relative; width:100px; height:100px; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-sm); }
.thumb-preview .thumb-item img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-preview .thumb-del { position:absolute; top:2px; right:2px; width:20px; height:20px; background:rgba(0,0,0,.6); color:#fff; border-radius:50%; text-align:center; line-height:18px; cursor:pointer; font-size:14px; transition:background .15s, transform .15s; }
.thumb-preview .thumb-del:hover { background:var(--red); transform:scale(1.1); }
.thumb-preview .thumb-item.uploading .thumb-mask { position:absolute; inset:0; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }

/* 100x100 虚线 +号上传方块（发布/编辑内容、修改资料头像/照片） */
.upload-add-box { width:100px; height:100px; border:1.5px dashed #c5cadb; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#9aa0b5; background:#fafbff; transition:border-color .15s,color .15s,background .15s; flex-shrink:0; user-select:none; margin:0; }
.upload-add-box:hover { border-color:var(--brand); color:var(--brand); background:#fff; }
.upload-add-box span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:42px; font-weight:300; line-height:1; padding:0; margin:0; }

/* 无阅读权限提示块（立即预约弹窗） */
.no-read-perm { text-align:center; padding:24px 10px 18px; }
.no-read-perm .nrp-icon { font-size:42px; line-height:1; margin-bottom:12px; }
.no-read-perm .nrp-text { font-size:17px; font-weight:600; color:var(--t1); margin-bottom:6px; }
.no-read-perm .nrp-hint { font-size:13px; color:var(--t3); }

/* 查阅权限有效期提示 */
.perm-expire-tip { margin-top:12px; padding:9px 12px; background:#f5f7ff; border:1px solid #e6eaff; border-radius:8px; font-size:12.5px; color:#5a64b8; }

/* 无权限弹窗底部：开通权限（描边）/ 购买单次查看（实心） */
.modal-foot .btn-open-perm { text-decoration:none; }
.modal-foot .btn-buy-view { background:var(--brand-grad); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(102,126,234,.3); text-decoration:none; }
.modal-foot .btn-buy-view:hover { filter:brightness(1.07); box-shadow:0 4px 12px rgba(102,126,234,.3); transform:none; }

/* ============ 购买单次查看页（未登录可支付） ============ */
.buy-view-wrap { max-width:520px; margin:26px auto 50px; padding:0 14px; }
.buy-view-card { background:var(--card); border-radius:16px; box-shadow:var(--sh-sm); padding:22px 20px; }
.bv-title { margin:0 0 16px; font-size:19px; font-weight:700; color:var(--t1); }
.bv-error { background:#fff2f0;color:#ff4d4f;border:1px solid #ffccc7;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:14px; }
.bv-back { color:var(--brand); font-size:14px; }
.bv-content { display:flex; gap:12px; align-items:center; padding:12px; background:#fafbff; border:1px solid #eef0fb; border-radius:12px; }
.bv-cover { width:64px; height:64px; border-radius:10px; overflow:hidden; background:#fff; flex-shrink:0; }
.bv-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.bv-cover-empty { display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#bbb;font-size:14px; }
.bv-info { flex:1; min-width:0; }
.bv-name { font-size:15.5px; font-weight:600; color:var(--t1); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.bv-city { font-size:12.5px; color:#999; margin-top:5px; }

.bv-price-row, .bv-qty-row, .bv-total-row { display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:14.5px; color:var(--t2); }
.bv-price { color:#ff4d4f; font-weight:700; font-size:17px; }
.bv-stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.bv-step { width:38px; height:38px; border:none; background:#fafbff; color:var(--t1); font-size:20px; cursor:pointer; line-height:1; }
.bv-step:active { background:#eef0fb; }
.bv-stepper input { width:56px; height:38px; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-size:15px; font-weight:600; color:var(--t1); -moz-appearance:textfield; }
.bv-stepper input::-webkit-outer-spin-button,.bv-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.bv-pay-label { margin-top:20px; font-size:14.5px; color:var(--t2); font-weight:600; }
.bv-pay-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.bv-pay-card { position:relative; display:flex; align-items:center; gap:9px; padding:13px 12px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s,background .15s; }
.bv-pay-card input { position:absolute; opacity:0; pointer-events:none; }
.bv-pay-card:active { background:#fafbff; }
.bv-pay-card.selected { border-color:var(--brand); background:#f7f8ff; }
.bv-pay-icon { width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.bv-icon-wechat { background:#09bb07; color:#fff; }
.bv-icon-alipay { background:#1677ff; color:#fff; font-size:19px; font-weight:700; }
.bv-pay-name { font-size:14px; font-weight:600; color:var(--t1); }
.bv-pay-check { margin-left:auto; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.bv-pay-card.selected .bv-pay-check { background:var(--brand); border-color:var(--brand); }

.bv-total-row { border-top:1px solid #f2f3f7; padding-top:16px; margin-top:20px; }
.bv-total { color:#ff4d4f; font-weight:700; font-size:20px; }
.bv-submit { width:100%; margin-top:14px; padding:14px; border:none; border-radius:12px; background:var(--brand-grad); color:#fff; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 8px 20px rgba(102,126,234,.32); transition:filter .15s, transform .12s; }
.bv-submit:active { transform:scale(.98); }
.bv-tip { margin-top:12px; font-size:12px; color:#999; text-align:center; line-height:1.6; }
@media (max-width:420px) {
    .bv-pay-cards { grid-template-columns:1fr; }
}

/* 无权限提示 */
.no-permission { text-align:center; padding:50px 20px; }
.no-permission .np-icon { font-size:48px; margin-bottom:14px; }
.no-permission .np-text { font-size:16px; color:#fa8c16; margin-bottom:18px; font-weight:600; }
.quota-tip { font-size:12px; color:#fa8c16; margin-top:6px; }
.quota-tip a { color:var(--brand); font-weight:500; }

@media (max-width: 768px) {
    .detail-top { flex-direction:column; gap:18px; }
    .detail-top .dt-left { width:130px; height:173px; margin:0 auto; }
    .dt-name { font-size:19px; }
    .dt-info { gap:6px 14px; padding:12px; }
    .dt-actions { flex-direction:column; }
    .dt-btn.btn-contact, .dt-btn.btn-follow { width:100%; }
    .detail-top .dt-right { width:100%; border-left:none; border-top:1px solid var(--line); padding:18px 0 0; }
    .dt-safe { margin-top:14px; }
    .modal-box { width:100%; }
    /* 我的内容：手机端保留有效期等列 */
    .my-content-table th, .my-content-table td { display:table-cell; padding:8px 6px; font-size:12px; }
    .my-content-table .btn-sm { margin-bottom:3px; }
}

/* 标签与警告色（前台补充） */
.tag { display:inline-block; padding:2px 9px; border-radius:10px; font-size:12px; white-space:nowrap; }
.tag-success { background:#f6ffed; color:var(--green); border:1px solid #b7eb8f; }
.tag-error { background:#fff2f0; color:var(--red); border:1px solid #ffccc7; }
.alert-warning { background:#fffbe6; border:1px solid #ffe58f; color:#fa8c16; }

/* 动画 */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes popIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============ 筛选条下拉框（省市联动 / 评分筛选） ============ */
/* 复用筛选条容器，下拉框样式参考现有 .form-group select */
.filter-bar select { padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fbfbfe; font-size:13px; font-family:inherit; color:var(--t2); cursor:pointer; transition:border-color .18s, box-shadow .18s, background .18s; min-width:120px; }
.filter-bar select:hover { border-color:#d6daea; }
.filter-bar select:focus { border-color:var(--brand); outline:none; background:#fff; box-shadow:var(--ring); }

/* ============ 公告滚动条（筛选栏最右侧，宽300px） ============ */
.announce-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.announce-icon { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#ff9a44,#fc6076); color:#fff; display:flex; align-items:center; justify-content:center; }
.announce-viewport { width:220px; height:30px; overflow:hidden; position:relative; }
.announce-track { position:absolute; left:0; top:0; width:100%; will-change:transform; }
.announce-track.ann-anim { animation: annScroll var(--ann-duration, 7s) infinite ease !important; }
@keyframes annScroll {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  95%  { transform: translateY(-30px); }
  100% { transform: translateY(-60px); }
}
.announce-item { display:block; height:30px; line-height:30px; padding:0 6px; font-size:13px; color:#555; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; text-align:left; }
.announce-item:hover { color:var(--brand); }

/* 我要排名：筛选条最右侧红色加粗 */
.rank-link { margin-left:auto; color:#ff4d4f; font-weight:700; font-size:14px; text-decoration:none; flex-shrink:0; padding:0 8px; white-space:nowrap; }
.rank-link:hover { color:#d9363e; text-decoration:underline; }

/* 我要排名（筛选条最右侧）：主配色渐变背景高亮按钮，靠右、上下居中、加粗 */
.rank-cta { margin-left:auto; align-self:center; flex-shrink:0; white-space:nowrap;
    display:inline-flex; align-items:center; gap:4px;
    padding:8px 22px; border-radius:18px; font-size:14px; font-weight:700;
    color:#fff; text-decoration:none; background:var(--brand-grad);
    box-shadow:0 4px 12px rgba(102,126,234,.32); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.rank-cta:hover { color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(102,126,234,.42); }
.rank-cta:active { transform:translateY(0); }
.ann-modal-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1200; align-items:center; justify-content:center; padding:20px; }
.ann-modal-mask.show { display:flex; animation:popIn .18s var(--ease); }
.ann-modal { background:#fff; border-radius:12px; width:480px; max-width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:var(--sh-lg); }
.ann-modal-h { padding:15px 20px; font-weight:600; font-size:16px; color:var(--t1); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ann-modal-close { cursor:pointer; font-size:22px; color:#999; line-height:1; }
.ann-modal-b { padding:18px 20px; overflow-y:auto; font-size:14px; line-height:1.8; color:#444; white-space:pre-wrap; word-break:break-word; }

/* ============ 动态图片上传器（100x100 +号框） ============ */
.moment-uploader { display:flex; flex-wrap:wrap; gap:10px; }
.moment-add-box { width:100px; height:100px; border:1.5px dashed #c5cadb; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#9aa0b5; background:#fafbff; transition:border-color .15s,color .15s; flex-shrink:0; user-select:none; margin:0; }
.moment-add-box:hover { border-color:var(--brand); color:var(--brand); }
.moment-add-box span { font-size:42px; font-weight:300; line-height:1; margin-top:-4px; }
.moment-thumb { position:relative; width:100px; height:100px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.moment-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.moment-thumb-del { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:13px; line-height:20px; text-align:center; cursor:pointer; }
.moment-thumb-mask { position:absolute; inset:0; background:rgba(0,0,0,.4); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }

/* ============ 前台动态页（两列布局） ============ */
.moments-wrap { max-width:1280px; margin:20px auto; padding:0 16px; display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.moments-main { min-width:0; }
.moments-side { position:sticky; top:80px; }
.moments-side-card { background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:14px; }
.moments-side-title { margin:0 0 12px; font-size:16px; font-weight:700; color:var(--t1); }
.hot-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.hot-grid .card-body { padding:8px 9px; }
.hot-grid .card-name { font-size:13px; }
.hot-grid .card-meta, .hot-grid .card-rating { font-size:11px; }

/* 动态卡片：头像独立左列，昵称/资料/文字/图片在右侧一列对齐 */
.moment-item { background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:16px 18px; margin-bottom:14px; display:grid; grid-template-columns:48px 1fr; column-gap:12px; }
.moment-author-col { width:48px; }
.moment-author-avatar { width:46px; height:46px; border-radius:50%; object-fit:cover; display:block; background:#e8e8ef; }
.moment-author-avatar.moment-noavatar { background:#e2e2e8; }
.moment-body { min-width:0; }
.moment-author-row { display:flex; justify-content:flex-start; align-items:center; gap:10px; }
.moment-author-name { font-size:15px; font-weight:600; color:var(--t1); min-width:0; flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.moment-time { color:var(--t3); font-size:12px; flex-shrink:0; margin-left:auto; }
/* 关注按钮：名称右侧小胶囊 */
.moment-follow-btn { flex-shrink:0; border:none; cursor:pointer; padding:4px 14px; border-radius:14px; font-size:12px; font-weight:600; color:#fff; background:var(--brand-grad); box-shadow:0 2px 8px rgba(102,126,234,.3); transition:filter .15s, transform .12s, box-shadow .15s; }
.moment-follow-btn:hover { filter:brightness(1.08); }
.moment-follow-btn:active { transform:scale(.95); }
.moment-follow-btn.is-on { color:var(--t3); background:#eef0f6; box-shadow:none; }
.moment-follow-btn.loading { opacity:.6; pointer-events:none; }
.moment-meta { color:var(--t3); font-size:12px; margin-top:3px; }
.moment-text { margin-top:8px; font-size:15px; line-height:1.8; color:var(--t2); white-space:pre-wrap; word-break:break-word; }
.moment-imgs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; max-width:520px; }
.moment-imgs img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }
.moment-imgs.n1 { grid-template-columns:1fr; max-width:280px; }
.moment-imgs.n1 img { aspect-ratio:auto; max-height:280px; }
.moment-imgs.n2 { grid-template-columns:repeat(2,1fr); max-width:360px; }

/* ===== 动态操作栏：点赞 + 评论（靠右，与标题/内容左对齐，不与头像列对齐） ===== */
.mc-bar { display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-top:12px; padding-top:10px; border-top:1px solid #f2f3f7; }
.mc-bar .mc-date-inline { margin-right:auto; font-size:12px; color:var(--t3); user-select:none; }
.mc-bar span { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--t3); cursor:pointer; user-select:none; }
.mc-bar span em { font-style:normal; }
.mc-bar .mc-like:hover { color:#ff4d4f; }
.mc-bar .mc-like.active { color:#ff4d4f; }
.mc-bar .mc-comment-toggle:hover { color:var(--brand); }

/* 评论输入区 */
.mc-comment-box { margin-top:10px; background:#f7f8fc; border-radius:10px; padding:12px; }
.mc-comment-input { display:flex; gap:8px; align-items:flex-start; }
.mc-comment-input textarea { flex:1; resize:none; border:1px solid #e6e8f0; border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; background:#fff; }
.mc-comment-input textarea:focus { outline:none; border-color:var(--brand); }
.mc-send-btn { flex-shrink:0; border:none; background:var(--brand-grad); color:#fff; padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; }
.mc-list, .mc-list-static { margin-top:10px; display:flex; flex-direction:column; gap:12px; }
/* 评论区：浅浅的灰色背景，内容与边界留出距离 */
.mc-list-static { background:#f5f6fa; padding:14px 16px; border-radius:10px; }
.mc-list-static:empty { display:none; }

/* 会员中心我的动态：评论与回复列表（浅灰背景与主动态内容区分） */
.my-mc-box { margin-top:14px; }
.my-mc-title { font-size:13px; font-weight:600; color:var(--t2); margin-bottom:8px; }
.my-mc-list { margin-top:0; }
.my-mc-empty { background:#f5f6fa; border-radius:10px; padding:16px; text-align:center; color:var(--t3); font-size:13px; }
.my-mc-box .mc-actions { display:none; }

/* 单条评论：头像左 + 内容右；整体与动态标题/内容左对齐 */
.mc-item { display:grid; grid-template-columns:36px 1fr; column-gap:10px; }
.mc-avatar-col { width:36px; }
.mc-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; display:block; background:#e8e8ef; }
.mc-avatar.mc-noavatar { background:#e2e2e8; }
.mc-body { min-width:0; }
.mc-head { display:flex; align-items:center; gap:8px; }
.mc-name { font-size:13px; font-weight:600; color:var(--t1); }
.mc-time { font-size:11px; color:var(--t3); }
.mc-text { font-size:13px; line-height:1.6; color:var(--t2); margin-top:2px; word-break:break-word; }
.mc-reply-to { color:var(--brand); }
.mc-actions { margin-top:4px; }
.mc-reply-btn { font-size:12px; color:var(--brand); cursor:pointer; background:none; border:none; padding:0; }
.mc-reply-btn:hover { text-decoration:underline; }

/* 回复：与上级评论左侧对齐（不再缩进） */
.mc-replies { grid-column:1 / -1; margin-top:10px; display:flex; flex-direction:column; gap:12px; padding-left:0; }
.mc-item.mc-reply { }

/* ============================================
   竞价发布表单美化（卡片选择 · 支付方式图标卡片）
   ============================================ */
.bid-rules-banner { background:linear-gradient(135deg,#f0f4ff,#f7f0ff); border:1px solid #e3e8ff; border-radius:10px; padding:12px 16px; margin-bottom:22px; font-size:13px; color:var(--t2); line-height:1.7; }
.bid-rules-title { display:inline-block; background:var(--brand-grad); color:#fff; font-weight:700; font-size:12px; padding:2px 12px; border-radius:10px; margin-right:8px; }
.bid-rules-banner strong { color:var(--brand-2); }

.bid-field { margin-bottom:22px; }
.bid-field-label { display:block; font-size:14px; font-weight:700; color:var(--t1); margin-bottom:10px; }

/* 竞价类型卡片 */
.bid-type-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.bid-type-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 18px 18px; border:2px solid var(--line); border-radius:14px; cursor:pointer; background:#fff; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s; }
.bid-type-card:hover { border-color:#c3caf5; transform:translateY(-2px); box-shadow:var(--sh-md); }
.bid-type-card.selected { border-color:var(--brand); background:linear-gradient(180deg,#f4f6ff,#fff); box-shadow:0 6px 18px rgba(102,126,234,.16); }
.bid-type-card input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.btc-icon { width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.btc-icon svg { width:28px; height:28px; }
.btc-icon-rank { background:rgba(102,126,234,.12); color:var(--brand); }
.btc-icon-top { background:rgba(118,75,162,.12); color:var(--brand-2); }
.btc-title { font-size:18px; font-weight:700; color:var(--t1); }
.btc-price { margin-top:6px; font-size:15px; font-weight:700; color:var(--brand); }
.btc-desc { margin-top:6px; font-size:12px; color:var(--t3); }
.btc-check, .pc-check { display:none; position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; }
.btc-check::after, .pc-check::after { content:''; position:absolute; left:8px; top:4px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.bid-type-card.selected .btc-check { display:block; background:var(--brand); }

/* 天数 / 内容 / 金额 */
.bid-days-row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--t2); }
.bid-days-row input, .bid-select, .bid-amount-row input { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; transition:border-color .18s, box-shadow .18s; }
.bid-days-row input:focus, .bid-select:focus, .bid-amount-row input:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.bid-days-row input { width:130px; }
.bid-select { width:100%; max-width:520px; }
.bid-lock-box { background:#f7f8fc; padding:12px 16px; border-radius:10px; font-size:14px; color:var(--t1); }
.bid-lock-tip { color:var(--t3); font-size:12px; }
.bid-amount-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bid-amount-row input { width:190px; }
.bid-balance-tip { font-size:13px; color:var(--t2); }
.bid-balance-tip b { color:var(--green); }
.bid-recharge-btn { display:none; background:#ff7a45; color:#fff; padding:6px 16px; border-radius:15px; font-size:13px; text-decoration:none; }
.bid-recharge-btn:hover { background:#f56a36; color:#fff; }
.bid-min-info { margin-top:10px; font-size:13px; color:var(--t2); }
.bid-min-info strong { color:#fa541c; }
.bid-invalid-info { display:none; margin-top:8px; font-size:13px; color:var(--red); }

/* 支付方式卡片（横排，图标与品牌色） */
.pay-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.pay-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 12px 16px; border:2px solid var(--line); border-radius:14px; cursor:pointer; background:#fff; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s; }
.pay-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.pay-card input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.pc-icon { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.pc-icon svg { width:26px; height:26px; }
.pay-card-balance .pc-icon { background:rgba(250,140,22,.12); color:#fa8c16; }
.pay-card-wechat .pc-icon { background:rgba(7,193,96,.12); color:#07c160; }
.pay-card-alipay .pc-icon { background:rgba(22,119,255,.12); color:#1677ff; }
.pay-card-balance.selected { border-color:#fa8c16; background:#fffaf4; }
.pay-card-wechat.selected { border-color:#07c160; background:#f3fcf7; }
.pay-card-alipay.selected { border-color:#1677ff; background:#f3f8ff; }
.pay-card-balance.selected .pc-check { display:block; background:#fa8c16; }
.pay-card-wechat.selected .pc-check { display:block; background:#07c160; }
.pay-card-alipay.selected .pc-check { display:block; background:#1677ff; }
.pc-name { font-size:15px; font-weight:700; color:var(--t1); }
.pc-sub { margin-top:4px; font-size:12px; color:var(--t3); }

/* 递交按钮 */
.bid-submit-btn { width:100%; border:none; background:var(--brand-grad); color:#fff; font-size:16px; font-weight:700; letter-spacing:1px; padding:14px; border-radius:12px; cursor:pointer; box-shadow:0 8px 20px rgba(102,126,234,.32); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.bid-submit-btn:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(102,126,234,.42); }
.bid-submit-btn:active { transform:translateY(0); }

/* 图片大图灯箱 */
.mc-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; justify-content:center; align-items:center; padding:20px; }
.mc-lightbox.show { display:flex; }
.mc-lightbox img { max-width:92vw; max-height:90vh; border-radius:8px; }
.mc-lightbox-close { position:absolute; top:16px; right:20px; color:#fff; font-size:34px; cursor:pointer; line-height:1; }

.moments-empty, .moments-load { text-align:center; color:var(--t3); padding:30px 0; font-size:14px; }
@media (max-width:960px) {
    .moments-wrap { grid-template-columns:1fr; }
    .moments-side { display:none; }
}

/* ============ 文章系统 ============ */
/* 三栏布局：左分类菜单 / 中正文 / 右栏组件 */
.article-layout { display:grid; grid-template-columns:260px 1fr 280px; gap:20px; max-width:1280px; margin:20px auto; padding:0 16px; }
.article-left { position:sticky; top:80px; align-self:start; max-height:calc(100vh - 100px); overflow-y:auto; }
.article-main { min-width:0; }
.article-right { position:sticky; top:80px; align-self:start; max-height:calc(100vh - 100px); overflow-y:auto; }

/* 左栏分类菜单（结构：.article-cat-menu > a + .cat-item > a + .cat-children） */
.article-cat-menu { background:var(--card); border-radius:var(--r-md); padding:16px 14px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:8px; }
.article-cat-menu > a, .article-cat-menu .cat-item > a { display:block; padding:11px 14px; border-radius:var(--r-sm); font-size:18px; line-height:1.5; color:var(--t2); background:#f7f8fc; transition:background .15s, color .15s, transform .15s; }
.article-cat-menu > a:hover, .article-cat-menu .cat-item > a:hover { background:#eef0fa; color:var(--brand); transform:translateY(-1px); }
.article-cat-menu > a.active, .article-cat-menu .cat-item > a.active { background:var(--brand-grad); color:#fff; font-weight:600; box-shadow:0 3px 10px rgba(102,126,234,.35); }
/* 二级分类缩进 */
.article-cat-menu .cat-children { display:flex; flex-direction:column; gap:5px; margin:4px 0 6px 18px; }
.article-cat-menu .cat-children a { font-size:15px; padding:8px 10px; color:var(--t3); background:transparent; border-radius:var(--r-sm); transition:background .15s, color .15s; }
.article-cat-menu .cat-children a:hover { background:#f0f1f7; color:var(--brand); }
.article-cat-menu .cat-children a.active { color:var(--brand); font-weight:600; }

/* 面包屑（文章列表页） */
.breadcrumb { max-width:1280px; margin:18px auto -6px; padding:0 16px; font-size:13px; color:var(--t3); }
.breadcrumb a { color:var(--t2); }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb .sep { margin:0 8px; }
.breadcrumb .current { color:var(--brand); font-weight:500; }

/* 分类列表页标题 */
.article-list-title { font-size:20px; font-weight:700; color:var(--t1); margin:0 0 14px; }

/* 文章列表项：整卡为 <a>，左封面图 + 右标题/简介/元信息 */
.article-card { display:grid; grid-template-columns:150px 1fr; gap:14px; background:var(--card); border-radius:var(--r-md); padding:14px; box-shadow:var(--sh-sm); color:inherit; text-decoration:none; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.article-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.article-card-cover { width:100%; height:104px; border-radius:10px; overflow:hidden; background:#f0f1f7; }
.article-card-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s var(--ease); }
.article-card:hover .article-card-cover img { transform:scale(1.06); }
.article-card-body { display:flex; flex-direction:column; gap:6px; min-width:0; }
.article-card-title { font-size:18px; font-weight:600; color:var(--t1); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s; }
.article-card:hover .article-card-title { color:var(--brand); }
.article-card-summary { font-size:13px; color:var(--t3); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.article-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:var(--t3); margin-top:auto; }
.article-card-cat { color:var(--brand); font-weight:500; }
/* 无封面图时隐藏左列，正文占满 */
.article-card-no-cover { grid-template-columns:1fr; }
.article-card-no-cover .article-card-cover { display:none; }

/* 列表项间距 */
.article-list { display:flex; flex-direction:column; gap:14px; }

/* 文章省略号式分页 */
.article-pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:28px; flex-wrap:wrap; }
.article-pagination a, .article-pagination span { padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#666; font-size:13px; transition:all .18s var(--ease); }
.article-pagination a:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-1px); box-shadow:var(--sh-sm); }
.article-pagination .page-cur { background:var(--brand-grad); color:#fff; border-color:transparent; font-weight:600; box-shadow:0 3px 10px rgba(102,126,234,.35); }
.article-pagination .page-ellipsis { border:none; background:transparent; color:var(--t3); padding:8px 6px; }
.article-pagination .page-prev, .article-pagination .page-next { background:#f7f8fc; }

/* 相关阅读容器（标题 h3 + 列表 + 加载按钮） */
.article-related { margin-top:24px; }
.article-related h3 { font-size:18px; font-weight:700; color:var(--t1); margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--brand); }
.article-related-list { display:flex; flex-direction:column; gap:14px; }
.article-related-more { display:block; width:100%; padding:10px; margin-top:14px; background:#f7f8fc; color:var(--t2); border:1px dashed var(--line); border-radius:var(--r-sm); font-size:14px; cursor:pointer; font-family:inherit; transition:background .15s, color .15s, border-color .15s; }
.article-related-more:hover { background:#eef0fa; color:var(--brand); border-color:var(--brand); }

/* 详情页容器（卡片化 + 分隔线） */
.article-detail { background:var(--card); border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-sm); }
.article-detail hr { border:none; border-top:1px solid var(--line); margin:20px 0; }
/* 详情页大标题 */
.article-detail-title { font-size:28px; font-weight:700; color:var(--t1); line-height:1.35; margin:0 0 10px; }
/* 详情页元信息行 */
.article-detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:13px; color:var(--t3); padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.article-detail-meta .meta-cat { color:var(--brand); font-weight:500; }
/* 详情页正文容器 */
.article-detail-body { font-size:15px; line-height:1.85; color:var(--t1); word-break:break-word; }
.article-detail-body p { margin-bottom:16px; }
.article-detail-body h2, .article-detail-body h3, .article-detail-body h4 { margin:22px 0 12px; color:var(--t1); font-weight:600; }
.article-detail-body h2 { font-size:20px; }
.article-detail-body h3 { font-size:18px; }
.article-detail-body h4 { font-size:16px; }
.article-detail-body img { max-width:100%; height:auto; border-radius:8px; margin:10px 0; }
.article-detail-body blockquote { margin:16px 0; padding:10px 16px; background:#f7f8fc; border-left:4px solid var(--brand); border-radius:0 8px 8px 0; color:var(--t2); }
.article-detail-body a { color:var(--brand); text-decoration:underline; }
.article-detail-body ul, .article-detail-body ol { margin:12px 0 12px 22px; }
.article-detail-body li { margin-bottom:6px; }

/* 详情页互动按钮（点赞/收藏，位于元信息行内） */
.article-react { display:inline-flex; align-items:center; gap:5px; padding:4px 14px; border-radius:16px; background:#f7f8fc; color:var(--t2); font-size:13px; cursor:pointer; border:1px solid var(--line); font-family:inherit; transition:background .15s, color .15s, transform .15s, border-color .15s; }
.article-react em { font-style:normal; }
.article-react:hover { background:#eef0fa; color:var(--brand); transform:translateY(-1px); }
.article-react.active { background:var(--brand-grad); color:#fff; border-color:transparent; }

/* 标签区（右对齐） */
.article-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:18px 0; }
.article-tag { display:inline-block; padding:3px 12px; background:#f0f1f7; color:var(--t2); border-radius:12px; font-size:12px; transition:background .15s, color .15s, transform .15s; }
.article-tag:hover { background:var(--brand); color:#fff; transform:translateY(-1px); }

/* 评论表单 / 列表 */
.article-comment-form { background:var(--card); border-radius:var(--r-md); padding:20px; box-shadow:var(--sh-sm); margin:24px 0; }
.article-comment-form h3 { font-size:16px; color:var(--t1); margin:0 0 14px; }
.article-comment-form textarea { width:100%; min-height:100px; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:14px; font-family:inherit; resize:vertical; transition:border-color .18s, box-shadow .18s; }
.article-comment-form textarea:focus { border-color:var(--brand); outline:none; box-shadow:var(--ring); }
.article-comment-form .btn-primary { display:inline-block; width:auto; padding:8px 22px; margin-top:10px; font-size:14px; }
.article-comment-list { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.article-comment-list h3 { font-size:16px; color:var(--t1); margin:0 0 4px; }
.article-comment-item { background:var(--card); border-radius:var(--r-md); padding:14px 18px; box-shadow:var(--sh-sm); transition:box-shadow .15s; }
.article-comment-item:hover { box-shadow:var(--sh-md); }
.article-comment-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.article-comment-name { font-size:13px; font-weight:600; color:var(--t1); }
.article-comment-date { font-size:12px; color:var(--t3); }
.article-comment-body { font-size:14px; color:var(--t2); line-height:1.6; word-break:break-word; }
/* 空状态提示 */
.empty-tip { text-align:center; color:var(--t3); padding:20px 0; font-size:13px; }
/* 空状态大区域（城市/省份/分类无内容） */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px;padding:40px 20px;background:#fafafa;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:16px;text-align:center;}
.empty-state-icon{margin-bottom:18px;display:block;}
.empty-state-text{color:var(--t3);font-size:15px;letter-spacing:1px;}

/* 右栏卡片 */
.article-right-inner { display:flex; flex-direction:column; gap:16px; }
.article-box { background:var(--card); border-radius:var(--r-md); padding:16px; box-shadow:var(--sh-sm); }
.article-box h3 { font-size:15px; color:var(--t1); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); }

/* 右栏：最新发布（上封面下标题，一行2个） */
.article-grid2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.article-mini { display:flex; flex-direction:column; gap:6px; color:inherit; text-decoration:none; }
.article-mini-img { width:100%; height:80px; border-radius:8px; overflow:hidden; background:#f0f1f7; }
.article-mini-img img { width:100%; height:100%; object-fit:cover; display:block; }
.article-mini-title { font-size:13px; color:var(--t2); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:color .15s; }
.article-mini:hover .article-mini-title { color:var(--brand); }

/* 右栏：热门文章（左图右标题） */
.article-hot-list { display:flex; flex-direction:column; }
.article-hot-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); color:inherit; }
.article-hot-list li:last-child .article-hot-item { border-bottom:none; }
.article-hot-img { width:64px; height:48px; border-radius:6px; overflow:hidden; flex-shrink:0; background:#f0f1f7; }
.article-hot-img img { width:100%; height:100%; object-fit:cover; display:block; }
.article-hot-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.article-hot-title { font-size:13px; color:var(--t2); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s; }
.article-hot-item:hover .article-hot-title { color:var(--brand); }
.article-hot-meta { font-size:11px; color:var(--t3); }

/* 广告位容器：居中，max-width:100% */
.ad-item { display:flex; justify-content:center; align-items:center; margin:16px 0; max-width:100%; }
.ad-item img { max-width:100%; height:auto; border-radius:var(--r-sm); }
.ad-item a { display:inline-block; max-width:100%; }

/* ============ 文章系统响应式 ============ */
/* 中屏（≤1024px）：隐藏右栏，三栏改两栏 */
@media (max-width:1024px) {
    .article-layout { grid-template-columns:260px 1fr; }
    .article-right { display:none; }
}
/* 窄屏（≤768px）：单栏堆叠 */
@media (max-width:768px) {
    .article-layout { grid-template-columns:1fr; gap:14px; }
    .article-left { position:static; max-height:none; }
    .article-card { grid-template-columns:88px 1fr; gap:10px; padding:10px; }
    .article-card-cover { height:70px; }
    .article-card-no-cover { grid-template-columns:1fr; }
    .article-detail { padding:16px; }
    .article-detail-title { font-size:22px; }
    .article-grid2 { grid-template-columns:1fr; }
    .article-tags { justify-content:flex-start; }
}

/* 文章系统降低动效 */
@media (prefers-reduced-motion: reduce) {
    .article-card, .article-tag, .article-mini, .article-cat-menu > a, .article-cat-menu .cat-children a, .article-pagination a, .article-comment-item, .article-react, .article-card-cover img { transform:none !important; transition:none !important; }
}

/* SweetAlert2 弹窗层级高于全屏模态/预约弹窗(.modal-mask z-index:9000)，避免警告被覆盖 */
.swal2-container { z-index: 99999 !important; }

/* ============ 会员中心底部版权独立样式（不影响前端 .footer） ============ */
.member-footer { text-align:center; padding:24px 16px; color:var(--t3); font-size:13px; border-top:1px solid var(--line); margin-top:40px; background:#fafafa; }
.member-footer p { margin:0; }
.member-footer a { color:var(--t3); text-decoration:none; }
.member-footer a:hover { color:var(--brand); }

/* ============ 会员中心左侧菜单分组（details/summary 折叠） ============ */
.member-menu .m-grp { margin-top:6px; }
.member-menu .m-grp > summary { padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--t2); cursor:pointer; user-select:none; list-style:none; display:flex; align-items:center; justify-content:space-between; transition:background .15s; }
.member-menu .m-grp > summary::-webkit-details-marker { display:none; }
.member-menu .m-grp > summary::after { content:'›'; font-size:16px; color:var(--t3); transition:transform .18s; }
.member-menu .m-grp[open] > summary::after { transform:rotate(90deg); }
.member-menu .m-grp > summary:hover { background:#f0f2ff; }
.member-menu .m-grp-body { padding:4px 0 4px 10px; display:flex; flex-direction:column; }
.member-menu .m-grp-body a { padding:8px 14px; border-radius:8px; color:#555; margin-bottom:2px; font-size:13px; transition:background .15s, color .15s; }
.member-menu .m-grp-body a:hover { background:#f0f2ff; color:var(--brand); }
.member-menu .m-grp-body a.active { background:var(--brand-grad); color:#fff; box-shadow:0 4px 12px rgba(102,126,234,.35); }
/* 移动端：分组横向排列 */
@media (max-width:768px) {
    .member-menu .m-grp-body a { flex:1 1 80px; min-width:80px; text-align:center; padding:8px; font-size:13px; }
}