/* ==========================================================================
   逍遥社区 - 前台样式 · 设计令牌（玻璃拟态 + 靛蓝渐变）
   深浅两套：html[data-theme="dark"] 覆盖；默认浅色
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---- 主色：靛蓝 → 紫罗兰 ---- */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-2: #8b5cf6;
    --primary-soft: rgba(99, 102, 241, .10);
    --primary-ring: rgba(99, 102, 241, .22);
    --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    --grad-soft: linear-gradient(135deg, rgba(99, 102, 241, .13), rgba(139, 92, 246, .13));

    /* ---- 背景与玻璃表面 ---- */
    --bg: #eef1fa;
    --bg-2: #e6ebf9;
    --blob-1: rgba(99, 102, 241, .30);
    --blob-2: rgba(139, 92, 246, .26);
    --blob-3: rgba(56, 189, 248, .18);
    --surface: rgba(255, 255, 255, .74);
    --surface-solid: #ffffff;
    --surface-2: rgba(255, 255, 255, .55);
    --surface-3: rgba(240, 243, 252, .78);
    --card: var(--surface);
    --glass-blur: blur(18px) saturate(165%);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .8);
    --glass-hi-2: 0 1px 0 rgba(255, 255, 255, .6);

    /* ---- 文字 ---- */
    --text: #141a2e;
    --text-2: #49506c;
    --muted: #8a90a8;

    /* ---- 描边 ---- */
    --border: rgba(20, 26, 46, .085);
    --border-2: rgba(20, 26, 46, .045);

    /* ---- 语义色 ---- */
    --danger: #e5484d;
    --danger-soft: rgba(229, 72, 77, .10);
    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, .10);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, .13);

    /* ---- 圆角与阴影 ---- */
    --radius: 18px;
    --radius-sm: 11px;
    --radius-xs: 8px;
    --shadow-sm: 0 1px 2px rgba(24, 32, 56, .04), 0 2px 8px rgba(24, 32, 56, .05);
    --shadow: 0 8px 28px rgba(53, 63, 118, .09);
    --shadow-lg: 0 22px 52px rgba(53, 63, 118, .16);
    --shadow-glow: 0 10px 28px rgba(99, 102, 241, .30);

    --header-h: 64px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------ 深色主题 ------------------------------ */
html[data-theme="dark"] {
    color-scheme: dark;

    --primary: #818cf8;
    --primary-dark: #6366f1;
    --primary-light: #a5b4fc;
    --primary-2: #a78bfa;
    --primary-soft: rgba(129, 140, 248, .16);
    --primary-ring: rgba(129, 140, 248, .30);

    --bg: #080b16;
    --bg-2: #0d1223;
    --blob-1: rgba(99, 102, 241, .38);
    --blob-2: rgba(139, 92, 246, .30);
    --blob-3: rgba(56, 189, 248, .16);
    --surface: rgba(24, 29, 51, .70);
    --surface-solid: #161b30;
    --surface-2: rgba(30, 36, 62, .55);
    --surface-3: rgba(38, 44, 74, .62);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
    --glass-hi-2: 0 1px 0 rgba(255, 255, 255, .04);

    --text: #eef0fa;
    --text-2: #b7bdd6;
    --muted: #7f879f;

    --border: rgba(255, 255, 255, .10);
    --border-2: rgba(255, 255, 255, .055);

    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, .14);
    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, .13);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, .14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
    --shadow: 0 10px 30px rgba(0, 0, 0, .38);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, .55);
    --shadow-glow: 0 10px 30px rgba(99, 102, 241, .38);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

/* 渐变光斑背景层（玻璃拟态的“背后光”，固定在视口） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1000px 640px at 10% -10%, var(--blob-1), transparent 62%),
        radial-gradient(900px 580px at 92% 2%, var(--blob-2), transparent 60%),
        radial-gradient(820px 560px at 48% 112%, var(--blob-3), transparent 64%);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.4; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ------------------------------ 头部 ------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), #7c9cff);
    color: #fff; font-weight: 700; font-size: 19px;
    box-shadow: 0 4px 12px rgba(79, 124, 255, .35);
}
.brand-logo { height: 38px; width: auto; border-radius: 10px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 17px; color: var(--text); }
.brand-text em { font-size: 11px; color: var(--muted); }

.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 13px; border-radius: var(--radius-sm);
    color: var(--text-2); font-size: 14.5px; font-weight: 500;
}
.nav-link:hover { background: var(--primary-soft); color: var(--primary); }
.nav-link.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.caret {
    width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 4px solid currentColor; opacity: .6;
}

.nav-dropdown { position: relative; }
.dropdown-panel, .user-panel {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 220px; padding: 7px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all .18s ease; z-index: 120;
}
.nav-dropdown:hover .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px; border-radius: var(--radius-sm);
    color: var(--text-2); font-size: 14px;
}
.dropdown-item:hover { background: var(--bg); color: var(--primary); }
.dropdown-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dropdown-item .di-name { flex: 1; }
.dropdown-item .di-count { font-size: 12px; color: var(--muted); }
.dropdown-item.is-strong { color: var(--primary); font-weight: 600; }
.dropdown-item.is-danger { color: var(--danger); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.header-search { position: relative; display: flex; align-items: center; }
.header-search input {
    width: 200px; height: 36px; padding: 0 36px 0 13px;
    border: 1px solid var(--border); border-radius: 18px;
    background: var(--bg); font-size: 13.5px; color: var(--text);
    outline: none; transition: all .18s;
}
.header-search input:focus { width: 240px; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.header-search button {
    position: absolute; right: 4px; width: 30px; height: 30px;
    display: grid; place-items: center; border: 0; background: none;
    color: var(--muted); cursor: pointer; border-radius: 50%;
}
.header-search button:hover { color: var(--primary); background: var(--primary-soft); }

.icon-btn {
    position: relative; width: 36px; height: 36px;
    display: grid; place-items: center; border-radius: 50%;
    color: var(--text-2); background: none; border: 0; cursor: pointer;
}
.icon-btn:hover { background: var(--bg); color: var(--primary); }
.badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--danger); color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
}

.user-menu { position: relative; }
.user-trigger {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border: 1px solid var(--border);
    border-radius: 20px; background: var(--surface); cursor: pointer;
    color: var(--text-2); font-size: 13.5px;
}
.user-trigger:hover { border-color: var(--primary); color: var(--primary); }
.user-trigger img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.user-menu.is-open .user-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.user-panel { left: auto; right: 0; }
.user-panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border-2);
}
.user-panel-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.user-panel-head strong { display: block; font-size: 14px; color: var(--text); }
.user-panel-head span { font-size: 12px; color: var(--muted); }

.nav-toggle { display: none; width: 38px; height: 38px; border: 0; background: none; cursor: pointer; padding: 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--text-2); margin: 4px 0; border-radius: 2px; }

/* ------------------------------ 按钮 ------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 18px; border-radius: var(--radius-sm);
    border: 1px solid transparent; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .16s; white-space: nowrap; text-decoration: none;
}
.btn-sm { height: 32px; padding: 0 13px; font-size: 13px; border-radius: 8px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(79, 124, 255, .28); }
.btn-primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn-block { width: 100%; }
.btn-disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #cc3b40; color: #fff; }

/* ------------------------------ 布局 ------------------------------ */
.site-main { min-height: 60vh; padding: 22px 0 40px; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.narrow-layout { max-width: 840px; }
.main-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-2);
}
.panel-title { font-size: 17px; }
.panel-title em { color: var(--muted); font-size: 14px; font-weight: 500; }
.panel-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.panel-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.page-title { font-size: 20px; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.link-more { font-size: 13px; color: var(--muted); }
.link-more:hover { color: var(--primary); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
    padding: 7px 14px; border-radius: 18px;
    font-size: 13.5px; color: var(--text-2); font-weight: 500;
}
.tab:hover { background: var(--bg); color: var(--primary); }
.tab.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* ------------------------------ 板块条 / 板块页头 ------------------------------ */
.board-strip {
    display: flex; gap: 9px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 13px 16px; box-shadow: var(--shadow-sm);
}
.board-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 18px;
    background: var(--bg); color: var(--text-2); font-size: 13.5px; font-weight: 500;
}
.board-chip:hover { background: var(--primary-soft); color: var(--primary); }
.board-chip.is-active { background: var(--primary); color: #fff; }
.board-chip em { font-size: 11px; opacity: .65; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; }

.board-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 22px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--board-color) 12%, #fff), #fff 70%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.board-hero-main { display: flex; gap: 15px; align-items: flex-start; }
.board-hero-icon {
    width: 54px; height: 54px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 15px;
    background: var(--board-color); color: #fff; font-size: 24px; font-weight: 700;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--board-color) 40%, transparent);
}
.board-hero-title { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.board-hero-desc { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.board-hero-stats { display: flex; gap: 16px; margin-top: 9px; font-size: 13px; color: var(--muted); }
.board-hero-stats strong { color: var(--text); margin-right: 3px; }
.board-hero-actions { display: flex; gap: 9px; align-items: center; }

.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding: 2px 4px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb em { color: var(--text-2); }

/* ------------------------------ 帖子列表 ------------------------------ */
.post-list { display: flex; flex-direction: column; }
.post-item {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-2);
    transition: background .15s;
}
.post-item:last-child { border-bottom: 0; }
.post-item:hover { background: var(--surface-2); }
.post-item.is-top { background: linear-gradient(90deg, #fff9f0, #fff 30%); }
.post-item.is-top:hover { background: linear-gradient(90deg, #fff5e6, #fafbff 40%); }
.post-avatar img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; }
.post-main { flex: 1; min-width: 0; }
.post-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 16px; }
.post-title { color: var(--text); font-weight: 600; }
.post-title:hover { color: var(--primary); }
.post-excerpt {
    margin-top: 5px; font-size: 13.5px; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.mini-tag {
    padding: 2px 9px; border-radius: 10px;
    background: var(--bg); color: var(--muted); font-size: 11.5px;
}
.mini-tag:hover { background: var(--primary-soft); color: var(--primary); }
.post-meta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.board-tag {
    padding: 2px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--tag-color) 12%, #fff);
    color: var(--tag-color); font-weight: 600; font-size: 12px;
}
.board-tag:hover { background: var(--tag-color); color: #fff; }
.meta-link { color: var(--text-2); font-weight: 500; }
.meta-link:hover { color: var(--primary); }
.meta-stat { display: inline-flex; align-items: center; gap: 3px; }

.post-last {
    flex-shrink: 0; width: 108px; text-align: right;
    font-size: 12px; color: var(--muted); line-height: 1.5;
}
.post-last .last-user { display: block; color: var(--text-2); font-weight: 500; }
.post-last.is-empty { opacity: .55; }

.tag { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.tag-top { background: #fff1e6; color: #e2680a; }
.tag-essence { background: var(--success-soft); color: #109c4c; }
.tag-locked { background: #f0f1f5; color: #7a8398; }
.tag-pending { background: #fff8e1; color: #b7791f; }

/* ------------------------------ 侧边栏 ------------------------------ */
.sidebar { display: flex; flex-direction: column; gap: 15px; position: sticky; top: calc(var(--header-h) + 18px); }
.side-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.side-title { font-size: 14.5px; margin-bottom: 12px; color: var(--text); }
.side-notice { background: linear-gradient(135deg, #eef3ff, #fff); border-color: #dfe7ff; }
.side-notice p { font-size: 13.5px; color: var(--text-2); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-cell { background: var(--bg); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.stat-cell strong { display: block; font-size: 18px; color: var(--primary); }
.stat-cell span { font-size: 12px; color: var(--muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.cloud-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px; border-radius: 14px;
    background: var(--bg); color: var(--text-2); font-size: 12.5px;
}
.cloud-tag:hover { background: var(--primary-soft); color: var(--primary); }
.cloud-tag em { font-size: 10.5px; color: var(--muted); }

.user-list li a {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 7px; border-radius: var(--radius-sm);
}
.user-list li a:hover { background: var(--bg); }
.user-list img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.u-name { flex: 1; font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-level { font-size: 11px; color: var(--primary); background: var(--primary-soft); padding: 1px 7px; border-radius: 8px; }

.avatar-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.avatar-strip img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }

.related-list li { padding: 8px 0; border-bottom: 1px dashed var(--border-2); }
.related-list li:last-child { border-bottom: 0; }
.related-list a { display: block; font-size: 13.5px; color: var(--text-2); }
.related-list a:hover { color: var(--primary); }
.related-list span { font-size: 11.5px; color: var(--muted); }

/* ------------------------------ 帖子详情 ------------------------------ */
.post-detail-head { padding: 22px 24px 16px; }
.post-detail-badges { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 11px; }
.post-detail-title { font-size: 26px; line-height: 1.4; letter-spacing: -.2px; }
.post-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.author-block { display: flex; align-items: center; gap: 10px; }
.author-block img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.author-info strong { display: block; font-size: 14px; color: var(--text); }
.author-info span { font-size: 12px; color: var(--muted); }
.post-detail-stat { display: flex; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }

.post-detail-cover { padding: 0 24px 16px; }
.post-detail-cover img { width: 100%; border-radius: var(--radius-sm); }

.post-detail-body { padding: 6px 24px 20px; }
.post-detail-tags { padding: 0 24px 16px; display: flex; gap: 7px; flex-wrap: wrap; }

.post-detail-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 15px 24px; border-top: 1px solid var(--border-2); background: var(--surface-2);
}
.inline-form { display: inline; }
.action-big {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 17px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); font-size: 13.5px; font-weight: 500; cursor: pointer;
    transition: all .16s;
}
.action-big:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.action-big.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.action-big.is-active:hover { background: var(--primary-dark); color: #fff; }
.action-big em { font-size: 12px; opacity: .85; }
.action-big.is-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Markdown 正文 */
.markdown-body { font-size: 15.5px; color: var(--text); line-height: 1.85; word-wrap: break-word; }
.markdown-body .md-p { margin: 0 0 14px; }
.markdown-body .md-h { margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-2); }
.markdown-body h1.md-h { font-size: 23px; }
.markdown-body h2.md-h { font-size: 20px; }
.markdown-body h3.md-h { font-size: 17.5px; }
.markdown-body h4.md-h, .markdown-body h5.md-h, .markdown-body h6.md-h { font-size: 16px; }
.markdown-body .md-quote {
    margin: 14px 0; padding: 11px 16px;
    border-left: 3px solid var(--primary);
    background: var(--primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-2);
}
.markdown-body .md-ul, .markdown-body .md-ol { margin: 0 0 14px; padding-left: 24px; }
.markdown-body .md-ul { list-style: disc; }
.markdown-body .md-ol { list-style: decimal; }
.markdown-body .md-ul li, .markdown-body .md-ol li { margin-bottom: 5px; }
.markdown-body .md-img { border-radius: var(--radius-sm); margin: 12px 0; }
.markdown-body .md-code {
    padding: 2px 6px; border-radius: 5px;
    background: #f1f3f9; color: #d6336c; font-size: 13.5px;
}
.markdown-body .md-pre {
    margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-sm);
    background: #1e2432; color: #e6e9f0; overflow-x: auto; font-size: 13px; line-height: 1.65;
}
.markdown-body .md-pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.markdown-body .md-hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.markdown-body .md-a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.markdown-body blockquote + blockquote { margin-top: -14px; border-radius: 0; }

/* ------------------------------ 评论 ------------------------------ */
.comment-panel { scroll-margin-top: 80px; }
.comment-form { padding: 18px 20px; border-bottom: 1px solid var(--border-2); background: var(--surface-2); }
.comment-form-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 13.5px; color: var(--text-2); }
.comment-form-head img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.reply-hint { margin-left: 8px; font-size: 12.5px; color: var(--primary); background: var(--primary-soft); padding: 2px 10px; border-radius: 10px; }
.reply-hint button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; margin-left: 4px; }
.comment-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: inherit; font-size: 14.5px; line-height: 1.7;
    resize: vertical; outline: none; transition: all .16s; color: var(--text);
}
.comment-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.comment-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.comment-form-foot .btn { margin-left: auto; }
.form-tip { font-size: 12px; color: var(--muted); }
.upload-btn {
    display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; color: var(--text-2); cursor: pointer; background: var(--surface);
}
.upload-btn:hover { border-color: var(--primary); color: var(--primary); }

.comment-list { padding: 4px 0; }
.comment { display: flex; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border-2); }
.comment:last-child { border-bottom: 0; }
.comment.is-child { padding: 12px 20px 12px 0; background: #fbfcff; border-radius: var(--radius-sm); }
.comment-avatar img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.comment-author { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.comment-author:hover { color: var(--primary); }
.comment-level { color: var(--muted); }
.comment-dot { color: var(--border); }
.comment-time { color: var(--muted); }
.comment-body { margin-top: 5px; font-size: 14.5px; color: var(--text-2); }
.comment-text .md-p:last-child { margin-bottom: 0; }
.comment-text .markdown-body, .comment-body .md-p { margin-bottom: 6px; }
.reply-to { color: var(--primary); font-size: 13px; }
.comment-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.act-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; background: none; cursor: pointer;
    font-size: 12.5px; color: var(--muted); padding: 3px 8px; border-radius: 7px;
}
.act-btn:hover { background: var(--bg); color: var(--primary); }
.act-btn.is-active { color: var(--primary); font-weight: 600; }
.act-btn.is-danger:hover { color: var(--danger); background: var(--danger-soft); }
.comment-children { margin-top: 10px; border-left: 2px solid var(--border-2); padding-left: 14px; }

.role-badge { padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.role-admin { background: #ffe9e9; color: #d93b3b; }
.role-mod { background: #e8f0ff; color: var(--primary-dark); }
.role-vip { background: linear-gradient(135deg, #ffe9b8, #ffd479); color: #8a5a00; }

.login-prompt { text-align: center; padding: 30px 20px; border-bottom: 1px solid var(--border-2); }
.login-prompt p { margin-bottom: 12px; color: var(--muted); }
.login-prompt .btn { margin: 0 4px; }

.author-card { text-align: center; }
.author-card img { width: 66px; height: 66px; border-radius: 18px; margin: 0 auto 10px; object-fit: cover; }
.author-card > strong { display: block; font-size: 15px; }
.author-level { font-size: 12px; color: var(--muted); }
.author-stats { display: flex; justify-content: center; gap: 18px; margin: 13px 0; }
.author-stats div { text-align: center; }
.author-stats strong { display: block; font-size: 16px; color: var(--primary); }
.author-stats span { font-size: 11.5px; color: var(--muted); }

/* ------------------------------ 用户主页 ------------------------------ */
.profile-hero {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.profile-hero-bg { height: 96px; background: linear-gradient(120deg, #4f7cff, #7c9cff 45%, #a3b8ff); }
.profile-hero-inner { display: flex; gap: 18px; align-items: flex-end; padding: 0 24px; margin-top: -36px; flex-wrap: wrap; }
.profile-avatar { width: 92px; height: 92px; border-radius: 24px; border: 4px solid #fff; object-fit: cover; background: var(--surface); }
.profile-info { flex: 1; min-width: 200px; padding-bottom: 6px; }
.profile-name { font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-sub { display: flex; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 5px; }
.profile-bio { font-size: 14px; color: var(--text-2); margin-top: 8px; }
.profile-actions { padding-bottom: 10px; }
.profile-stats { display: flex; gap: 34px; padding: 16px 24px 20px; }
.profile-stats div strong { display: block; font-size: 19px; color: var(--text); }
.profile-stats div span { font-size: 12.5px; color: var(--muted); }

/* ------------------------------ 用户中心 ------------------------------ */
.me-card { text-align: center; }
.me-avatar { width: 78px; height: 78px; border-radius: 22px; margin: 0 auto 11px; object-fit: cover; }
.me-name { display: block; font-size: 16px; }
.me-level { font-size: 12.5px; color: var(--muted); display: block; margin: 3px 0 5px; }
.me-stats { display: flex; justify-content: center; gap: 20px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-2); }
.me-stats div { text-align: center; }
.me-stats strong { display: block; font-size: 16px; color: var(--primary); }
.me-stats span { font-size: 11.5px; color: var(--muted); }
.me-nav { padding: 8px; }
.me-nav-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 13px; border-radius: var(--radius-sm);
    font-size: 14px; color: var(--text-2);
}
.me-nav-item:hover { background: var(--bg); color: var(--primary); }
.me-nav-item.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.me-nav-item.is-active .badge { background: var(--surface); color: var(--primary); }
.me-nav-item .badge { position: static; margin-left: auto; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; padding: 18px 20px; }
.quick-card {
    padding: 16px; border-radius: var(--radius-sm);
    background: var(--bg); text-align: center; transition: all .16s;
}
.quick-card:hover { background: var(--primary-soft); transform: translateY(-2px); }
.quick-card strong { display: block; font-size: 22px; color: var(--primary); }
.quick-card span { font-size: 12.5px; color: var(--muted); }

.reply-list { padding: 6px 0; }
.reply-list li { padding: 15px 20px; border-bottom: 1px solid var(--border-2); }
.reply-list li:last-child { border-bottom: 0; }
.reply-post { font-size: 14.5px; font-weight: 600; }
.reply-content { font-size: 14px; color: var(--text-2); margin: 6px 0; }
.reply-content .md-p { margin-bottom: 4px; }
.reply-meta { display: flex; gap: 7px; font-size: 12px; color: var(--muted); }
.reply-list > p, .reply-list > div.empty-state { padding: 0; }

.notice-list { padding: 6px 0; }
.notice-item {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 20px; border-bottom: 1px solid var(--border-2);
}
.notice-item:last-child { border-bottom: 0; }
.notice-item.is-unread { background: #f7faff; }
.notice-item.is-unread::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-top: 9px; flex-shrink: 0; }
.notice-icon { font-size: 19px; line-height: 1.4; }
.notice-main { flex: 1; min-width: 0; }
.notice-text { font-size: 14px; color: var(--text-2); }
.notice-user { font-weight: 600; color: var(--text); }
.notice-content { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.notice-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 5px; flex-wrap: wrap; }

.avatar-editor { display: flex; align-items: center; gap: 18px; padding: 18px 20px 6px; }
.avatar-editor img { width: 76px; height: 76px; border-radius: 20px; object-fit: cover; }

/* ------------------------------ 表单 ------------------------------ */
.form { padding: 20px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.form-row label em { color: var(--danger); }
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="search"],
.form-row input[type="date"],
.form-row textarea,
.form-row select {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14.5px; color: var(--text);
    background: var(--surface); outline: none; transition: all .16s;
}
.form-row textarea { resize: vertical; line-height: 1.75; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-row input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.form-row label.checkbox, .form-row label.radio {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 400; font-size: 14px; color: var(--text-2); margin-bottom: 0; cursor: pointer;
}
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-row-full { grid-column: 1 / -1; }
.form-row-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.form-actions { display: flex; gap: 10px; padding-top: 6px; }
.narrow-form { max-width: 460px; }
.radio-group { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.link-muted { font-size: 13px; color: var(--muted); }
.link-muted:hover { color: var(--primary); }

.board-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.board-pick {
    position: relative; display: block; padding: 11px 13px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: all .16s; background: var(--surface);
}
.board-pick:hover { border-color: var(--primary); }
.board-pick.is-active { border-color: var(--primary); background: var(--primary-soft); }
.board-pick input { position: absolute; opacity: 0; }
.bp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.bp-name { font-size: 14px; font-weight: 600; color: var(--text); }
.bp-desc { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; padding-left: 14px; }
.editor-bar { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.cover-preview { margin-bottom: 9px; }
.cover-preview img { max-height: 150px; border-radius: var(--radius-sm); }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px; margin: 0 20px 18px; }
.alert ul { list-style: disc; padding-left: 20px; }
.alert-error { background: var(--danger-soft); color: #b42318; border: 1px solid #fecaca; }
.alert-warn { background: var(--warning-soft); color: #92400e; border: 1px solid #fde68a; }
.alert-success { background: var(--success-soft); color: #15803d; border: 1px solid #bbf7d0; }
.alert-info { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid #d8e3ff; }

/* ------------------------------ 登录注册 ------------------------------ */
.auth-wrap { display: grid; place-items: center; padding: 50px 20px; min-height: 70vh; }
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.auth-brand { text-align: center; padding: 32px 24px 6px; }
.auth-brand .brand-mark { margin: 0 auto 14px; width: 48px; height: 48px; font-size: 24px; border-radius: 14px; }
.auth-brand h1 { font-size: 22px; }
.auth-brand p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.auth-foot {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--border-2);
    font-size: 13px; background: var(--surface-2);
}

/* ------------------------------ 分页 / 空状态 / 提示 ------------------------------ */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.pager-list { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pager-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 9px;
    font-size: 13.5px; color: var(--text-2); background: var(--surface);
}
.pager-link:hover { border-color: var(--primary); color: var(--primary); }
.pager-link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pager-link.is-disabled { color: #c3c9d6; background: var(--bg); pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--muted); }
.pager-info { font-size: 12.5px; color: var(--muted); }

.empty-state { text-align: center; padding: 54px 20px; color: var(--muted); }
.empty-state.is-small { padding: 34px 20px; }
.empty-icon { font-size: 38px; margin-bottom: 10px; }
.empty-state h3 { font-size: 16px; color: var(--text-2); margin-bottom: 5px; }
.empty-state p { font-size: 13.5px; margin-bottom: 14px; }

.toast-wrap { position: fixed; top: 78px; right: 22px; z-index: 900; display: flex; flex-direction: column; gap: 9px; }
.toast {
    display: flex; align-items: center; gap: 12px;
    min-width: 240px; max-width: 380px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-size: 14px; color: var(--text-2);
    animation: toastIn .26s ease;
}
.toast button { margin-left: auto; border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.back-top {
    position: fixed; right: 22px; bottom: 26px; z-index: 300;
    width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
    color: var(--text-2); box-shadow: var(--shadow); font-size: 17px;
    opacity: 0; visibility: hidden; transition: all .2s;
}
.back-top.is-show { opacity: 1; visibility: visible; }
.back-top:hover { color: var(--primary); border-color: var(--primary); }

/* ------------------------------ 广告 ------------------------------ */
.banner-wrap { border-radius: var(--radius); overflow: hidden; }
.banner-ad { border-radius: var(--radius); overflow: hidden; }
.ad-slot { position: relative; }
.ad-item {
    position: relative; display: block; border-radius: var(--radius);
    overflow: hidden; border: 1px solid var(--border); background: var(--surface);
}
.ad-image img { width: 100%; display: block; }
.ad-image-ph {
    height: 120px; display: grid; place-items: center;
    background: var(--grad-soft);
    color: var(--primary); font-weight: 600; font-size: 17px;
}
.ad-text {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    background: var(--grad-soft);
}
.ad-text > div:first-child { flex: 1; min-width: 0; }
.ad-text-title { font-size: 18px; font-weight: 700; color: var(--text); word-break: break-word; }
.ad-text-desc { flex: 1; font-size: 13.5px; color: var(--text-2); }
.ad-btn {
    display: inline-flex; align-items: center; height: 34px; padding: 0 18px;
    background: var(--primary); color: #fff; border-radius: 17px;
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.ad-flag {
    position: absolute; right: 8px; bottom: 6px;
    padding: 1px 6px; border-radius: 4px;
    background: rgba(0, 0, 0, .38); color: #fff; font-size: 10px;
}
.ad-html { border: 1px dashed var(--border); border-radius: var(--radius); padding: 12px; }
.ad-inline { margin: 0; }
.ad-inline .ad-item { border-radius: 0; border-left: 0; border-right: 0; }
.ad-slot-ad { margin: 0; }
.side-ad-card { padding: 12px; }
.side-ad .ad-text { flex-direction: column; align-items: flex-start; gap: 6px; padding: 15px 16px; }
.side-ad .ad-text-title { font-size: 15px; }
.side-ad .ad-text-desc { font-size: 12.5px; }
.board-ads, .post-ads { display: flex; flex-direction: column; gap: 12px; }

.ad-carousel { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.ad-carousel-track { position: relative; }
.ad-carousel-item { display: none; }
.ad-carousel-item.is-active { display: block; animation: fadeIn .35s ease; }
.ad-carousel-item .ad-item { border: 0; border-radius: 0; }
.ad-carousel-dots { position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); display: flex; gap: 6px; }
.ad-dot {
    width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255, 255, 255, .6); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.ad-dot.is-active { background: var(--surface); width: 18px; border-radius: 4px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-float-ad { display: none; }

/* ------------------------------ 页脚 ------------------------------ */
.site-footer { background: #161c2b; color: #9aa4bb; margin-top: 20px; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; padding: 40px 20px 28px; }
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 13px; }
.footer-col p { font-size: 13px; line-height: 1.8; margin-bottom: 8px; }
.footer-col a { display: block; font-size: 13px; color: #9aa4bb; line-height: 2; }
.footer-col a:hover { color: #fff; }
.footer-icp a { display: inline; }
.footer-bottom { border-top: 1px solid #242c40; padding: 15px 0; font-size: 12.5px; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-meta { color: #6b7691; }

/* ------------------------------ 错误页 ------------------------------ */
.error-page { text-align: center; padding: 70px 20px; }
.error-code { font-size: 72px; font-weight: 800; color: var(--primary); opacity: .25; line-height: 1; }
.error-page h1 { font-size: 22px; margin: 12px 0 8px; }
.error-page p { color: var(--muted); margin-bottom: 22px; }
.error-actions { display: flex; gap: 10px; justify-content: center; }

/* ------------------------------ 安装向导 ------------------------------ */
.install-body { background: linear-gradient(160deg, #eef3ff, #f7f9fd 60%); min-height: 100vh; }
.install-wrap { max-width: 860px; margin: 0 auto; padding: 44px 20px 60px; }
.install-header { display: flex; align-items: center; gap: 15px; margin-bottom: 26px; }
.install-logo {
    width: 56px; height: 56px; border-radius: 17px;
    display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), #7c9cff);
    box-shadow: 0 8px 22px rgba(79, 124, 255, .35);
}
.install-header h1 { font-size: 22px; }
.install-header p { font-size: 13.5px; color: var(--muted); }
.install-steps { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 22px; flex-wrap: wrap; }
.install-steps li {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13.5px; color: var(--muted);
}
.install-steps li span {
    width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
    background: var(--border-2); color: var(--muted);
}
.install-steps li.is-done { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.install-steps li.is-done span { background: var(--primary); color: #fff; }
.install-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.install-card h2 { font-size: 18px; margin-bottom: 16px; }
.install-sub, .install-sub-title { font-size: 15px; margin: 22px 0 12px; padding-top: 16px; border-top: 1px dashed var(--border); }
.install-sub-title:first-of-type { border-top: 0; padding-top: 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.check-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--bg); font-size: 13.5px;
}
.check-item.is-ok .check-icon { color: var(--success); }
.check-item.is-bad { background: var(--danger-soft); }
.check-item.is-bad .check-icon { color: var(--danger); }
.check-item.is-warn .check-icon { color: var(--warning); }
.check-icon { font-weight: 700; }
.check-label { flex: 1; color: var(--text-2); }
.check-tag { font-size: 11.5px; color: var(--muted); }
.table-plain { width: 100%; font-size: 13px; margin-top: 8px; border-collapse: collapse; }
.table-plain th { text-align: left; padding: 6px 10px; color: var(--muted); font-weight: 500; width: 140px; }
.table-plain td { padding: 6px 10px; color: var(--text-2); }
.install-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; align-items: center; }
.install-actions .text-danger { margin-right: auto; color: var(--danger); font-size: 13.5px; }
.install-done { text-align: center; }
.done-icon {
    width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 30px; color: #fff;
    background: var(--success); box-shadow: 0 8px 22px rgba(22, 163, 74, .3);
}
.done-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.done-link {
    display: block; padding: 16px; border-radius: var(--radius-sm);
    background: var(--bg); border: 1px solid var(--border); text-align: center;
}
.done-link:hover { border-color: var(--primary); background: var(--primary-soft); }
.done-link strong { display: block; font-size: 14.5px; }
.done-link span { font-size: 12px; color: var(--muted); }
.install-done .alert { margin: 18px 0 0; text-align: left; }
.done-tip { font-size: 13px; color: var(--muted); margin-top: 16px; }
.install-footer { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 26px; }

/* ------------------------------ 广告位中心页 ------------------------------ */
.page-ads { padding-top: 22px; padding-bottom: 44px; }

.ads-hero {
    display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
    padding: 26px 28px; margin-bottom: 20px; border-radius: var(--radius);
    background: linear-gradient(135deg, #4f7cff 0%, #6f8fff 52%, #9cb3ff 100%);
    color: #fff; box-shadow: 0 14px 32px rgba(79, 124, 255, .22);
}
.ads-hero-main { flex: 1 1 400px; min-width: 260px; }
.ads-hero-title { font-size: 26px; font-weight: 800; letter-spacing: .5px; margin-bottom: 9px; }
.ads-hero-desc { font-size: 13.5px; line-height: 1.8; opacity: .96; max-width: 660px; }
.ads-hero-desc strong { font-weight: 700; }
.ads-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ads-stat {
    min-width: 90px; padding: 12px 16px; border-radius: 12px; text-align: center;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
}
.ads-stat strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.35; }
.ads-stat span { font-size: 12px; opacity: .93; }

.ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; align-items: start; }
.ad-slot-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
}
.ad-slot-head {
    display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border-2); background: var(--surface-2);
}
.ad-slot-title h2 { font-size: 15.5px; font-weight: 700; color: var(--text); }
.ad-slot-title p { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.ad-slot-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.ad-slot-tags code {
    font-size: 11px; color: var(--muted); background: #eff1f8; padding: 2px 7px; border-radius: 5px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.tag-live { background: var(--success-soft); color: #109c4c; }
.tag-idle { background: var(--warning-soft); color: #d97706; }

.ad-slot-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ad-slot-empty {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 16px; border: 1px dashed #d5dbeb; border-radius: 10px; background: var(--surface-2);
}
.ad-slot-empty-ico {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 17px; color: #b3bed6; background: var(--surface-3);
}
.ad-slot-empty strong { display: block; font-size: 14px; color: var(--text-2); }
.ad-slot-empty p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.ads-note { margin-top: 20px; }
.ads-note-body { padding: 16px 20px 20px; }
.ads-note-list { display: flex; flex-direction: column; gap: 10px; }
.ads-note-list li {
    position: relative; padding-left: 16px;
    font-size: 13.5px; color: var(--text-2); line-height: 1.75;
}
.ads-note-list li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.ads-note-list strong { color: var(--text); }
.ads-note-contact { margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.ads-note-contact strong { color: var(--primary); }

/* ------------------------------ 彩票开奖 ------------------------------ */
.page-lottery { padding-top: 18px; }

.lottery-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 24px; margin-bottom: 16px;
    background: linear-gradient(120deg, #f6f9ff, #fff 62%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--lc, var(--primary));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.lottery-hero-title {
    margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.4px;
    display: flex; align-items: baseline; gap: 9px;
}
.lottery-hero-title span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lottery-hero-desc { margin: 0 0 4px; font-size: 14px; color: var(--text-2); }
.lottery-hero-desc strong { color: var(--lc, var(--primary)); }
.lottery-hero-src { margin: 0; font-size: 12.5px; color: var(--muted); }

.lottery-switch { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.lottery-chip {
    padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
    text-decoration: none; white-space: nowrap; transition: all .18s;
}
.lottery-chip:hover { border-color: var(--cc, var(--primary)); color: var(--cc, var(--primary)); }
.lottery-chip.is-active {
    color: #fff; border-color: transparent;
    background: var(--cc, var(--primary));
    box-shadow: 0 4px 12px rgba(24, 32, 56, .16);
}

.lottery-alert {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 12px 16px; margin-bottom: 16px;
    background: #fff8ec; border: 1px solid #ffe0b2; border-radius: var(--radius-sm);
    font-size: 13px; color: #8a5a00;
}
.lottery-alert strong { font-weight: 700; }
.lottery-alert em { color: var(--muted); font-style: normal; }

/* 最新一期 */
.lottery-latest {
    padding: 20px 24px 22px; margin-bottom: 16px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.lottery-latest::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--lc, var(--primary));
}
.lottery-latest-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.lottery-latest-head > div { display: flex; align-items: center; gap: 10px; }
.lottery-issue { font-size: 17px; font-weight: 700; color: var(--text); }
.lottery-badge {
    font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    color: var(--lc, var(--primary));
    background: #f0f4ff;
}
.lottery-date { font-size: 13.5px; color: var(--muted); }

.lottery-balls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* ============ 立体号码球 · 共享光照公式 ============
   用法：在球元素上定义三档球面色（--b-lite 亮面 / --b-mid 中间调 / --b-dark 暗面），
   再引用 `background: var(--ball-surface)` 与 `box-shadow: var(--ball-shade)`，即可得到统一质感的球体。

   ⚠ 公式必须定义在球元素自身（下面的选择器组），不能放进 :root ——
     自定义属性里的 var() 在「定义处」就会被解析，放到 :root 会取不到
     各配色类的 --b-*，导致整条 background 失效、球体变成白色。

   背景由四层径向渐变由外向内叠加，模拟单一光源（统一位于左上方）：
     ① 高光斑：镜面反射点，塑料球体最重要的立体线索
     ② 反弹光：右下方环境光回弹，避免暗部死黑
     ③ 边缘暗角：向轮廓收边，产生体积感，强度由 --b-edge 控制（浅色球需调低，否则发脏）
     ④ 球面主明暗：亮面 → 中间调 → 暗面的本体过渡
   --b-ring 为可选外环插槽（特码光环 / 胆码标记），默认无。 */
.ball, .pk-ball, .pk-chosen-ball {
    --ball-surface:
        radial-gradient(circle at 33% 26%, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .58) 9%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 63% 87%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, var(--b-edge, .32)) 100%),
        radial-gradient(circle at 36% 30%, var(--b-lite) 0%, var(--b-mid) 50%, var(--b-dark) 100%);
    --ball-shade:
        inset -2px -3px 7px rgba(0, 0, 0, .24),
        inset 2px 3px 6px rgba(255, 255, 255, .18),
        var(--b-ring, 0 0 0 0 rgba(0, 0, 0, 0)),
        0 3px 7px rgba(24, 32, 56, .20),
        0 1px 2px rgba(24, 32, 56, .14);
    /* 小尺寸球体（≤32px）：收紧内阴影，避免高光与暗部挤在一起糊掉 */
    --ball-shade-sm:
        inset -1.5px -2.5px 6px rgba(0, 0, 0, .22),
        inset 1.5px 2px 5px rgba(255, 255, 255, .18),
        var(--b-ring, 0 0 0 0 rgba(0, 0, 0, 0)),
        0 2px 5px rgba(24, 32, 56, .18),
        0 1px 1px rgba(24, 32, 56, .12);
}

.ball {
    /* 默认配色即主号红球，未挂 .ball-main 时也不会掉成透明 */
    --b-lite: #ff9d95;
    --b-mid:  #e63946;
    --b-dark: #8b1114;

    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 17px; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
    background: var(--ball-surface);
    box-shadow: var(--ball-shade);
}
.ball-main  { --b-lite: #ff9d95; --b-mid: #e63946; --b-dark: #8b1114; }
.ball-extra { --b-lite: #8fbcff; --b-mid: #2563eb; --b-dark: #0e2468; }
.ball-sep { color: var(--muted); font-size: 18px; font-weight: 700; padding: 0 2px; }

/* 六合彩波色：红波 / 蓝波 / 绿波 */
.ball.wave-red   { --b-lite: #ff9d95; --b-mid: #d92b1e; --b-dark: #76100a; }
.ball.wave-blue  { --b-lite: #8fbcff; --b-mid: #1e4fd9; --b-dark: #0a1c60; }
.ball.wave-green { --b-lite: #86e3a9; --b-mid: #12954a; --b-dark: #05401f; }
/* 特码加同色光环，与平码区分 */
.ball-extra.wave-red   { --b-ring: 0 0 0 3px rgba(217, 43, 30, .24); }
.ball-extra.wave-blue  { --b-ring: 0 0 0 3px rgba(30, 79, 217, .24); }
.ball-extra.wave-green { --b-ring: 0 0 0 3px rgba(18, 149, 74, .24); }
.ball.is-special { transform: scale(1.06); }
.ball-double { font-size: 15px; letter-spacing: -.5px; }

/* 波色图例 */
.wave-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.wave-legend i {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 5px; vertical-align: middle;
}
.wave-legend i.w-red   { background: #d92b1e; }
.wave-legend i.w-blue  { background: #1e4fd9; }
.wave-legend i.w-green { background: #12954a; }

/* 六合彩奖项明细 */
.lt-prizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lt-prize {
    padding: 7px 12px; border-radius: 9px; background: #f7f9fd;
    border: 1px solid var(--border-2); min-width: 104px;
}
.lt-prize b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.lt-prize span { font-size: 13.5px; color: var(--text); font-weight: 600; }

.lottery-meta {
    display: flex; flex-wrap: wrap; gap: 12px 34px;
    margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border);
}
.lottery-meta-item > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.lottery-meta-item > div { font-size: 14.5px; color: var(--text-2); }
.lottery-meta-item > div strong { color: var(--text); font-size: 16px; font-weight: 700; }
.lottery-meta-plain { font-weight: 600; color: var(--text) !important; }

/* 历史表格 */
.lt-wrap { overflow-x: auto; }
.lt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lt-table th {
    padding: 11px 16px; text-align: left; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    background: #f8fafd; border-bottom: 1px solid var(--border);
}
.lt-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.lt-table tbody tr:hover { background: #fafcff; }
.lt-table tbody tr:last-child td { border-bottom: 0; }
.lt-balls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lt-balls .ball { width: 28px; height: 28px; font-size: 13px; box-shadow: var(--ball-shade-sm); }
.lt-balls .ball-sep { font-size: 14px; }
.lt-issue { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-money { white-space: nowrap; color: var(--text-2); }
.lt-money strong { color: var(--text); font-weight: 600; }
.lt-dash { color: var(--muted); }
.lt-date { white-space: nowrap; color: var(--text-2); }
.lt-date em { color: var(--muted); font-style: normal; margin-left: 6px; font-size: 12.5px; }

.lottery-note-body { padding: 16px 20px 20px; }
.lottery-note-body ul { margin: 0; padding-left: 20px; }
.lottery-note-body li { font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.lottery-note-body li:last-child { margin-bottom: 0; }
.lottery-note-body strong { color: var(--text); }

/* 首页开奖卡片 */
.lottery-card { margin-bottom: 16px; }
.lottery-card-body { padding: 14px 16px 16px; }
.lottery-card-item + .lottery-card-item {
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
}
.lottery-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
}
.lottery-card-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.lottery-card-name em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.lottery-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--primary)); display: inline-block; flex-shrink: 0; }
.lottery-card-date { font-size: 12.5px; color: var(--muted); }
.lottery-card-balls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.lottery-card-balls .ball { width: 32px; height: 32px; font-size: 14px; box-shadow: var(--ball-shade-sm); }
.lottery-card-balls .ball-sep { font-size: 15px; }
.lottery-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    margin-top: 10px; font-size: 12.5px; color: var(--muted);
}
.lottery-card-foot strong { color: var(--text-2); font-weight: 600; }
/* 下一期开奖时间 + 实时时间（卡片底部） */
.lottery-card-next {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
    margin-top: 9px; padding: 7px 11px;
    border-radius: var(--radius-xs, 8px);
    background: var(--surface-3);
    border: 1px dashed var(--border);
    font-size: 12.5px; color: var(--muted);
}
.lottery-card-next .lcn-item { display: inline-flex; align-items: center; gap: 5px; }
.lottery-card-next b { color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.lottery-card-next em { font-style: normal; }
.lottery-card-next .lcn-clock b { color: var(--lc, var(--primary)); }
.lottery-card-more {
    display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-2);
    text-align: center; font-size: 13.5px; font-weight: 600;
    color: var(--primary); text-decoration: none;
}
.lottery-card-more:hover { color: var(--primary-dark); }
.lottery-card-empty { padding: 6px 2px 2px; font-size: 13.5px; color: var(--muted); }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 1080px) {
    .home-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    :root { --header-h: 58px; }
    .container { padding: 0 14px; }
    .brand-text em { display: none; }
    .nav-toggle { display: block; order: 3; }
    .header-search input { width: 140px; }
    .header-search input:focus { width: 160px; }
    .main-nav {
        position: fixed; top: var(--header-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: 8px; box-shadow: var(--shadow-lg);
        display: none; z-index: 99;
    }
    .main-nav.is-open { display: flex; }
    .nav-dropdown .dropdown-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; }
    .post-last { display: none; }
    .post-detail-title { font-size: 20px; }
    .post-detail-head, .post-detail-body, .post-detail-tags, .post-detail-actions { padding-left: 16px; padding-right: 16px; }
    .quick-grid { grid-template-columns: 1fr 1fr; }
    .form-grid2 { grid-template-columns: 1fr; }
    .check-grid { grid-template-columns: 1fr; }
    .done-links { grid-template-columns: 1fr; }
    .profile-stats { gap: 20px; padding: 14px 16px 18px; }
    .ad-text { flex-direction: column; align-items: flex-start; }
    .ads-grid { grid-template-columns: 1fr; }
    .ads-hero { padding: 20px 18px; }
    .lottery-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .lottery-latest { padding: 18px 18px 20px; }
    .lottery-meta { gap: 12px 24px; }
    .lt-table th, .lt-table td { padding: 9px 12px; }
    .mobile-float-ad {
        display: block; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 500;
    }
    .back-top { bottom: 88px; }
    .toast-wrap { left: 12px; right: 12px; top: auto; bottom: 82px; }
    .toast { max-width: none; }
}

@media (max-width: 560px) {
    .header-search { display: none; }
    .post-avatar img { width: 38px; height: 38px; }
    .post-item { padding: 13px 14px; }
    .post-title-row { font-size: 15px; }
    .board-hero { flex-direction: column; align-items: flex-start; }
    .profile-hero-inner { padding: 0 16px; }
    .ads-hero-title { font-size: 21px; }
    .ads-hero-stats { width: 100%; }
    .ads-stat { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 10px 12px; }
    .ads-stat strong { font-size: 17px; }
    .ad-slot-head { flex-direction: column; gap: 10px; }
    .ad-slot-tags { flex-direction: row; align-items: center; }
    .ad-slot-empty { padding: 16px 14px; }
    .lottery-hero-title { font-size: 20px; }
    .lottery-switch { width: 100%; }
    .lottery-chip { flex: 1 1 calc(50% - 4px); text-align: center; padding: 8px 10px; }
    .ball { width: 34px; height: 34px; font-size: 15px; box-shadow: var(--ball-shade-sm); }
    .lt-balls .ball { width: 25px; height: 25px; font-size: 12px; }
    .lt-col-money { display: none; }
    .lt-money { display: none; }
    .footer-inner { grid-template-columns: 1fr; gap: 20px; padding: 28px 16px 20px; }
}

/* ==========================================================================
   成长体系：积分 / 等级 / 排行榜 / 关注 / 礼物 / 聊天室
   ========================================================================== */

/* --------------------------- 通用：等级徽章 / 进度条 --------------------------- */
.lv-badge {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: color-mix(in srgb, var(--lv-color, #4f7cff) 13%, #fff);
    color: var(--lv-color, #4f7cff);
    border: 1px solid color-mix(in srgb, var(--lv-color, #4f7cff) 32%, #fff);
}
.lv-progress { height: 6px; border-radius: 999px; background: var(--border-2); overflow: hidden; }
.lv-progress > span, .lv-progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7ea0ff, var(--primary)); transition: width .4s; }
.lv-progress-lg { height: 9px; }

/* 顶栏积分 */
.header-points {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px;
    border-radius: 999px; background: #fff6e0; border: 1px solid #ffe2a8; color: #a9691a;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.header-points:hover { background: #fff1d2; color: #8c5410; }
.header-points .hp-icon { font-size: 14px; }

.user-panel-points {
    display: flex; align-items: center; gap: 7px; margin: 8px 8px 4px; padding: 8px 10px;
    background: var(--warning-soft); border: 1px solid #ffe6b8; border-radius: 9px; font-size: 12.5px; color: #8c6a2a;
}
.user-panel-points strong { color: #a9691a; font-size: 14px; font-variant-numeric: tabular-nums; }
.user-panel-points a { margin-left: auto; font-size: 12px; color: var(--primary); }

/* --------------------------- 排行榜 --------------------------- */
.rank-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
    background: linear-gradient(120deg, #eef3ff 0%, #f7f1ff 55%, #fff3e8 100%);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px;
}
.rank-title { font-size: 23px; margin-bottom: 5px; }
.rank-sub { font-size: 13.5px; color: var(--text-2); }
.rank-overview { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; }
.rank-overview > div { display: flex; flex-direction: column; }
.rank-overview strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.rank-overview span { font-size: 12px; color: var(--muted); }
.rank-me {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 152px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 14px 18px; box-shadow: var(--shadow-sm); text-align: center;
}
.rank-me-label { font-size: 12px; color: var(--muted); }
.rank-me-no { font-size: 26px; color: var(--primary); font-variant-numeric: tabular-nums; }
.rank-me-name { font-size: 13px; color: var(--text-2); }
.rank-me-val { font-size: 12.5px; color: var(--muted); }

.rank-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.rank-tab {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
    font-size: 13.5px; transition: .16s;
}
.rank-tab em { font-style: normal; font-size: 15px; }
.rank-tab:hover { border-color: var(--primary); color: var(--primary); }
.rank-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 3px 12px rgba(79,124,255,.28); }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 14px 8px 20px; }
.podium-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 132px;
    padding: 14px 8px 12px; border-radius: var(--radius-sm); background: var(--bg);
    border: 1px solid var(--border); transition: .18s; position: relative;
}
.podium-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.podium-item.is-no1 { background: linear-gradient(180deg, #fff8e2, #fff); border-color: #ffe0a1; padding-top: 22px; }
.podium-item.is-no2 { background: linear-gradient(180deg, #f5f7fb, #fff); }
.podium-item.is-no3 { background: linear-gradient(180deg, #fdf3ea, #fff); }
.podium-crown { font-size: 22px; line-height: 1; }
.podium-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.is-no1 .podium-avatar { width: 72px; height: 72px; }
.podium-name { font-weight: 600; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-level { font-size: 11.5px; color: var(--muted); }
.podium-metric { font-size: 13px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.podium-base { font-size: 11px; color: var(--muted); }

.rank-list { display: flex; flex-direction: column; }
.rank-row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid var(--border-2);
}
.rank-row:last-child { border-bottom: 0; }
.rank-row.is-me { background: var(--primary-soft); }
.rank-row:hover { background: var(--surface-2); }
.rank-row.is-me:hover { background: #e7eeff; }
.rank-no {
    width: 27px; height: 27px; border-radius: 50%; background: var(--border-2); color: var(--text-2);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rank-user { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.rank-user img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; }
.rank-user-info { min-width: 0; display: flex; flex-direction: column; }
.rank-user-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.rank-user-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-badge { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 5px; background: #ffeaea; color: var(--danger); }
.rank-value { font-size: 14px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.rank-value-sub { grid-column: 3; font-size: 11.5px; color: var(--muted); text-align: right; }
.rank-block-title { font-size: 14.5px; margin-bottom: 10px; }
.rank-gift-detail { border-top: 1px dashed var(--border); padding: 14px 14px 4px; }
.gift-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.gift-chip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 10px; background: var(--bg); border-radius: var(--radius-sm); }
.gift-chip em { font-style: normal; }

/* --------------------------- 会员等级页 --------------------------- */
.lv-hero {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(120deg, #eef3ff, #f8f2ff); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px;
}
.lv-hero-me { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 260px; }
.lv-hero-lv {
    width: 66px; height: 66px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 34px; background: var(--surface); border: 2px solid var(--lv-color, var(--primary)); flex: none;
}
.lv-hero-text { min-width: 0; }
.lv-hero-title { font-size: 20px; margin-bottom: 3px; }
.lv-hero-sub { font-size: 13px; color: var(--text-2); }
.lv-hero-me-top { display: flex; align-items: center; gap: 8px; }
.lv-hero-me-tip { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.lv-card {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
}
.lv-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--lv-color, var(--primary)); }
.lv-card.is-mine { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lv-color, #4f7cff) 26%, #fff); }
.lv-card-head { display: flex; align-items: center; gap: 11px; }
.lv-card-icon {
    width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    font-size: 23px; flex: none;
    background: color-mix(in srgb, var(--lv-color, #4f7cff) 13%, #fff);
}
.lv-card-title { font-size: 15.5px; display: flex; align-items: center; gap: 7px; }
.lv-card-title em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.lv-card-body { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.lv-req { display: flex; gap: 14px; }
.lv-req span { display: inline-flex; align-items: center; gap: 4px; }
.lv-priv { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-priv span { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--text-2); border: 1px solid var(--border-2); }
.lv-members { font-size: 12px; color: var(--muted); }
.lv-card-body .lv-progress { margin-top: 2px; }

.lv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lv-table th { text-align: left; padding: 10px 12px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.lv-table td { padding: 11px 12px; border-top: 1px solid var(--border-2); }

.lv-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lv-howto-item { display: flex; gap: 10px; padding: 13px; border-radius: var(--radius-sm); background: var(--bg); }
.lv-howto-item strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.lv-howto-item p { font-size: 12.5px; color: var(--muted); }
.lv-howto-foot { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------- 个人中心（导航 / 积分 / 关注 / 礼物） --------------------------- */
.me-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; text-align: center; }
.me-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.me-name { font-size: 16px; font-weight: 700; }
.me-level { display: flex; align-items: center; gap: 6px; }
.me-level-progress { width: 100%; }
.me-level-tip { font-size: 12px; color: var(--muted); }
.me-points {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin-top: 4px;
    background: var(--warning-soft); border: 1px solid #ffe6b8; border-radius: var(--radius-sm); color: #8c6a2a; font-size: 12.5px;
}
.me-points-value { font-size: 17px; font-weight: 700; color: #a9691a; font-variant-numeric: tabular-nums; }
.me-points-label { font-size: 12px; }
.me-points-more { margin-left: auto; font-size: 12px; }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 6px; }
.me-stats > div { background: var(--bg); border-radius: var(--radius-sm); padding: 8px 4px; }
.me-stats strong { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.me-stats span { font-size: 11.5px; color: var(--muted); }
.me-quick { display: flex; flex-direction: column; }
.me-quick a { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; }
.me-quick a:hover { background: var(--bg); color: var(--primary); }
.role-badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }
.role-admin { background: var(--danger-soft); color: var(--danger); }
.role-vip { background: #fff4dd; color: #b9791f; }

.me-nav { display: flex; flex-direction: column; }
.me-nav-item {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
    color: var(--text-2); font-size: 13.5px; transition: .14s;
}
.me-nav-item:hover { background: var(--bg); color: var(--primary); }
.me-nav-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.me-nav-icon { width: 18px; text-align: center; }
.me-nav-num { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 积分页 */
.pts-hero {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(120deg, #fff8e8, #fff); border: 1px solid #ffe6b8;
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px;
}
.pts-hero-left { flex: 1; min-width: 220px; }
.pts-hero-label { font-size: 12.5px; color: #a9691a; }
.pts-hero-value { font-size: 34px; font-weight: 800; color: #b3701a; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pts-hero-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.pts-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.pts-hero-stats > div { display: flex; flex-direction: column; }
.pts-hero-stats strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.pts-hero-stats span { font-size: 11.5px; color: var(--muted); }
.pts-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.pts-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pts-rule { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--bg); border-radius: var(--radius-sm); font-size: 13px; }
.pts-rule-val { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; padding: 10px 12px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.table td { padding: 10px 12px; border-top: 1px solid var(--border-2); }
.col-id { width: 64px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pts-type { font-size: 12.5px; color: var(--text-2); }
.pts-up { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; }
.pts-down { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.link-more { font-size: 12px; color: var(--primary); }
.is-off { opacity: .82; }

/* 关注 / 粉丝 */
.follow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.follow-card {
    display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface); transition: .16s;
}
.follow-card:hover { border-color: #cfd9f5; box-shadow: var(--shadow-sm); }
.follow-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.follow-info { display: flex; align-items: center; gap: 10px; }
.follow-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.follow-bio { font-size: 12.5px; color: var(--muted); min-height: 36px; }
.follow-meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.follow-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; border: 1px solid var(--primary); background: var(--primary); color: #fff; }
.follow-btn.is-following { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.follow-btn:hover { opacity: .92; }

/* 礼物 */
.gift-hero { display: flex; gap: 20px; flex-wrap: wrap; padding: 16px 20px; background: linear-gradient(120deg, #fff1f6, #fff); border: 1px solid #ffdfeb; border-radius: var(--radius); margin-bottom: 16px; }
.gift-hero-item { display: flex; flex-direction: column; }
.gift-hero-item strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.gift-hero-item span { font-size: 12px; color: var(--muted); }

/* 礼物商城（兑换） */
.gift-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 0; }
.gift-shop-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 14px 14px 12px; text-align: left;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s;
    font: inherit; color: inherit;
}
.gift-shop-item:hover { transform: translateY(-2px); border-color: #ff9ec4; box-shadow: 0 6px 16px rgba(230, 57, 110, .10); }
.gsh-icon { font-size: 28px; line-height: 1; }
.gsh-name { font-size: 14.5px; font-weight: 700; }
.gsh-desc { font-size: 12px; color: var(--muted); min-height: 16px; }
.gsh-price { font-size: 12.5px; color: #e0568a; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }
.gsh-btn {
    margin-top: 7px; align-self: stretch; text-align: center;
    font-size: 12.5px; font-weight: 700; color: #fff;
    background: linear-gradient(120deg, #ff7aa2, #e63970);
    border-radius: 999px; padding: 5px 0;
}
.gift-shop-item:hover .gsh-btn { background: linear-gradient(120deg, #ff5f92, #d92b5e); }
/* 帖子操作栏的送礼按钮 */
.action-big.is-gift { color: #d6336c; }
.action-big.is-gift:hover { background: #fff0f6; }
.gift-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gift-summary-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.gs-icon { font-size: 24px; }
.gs-num { font-size: 12px; color: var(--muted); }
.gs-total { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.gift-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gift-wall-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; background: linear-gradient(180deg, #fff8fb, #fff); border: 1px solid #ffe3ee; border-radius: var(--radius-sm); text-align: center; }
.gw-icon { font-size: 28px; }
.gw-name { font-size: 12.5px; font-weight: 600; }
.gw-from { font-size: 11.5px; color: var(--muted); }
.gift-log { display: flex; flex-direction: column; }
.gift-log-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border-2); }
.gift-log-item:last-child { border-bottom: 0; }
.gl-icon { font-size: 26px; text-align: center; }
.gl-body { min-width: 0; }
.gl-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
.gl-msg { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.gl-post { font-size: 12px; color: var(--muted); margin-top: 2px; }
.gl-price { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.gl-time { font-size: 11.5px; color: var(--muted); }
.gift-strip { display: flex; gap: 9px; flex-wrap: wrap; }
.gift-strip-item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff8fb; border: 1px solid #ffe3ee; border-radius: 999px; font-size: 12px; }
.gs-name { font-weight: 600; }
.gs-from { color: var(--muted); font-size: 11.5px; }

/* 个人主页 */
.profile-hero { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); margin-bottom: 16px; }
.profile-hero-bg { height: 118px; background: linear-gradient(120deg, #dfe9ff, #f4eaff 55%, #ffeedd); }
.profile-hero-inner { display: flex; align-items: flex-end; gap: 18px; padding: 0 22px 18px; margin-top: -40px; flex-wrap: wrap; }
.profile-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-sm); }
.profile-info { flex: 1; min-width: 220px; }
.profile-name { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.profile-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.profile-bio { font-size: 13.5px; color: var(--text-2); margin-top: 8px; }
.profile-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.profile-chips span { font-size: 11.5px; padding: 1px 9px; border-radius: 999px; background: var(--bg); color: var(--text-2); border: 1px solid var(--border-2); }
.profile-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.profile-stats { display: flex; gap: 26px; flex-wrap: wrap; padding: 0 22px 16px; }
.profile-stats > div { display: flex; flex-direction: column; }
.profile-stats strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.profile-stats span { font-size: 12px; color: var(--muted); }
.profile-extras { padding: 0 22px 18px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.my-level-row { display: flex; align-items: center; gap: 10px; }
.my-level-exp { font-size: 12.5px; color: var(--muted); }
.my-level-tip { font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.pe-card { display: flex; gap: 14px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); margin-top: 10px; }
.pe-label { font-size: 12px; color: var(--muted); }
.pe-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.pe-sub { font-size: 12px; color: var(--muted); }
.side-empty { font-size: 12.5px; color: var(--muted); }

/* --------------------------- 聊天室 --------------------------- */
.chat-layout { align-items: stretch; }
.chat-panel { display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - 48px); min-height: 480px; }
.chat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-room-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.chat-room-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex: none; }
.chat-room-desc { font-size: 12.5px; color: var(--muted); }
.chat-head-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chat-points { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #a9691a; background: var(--warning-soft); border: 1px solid #ffe6b8; border-radius: 999px; padding: 3px 11px; }

.chat-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); }
.chat-loading { text-align: center; color: var(--muted); font-size: 13px; }
.chat-empty { padding: 42px 12px; font-size: 13.5px; }
.chat-empty::before { content: '💬'; display: block; font-size: 30px; margin-bottom: 8px; opacity: .55; }
.chat-msg { display: flex; gap: 10px; max-width: 82%; }
.chat-msg.is-mine { margin-left: auto; flex-direction: row-reverse; }
.chat-avatar img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.chat-bubble-wrap { min-width: 0; }
.chat-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; flex-wrap: wrap; }
.is-mine .chat-meta { justify-content: flex-end; }
.chat-name { font-weight: 600; color: var(--text-2); }
.chat-tag { font-style: normal; font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: var(--danger-soft); color: var(--danger); }
.chat-lv { font-size: 10.5px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--lv-color, #4f7cff) 13%, #fff); color: var(--lv-color, #4f7cff); }
.chat-bubble {
    padding: 9px 13px; border-radius: 4px 13px 13px 13px; background: var(--surface); border: 1px solid var(--border);
    font-size: 14px; line-height: 1.65; word-break: break-word; white-space: pre-wrap;
}
.is-mine .chat-bubble { background: var(--primary); border-color: var(--primary); color: #fff; border-radius: 13px 4px 13px 13px; }
.chat-msg.is-admin .chat-bubble { border-color: #ffd9a0; background: #fffaf0; }
.chat-msg.is-admin.is-mine .chat-bubble { background: var(--primary); border-color: var(--primary); }

.chat-composer { border-top: 1px solid var(--border); padding: 12px 16px 14px; background: var(--surface); }
.chat-emojis { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-emoji { width: 29px; height: 29px; border: 0; background: transparent; font-size: 17px; cursor: pointer; border-radius: 7px; line-height: 1; }
.chat-emoji:hover { background: var(--bg); }
.chat-input-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-input-row textarea {
    flex: 1; min-height: 46px; max-height: 130px; padding: 11px 13px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; resize: none; line-height: 1.6;
}
.chat-input-row textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,124,255,.12); }
.chat-send-col { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.chat-counter { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-tips { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.chat-readonly { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 8px 0; font-size: 13px; color: var(--muted); flex-wrap: wrap; }

.room-list { display: flex; flex-direction: column; gap: 5px; }
.room-item { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--radius-sm); color: inherit; }
.room-item:hover { background: var(--bg); }
.room-item.is-active { background: var(--primary-soft); }
.room-item.is-locked { opacity: .55; cursor: not-allowed; }
.room-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; flex: none; }
.room-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.room-name { font-size: 13.5px; font-weight: 600; }
.room-last { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-count { font-style: normal; font-size: 11px; color: var(--muted); }
.chat-rules { font-size: 12.5px; color: var(--text-2); line-height: 1.9; }
.chat-rules li { padding-left: 13px; position: relative; }
.chat-rules li::before { content: '·'; position: absolute; left: 3px; color: var(--primary); font-weight: 700; }
.chat-my-level .my-level-row { margin-bottom: 8px; }

/* --------------------------- 通用模态框（送礼弹窗） --------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(20, 26, 40, .48); }
.modal-box {
    position: relative; z-index: 1; width: min(560px, 100%); background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-2); }
.modal-head h3 { font-size: 16px; }
.modal-close { margin-left: auto; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--border-2); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); }
.form-row { margin-bottom: 13px; }
.form-row > label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.form-row input[type="text"], .form-row textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14px;
}
.form-row textarea { resize: vertical; line-height: 1.6; }
.gift-balance { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.gift-balance strong { color: #a9691a; font-variant-numeric: tabular-nums; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.gift-option {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 6px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: .15s;
}
.gift-option:hover { border-color: var(--primary); background: var(--primary-soft); }
.gift-option.is-selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(79,124,255,.16); }
.go-icon { font-size: 26px; line-height: 1.1; }
.go-name { font-size: 12.5px; font-weight: 600; }
.go-price { font-size: 11.5px; color: var(--primary); font-variant-numeric: tabular-nums; }
.go-desc { font-size: 10.5px; color: var(--muted); text-align: center; }
.gift-tip { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.7; }

/* 快速入口卡片 */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.quick-card {
    display: flex; flex-direction: column; gap: 3px; padding: 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: inherit; transition: .16s;
}
.quick-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quick-card strong { font-size: 14px; }
.quick-sub { font-size: 12.5px; color: var(--muted); }

/* 我的页面 hero */
.me-hero { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.me-hero-panel { flex: 1; min-width: 260px; }
.me-hero-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.me-hero-info { display: flex; align-items: center; gap: 15px; }
.me-hero-name { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.me-hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.me-hero-progress { margin-top: 10px; }
.me-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.me-rank-card { min-width: 180px; padding: 14px 16px; background: var(--bg); border-radius: var(--radius-sm); }
.me-rank-total { font-size: 26px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.me-rank-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.me-rank-name { font-size: 12.5px; color: var(--muted); }
.me-sign { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.me-sign-left { flex: 1; min-width: 200px; }
.me-sign-mid { font-size: 13px; color: var(--text-2); }
.me-sign-streak { font-weight: 700; color: var(--primary); }
.me-sign-right { display: flex; gap: 9px; }

/* --------------------------- 响应式 --------------------------- */
@media (max-width: 900px) {
    .rank-hero { grid-template-columns: 1fr; }
    .rank-me { min-width: 0; }
    .chat-panel { height: calc(100vh - var(--header-h) - 24px); min-height: 400px; }
    .chat-msg { max-width: 92%; }
    .podium-item { width: 104px; }
    .podium-avatar { width: 50px; height: 50px; }
    .is-no1 .podium-avatar { width: 58px; height: 58px; }
    .rank-overview { gap: 16px; }
    .profile-stats { gap: 18px; }
    .me-hero { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
    .rank-hero { padding: 16px; }
    .rank-title { font-size: 19px; }
    .rank-overview strong { font-size: 17px; }
    .rank-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 9px 10px; }
    .rank-row .rank-value-sub { display: none; }
    .gift-log-item { grid-template-columns: 34px minmax(0, 1fr); }
    .gl-price, .gl-time { grid-column: 2; }
    .lv-hero { padding: 16px; }
    .lv-hero-lv { width: 52px; height: 52px; font-size: 26px; border-radius: 15px; }
    .chat-head-actions { margin-left: 0; width: 100%; }
    .gift-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* ==========================================================================
   选号助手（个人中心）
   ========================================================================== */
.pk-panel .panel-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.pk-head > div { min-width: 200px; }
.pk-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }

.picker-switch { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.picker-chip {
    display: inline-flex; align-items: center;
    padding: 6px 13px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--text-2); font-size: 13.5px; font-weight: 600;
    transition: all .15s;
}
.picker-chip:hover { border-color: var(--cc, var(--primary)); color: var(--cc, var(--primary)); }
.picker-chip.is-active {
    background: var(--cc, var(--primary)); border-color: transparent; color: #fff;
    box-shadow: 0 4px 12px rgba(24, 32, 56, .16);
}

.pk-body { display: flex; flex-direction: column; gap: 16px; }

/* 上期开奖参照 */
.pk-ref {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 11px 14px; border-radius: var(--radius-sm);
    background: var(--bg); font-size: 13px; color: var(--muted);
}
.pk-ref-label { font-weight: 700; color: var(--text-2); }
.pk-ref-issue { color: var(--text-2); }
.pk-ref-balls { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-ref-balls .ball { width: 30px; height: 30px; font-size: 13px; box-shadow: var(--ball-shade-sm); }
.pk-ref-date { margin-left: auto; }

/* 号码池 */
.pk-group { border-top: 1px dashed var(--border); padding-top: 14px; }
.pk-group:first-of-type { border-top: 0; padding-top: 0; }
.pk-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.pk-group-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pk-group-title em { margin-left: 5px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pk-group-tip { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.pk-pool { display: flex; flex-wrap: wrap; gap: 9px; }
/* 号码池球：未选为白色立体球，选中后切换为对应色系的彩色立体球 */
.pk-ball {
    /* 白色球面（浅色球的边缘暗角必须压弱，否则整颗发灰） */
    --b-lite: #ffffff;
    --b-mid:  #f3f6fb;
    --b-dark: #ccd6e6;
    --b-edge: .16;
    --b-glow: rgba(24, 32, 56, .18);

    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 0; padding: 0;
    background: var(--ball-surface);
    color: var(--text-2);
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform .13s, box-shadow .13s, color .13s;
    box-shadow:
        inset -1.5px -2.5px 6px rgba(24, 32, 56, .14),
        inset 1.5px 2px 5px rgba(255, 255, 255, .98),
        0 2px 5px var(--b-glow),
        0 1px 1px rgba(24, 32, 56, .10);
}
.pk-ball:hover { transform: translateY(-2px); }
/* 未选中的球悬停：文字与内描边染上彩种主色 */
.pk-ball:not(.is-on):hover {
    color: var(--pc, var(--primary));
    box-shadow:
        inset 0 0 0 1.5px var(--pc, var(--primary)),
        inset -1.5px -2.5px 6px rgba(24, 32, 56, .16),
        inset 1.5px 2px 5px rgba(255, 255, 255, .98),
        0 6px 12px rgba(24, 32, 56, .18);
}
.pk-ball:active { transform: translateY(0) scale(.94); }

/* 选中：整颗转为彩色立体球 */
.pk-ball.is-on {
    --b-lite: #ff9d95;
    --b-mid:  #e63946;
    --b-dark: #8b1114;
    --b-edge: .34;
    --b-glow: rgba(230, 57, 70, .34);

    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
    background: var(--ball-surface);
    box-shadow:
        inset -1.5px -2.5px 6px rgba(0, 0, 0, .28),
        inset 1.5px 2px 5px rgba(255, 255, 255, .24),
        var(--b-ring, 0 0 0 0 rgba(0, 0, 0, 0)),
        0 4px 9px var(--b-glow),
        0 1px 2px rgba(24, 32, 56, .16);
}
.pk-pool[data-pool="extra"] .pk-ball.is-on {
    --b-lite: #8fbcff; --b-mid: #2563eb; --b-dark: #0e2468;
    --b-glow: rgba(37, 99, 235, .34);
}
.pk-pool[data-pool="dan"] .pk-ball.is-on {
    --b-lite: #ffd88f; --b-mid: #e08b1a; --b-dark: #7a4605;
    --b-glow: rgba(224, 139, 26, .36);
}
/* 六合彩波色：未选中时以文字色提示，选中后整球换成波色 */
.pk-ball.wave-red   { --pc: #d92b1e; }
.pk-ball.wave-blue  { --pc: #1e4fd9; }
.pk-ball.wave-green { --pc: #12954a; }
.pk-ball.wave-red.is-on   { --b-lite: #ff9d95; --b-mid: #d92b1e; --b-dark: #76100a; --b-glow: rgba(217, 43, 30, .34); }
.pk-ball.wave-blue.is-on  { --b-lite: #8fbcff; --b-mid: #1e4fd9; --b-dark: #0a1c60; --b-glow: rgba(30, 79, 217, .34); }
.pk-ball.wave-green.is-on { --b-lite: #86e3a9; --b-mid: #12954a; --b-dark: #05401f; --b-glow: rgba(18, 149, 74, .34); }

/* 已选结果 */
.pk-result {
    padding: 13px 15px; border-radius: var(--radius-sm);
    background: var(--primary-soft); border: 1px dashed #d7e0fb;
    display: flex; flex-direction: column; gap: 9px;
}
.pk-result-line { display: flex; align-items: flex-start; gap: 10px; }
.pk-result-label { flex: 0 0 62px; font-size: 13px; color: var(--text-2); font-weight: 600; padding-top: 3px; }
.pk-chosen { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 26px; }
.pk-chosen-empty { font-size: 13px; color: var(--muted); }
/* 已选预览：与号码池同款的彩色立体球 */
.pk-chosen-ball {
    --b-lite: #ff9d95;
    --b-mid:  #e63946;
    --b-dark: #8b1114;
    --b-edge: .30;

    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border-radius: 50%;
    background: var(--ball-surface);
    box-shadow: var(--ball-shade-sm);
    color: #fff; font-size: 13.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .36);
}
.pk-chosen-ball.is-extra { --b-lite: #8fbcff; --b-mid: #2563eb; --b-dark: #0e2468; }
/* 胆码：金色球 + 金色外环，与拖码（红球）一眼区分 */
.pk-chosen-ball.is-dan {
    --b-lite: #ffd88f; --b-mid: #e08b1a; --b-dark: #7a4605;
    --b-ring: 0 0 0 2px rgba(224, 139, 26, .30);
}
/* 已选预览的波色球（六合彩）：须写在 .is-extra 之后，波色优先于默认蓝色 */
.pk-chosen-ball.wave-red   { --b-lite: #ff9d95; --b-mid: #d92b1e; --b-dark: #76100a; }
.pk-chosen-ball.wave-blue  { --b-lite: #8fbcff; --b-mid: #1e4fd9; --b-dark: #0a1c60; }
.pk-chosen-ball.wave-green { --b-lite: #86e3a9; --b-mid: #12954a; --b-dark: #05401f; }
.pk-bets { font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pk-bets-text { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pk-bets > .btn { margin-left: auto; }
.pk-bets strong { font-size: 18px; color: var(--primary); font-variant-numeric: tabular-nums; }
.pk-bets-tip { font-size: 12.5px; color: var(--muted); }

/* 过滤条件 */
.pk-filter { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pk-filter summary {
    padding: 11px 14px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2);
    background: var(--surface-2); list-style: none;
}
.pk-filter summary::-webkit-details-marker { display: none; }
.pk-filter summary::before { content: "▸ "; color: var(--muted); }
.pk-filter[open] summary::before { content: "▾ "; }
.pk-filter summary em { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.pk-filter-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 16px; padding: 15px;
}
.pk-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.pk-field input[type="text"], .pk-field input[type="number"], .pk-field select {
    width: 100%; padding: 7px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; color: var(--text);
}
.pk-field input:focus, .pk-field select:focus { outline: none; border-color: var(--primary); }
.pk-field-range { display: flex; align-items: center; gap: 6px; }
.pk-field-range i { color: var(--muted); font-style: normal; }
.pk-field-check { flex-direction: row; align-items: center; gap: 8px; padding-top: 20px; }

/* 操作区 */
.pk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-actions-left, .pk-actions-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pk-actions-right { margin-left: auto; }
.btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pk-batch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.pk-batch input {
    width: 62px; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13.5px; text-align: center;
}

.pk-note-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pk-note-row input[type="text"] {
    flex: 1; min-width: 220px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px;
}
.pk-note-tip { font-size: 12.5px; color: var(--muted); }
.pk-note-tip strong { color: var(--primary); }

/* 机选结果 */
.pk-random-result { border-top: 1px dashed var(--border); padding-top: 14px; }
.pk-random-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.pk-random-head strong { color: var(--primary); font-size: 16px; }
.pk-random-head-actions { margin-left: auto; display: flex; gap: 8px; }
.pk-random-list { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.pk-random-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--bg); border: 1px solid var(--border-2);
}
.pk-random-no {
    flex: 0 0 22px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.pk-random-balls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.pk-random-balls .ball { width: 30px; height: 30px; font-size: 13px; box-shadow: var(--ball-shade-sm); }
.pk-random-balls .ball-sep { font-size: 14px; }
.pk-random-ops { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

/* 我的号码 */
.pk-list-filter { display: flex; flex-wrap: wrap; gap: 7px; }
.pk-filter-chip {
    padding: 4px 11px; border-radius: 999px; font-size: 12.5px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
}
.pk-filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pk-list { display: flex; flex-direction: column; gap: 11px; }
.pk-item {
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); display: flex; flex-direction: column; gap: 9px;
    transition: box-shadow .15s, border-color .15s;
}
.pk-item:hover { border-color: #d9e2fb; box-shadow: var(--shadow-sm); }
.pk-item-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.pk-item-name {
    padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    color: #fff; background: var(--pc, var(--primary));
}
.pk-item-mode { color: var(--text-2); font-weight: 600; }
.pk-item-note { padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.pk-item-time { margin-left: auto; }
.pk-del {
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.pk-del:hover { border-color: var(--danger); color: var(--danger); }

/* 复制按钮（我的号码 · 与删除同款胶囊形） */
.pk-copy {
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.pk-copy:hover { border-color: var(--primary); color: var(--primary); }
.pk-copy:active { transform: scale(.96); }
.pk-item-balls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-item-balls .ball { width: 30px; height: 30px; font-size: 13px; box-shadow: var(--ball-shade-sm); }
.pk-item-balls .ball-sep { font-size: 14px; }
.pk-dan-tag {
    padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
    background: linear-gradient(160deg, #f7b955, #e08b1a); color: #fff;
}
.pk-item-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.pk-hit { color: var(--success); font-weight: 600; }
.pk-muted { color: var(--muted); }

@media (max-width: 900px) {
    .pk-head > div { min-width: 0; }
    .picker-switch { margin-left: 0; width: 100%; }
    .pk-actions-right { margin-left: 0; width: 100%; }
    .pk-note-row input[type="text"] { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 600px) {
    .pk-ball { width: 34px; height: 34px; font-size: 14px; }
    .pk-result-label { flex: 0 0 52px; }
    .pk-random-item { flex-wrap: wrap; }
    .pk-random-balls { flex: 1 1 100%; order: 3; }
    .pk-random-ops { order: 4; flex: 1 1 100%; justify-content: flex-end; }
    .pk-bets > .btn { margin-left: 0; }
}

/* ==========================================================================
   V2 视觉层 · 玻璃拟态 + 靛蓝渐变
   —— 只覆盖观感（颜色/圆角/阴影/描边/动效），不改布局尺寸
   放在文件末尾以保证同权重覆盖生效
   ========================================================================== */

/* ------------------------------ 1. 玻璃表面 ------------------------------ */
.panel,
.side-card,
.post-item,
.comment,
.notice-item,
.quick-card,
.me-card,
.author-card,
.stat-cell,
.empty-state,
.auth-card,
.install-card,
.ad-slot-card,
.ads-stat,
.reply-post,
.podium-item,
.lv-card,
.pk-body,
.chat-panel,
.chat-composer {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm), var(--glass-hi);
}

.panel,
.side-card,
.me-card,
.auth-card,
.install-card,
.ad-slot-card,
.chat-panel {
    box-shadow: var(--shadow), var(--glass-hi);
}

/* 卡片悬停：轻微抬起 + 主色描边 */
.post-item,
.quick-card,
.board-pick,
.ad-slot-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-item:hover,
.quick-card:hover,
.board-pick:hover {
    transform: translateY(-2px);
    border-color: var(--primary-ring);
    box-shadow: var(--shadow), var(--glass-hi);
}

/* 面板头部：细分隔线 */
.panel-head,
.side-title,
.card-head {
    border-bottom: 1px solid var(--border-2);
}

.panel-title,
.side-title,
.page-title {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* 侧栏标题加一个渐变小竖条 */
.side-title {
    position: relative;
    padding-left: 12px;
}
.side-title::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; border-radius: 999px;
    background: var(--grad);
}

/* ------------------------------ 2. 顶部导航 ------------------------------ */
.site-header {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 var(--border-2);
}

.brand-mark {
    background: var(--grad);
    box-shadow: var(--shadow-glow);
    border-radius: 12px;
}

.nav-link {
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--primary-soft); }
.nav-link.is-active {
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 700;
}
.nav-link.is-active::after { background: var(--grad); }

.dropdown-panel,
.user-panel {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg), var(--glass-hi);
}
.dropdown-item:hover { background: var(--primary-soft); }

.header-search {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.header-search:focus-within {
    background: var(--surface-solid);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.icon-btn {
    border-radius: 999px;
    transition: background .15s, color .15s, transform .15s;
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary); }

.badge {
    background: var(--grad);
    box-shadow: 0 2px 8px rgba(99, 102, 241, .4);
}

.user-trigger { border-radius: 999px; }
.user-trigger:hover { background: var(--primary-soft); }

/* ------------------------------ 3. 按钮 ------------------------------ */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 14px 32px rgba(99, 102, 241, .38);
}
.btn-primary:focus-visible { outline: 3px solid var(--primary-ring); outline-offset: 2px; }

.btn-ghost {
    background: var(--surface-2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: var(--border);
}
.btn-ghost:hover {
    background: var(--surface-solid);
    border-color: var(--primary-ring);
    color: var(--primary);
}

.btn-danger {
    background: linear-gradient(135deg, #f0656a, #e5484d);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(229, 72, 77, .28);
}
.btn-danger:hover { color: #fff; filter: brightness(1.05); }

.btn-disabled { opacity: .5; }

/* 帖子操作大按钮 */
.action-big {
    background: var(--surface-2);
    border-color: var(--border);
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.action-big:hover {
    background: var(--primary-soft);
    border-color: var(--primary-ring);
    color: var(--primary);
    transform: translateY(-1px);
}
.action-big.is-on { background: var(--primary-soft); border-color: var(--primary-ring); }

/* ------------------------------ 4. 表单控件 ------------------------------ */
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="search"],
.form-row input[type="url"],
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row textarea,
.form-row select,
.comment-form textarea,
.editor-bar {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus,
.comment-form textarea:focus {
    background: var(--surface-solid);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--muted); }

.board-pick {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.board-pick:hover { background: var(--primary-soft); }
.board-pick.is-on {
    background: var(--primary-soft);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.upload-btn {
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}
.upload-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ------------------------------ 5. 标签 / 徽章 ------------------------------ */
.tag,
.mini-tag,
.board-tag,
.cloud-tag,
.board-chip {
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.board-tag,
.board-chip { background: color-mix(in srgb, var(--tag-color, var(--board-color, var(--primary))) 14%, transparent); }
.board-chip:hover,
.cloud-tag:hover {
    border-color: var(--primary-ring);
    color: var(--primary);
    transform: translateY(-1px);
}
.tag-top {
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}
.tag-essence {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}
.role-badge { border-radius: 999px; font-weight: 700; }

/* ------------------------------ 6. 选项卡 ------------------------------ */
.tabs {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.tab {
    border-radius: 999px;
    border: 0;
    transition: background .18s, color .18s, box-shadow .18s;
}
.tab:hover { color: var(--primary); }
.tab.is-active,
.tab.is-on {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .32);
}
.tab.is-active::after,
.tab.is-on::after { display: none; }

/* ------------------------------ 7. 帖子列表 ------------------------------ */
.post-title { font-weight: 700; letter-spacing: -.01em; }
.post-title:hover { color: var(--primary); }
.post-item.is-top {
    background: linear-gradient(90deg, rgba(249, 115, 22, .08), transparent 42%);
}
.post-item.is-essence {
    background: linear-gradient(90deg, rgba(245, 158, 11, .09), transparent 42%);
}
.post-avatar img,
.comment-avatar img { border-radius: 50%; }

/* ------------------------------ 8. 英雄区 ------------------------------ */
.profile-hero-bg,
.board-hero {
    background: var(--grad);
    position: relative;
    overflow: hidden;
}
.profile-hero-bg::after,
.board-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 240px at 88% -20%, rgba(255, 255, 255, .35), transparent 60%),
        radial-gradient(420px 220px at 6% 120%, rgba(255, 255, 255, .18), transparent 62%);
    pointer-events: none;
}
.profile-avatar,
.me-avatar { border: 3px solid var(--surface-solid); box-shadow: var(--shadow); }

.ads-hero,
.auth-wrap {
    background: linear-gradient(135deg, rgba(99, 102, 241, .10), rgba(139, 92, 246, .10));
}

/* ------------------------------ 9. 分页 / 提示 ------------------------------ */
.pager-link {
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: var(--surface-2);
    transition: background .15s, color .15s, border-color .15s;
}
.pager-link:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pager-link.is-active,
.pager-link.is-on {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .3);
}

.toast {
    border-radius: var(--radius-sm);
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }

.alert {
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.alert-error   { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.alert-warn    { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.alert-success { border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.alert-info    { border-color: var(--primary-ring); }

/* ------------------------------ 10. 页脚 ------------------------------ */
.site-footer {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border);
}

/* ------------------------------ 11. 深色主题补丁 ------------------------------ */
html[data-theme="dark"] .post-item.is-top { background: linear-gradient(90deg, rgba(249, 115, 22, .16), transparent 46%); }
html[data-theme="dark"] .post-item.is-essence { background: linear-gradient(90deg, rgba(245, 158, 11, .16), transparent 46%); }
html[data-theme="dark"] .side-notice { background: linear-gradient(135deg, rgba(99, 102, 241, .16), transparent); }
html[data-theme="dark"] .markdown-body .md-pre,
html[data-theme="dark"] .markdown-body .md-code { background: rgba(0, 0, 0, .32); }
html[data-theme="dark"] .markdown-body .md-quote { border-left-color: var(--primary); background: var(--surface-2); }
html[data-theme="dark"] .profile-hero-bg::after,
html[data-theme="dark"] .board-hero::after { opacity: .8; }
html[data-theme="dark"] .btn-primary:hover { filter: brightness(1.12); }
html[data-theme="dark"] .ad-image-ph,
html[data-theme="dark"] .empty-icon { opacity: .85; }
html[data-theme="dark"] img { color-scheme: dark; }

/* 图片在深色下略微压暗，避免刺眼 */
html[data-theme="dark"] .post-detail-cover img { filter: brightness(.94) contrast(1.02); }

/* 主题切换按钮（前台头部） */
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .ti-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ti-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ti-moon { display: none; }

/* 滚动条（深色） */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); background-clip: content-box; }

/* ==========================================================================
   线性 SVG 图标系统（颜色跟随 currentColor，主题切换自动适配）
   ========================================================================== */
.icon {
    display: inline-block;
    width: 1.15em; height: 1.15em;
    vertical-align: -.22em;
    flex-shrink: 0;
}

/* 页面标题 / 面板标题里的图标 */
h1 > .icon:first-child,
.page-title .icon, .panel-title .icon, .rank-title .icon,
.lv-hero-title .icon, .side-title .icon {
    width: 1.25em; height: 1.25em; vertical-align: -.26em;
    color: var(--primary);
}

/* 个人中心侧栏导航 */
.me-nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.me-nav-icon .icon { width: 17px; height: 17px; color: var(--muted); transition: color .15s; }
.me-nav-item:hover .me-nav-icon .icon,
.me-nav-item.is-active .me-nav-icon .icon { color: var(--primary); }

/* 快捷入口 */
.me-quick .icon { width: 15px; height: 15px; vertical-align: -.2em; color: var(--primary); }

/* 头部积分入口 */
.header-points .hp-icon { display: inline-flex; align-items: center; }
.header-points .hp-icon .icon { width: 15px; height: 15px; }

/* 榜单小标 */
.profile-badges .icon, .me-rank-ico { vertical-align: -.2em; }
.me-rank-ico .icon, .profile-badges .icon { width: 14px; height: 14px; color: var(--primary); }

/* 顶部主导航图标 */
.main-nav .nav-link { display: inline-flex; align-items: center; gap: 5px; }
.main-nav .nav-link > .icon { width: 15px; height: 15px; opacity: .8; transition: color .15s, opacity .15s; }
.main-nav .nav-link:hover > .icon { color: var(--primary); opacity: 1; }
.main-nav .nav-link.is-active > .icon { color: var(--primary); opacity: 1; }

/* 导航加图标后的空间优化：禁止竖排换行、收紧内边距 */
.main-nav { flex-wrap: nowrap; }
.main-nav .nav-link { white-space: nowrap; padding: 8px 9px; gap: 4px; }
.header-search input[type="search"] { width: 150px; }
@media (max-width: 1280px) {
    .main-nav .nav-link { padding: 8px 7px; font-size: 14px; }
    .header-search input[type="search"] { width: 120px; }
}

/* 首页 · 现场开奖搅珠视频 */
.draw-video-panel { margin-bottom: 16px; }
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #e53935;
    vertical-align: 1px;
    animation: live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 57, 53, .45); }
    50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(229, 57, 53, 0); }
}
.draw-video-box { padding: 0 16px 16px; }
.draw-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.draw-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.draw-video-tip {
    margin: 8px 2px 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* 选号助手 · 快捷机选（波色 / 大小 / 生肖） */
.pk-quick-rows { display: flex; flex-direction: column; gap: 9px; }
.pk-quick-row { display: flex; align-items: flex-start; gap: 10px; }
.pk-quick-label {
    flex: none;
    width: 58px;
    padding-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    text-align: right;
}
.pk-quick-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pk-quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.pk-quick-chip i { font-style: normal; font-size: 11px; color: var(--muted); }
.pk-quick-chip:hover { border-color: var(--pc, var(--primary)); }
.pk-quick-chip:active { transform: scale(.96); }
.pk-quick-chip.is-red    { --qc: #d92b1e; color: #d92b1e; border-color: rgba(217, 43, 30, .45); }
.pk-quick-chip.is-blue   { --qc: #1e4fd9; color: #1e4fd9; border-color: rgba(30, 79, 217, .45); }
.pk-quick-chip.is-green  { --qc: #12954a; color: #12954a; border-color: rgba(18, 149, 74, .45); }
.pk-quick-chip.is-red:hover, .pk-quick-chip.is-blue:hover, .pk-quick-chip.is-green:hover,
.pk-quick-chip:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc, var(--primary)) 15%, transparent);
}
.pk-quick-chip:disabled { opacity: .55; cursor: wait; }
.pk-quick-tip {
    margin: 9px 2px 0;
    font-size: 12px;
    color: var(--muted);
}
@media (max-width: 640px) {
    .pk-quick-row { flex-direction: column; gap: 5px; }
    .pk-quick-label { width: auto; text-align: left; padding-top: 0; }
}

/* 首页 · 澳彩 HLS 直播流播放器 */
.draw-video-embed .draw-live-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}
.draw-live-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, .82);
    text-align: center;
    padding: 16px;
}
.draw-live-status-text {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.draw-live-status-sub {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
}

/* 首页 · 开奖视频并排（两个源时两列，屏幕小的时候自动一列） */
.draw-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.draw-video-grid .draw-video-panel { margin-bottom: 0; }
.draw-video-grid .draw-video-embed { padding-top: 62%; }
.draw-video-grid .panel-head { flex-wrap: wrap; gap: 6px; }
.draw-video-grid .panel-title { font-size: 14.5px; }
.draw-video-grid .panel-count { display: none; }
.draw-video-grid .draw-video-tip { font-size: 11.5px; }
@media (max-width: 900px) {
    .draw-video-grid { grid-template-columns: 1fr; }
    .draw-video-grid .draw-video-embed { padding-top: 56.25%; }
    .draw-video-grid .panel-count { display: inline; }
}

/* 开奖号码 · 球下生肖标注 */
.ball-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ball-zodiac {
    font-size: 11px;
    font-style: normal;
    line-height: 1.2;
    color: var(--muted);
}
.lottery-card-balls .ball-zodiac { font-size: 10.5px; }

/* 选号助手 · 特码号池筛选（按波色 / 大小 / 生肖） */
.pk-pool-filter {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--surface-2, rgba(0, 0, 0, .015));
}
.pk-pf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.pk-pf-title { font-size: 13px; font-weight: 600; color: var(--text); }
.pk-pf-title em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
.pk-pf-reset {
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    padding: 2px 10px;
    cursor: pointer;
}
.pk-pf-reset:hover { color: var(--primary); border-color: var(--primary); }
.pk-pf-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.pk-pf-name {
    flex: none;
    width: 34px;
    padding-top: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    text-align: right;
}
.pk-pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-pf-chip {
    padding: 3px 11px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.pk-pf-chip:hover { border-color: var(--primary); color: var(--primary); }
.pk-pf-chip.is-red   { color: #d92b1e; border-color: rgba(217, 43, 30, .4); }
.pk-pf-chip.is-blue  { color: #1e4fd9; border-color: rgba(30, 79, 217, .4); }
.pk-pf-chip.is-green { color: #12954a; border-color: rgba(18, 149, 74, .4); }
.pk-pf-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.pk-pf-tip { margin: 9px 0 0; font-size: 12px; color: var(--muted); }

/* 特码球 + 生肖小字 */
.pk-ball-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.pk-ball-cell[hidden] { display: none !important; }
.pk-ball-zodiac {
    font-size: 10px;
    font-style: normal;
    line-height: 1.1;
    color: var(--muted);
}
@media (max-width: 640px) {
    .pk-pf-row { flex-direction: column; gap: 4px; }
    .pk-pf-name { width: auto; text-align: left; padding-top: 0; }
}

/* 「只玩特码」彩种（港彩 / 澳彩）说明条 */
.pk-special-tip {
    margin: 0 0 12px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--primary-soft, rgba(99, 102, 241, .10));
    border: 1px solid var(--primary-ring, rgba(99, 102, 241, .22));
    color: var(--text-2, var(--muted));
    font-size: 13px;
    line-height: 1.7;
}

/* ================= 挑码助手（港彩 / 澳彩 special_only 专属） ================= */
.tc { margin-top: 4px; }
.tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tc-count { font-size: 13px; color: var(--muted); }
.tc-save {
    padding: 6px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
    color: #12a455; background: var(--surface, #fff); border: 1.5px solid #12a455; cursor: pointer;
}
.tc-save:active { background: rgba(18, 164, 85, .10); }
.tc-box {
    min-height: 160px; box-sizing: border-box; padding: 12px 14px;
    border: 1px solid var(--border, #e3e6ee); border-radius: 10px; background: var(--surface, #fff);
    display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start;
}
.tc-empty { color: var(--muted, #8a92a5); font-size: 13px; margin: auto; font-style: normal; }
.tc-num { width: 32px; height: 32px; font-size: 13px; border-radius: 50%; }
.tc-act-row { display: flex; gap: 12px; margin: 14px 0 4px; }
.tc-btn {
    flex: 1; padding: 10px 0; font-size: 14.5px; font-weight: 600; text-align: center;
    color: #12a455; background: var(--surface, #fff);
    border: 1.5px solid #12a455; border-radius: 8px; cursor: pointer;
}
.tc-btn:active { background: rgba(18, 164, 85, .10); }
.tc-btn.is-kill { color: #fff; background: var(--danger, #e5484d); border-color: var(--danger, #e5484d); }
.tc-groups { margin-top: 4px; }
.tc-group { padding: 12px 0 8px; border-bottom: 1px solid var(--border, #e3e6ee); }
.tc-group:last-child { border-bottom: 0; }
.tc-row { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 0; }
.tc-chip {
    min-width: 56px; padding: 8px 12px; box-sizing: border-box;
    font-size: 14.5px; line-height: 1.2; text-align: center;
    color: var(--text, #22293a); background: var(--surface, #fff);
    border: 1px solid var(--border-strong, #b9c0cc); border-radius: 6px; cursor: pointer;
}
.tc-chip.tc-push { margin-left: auto; }
.tc-chip:active { background: var(--primary-soft, rgba(79, 124, 255, .10)); }
.tc-chip.is-on {
    color: #12a455; border-color: #12a455; font-weight: 600;
    background: rgba(18, 164, 85, .08);
}
.tc-tip { margin: 12px 2px 0; }

/* ------------------------------ 帖子列表封面缩略图 ------------------------------ */
.post-cover { flex-shrink: 0; display: block; }
.post-cover img {
    width: 84px; height: 62px; border-radius: 10px; object-fit: cover;
    background: var(--surface-2);
}
@media (max-width: 720px) {
    .post-cover img { width: 68px; height: 52px; }
}

/* ================================================================== *
 * 积分解锁查看（未解锁高斯模糊）
 * ================================================================== */
.unlock-locked {
    position: relative;
    margin: 4px 0 18px;
}
.unlock-body.is-blurred {
    filter: blur(7px);
    -webkit-filter: blur(7px);
    user-select: none;
    pointer-events: none;
    max-height: 340px;
    overflow: hidden;
    opacity: .82;
}
.post-detail-video.is-blurred video {
    filter: blur(14px);
    -webkit-filter: blur(14px);
    pointer-events: none;
}
.unlock-mask {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.94) 62%);
}
.unlock-lock-icon { font-size: 34px; line-height: 1; }
.unlock-title { font-size: 16px; font-weight: 700; color: #2b3245; }
.unlock-sub { font-size: 12.5px; color: #7a8398; margin-bottom: 6px; }
.unlock-mask .btn { min-width: 190px; }

/* 帖子类型选择 */
.media-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.media-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.media-pick input { position: absolute; opacity: 0; pointer-events: none; }
.media-pick strong { font-size: 14px; color: #2b3245; }
.media-pick span { font-size: 11.5px; color: #8b93a7; line-height: 1.35; }
.media-pick.is-active {
    border-color: var(--primary);
    background: #f2f6ff;
}

.post-detail-video { margin: 0 0 18px; }
.post-detail-video video {
    width: 100%;
    max-height: 520px;
    border-radius: 14px;
    background: #000;
    display: block;
}
@media (max-width: 720px) {
    .media-picker { grid-template-columns: 1fr; }
    .unlock-body.is-blurred { max-height: 260px; }
}

/* ================= 视频帖：关联帖子卡片 ================= */
.linked-post {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e6e8ef);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.linked-post:hover { border-color: var(--primary, #4f7cff); box-shadow: 0 6px 18px rgba(79,124,255,.10); }
.linked-post-cover,
.linked-post-ico {
    width: 52px; height: 52px;
    border-radius: 10px;
    flex: 0 0 52px;
    object-fit: cover;
}
.linked-post-ico {
    display: flex; align-items: center; justify-content: center;
    background: rgba(79,124,255,.08);
    font-size: 22px;
}
.linked-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linked-post-tag {
    align-self: flex-start;
    font-size: 11px;
    color: var(--primary, #4f7cff);
    background: rgba(79,124,255,.10);
    border-radius: 6px;
    padding: 1px 7px;
}
.linked-post-title { font-size: 14.5px; font-weight: 600; }
.linked-post-sub { font-size: 12px; color: var(--muted, #8a90a8); }
.linked-post-go { font-size: 12.5px; color: var(--muted, #8a90a8); white-space: nowrap; }

/* 高手榜认证徽章（PC） */
.expert-badge {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    font-style: normal;
    vertical-align: 1px;
}