/* ============================================================
   FlintHub 圈子插件样式 v2.0
   集成：基础布局 / 英雄面板 / 卡片网格 / 徽章体系 / 主题色
        点赞签到打赏 / 编辑历史 / 通知 / 成员名片 / 成就任务
        活动基金 / 广场卡片（LOGO左+简介独立行）/ 阅读字号（累加式）
        圈子最新动态（双列列表）
   ============================================================ */

/* ============================================================
   一、变量与容器
   ============================================================ */
.grp-wrap,
.grp-admin,
.grp-modal {
    --grp-primary: #1a4480;
    --grp-primary-hover: #143566;
    --grp-primary-light: #eaf0f8;
    --grp-primary-line: #c7d5e8;
    --grp-accent: #c8102e;
    --grp-accent-light: #fdeff1;
    --grp-gold: #b8860b;
    --grp-gold-light: #fdf5e6;
    --grp-gold-line: #f0dca0;
    --grp-success: #2e7d32;
    --grp-success-light: #e8f4ea;
    --grp-success-line: #b6ddb9;
    --grp-bg: #f5f6f8;
    --grp-card: #ffffff;
    --grp-text: #1a1a1a;
    --grp-text-2: #5a6472;
    --grp-text-3: #8c94a0;
    --grp-border: #e3e6ec;
    --grp-border-strong: #c9cfd8;
    --grp-radius: 4px;
    --grp-radius-lg: 6px;
    --grp-shadow: 0 1px 2px rgba(26, 68, 128, .04);
    --grp-post-fontsize: 15px;
}

html[data-theme="dark"] .grp-wrap,
html.dark .grp-wrap,
body.dark .grp-wrap,
body.theme-dark .grp-wrap,
.dark-theme .grp-wrap,
html[data-theme="dark"] .grp-admin,
html.dark .grp-admin,
body.dark .grp-admin,
body.theme-dark .grp-admin,
.dark-theme .grp-admin,
html[data-theme="dark"] .grp-modal,
html.dark .grp-modal,
body.dark .grp-modal,
body.theme-dark .grp-modal,
.dark-theme .grp-modal {
    --grp-primary: #4a7bc8;
    --grp-primary-hover: #5a8bd8;
    --grp-primary-light: rgba(74, 123, 200, .14);
    --grp-primary-line: rgba(74, 123, 200, .35);
    --grp-accent: #e54d5e;
    --grp-accent-light: rgba(229, 77, 94, .14);
    --grp-gold: #d4a02a;
    --grp-gold-light: rgba(212, 160, 42, .12);
    --grp-gold-line: rgba(212, 160, 42, .35);
    --grp-success: #4caf50;
    --grp-success-light: rgba(76, 175, 80, .12);
    --grp-success-line: rgba(76, 175, 80, .35);
    --grp-bg: var(--mn-bg, #1a1d24);
    --grp-card: var(--mn-bg-card, #232833);
    --grp-text: var(--mn-text, #e8eaee);
    --grp-text-2: var(--mn-text-secondary, #b4b9c4);
    --grp-text-3: var(--mn-text-muted, #7a8190);
    --grp-border: var(--mn-border, #343a45);
    --grp-border-strong: var(--mn-border-strong, #4a5060);
    --grp-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.grp-wrap {
    padding: 20px 24px 40px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    background: var(--grp-bg);
    color: var(--grp-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.grp-admin {
    background: var(--grp-card);
    color: var(--grp-text);
    padding: 24px 28px;
    margin: 16px;
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
}

/* ============================================================
   二、广场英雄面板（★ 纯浅色 · 极简版）
   ------------------------------------------------------------
   - 纯白背景，无渐变、无装饰光晕、无顶部横线
   - 只保留：标题 + 副标题 + 搜索框
   ============================================================ */
.grp-hero-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px 22px;
    margin: 0 0 18px;
    border-radius: var(--grp-radius-lg);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--grp-border);
    color: var(--grp-text);
    box-shadow: 0 1px 3px rgba(26, 68, 128, .04);
}

.grp-hero-panel-top {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.grp-hero-panel-head { flex: 1 1 auto; min-width: 0; }
.grp-hero-panel-title {
    font-size: 22px; font-weight: 700;
    color: var(--grp-primary);
    margin: 0 0 3px; line-height: 1.3; letter-spacing: .5px;
}
.grp-hero-panel-sub {
    font-size: 13px; color: var(--grp-text-2);
    margin: 0; line-height: 1.6; letter-spacing: .3px;
}
.grp-hero-panel-search {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; max-width: 100%;
}
.grp-hero-panel-input {
    width: 240px; max-width: 100%;
    padding: 8px 12px; font-size: 13px;
    color: var(--grp-text);
    background: #ffffff;
    border: 1px solid var(--grp-border-strong);
    border-radius: var(--grp-radius);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.grp-hero-panel-input:hover { border-color: var(--grp-text-3); }
.grp-hero-panel-input:focus {
    outline: none; background: #ffffff;
    border-color: var(--grp-primary);
    box-shadow: 0 0 0 3px var(--grp-primary-light);
}
.grp-hero-panel-input::placeholder { color: var(--grp-text-3); }
.grp-hero-panel-search-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; font-size: 13px; font-weight: 600;
    color: #ffffff; background: var(--grp-primary);
    border: 1px solid var(--grp-primary);
    border-radius: var(--grp-radius);
    cursor: pointer; letter-spacing: .3px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 6px rgba(26, 68, 128, .18);
}
.grp-hero-panel-search-btn:hover {
    background: var(--grp-primary-hover);
    border-color: var(--grp-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(26, 68, 128, .24);
}
.grp-hero-panel-search-btn i { font-size: 12px; }

/* 保留以下类的空定义（兼容旧视图，当前视图已不使用） */
.grp-hero-panel-mid,
.grp-hero-panel-stats,
.grp-hero-panel-stat,
.grp-hero-panel-value,
.grp-hero-panel-value-sm,
.grp-hero-panel-label,
.grp-hero-panel-stat-text,
.grp-hero-panel-divider,
.grp-hero-panel-quick,
.grp-hero-panel-quick-item,
.grp-hero-panel-quick-icon,
.grp-hero-panel-quick-text,
.grp-hero-panel-quick-title,
.grp-hero-panel-quick-desc,
.grp-hero-panel-create {
    /* 空规则，避免外部引用报错 */
}

@media (max-width: 900px) {
    .grp-hero-panel { padding: 14px 18px; }
    .grp-hero-panel-title { font-size: 20px; }
    .grp-hero-panel-search { width: 100%; }
    .grp-hero-panel-input { flex: 1 1 auto; width: auto; }
}
@media (max-width: 640px) {
    .grp-hero-panel { padding: 12px 14px; }
    .grp-hero-panel-title { font-size: 18px; }
    .grp-hero-panel-sub { font-size: 12px; }
    .grp-hero-panel-input { padding: 7px 10px; font-size: 13px; }
    .grp-hero-panel-search-btn { padding: 7px 14px; }
}

/* ============================================================
   三、面包屑 / 页头 / 数据条 / 标题
   ============================================================ */
.grp-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    font-size: 13px; color: var(--grp-text-3);
    margin-bottom: 16px; gap: 4px; line-height: 1.6; padding: 8px 0;
}
.grp-breadcrumb a { color: var(--grp-primary); text-decoration: none; transition: color .15s; }
.grp-breadcrumb a:hover { color: var(--grp-primary-hover); text-decoration: underline; }
.grp-breadcrumb-sep { color: var(--grp-text-3); margin: 0 4px; opacity: .5; }
.grp-breadcrumb-current { color: var(--grp-text-2); }

.grp-page-head {
    position: relative;
    padding: 24px 0 20px; margin-bottom: 24px;
    border-bottom: 2px solid var(--grp-primary);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.grp-page-head::before {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 80px; height: 2px;
    background: var(--grp-accent);
}
.grp-page-head-left { flex: 1 1 auto; min-width: 0; }
.grp-page-head-right { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grp-page-title { font-size: 26px; font-weight: 700; color: var(--grp-text); margin: 0 0 6px; line-height: 1.3; letter-spacing: .5px; }
.grp-page-sub { font-size: 13px; color: var(--grp-text-3); margin: 0; line-height: 1.6; }

.grp-databar {
    display: flex; flex-wrap: wrap;
    margin: 0 0 20px; padding: 0;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius);
    overflow: hidden;
}
.grp-databar-item {
    flex: 1 1 0; min-width: 120px;
    padding: 14px 20px;
    border-right: 1px solid var(--grp-border);
}
.grp-databar-item:last-child { border-right: 0; }
.grp-databar-value {
    font-size: 22px; font-weight: 700; color: var(--grp-primary);
    line-height: 1.2;
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.5px;
}
.grp-databar-label { font-size: 12px; color: var(--grp-text-3); margin-top: 4px; letter-spacing: .5px; }

.grp-title { font-size: 22px; font-weight: 700; color: var(--grp-text); margin: 0 0 16px; line-height: 1.35; letter-spacing: .3px; }
.grp-title-inline { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; }
.grp-h2 {
    position: relative;
    font-size: 16px; font-weight: 700;
    color: var(--grp-text);
    margin: 28px 0 14px; padding-left: 12px;
    line-height: 1.4; letter-spacing: .3px;
}
.grp-h2::before {
    content: "";
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px;
    background: var(--grp-primary); border-radius: 2px;
}
.grp-h2-flush { margin-top: 0; }
.grp-muted { color: var(--grp-text-3); font-size: 12px; letter-spacing: .2px; }

/* ============================================================
   四、按钮
   ============================================================ */
.grp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 500; line-height: 1.5;
    font-family: inherit;
    background: var(--grp-card); color: var(--grp-text);
    border: 1px solid var(--grp-border-strong);
    border-radius: var(--grp-radius);
    cursor: pointer; text-decoration: none; width: auto;
    transition: border-color .15s, color .15s, background .15s;
    letter-spacing: .2px;
}
.grp-btn:hover { border-color: var(--grp-primary); color: var(--grp-primary); background: var(--grp-primary-light); }
.grp-btn-primary { background: var(--grp-primary); color: #fff; border-color: var(--grp-primary); }
.grp-btn-primary:hover { background: var(--grp-primary-hover); border-color: var(--grp-primary-hover); color: #fff; }
.grp-btn-accent { background: var(--grp-accent); color: #fff; border-color: var(--grp-accent); }
.grp-btn-accent:hover { opacity: .9; color: #fff; }
.grp-btn-danger { color: var(--grp-accent); border-color: var(--grp-accent); background: transparent; }
.grp-btn-danger:hover { background: var(--grp-accent); color: #fff; border-color: var(--grp-accent); }
.grp-btn-sm { padding: 5px 12px; font-size: 12px; }
.grp-btn-lg { padding: 10px 22px; font-size: 14px; }
.grp-btn-disabled { opacity: .5; cursor: not-allowed; }
.grp-btn-disabled:hover { background: var(--grp-card); color: var(--grp-text); border-color: var(--grp-border-strong); }
.grp-btn[disabled] { opacity: .5; cursor: not-allowed; }
.grp-btn[disabled]:hover { background: var(--grp-card); color: var(--grp-text); border-color: var(--grp-border-strong); }
.grp-btn-auto { align-self: flex-start; width: auto; flex: 0 0 auto; }
.grp-btn-fav { background: var(--grp-accent-light); border-color: var(--grp-accent); color: var(--grp-accent); }
.grp-btn-fav:hover { background: var(--grp-accent); color: #fff; }

/* ============================================================
   五、表单
   ============================================================ */
.grp-input {
    background: var(--grp-card); color: var(--grp-text);
    border: 1px solid var(--grp-border-strong);
    border-radius: var(--grp-radius);
    padding: 8px 12px; font-size: 13px; line-height: 1.5;
    font-family: inherit; min-width: 0; box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.grp-input:hover { border-color: var(--grp-text-3); }
.grp-input:focus { outline: none; border-color: var(--grp-primary); box-shadow: 0 0 0 3px var(--grp-primary-light); }
.grp-input-sm { width: 100px; }
textarea.grp-input { resize: vertical; }

.grp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.grp-field > label { font-size: 13px; font-weight: 600; color: var(--grp-text-2); line-height: 1.5; letter-spacing: .3px; }
.grp-field-hint { font-size: 12px; color: var(--grp-text-3); margin-top: 2px; line-height: 1.6; }

.grp-form { display: flex; flex-direction: column; gap: 0; margin: 12px 0; }
.grp-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.grp-form-row > .grp-field { flex: 1 1 200px; min-width: 0; }
.grp-form.grp-inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.grp-form.grp-inline .grp-field { flex: 0 0 auto; margin-bottom: 0; }
.grp-inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grp-inline-flex { flex: 1; min-width: 0; }
.grp-flex-1 { flex: 1; min-width: 0; }

.grp-form-actions {
    display: flex; gap: 10px; flex-wrap: wrap; align-self: flex-start;
    margin-top: 8px; padding-top: 16px;
    border-top: 1px solid var(--grp-border); width: 100%;
}
.grp-form-actions > .grp-btn,
.grp-form-actions > .grp-btn-primary,
.grp-form-actions > .grp-btn-danger,
.grp-form-actions > .grp-btn-accent { flex: 0 0 auto; width: auto; }

.grp-form-thread select.grp-input { max-width: 280px; }

.grp-card-form {
    padding: 24px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    margin-bottom: 16px;
}
.grp-card-form > .grp-form { margin: 0; }
.grp-card-danger { border-left: 3px solid var(--grp-accent); }

/* 媒体字段布局 */
.grp-form-row-media {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px; align-items: start;
}
.grp-form-row-media > .grp-field { flex: none; min-width: 0; margin-bottom: 0; }
.grp-form-row-media > .grp-field:first-child { max-width: 220px; }
.grp-form-row-media > .grp-field:last-child { width: 100%; }
.grp-form-row-media .grp-preview-logo { width: 96px; height: 96px; display: block; margin-bottom: 8px; }
.grp-form-row-media .grp-preview-banner {
    width: 100%; max-width: 100%; height: auto; max-height: 240px;
    object-fit: cover; display: block; margin-bottom: 8px;
}
.grp-form-row-media .grp-field > input[type="file"].grp-input { width: 100%; box-sizing: border-box; }

/* ============================================================
   六、Tabs / Chips / 搜索 / 分类行
   ============================================================ */
.grp-tabs {
    display: flex; gap: 0; flex-wrap: wrap;
    margin: 0 0 20px; padding: 0;
    border-bottom: 1px solid var(--grp-border);
    overflow: visible;
}
.grp-subnav {
    display: flex; gap: 0; flex-wrap: wrap;
    margin: 0 0 20px; padding: 0;
    border-bottom: 1px solid var(--grp-border);
    overflow: visible;
}
.grp-subtabs { margin-top: -12px; padding-left: 0; }
.grp-tabs-scroll { overflow-x: visible; overflow-y: visible; flex-wrap: wrap; padding-bottom: 0; }

.grp-tab {
    position: relative;
    display: inline-block;
    padding: 10px 18px; font-size: 14px; font-weight: 500;
    color: var(--grp-text-2);
    text-decoration: none; background: transparent; border: 0;
    line-height: 1.5; letter-spacing: .3px; white-space: nowrap;
    cursor: pointer; transition: color .15s;
}
.grp-tab::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: -1px;
    height: 2px; background: transparent;
    transition: background .15s;
}
.grp-tab:hover { color: var(--grp-primary); }
.grp-tab.active { color: var(--grp-primary); font-weight: 700; }
.grp-tab.active::after { background: var(--grp-primary); }
.grp-tab-sub { font-size: 13px; padding: 8px 14px; }

.grp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.grp-chip {
    display: inline-flex; align-items: center;
    padding: 5px 14px; font-size: 12px; font-weight: 500;
    color: var(--grp-text-2); text-decoration: none;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: 999px; line-height: 1.6; letter-spacing: .2px;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.grp-chip:hover { border-color: var(--grp-primary); color: var(--grp-primary); background: var(--grp-primary-light); }
.grp-chip.active { background: var(--grp-primary); border-color: var(--grp-primary); color: #fff; font-weight: 600; }

/* ★ 筛选行右侧操作按钮组（圈子排行 / 我的圈子 / 创建圈子） */
.grp-chips-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.grp-chips-left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.grp-chips-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.grp-chips-actions .grp-btn { white-space: nowrap; }

.grp-search { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; align-items: center; }
.grp-search .grp-input { min-width: 240px; }

.grp-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin: 0 0 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--grp-border);
}
.grp-bar .grp-tabs, .grp-bar .grp-subnav, .grp-bar .grp-forum-tabs {
    flex: 1 1 auto; min-width: 0; margin: 0;
    padding-bottom: 0; border-bottom: 0;
}
.grp-bar-search { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; margin: 0; }
.grp-bar-search .grp-input { width: 200px; max-width: 240px; min-width: 0; padding: 6px 10px; font-size: 13px; }
.grp-bar-search .grp-btn { padding: 6px 14px; font-size: 13px; }

@media (max-width: 640px) {
    .grp-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .grp-bar-search { width: 100%; }
    .grp-bar-search .grp-input { flex: 1 1 auto; width: auto; max-width: none; }
    .grp-chips-bar { flex-direction: column; align-items: stretch; }
    .grp-chips-actions { justify-content: flex-start; }
}

/* ============================================================
   六·补、广场首页「圈子最新动态」区块（双列列表版）
   ------------------------------------------------------------
   布局：2 列，每行 2 篇帖子
   单条：左边帖子标题（含装饰符）+ 右边圈子名
   装饰：底部虚线下划线
   ============================================================ */
.grp-latest {
    margin: 0 0 22px;
    padding: 16px 18px 8px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
}

/* 区块标题栏 */
.grp-latest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grp-border);
    flex-wrap: wrap;
}
.grp-latest-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--grp-text);
    letter-spacing: .3px;
}
.grp-latest-icon { font-size: 16px; line-height: 1; }
.grp-latest-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--grp-text-3);
    background: var(--grp-bg);
    border: 1px solid var(--grp-border);
    border-radius: 999px;
    letter-spacing: .2px;
}
.grp-latest-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--grp-primary);
    text-decoration: none;
    transition: color .15s;
}
.grp-latest-more:hover { color: var(--grp-primary-hover); text-decoration: underline; }
.grp-latest-more i { font-size: 10px; }

/* 双列列表 */
.grp-latest-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
}
@media (max-width: 640px) {
    .grp-latest-list { grid-template-columns: 1fr; column-gap: 0; }
    .grp-latest { padding: 12px 14px 4px; }
}

/* 单条帖子：左标题 + 右圈子名，底部虚线下划线 */
.grp-latest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--grp-border);
    min-width: 0;
    transition: background .15s;
}
.grp-latest-item:last-child,
.grp-latest-item:nth-last-child(2):nth-child(odd) {
    /* 最后一行如果是两个（偶+奇），去掉两个的下划线 */
    border-bottom-color: transparent;
}
@media (max-width: 640px) {
    .grp-latest-item:last-child { border-bottom-color: transparent; }
}
.grp-latest-item:hover { background: var(--grp-primary-light); }

/* 左侧：帖子标题（+ 装饰符） */
.grp-latest-title-link {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
    color: var(--grp-text);
    transition: color .15s;
}
.grp-latest-title-link:hover .grp-latest-item-title { color: var(--grp-primary); }

/* 装饰符号：小方块（◆ 风格） */
.grp-latest-symbol {
    flex: 0 0 auto;
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--grp-primary);
    transform: rotate(45deg);
    border-radius: 1px;
    transition: background .15s;
}
.grp-latest-item:hover .grp-latest-symbol { background: var(--grp-gold); }

/* 帖子标题（单行省略） */
.grp-latest-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--grp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s;
}

/* 顶 / 精 小标签 */
.grp-tag-xs {
    font-size: 10px !important;
    padding: 0 5px !important;
    line-height: 1.5 !important;
    flex: 0 0 auto;
}

/* 右侧：圈子名 */
.grp-latest-group {
    flex: 0 0 auto;
    max-width: 130px;
    font-size: 12px;
    color: var(--grp-text-3);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--grp-bg);
    border: 1px solid var(--grp-border);
    transition: color .15s, background .15s, border-color .15s;
}
.grp-latest-group:hover {
    color: var(--grp-primary);
    background: var(--grp-primary-light);
    border-color: var(--grp-primary-line);
}
@media (max-width: 640px) {
    .grp-latest-group { max-width: 100px; font-size: 11px; }
    .grp-latest-item-title { font-size: 13px; }
    .grp-latest-item { padding: 8px 2px; gap: 8px; }
}

/* ============================================================
   七、通用网格 / 卡片 / 徽章 / 主题色
   ============================================================ */
.grp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.grp-forum-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.grp-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    text-decoration: none;
    color: inherit;
    align-items: center;
    transition: border-color .2s, box-shadow .2s;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.grp-card:hover { border-color: var(--grp-primary); box-shadow: 0 4px 12px rgba(26, 68, 128, .08); }
.grp-forum-card { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
.grp-event-card { flex-direction: column; align-items: stretch; }

.grp-card-logo, .grp-hero-logo {
    width: 60px; height: 60px;
    border-radius: var(--grp-radius);
    overflow: hidden;
    background: var(--grp-primary-light);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; align-self: center;
    border: 1px solid var(--grp-primary-line);
}
.grp-hero-logo { width: 96px; height: 96px; }
.grp-card-logo img, .grp-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.grp-logo-fallback { font-size: 26px; color: var(--grp-primary); font-weight: 700; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.grp-hero-logo .grp-logo-fallback { font-size: 42px; }

.grp-card-body { flex: 1; min-width: 0; overflow: hidden; }
.grp-card-name {
    font-size: 16px; font-weight: 700; color: var(--grp-text);
    display: flex; gap: 8px; align-items: center; line-height: 1.4;
    flex-wrap: wrap; min-width: 0;
}
.grp-card-title {
    display: inline-block; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 700; vertical-align: middle;
}
.grp-card-meta {
    display: flex; gap: 14px; font-size: 12px; color: var(--grp-text-3);
    margin-top: 8px; flex-wrap: wrap; min-width: 0;
}
.grp-card-desc {
    font-size: 13px; color: var(--grp-text-2); margin-top: 10px; line-height: 1.65;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    min-width: 0;
}

.grp-lv {
    display: inline-flex; align-items: center;
    font-size: 11px; padding: 2px 8px;
    border-radius: 2px;
    background: var(--grp-primary-light);
    color: var(--grp-primary);
    font-weight: 700; letter-spacing: .5px; line-height: 1.6;
    border: 1px solid var(--grp-primary-line);
    flex: 0 0 auto;
}

.grp-empty {
    padding: 48px 24px; text-align: center;
    color: var(--grp-text-3);
    background: var(--grp-card);
    border: 1px dashed var(--grp-border-strong);
    border-radius: var(--grp-radius-lg);
    font-size: 13px; line-height: 1.7;
}
.grp-empty a { color: var(--grp-primary); text-decoration: none; }
.grp-empty a:hover { text-decoration: underline; }

/* 徽章 */
.grp-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; font-size: 11px; font-weight: 600; line-height: 1.6;
    border-radius: 2px; border: 1px solid transparent;
    vertical-align: middle; white-space: nowrap; flex: 0 0 auto;
}
.grp-badge-sm { padding: 0 5px; font-size: 10px; }
.grp-badge-official { background: var(--grp-primary-light); color: var(--grp-primary); border-color: var(--grp-primary-line); }
.grp-badge-quality { background: var(--grp-gold-light); color: var(--grp-gold); border-color: var(--grp-gold-line); }
.grp-badge-recommend { background: var(--grp-accent-light); color: var(--grp-accent); border-color: rgba(200, 16, 46, .3); }
.grp-badge-custom {
    background: var(--grp-bg); color: var(--grp-text-2);
    border-color: var(--grp-border);
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grp-badge-sm.grp-badge-custom { max-width: 80px; }
.grp-card-name .grp-badge-custom { max-width: 90px; }
.grp-title .grp-badge-custom { max-width: 160px; }
.grp-badge-top { background: #fff3cd; color: #7a5c00; border-color: #f0d78c; }

.grp-card-themed { border-left: 3px solid var(--grp-card-accent, var(--grp-primary)); }
.grp-card-themed:hover { border-left-color: var(--grp-card-accent, var(--grp-primary)); }

.grp-color-row { display: flex; gap: 8px; align-items: center; }
.grp-input-color { width: 48px; height: 36px; padding: 2px; cursor: pointer; flex: 0 0 auto; }
.grp-color-text {
    flex: 1 1 auto; min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; letter-spacing: 1px;
}

html[data-theme="dark"] .grp-themed,
html.dark .grp-themed,
body.dark .grp-themed,
body.theme-dark .grp-themed,
.dark-theme .grp-themed {
    --grp-primary: var(--grp-primary-dark, var(--grp-primary)) !important;
}

.grp-price-tag {
    display: inline-flex; align-items: center;
    padding: 1px 8px; font-size: 11px; font-weight: 700;
    color: var(--grp-gold);
    background: var(--grp-gold-light);
    border: 1px solid var(--grp-gold-line);
    border-radius: 2px; letter-spacing: .3px;
}

/* ============================================================
   八、Hero 区
   ============================================================ */
.grp-banner-wrap {
    margin-bottom: -1px;
    border-radius: var(--grp-radius-lg) var(--grp-radius-lg) 0 0;
    overflow: hidden;
    background: var(--grp-primary-light);
    line-height: 0;
}
.grp-banner { display: block; width: 100%; height: auto; }

.grp-hero {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 24px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    margin-bottom: 20px;
}
.grp-hero.has-banner { border-radius: 0 0 var(--grp-radius-lg) var(--grp-radius-lg); margin-top: 0; }
.grp-hero-body { flex: 1; min-width: 240px; }
.grp-hero-body .grp-title { margin: 0 0 10px; }
.grp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.grp-home-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px;
    margin-top: 8px; align-items: start;
}
.grp-home-main { min-width: 0; }
.grp-home-side { min-width: 0; }
@media (max-width: 1024px) {
    .grp-home-grid { grid-template-columns: 1fr; gap: 20px; }
}

.grp-side-panel {
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    padding: 16px 18px; margin-bottom: 16px;
}
.grp-side-panel .grp-h2 {
    margin: 0 0 12px; padding-bottom: 10px; padding-left: 12px;
    border-bottom: 1px solid var(--grp-border);
}

/* ============================================================
   九、列表 / 标签 / 表格 / 成员
   ============================================================ */
.grp-list {
    list-style: none; padding: 0; margin: 0;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    overflow: hidden;
}
.grp-list > li {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--grp-card);
    border-bottom: 1px solid var(--grp-border);
    line-height: 1.6; transition: background .15s;
}
.grp-list > li:last-child { border-bottom: 0; }
.grp-list > li:hover { background: var(--grp-primary-light); }
.grp-list > li a { color: var(--grp-primary); text-decoration: none; }
.grp-list > li a:hover { text-decoration: underline; }

.grp-list-carded { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.grp-list-carded > li { background: var(--grp-card); border: 1px solid var(--grp-border); border-radius: var(--grp-radius-lg); margin-bottom: 8px; }
.grp-list-carded > li:last-child { border-bottom: 1px solid var(--grp-border); margin-bottom: 0; }

.grp-tag {
    display: inline-flex; align-items: center;
    font-size: 11px; padding: 2px 8px;
    border-radius: 2px;
    background: var(--grp-primary-light);
    color: var(--grp-primary);
    font-weight: 600; line-height: 1.6; letter-spacing: .3px;
    border: 1px solid var(--grp-primary-line);
    flex: 0 0 auto;
}
.grp-tag-top { background: var(--grp-accent); color: #fff; border-color: var(--grp-accent); }
.grp-tag-ess { background: var(--grp-gold); color: #fff; border-color: var(--grp-gold); }
.grp-tag-log { background: var(--grp-bg); color: var(--grp-text-2); border-color: var(--grp-border); }
.grp-tag-tip {
    background: var(--grp-gold-light); color: var(--grp-gold);
    border-color: var(--grp-gold-line); font-weight: 700; letter-spacing: .3px;
}

.grp-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    overflow: hidden;
}
.grp-table th, .grp-table td {
    text-align: left; padding: 12px 16px; font-size: 13px;
    border-bottom: 1px solid var(--grp-border);
    color: var(--grp-text); vertical-align: middle;
}
.grp-table th {
    color: var(--grp-text-2); background: var(--grp-primary-light);
    font-weight: 700; white-space: nowrap; letter-spacing: .3px;
}
.grp-table tr:hover td { background: var(--grp-primary-light); }
.grp-table tr:last-child td { border-bottom: 0; }
.grp-table .grp-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.grp-tr-top td { background: var(--grp-card); font-weight: 600; }
.grp-tr-sub td { background: var(--grp-bg); }
.grp-sub-name { padding-left: 20px; color: var(--grp-text-2); }

.grp-members-row { display: flex; gap: 8px; flex-wrap: wrap; }
.grp-member-chip {
    display: inline-flex; align-items: center;
    font-size: 12px; padding: 4px 12px;
    border-radius: 999px;
    background: var(--grp-bg); color: var(--grp-text-2);
    text-decoration: none; line-height: 1.6;
    border: 1px solid var(--grp-border);
    transition: border-color .15s, background .15s, color .15s;
}
a.grp-member-chip:hover { color: var(--grp-primary); background: var(--grp-primary-light); border-color: var(--grp-primary-line); }
.grp-role { font-size: 12px; color: var(--grp-primary); font-weight: 600; letter-spacing: .3px; }

.grp-contributors { list-style: none; padding: 0; margin: 0; }
.grp-contributors > li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--grp-border);
    font-size: 13px; line-height: 1.6;
}
.grp-contributors > li:last-child { border-bottom: 0; }
.grp-contrib-rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    font-size: 12px; font-weight: 700; line-height: 1;
    border-radius: 2px;
    background: var(--grp-bg); color: var(--grp-text-3);
    flex: 0 0 auto;
    font-family: "DIN Alternate", Arial, sans-serif;
    border: 1px solid var(--grp-border);
}
.grp-contributors > li:nth-child(1) .grp-contrib-rank { background: var(--grp-gold); color: #fff; border-color: var(--grp-gold); }
.grp-contributors > li:nth-child(2) .grp-contrib-rank { background: #a8b0bc; color: #fff; border-color: #a8b0bc; }
.grp-contributors > li:nth-child(3) .grp-contrib-rank { background: #c98a51; color: #fff; border-color: #c98a51; }
.grp-contrib-name {
    flex: 1 1 auto; min-width: 0;
    color: var(--grp-text); text-decoration: none;
    font-size: 13px; line-height: 1.6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .15s;
}
.grp-contrib-name:hover { color: var(--grp-primary); }
.grp-contrib-score {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; padding: 3px 8px;
    font-size: 13px; font-weight: 700; line-height: 1;
    color: var(--grp-primary);
    background: var(--grp-primary-light);
    border: 1px solid var(--grp-primary-line);
    border-radius: 2px;
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .3px;
}
.grp-invite-rank .grp-contrib-score {
    background: var(--grp-gold-light); color: var(--grp-gold); border-color: var(--grp-gold-line);
}

/* ============================================================
   十、通知 / 帖子 / 富文本
   ============================================================ */
.grp-notify-list > li { padding: 0; }
.grp-notify-list > li.is-unread { background: var(--grp-primary-light); border-left: 3px solid var(--grp-primary); }
.grp-notify-link { display: block; padding: 16px 20px; color: inherit; text-decoration: none; transition: background .15s; }
.grp-notify-link:hover { background: var(--grp-primary-light); }
.grp-notify-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.grp-notify-title { font-weight: 700; color: var(--grp-text); font-size: 14px; letter-spacing: .2px; }
.grp-notify-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--grp-accent);
    box-shadow: 0 0 0 3px var(--grp-accent-light);
}
.grp-notify-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 4px;
    background: var(--grp-bg); font-size: 13px; line-height: 1; flex: 0 0 auto;
}
.grp-notify-list > li.is-unread .grp-notify-icon { background: var(--grp-primary-light); }

.grp-nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 5px;
    margin-left: 4px;
    font-size: 10px; font-weight: 700; line-height: 1;
    color: #fff; background: var(--grp-accent);
    border-radius: 999px;
}

.grp-post-main, .grp-post {
    padding: 22px 24px; margin-bottom: 14px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
}
.grp-post-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--grp-border);
}
.grp-avatar {
    display: inline-flex; align-items: center;
    font-size: 12px; color: var(--grp-primary);
    background: var(--grp-primary-light);
    padding: 3px 12px; border-radius: 2px;
    text-decoration: none;
    font-weight: 600; line-height: 1.6;
    border: 1px solid var(--grp-primary-line);
    transition: opacity .15s;
}
.grp-avatar:hover { opacity: .85; }
.grp-thread-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--grp-text); line-height: 1.4; letter-spacing: .3px; }
.grp-post-content {
    font-size: var(--grp-post-fontsize, 15px);
    line-height: 1.9;
    color: var(--grp-text);
    word-break: break-word;
    padding: 4px 0;
}
.grp-post-actions {
    display: flex; gap: 8px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--grp-border);
    flex-wrap: wrap; align-items: center;
}

/* 帖子标题行 + 字号切换 */
.grp-thread-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.grp-thread-title-row .grp-thread-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.grp-fontsize-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius);
    overflow: hidden;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.grp-fontsize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--grp-border);
    color: var(--grp-text-2);
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.grp-fontsize-btn:last-child { border-right: 0; }
.grp-fontsize-btn:hover { background: var(--grp-primary-light); color: var(--grp-primary); }
.grp-fontsize-value {
    min-width: 44px !important;
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: .5px !important;
    font-weight: 700 !important;
}
@media (max-width: 640px) {
    .grp-fontsize-btn { min-width: 30px; height: 26px; padding: 0 6px; }
}

/* 富文本 */
.grp-rich { white-space: normal; }
.grp-rich p { margin: 0 0 1em; line-height: 1.9; }
.grp-rich p:last-child { margin-bottom: 0; }
.grp-rich h1, .grp-rich h2, .grp-rich h3,
.grp-rich h4, .grp-rich h5, .grp-rich h6 {
    margin: 1.3em 0 .7em; line-height: 1.4;
    color: var(--grp-text); font-weight: 700;
}
.grp-rich h1 { font-size: 22px; }
.grp-rich h2 { font-size: 20px; }
.grp-rich h3 { font-size: 18px; }
.grp-rich ul, .grp-rich ol { margin: .7em 0 1em; padding-left: 1.8em; line-height: 1.9; }
.grp-rich li { margin-bottom: .35em; }
.grp-rich blockquote {
    margin: 1em 0; padding: .6em 1.1em;
    border-left: 3px solid var(--grp-primary);
    background: var(--grp-primary-light);
    color: var(--grp-text-2); border-radius: 2px;
}
.grp-rich pre, .grp-rich code {
    background: var(--grp-bg); border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.grp-rich pre { padding: 14px 16px; overflow-x: auto; line-height: 1.6; border: 1px solid var(--grp-border); }
.grp-rich code { padding: 2px 6px; }
.grp-rich pre code { padding: 0; background: transparent; }
.grp-rich a { color: var(--grp-primary); text-decoration: none; }
.grp-rich a:hover { text-decoration: underline; }
.grp-rich img { max-width: 100%; height: auto; border-radius: var(--grp-radius); display: block; margin: 1em auto; }
.grp-rich hr { border: 0; border-top: 1px solid var(--grp-border); margin: 1.5em 0; }
.grp-rich table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.grp-rich th, .grp-rich td { border: 1px solid var(--grp-border); padding: 10px 12px; text-align: left; }
.grp-rich th { background: var(--grp-primary-light); font-weight: 700; }

.grp-forum-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 2px solid var(--grp-primary);
    position: relative;
}
.grp-forum-head::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: var(--grp-accent);
}
.grp-forum-head-left { min-width: 0; }
.grp-forum-head-left .grp-title { margin: 0; }
.grp-forum-sub { margin-top: 6px; }
.grp-forum-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.grp-newthread-box {
    padding: 24px; margin: 0 0 28px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    border-left: 3px solid var(--grp-primary);
}
.grp-editor-area { min-height: 260px; }

/* ============================================================
   十一、圈子管理
   ============================================================ */
.grp-manage-head {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 2px solid var(--grp-primary);
    position: relative;
}
.grp-manage-head::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: var(--grp-accent);
}
.grp-manage-head .grp-title-inline { margin: 0; }

.grp-preview-logo {
    width: 72px; height: 72px;
    border-radius: var(--grp-radius);
    object-fit: cover;
    border: 1px solid var(--grp-border);
    background: var(--grp-bg);
}
.grp-preview-banner {
    width: 100%; max-width: 420px; height: auto;
    border-radius: var(--grp-radius);
    border: 1px solid var(--grp-border);
}

.grp-manage-section { margin-bottom: 12px; }
.grp-forum-manage-list > li { padding: 10px 16px; }

.grp-invite-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    background: var(--grp-primary-light);
    border: 1px solid var(--grp-primary-line);
    border-radius: var(--grp-radius);
    padding: 4px 12px;
    color: var(--grp-primary);
    letter-spacing: 2px; font-weight: 700;
}

/* ============================================================
   十二、模态框
   ============================================================ */
.grp-modal {
    --grp-primary-hover: #143566;
    --grp-accent-light: #fdeff1;
    --grp-gold: #b8860b;
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    font-size: 14px; line-height: 1.6;
    color: var(--grp-text, #1a1a1a);
}
.grp-modal[hidden] { display: none !important; }
.grp-modal-mask {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .62);
    cursor: pointer;
}
.grp-modal-panel {
    position: relative;
    background: var(--grp-card, #ffffff);
    color: var(--grp-text, #1a1a1a);
    border: 1px solid var(--grp-border, #e3e6ec);
    border-radius: var(--grp-radius-lg, 6px);
    max-width: 520px; width: 100%; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
}
.grp-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--grp-border, #e3e6ec);
    background: var(--grp-primary-light, #eaf0f8);
}
.grp-modal-head h3 {
    margin: 0; font-size: 16px; font-weight: 700;
    color: var(--grp-primary, #1a4480); letter-spacing: .3px;
}
.grp-modal-close {
    width: 30px; height: 30px; padding: 0;
    border: 0; background: transparent;
    cursor: pointer; font-size: 22px; line-height: 1;
    color: var(--grp-text-3, #8c94a0);
    border-radius: var(--grp-radius, 4px);
    transition: background .15s, color .15s;
}
.grp-modal-close:hover { background: rgba(0, 0, 0, .08); color: var(--grp-text, #1a1a1a); }
.grp-modal-body {
    padding: 22px 24px; overflow-y: auto;
    background: var(--grp-card, #ffffff);
    color: var(--grp-text, #1a1a1a);
}
.grp-modal-body .grp-field { margin-bottom: 14px; }
.grp-modal-body .grp-field > label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--grp-text-2, #5a6472);
    margin-bottom: 6px; letter-spacing: .3px;
}
.grp-modal-body .grp-input,
.grp-modal-body textarea.grp-input {
    width: 100%; box-sizing: border-box;
    background: #ffffff; color: var(--grp-text, #1a1a1a);
    border: 1px solid var(--grp-border-strong, #c9cfd8);
    border-radius: var(--grp-radius, 4px);
    padding: 8px 12px; font-size: 13px; line-height: 1.5;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.grp-modal-body .grp-input:hover { border-color: var(--grp-text-3, #8c94a0); }
.grp-modal-body .grp-input:focus {
    outline: none; border-color: var(--grp-primary, #1a4480);
    box-shadow: 0 0 0 3px var(--grp-primary-light, #eaf0f8);
}
.grp-modal-body .grp-input::placeholder { color: var(--grp-text-3, #8c94a0); }
.grp-modal-body textarea.grp-input { resize: vertical; min-height: 120px; }
.grp-modal-body .grp-field-hint {
    display: block; font-size: 12px;
    color: var(--grp-text-3, #8c94a0);
    margin-top: 4px; line-height: 1.5;
}
.grp-modal-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid var(--grp-border, #e3e6ec);
    background: var(--grp-bg, #f5f6f8);
}
.grp-modal-actions .grp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 500; line-height: 1.5;
    font-family: inherit;
    background: var(--grp-card, #ffffff);
    color: var(--grp-text, #1a1a1a);
    border: 1px solid var(--grp-border-strong, #c9cfd8);
    border-radius: var(--grp-radius, 4px);
    cursor: pointer; text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.grp-modal-actions .grp-btn:hover {
    border-color: var(--grp-primary, #1a4480);
    color: var(--grp-primary, #1a4480);
    background: var(--grp-primary-light, #eaf0f8);
}
.grp-modal-actions .grp-btn-primary {
    background: var(--grp-primary, #1a4480);
    color: #fff;
    border-color: var(--grp-primary, #1a4480);
}
.grp-modal-actions .grp-btn-primary:hover {
    background: var(--grp-primary-hover, #143566);
    border-color: var(--grp-primary-hover, #143566);
    color: #fff;
}

/* ============================================================
   十三、告示 / 公告
   ============================================================ */
.grp-alert {
    padding: 14px 18px; margin: 12px 0;
    background: #fff8e1;
    border: 1px solid #f0d78c;
    border-left: 3px solid var(--grp-gold);
    color: #6d5310; border-radius: var(--grp-radius);
    font-size: 13px; line-height: 1.7;
}
.grp-alert-info {
    background: #e8f4ea; border-color: #b6ddb9;
    border-left-color: #2e7d32; color: #1b5e20;
}
.grp-alert-error {
    background: #fdecea; border-color: #f5c2c0;
    border-left-color: #c8102e; color: #8a1521;
}
.grp-announcement .grp-rich { margin-top: 6px; color: inherit; }
.grp-announcement .grp-rich p:last-child { margin-bottom: 0; }

/* ============================================================
   十四、后台
   ============================================================ */
.grp-admin-actions-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.grp-admin-edit-form .grp-form-row { gap: 16px; }

.grp-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 20px 0; }
.grp-stat-card {
    padding: 22px 18px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    text-align: center;
    transition: border-color .15s;
}
.grp-stat-card:hover { border-color: var(--grp-primary); }
.grp-stat-card-accent { border-left: 3px solid var(--grp-primary); }
.grp-stat-card-danger { border-left: 3px solid var(--grp-accent); background: var(--grp-accent-light); }
.grp-stat-value {
    font-size: 30px; font-weight: 700; color: var(--grp-primary);
    margin-bottom: 6px; line-height: 1.1;
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -1px;
}
.grp-stat-label { font-size: 12px; color: var(--grp-text-3); line-height: 1.5; letter-spacing: .5px; }

.grp-chart {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; height: 200px;
    padding: 16px 12px 0;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    margin-bottom: 10px;
}
.grp-chart-col {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    align-items: center; height: 100%;
}
.grp-chart-bars {
    flex: 1 1 auto; width: 100%;
    display: flex; align-items: flex-end; justify-content: center;
    gap: 4px; min-height: 0;
}
.grp-chart-bar {
    width: 38%; max-width: 20px;
    border-radius: 2px 2px 0 0;
    transition: opacity .15s;
}
.grp-chart-bar-th { background: var(--grp-primary); }
.grp-chart-bar-po { background: var(--grp-gold); }
.grp-chart-col:hover .grp-chart-bar { opacity: .78; }
.grp-chart-label { padding-top: 8px; font-size: 11px; color: var(--grp-text-3); white-space: nowrap; }
.grp-chart-legend { display: flex; gap: 20px; font-size: 12px; color: var(--grp-text-2); margin-bottom: 16px; }
.grp-chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.grp-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.grp-legend-th { background: var(--grp-primary); }
.grp-legend-po { background: var(--grp-gold); }

.grp-cell-content { max-width: 320px; word-break: break-word; white-space: pre-wrap; }

.grp-log-list > li { padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grp-log-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.grp-log-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.grp-log-time { font-size: 12px; color: var(--grp-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3px; }
.grp-log-act { font-weight: 600; }
.grp-log-item { line-height: 1.6; }

.grp-forum-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 0 14px; margin: 0 0 20px;
    border-bottom: 1px solid var(--grp-border);
    overflow: visible;
}
.grp-forum-tab {
    display: inline-flex; align-items: center;
    padding: 6px 16px; font-size: 13px; font-weight: 500;
    color: var(--grp-text-2); text-decoration: none;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius);
    line-height: 1.6; letter-spacing: .2px;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.grp-forum-tab:hover { border-color: var(--grp-primary); color: var(--grp-primary); background: var(--grp-primary-light); }
.grp-forum-tab.active { background: var(--grp-primary); border-color: var(--grp-primary); color: #fff; font-weight: 600; }
.grp-forum-tab.active:hover { color: #fff; background: var(--grp-primary); }

.grp-forum-info {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    margin-bottom: 18px;
}
.grp-forum-info-logo {
    flex: 0 0 auto; width: 48px; height: 48px;
    border-radius: var(--grp-radius);
    overflow: hidden;
    background: var(--grp-primary-light);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--grp-primary-line);
}
.grp-forum-info-logo img { width: 100%; height: 100%; object-fit: cover; }
.grp-forum-info-logo .grp-logo-fallback { font-size: 20px; }
.grp-forum-info-body { flex: 1; min-width: 0; }
.grp-forum-info-name { font-size: 16px; font-weight: 700; color: var(--grp-text); display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.grp-forum-info-meta { display: flex; gap: 16px; font-size: 12px; color: var(--grp-text-3); margin-top: 4px; flex-wrap: wrap; }
.grp-forum-info-actions { flex: 0 0 auto; }

.grp-forum-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.grp-forum-toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grp-forum-toolbar-right { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.grp-forum-sort {
    display: inline-flex; align-items: center;
    padding: 5px 12px; font-size: 12px;
    color: var(--grp-text-2); text-decoration: none;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--grp-radius); line-height: 1.5;
    transition: color .15s, border-color .15s, background .15s;
}
.grp-forum-sort:hover { color: var(--grp-primary); background: var(--grp-primary-light); }
.grp-forum-sort.active { color: var(--grp-primary); border-color: var(--grp-primary-line); background: var(--grp-primary-light); font-weight: 600; }

.grp-thread-table {
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    overflow: hidden;
}
.grp-thread-table-head {
    display: grid; grid-template-columns: minmax(0, 1fr) 180px 140px; gap: 0;
    padding: 12px 20px;
    background: var(--grp-primary-light);
    border-bottom: 1px solid var(--grp-border);
    font-size: 13px; font-weight: 700;
    color: var(--grp-text-2); letter-spacing: .3px;
}
.grp-thread-table-body { list-style: none; margin: 0; padding: 0; }
.grp-thread-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 180px 140px; gap: 0;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--grp-border);
    transition: background .15s;
}
.grp-thread-row:last-child { border-bottom: 0; }
.grp-thread-row:hover { background: var(--grp-primary-light); }
.grp-thread-col-main { min-width: 0; padding-right: 12px; }
.grp-thread-col-author { font-size: 12px; color: var(--grp-text-3); }
.grp-thread-col-stat { text-align: right; }
.grp-thread-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.grp-thread-title-line .grp-thread-title {
    font-size: 14px; font-weight: 500; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%; transition: color .15s;
}
.grp-thread-title-line .grp-thread-title:hover { color: var(--grp-primary); }
.grp-thread-stat { font-size: 12px; color: var(--grp-text-3); }
.grp-thread-stat strong { color: var(--grp-primary); font-weight: 700; font-size: 14px; }

/* ============================================================
   十五、点赞 / 签到 / 打赏
   ============================================================ */
.grp-like-count {
    display: inline-block; margin-left: 4px;
    font-weight: 700;
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
}
.grp-checkin-stats { display: flex; gap: 16px; margin: 8px 0 14px; }
.grp-checkin-stat {
    flex: 1 1 0; min-width: 0; text-align: center;
    padding: 10px 6px;
    background: var(--grp-primary-light);
    border: 1px solid var(--grp-primary-line);
    border-radius: var(--grp-radius);
}
.grp-checkin-num {
    font-size: 22px; font-weight: 700; color: var(--grp-primary);
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.5px; line-height: 1.1;
}
.grp-checkin-label { font-size: 11px; color: var(--grp-text-3); margin-top: 4px; letter-spacing: .5px; }
.grp-checkin-btn { width: 100%; justify-content: center; }
.grp-checkin-more { margin-top: 10px; text-align: center; }

.grp-cal {
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    padding: 20px; max-width: 560px;
}
.grp-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--grp-border);
}
.grp-cal-title { font-size: 16px; font-weight: 700; color: var(--grp-text); letter-spacing: .5px; }
.grp-cal-nav {
    color: var(--grp-primary); text-decoration: none;
    font-size: 13px; padding: 4px 10px;
    border-radius: var(--grp-radius);
    transition: background .15s;
}
.grp-cal-nav:hover { background: var(--grp-primary-light); }
.grp-cal-week, .grp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.grp-cal-week { margin-bottom: 6px; }
.grp-cal-week > span { text-align: center; font-size: 12px; color: var(--grp-text-3); font-weight: 600; letter-spacing: .5px; padding: 4px 0; }
.grp-cal-cell {
    position: relative; aspect-ratio: 1 / 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: var(--grp-radius);
    background: var(--grp-bg);
    border: 1px solid transparent;
    font-size: 13px; color: var(--grp-text-2);
    transition: border-color .15s;
}
.grp-cal-empty { background: transparent; }
.grp-cal-checked {
    background: var(--grp-primary-light);
    border-color: var(--grp-primary-line);
    color: var(--grp-primary); font-weight: 700;
}
.grp-cal-today { border-color: var(--grp-accent); border-width: 2px; }
.grp-cal-day { line-height: 1; }
.grp-cal-dot {
    position: absolute; bottom: 4px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--grp-primary);
}
.grp-cal-legend {
    display: flex; gap: 20px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--grp-border);
    font-size: 12px; color: var(--grp-text-2);
}
.grp-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.grp-cal-legend-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 2px;
    background: var(--grp-primary-light);
    border: 1px solid var(--grp-primary-line);
}
.grp-cal-legend-today {
    display: inline-block; width: 12px; height: 12px; border-radius: 2px;
    border: 2px solid var(--grp-accent); background: transparent;
}

.grp-tip-wall {
    margin-top: 14px; padding: 12px 16px;
    background: var(--grp-gold-light);
    border: 1px solid var(--grp-gold-line);
    border-radius: var(--grp-radius);
    border-left: 3px solid var(--grp-gold);
}
.grp-tip-wall[hidden] { display: none !important; }
.grp-tip-wall-sm { margin-top: 10px; padding: 8px 12px; font-size: 12px; }
.grp-tip-wall-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px dashed var(--grp-gold-line);
}
.grp-tip-wall-sm .grp-tip-wall-head { margin-bottom: 4px; padding-bottom: 4px; }
.grp-tip-wall-title { font-size: 13px; font-weight: 700; color: var(--grp-gold); letter-spacing: .3px; }
.grp-tip-wall-total { font-size: 12px; color: var(--grp-text-3); }
.grp-tip-wall-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px 14px;
}
.grp-tip-wall-list > li {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--grp-text-2); line-height: 1.6;
}
.grp-tip-wall-user { color: var(--grp-primary); text-decoration: none; font-weight: 600; }
.grp-tip-wall-user:hover { text-decoration: underline; }
.grp-tip-wall-points {
    display: inline-flex; align-items: center;
    padding: 1px 7px; font-weight: 700; color: var(--grp-gold);
    background: #fff; border: 1px solid var(--grp-gold-line); border-radius: 2px;
    font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
}
.grp-tip-wall-msg {
    color: var(--grp-text-2); font-style: italic;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grp-tip-wall-time { font-size: 11px; color: var(--grp-text-3); }

/* ============================================================
   十六、编辑历史
   ============================================================ */
.grp-history-link { color: var(--grp-primary); text-decoration: none; font-size: 12px; }
.grp-history-link:hover { text-decoration: underline; }
.grp-history-item {
    padding: 18px 22px; margin-bottom: 12px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
}
.grp-history-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px dashed var(--grp-border);
}
.grp-history-section { margin-bottom: 12px; }
.grp-history-section:last-child { margin-bottom: 0; }
.grp-history-label { font-size: 12px; font-weight: 700; color: var(--grp-text-3); letter-spacing: .5px; margin-bottom: 6px; }
.grp-history-content {
    padding: 12px 14px;
    background: var(--grp-bg);
    border-radius: var(--grp-radius);
    font-size: 14px; line-height: 1.8;
    color: var(--grp-text); word-break: break-word;
}

/* ============================================================
   十七、Toast
   ============================================================ */
.grp-toast {
    position: fixed; left: 50%; bottom: 32px;
    transform: translate(-50%, 20px);
    z-index: 100000;
    padding: 10px 20px;
    font-size: 13px; font-weight: 500; line-height: 1.5;
    color: #fff; background: rgba(0, 0, 0, .82);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    max-width: 90vw; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.grp-toast-in { opacity: 1; transform: translate(-50%, 0); }
.grp-toast-ok { background: rgba(46, 125, 50, .94); }
.grp-toast-err { background: rgba(200, 16, 46, .94); }

/* ============================================================
   十八、成员名片
   ============================================================ */
.grp-card-profile {
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    padding: 24px; margin-bottom: 20px;
}
.grp-profile-head {
    display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.grp-profile-avatar {
    width: 88px; height: 88px;
    border-radius: 50%; overflow: hidden;
    background: var(--grp-primary-light);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--grp-primary-line);
    flex: 0 0 auto;
}
.grp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grp-profile-avatar .grp-logo-fallback { font-size: 36px; }
.grp-profile-body { flex: 1 1 240px; min-width: 0; }
.grp-profile-name {
    font-size: 22px; font-weight: 700; color: var(--grp-text);
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.grp-profile-title {
    font-size: 12px; padding: 2px 10px;
    background: var(--grp-gold-light);
    color: var(--grp-gold);
    border: 1px solid var(--grp-gold-line);
    border-radius: 2px; font-weight: 600;
}
.grp-profile-meta {
    display: flex; flex-wrap: wrap; gap: 16px;
    font-size: 13px; color: var(--grp-text-3); margin-bottom: 10px;
}
.grp-profile-meta strong { color: var(--grp-primary); font-weight: 700; }
.grp-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.grp-profile-bio {
    font-size: 13px; line-height: 1.8; color: var(--grp-text-2);
    margin-top: 8px; padding: 12px 14px;
    background: var(--grp-bg);
    border-radius: var(--grp-radius);
}
.grp-profile-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-start; }

/* ============================================================
   十九、成就卡片
   ============================================================ */
.grp-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px; margin: 16px 0;
}
.grp-ach-card {
    display: flex; gap: 14px;
    padding: 16px 18px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    align-items: flex-start;
    opacity: .72;
    transition: opacity .2s, border-color .2s;
    min-width: 0;
}
.grp-ach-card:hover { opacity: 1; border-color: var(--grp-primary-line); }
.grp-ach-unlocked {
    opacity: 1;
    background: linear-gradient(135deg, var(--grp-gold-light), var(--grp-card));
    border-color: var(--grp-gold-line);
    box-shadow: 0 2px 12px rgba(184, 134, 11, .12);
}
.grp-ach-icon {
    font-size: 34px; line-height: 1;
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grp-bg);
    border-radius: 8px;
}
.grp-ach-unlocked .grp-ach-icon { background: #fff; box-shadow: 0 2px 8px rgba(184, 134, 11, .2); }
.grp-ach-info { flex: 1 1 auto; min-width: 0; }
.grp-ach-name {
    font-size: 14px; font-weight: 700; color: var(--grp-text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.grp-ach-reward {
    font-size: 11px; padding: 1px 7px;
    background: var(--grp-gold-light);
    color: var(--grp-gold);
    border: 1px solid var(--grp-gold-line);
    border-radius: 2px; font-weight: 700;
}
.grp-ach-desc { font-size: 12px; color: var(--grp-text-3); line-height: 1.5; margin-bottom: 8px; }
.grp-ach-unlocked-at { font-size: 11px; color: var(--grp-gold); font-weight: 600; }
.grp-ach-progress {
    position: relative;
    height: 8px; background: var(--grp-bg);
    border-radius: 4px; overflow: hidden;
    margin-top: 6px;
}
.grp-ach-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--grp-primary), var(--grp-gold));
    border-radius: 4px;
    transition: width .3s;
}
.grp-ach-progress-text {
    position: absolute; right: 0; top: -18px;
    font-size: 11px; color: var(--grp-text-3); font-weight: 600;
}

/* ============================================================
   二十、任务列表
   ============================================================ */
.grp-task-list > li {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 20px;
}
.grp-task-body { flex: 1 1 auto; min-width: 0; }
.grp-task-title {
    font-size: 14px; font-weight: 700; color: var(--grp-text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.grp-task-reward {
    font-size: 11px; padding: 1px 8px;
    background: var(--grp-gold-light);
    color: var(--grp-gold);
    border: 1px solid var(--grp-gold-line);
    border-radius: 2px; font-weight: 700;
}
.grp-task-progress {
    position: relative;
    height: 6px; background: var(--grp-bg);
    border-radius: 3px; overflow: hidden;
    margin-top: 12px;
}
.grp-task-progress .grp-ach-progress-text { top: -16px; }
.grp-task-action { flex: 0 0 auto; display: flex; align-items: center; align-self: center; }

/* ============================================================
   二十一、活动
   ============================================================ */
.grp-event-cover {
    width: 100%; aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--grp-radius);
    margin-bottom: 10px;
    background: var(--grp-bg);
}
.grp-event-cover img { width: 100%; height: 100%; object-fit: cover; }
.grp-event-head {
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    padding: 24px; margin-bottom: 20px;
}
.grp-event-banner {
    width: 100%; max-height: 320px; object-fit: cover;
    border-radius: var(--grp-radius); margin-bottom: 16px;
}
.grp-signup-list > li {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 20px;
}
.grp-signup-body { flex: 1 1 auto; min-width: 0; }
.grp-signup-content { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--grp-text-2); }
.grp-signup-img {
    margin-top: 10px;
    max-width: 100%; max-height: 240px;
    border-radius: var(--grp-radius);
}
.grp-signup-action { flex: 0 0 auto; align-self: center; }
.grp-signup-winner {
    background: linear-gradient(90deg, var(--grp-gold-light) 0%, transparent 60%);
    border-left: 3px solid var(--grp-gold) !important;
}
.grp-active-events {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 10px 14px;
    background: var(--grp-gold-light);
    border: 1px solid var(--grp-gold-line);
    border-radius: var(--grp-radius);
}
.grp-active-events-label { font-size: 12px; font-weight: 700; color: var(--grp-gold); letter-spacing: .3px; }
.grp-event-chip {
    display: inline-flex; align-items: center;
    padding: 3px 12px; font-size: 12px; font-weight: 600;
    color: var(--grp-gold); text-decoration: none;
    background: #fff;
    border: 1px solid var(--grp-gold-line);
    border-radius: 999px;
    transition: background .15s;
}
.grp-event-chip:hover { background: var(--grp-gold); color: #fff; border-color: var(--grp-gold); }

/* ============================================================
   二十二、快捷入口
   ============================================================ */
.grp-quicknav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px; margin: 0 0 18px;
}
.grp-quicknav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    text-decoration: none; color: inherit;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .2s;
    min-width: 0;
}
.grp-quicknav-item:hover {
    border-color: var(--grp-primary);
    background: var(--grp-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 68, 128, .1);
}
.grp-quicknav-icon {
    font-size: 24px; line-height: 1;
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grp-bg);
    border-radius: 8px;
}
.grp-quicknav-text {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.grp-quicknav-title { font-size: 13px; font-weight: 700; color: var(--grp-text); line-height: 1.3; }
.grp-quicknav-desc {
    font-size: 11px; color: var(--grp-text-3); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   二十三、广场卡片专用（LOGO 左 + 内容右 + 简介独占底部）
   ============================================================ */
.grp-square-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .grp-square-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grp-square-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* 卡片：grid 两列（logo + body），desc 跨两列放第二行 */
.grp-square-grid .grp-card {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    padding: 16px 18px !important;
    align-items: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* LOGO：第 1 行，第 1 列 */
.grp-square-grid .grp-card-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 60px !important;
    height: 60px !important;
    align-self: start !important;
    margin: 0 !important;
}

/* body：第 1 行，第 2 列 */
.grp-square-grid .grp-card-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* 第 1 行：名称 */
.grp-square-grid .grp-card-name {
    display: block !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.grp-square-grid .grp-card-name .grp-card-title {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--grp-text) !important;
}

/* 第 2 行：徽章 */
.grp-square-grid .grp-card-badges {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.grp-square-grid .grp-card-badges .grp-lv,
.grp-square-grid .grp-card-badges .grp-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 第 3 行：成员/主题/收藏 */
.grp-square-grid .grp-card-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    font-size: 12px !important;
    color: var(--grp-text-3) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* 简介：跨两列，独占第 2 行（从卡片最左开始） */
.grp-square-grid .grp-card-desc {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--grp-text-2) !important;
    margin: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 640px) {
    .grp-square-grid .grp-card-name .grp-card-title {
        font-size: 14px !important;
    }
    .grp-square-grid .grp-card-desc {
        -webkit-line-clamp: 2 !important;
    }
}

/* ============================================================
   二十四、阅读字号（累加式，覆盖所有历史规则）
   ============================================================ */
.grp-wrap .grp-post-content,
.grp-wrap[data-fontsize] .grp-post-content,
.grp-wrap[data-fontsize="small"] .grp-post-content,
.grp-wrap[data-fontsize="medium"] .grp-post-content,
.grp-wrap[data-fontsize="large"] .grp-post-content {
    font-size: var(--grp-post-fontsize, 15px) !important;
    line-height: 1.9 !important;
}
.grp-wrap .grp-post-content blockquote,
.grp-wrap[data-fontsize] .grp-post-content blockquote {
    font-size: calc(var(--grp-post-fontsize, 15px) - 1px) !important;
}
.grp-wrap .grp-post-content pre,
.grp-wrap .grp-post-content code,
.grp-wrap[data-fontsize] .grp-post-content pre,
.grp-wrap[data-fontsize] .grp-post-content code {
    font-size: calc(var(--grp-post-fontsize, 15px) - 2px) !important;
}

/* ============================================================
   二十五、移动端
   ============================================================ */
@media (max-width: 768px) {
    .grp-wrap { padding: 14px 12px 30px; }
    .grp-page-head { padding: 18px 0 14px; margin-bottom: 18px; }
    .grp-page-title { font-size: 20px; }
    .grp-page-sub { font-size: 12px; }
    .grp-databar-item { flex: 1 1 50%; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--grp-border); }
    .grp-databar-item:nth-child(2n) { border-right: 0; }
    .grp-databar-item:last-child { border-bottom: 0; }
    .grp-databar-value { font-size: 18px; }
    .grp-home-grid { grid-template-columns: 1fr; gap: 18px; }
    .grp-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
    .grp-hero-logo { width: 72px; height: 72px; }
    .grp-admin { margin: 8px; padding: 16px; }
    .grp-chart { height: 160px; padding: 12px 8px 0; }
    .grp-stat-value { font-size: 24px; }
    .grp-modal-panel { max-width: 100%; }
    .grp-form-row { gap: 12px; }
    .grp-form-row > .grp-field { flex: 1 1 100%; }
    .grp-form-row-media { grid-template-columns: 1fr; gap: 18px; }
    .grp-form-row-media > .grp-field:first-child { max-width: none; }
    .grp-form-row-media .grp-preview-logo { width: 72px; height: 72px; }
    .grp-form-row-media .grp-preview-banner { max-height: 160px; }
    .grp-card-form { padding: 16px; }
    .grp-post-main, .grp-post { padding: 16px; }
    .grp-thread-title { font-size: 17px; }
    .grp-tab { padding: 9px 14px; font-size: 13px; }
    .grp-tab::after { left: 14px; right: 14px; }
    .grp-thread-table-head { display: none; }
    .grp-thread-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 16px; }
    .grp-thread-col-stat { text-align: left; }
    .grp-thread-col-author, .grp-thread-col-stat { font-size: 12px; }
    .grp-forum-info { flex-direction: row; align-items: center; padding: 12px 14px; gap: 10px; }
    .grp-forum-info-logo { width: 40px; height: 40px; }
    .grp-forum-info-name { font-size: 14px; }
    .grp-forum-info-actions { display: none; }
    .grp-forum-toolbar { flex-direction: column; align-items: stretch; }
    .grp-quicknav { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .grp-quicknav-item { padding: 10px 12px; gap: 10px; }
    .grp-quicknav-icon { width: 34px; height: 34px; font-size: 20px; }
    .grp-quicknav-title { font-size: 12px; }
    .grp-quicknav-desc { font-size: 10px; }
    .grp-card-profile { padding: 16px; }
    .grp-profile-head { gap: 14px; }
    .grp-profile-avatar { width: 64px; height: 64px; }
    .grp-profile-avatar .grp-logo-fallback { font-size: 26px; }
    .grp-profile-name { font-size: 18px; }
    .grp-profile-meta { gap: 10px; font-size: 12px; }
    .grp-profile-actions { width: 100%; justify-content: flex-start; }
    .grp-ach-grid { grid-template-columns: 1fr; gap: 10px; }
    .grp-ach-card { padding: 12px 14px; }
    .grp-ach-icon { width: 38px; height: 38px; font-size: 26px; }
    .grp-ach-name { font-size: 13px; }
    .grp-task-list > li { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .grp-task-action { align-self: flex-start; }
    .grp-task-title { font-size: 13px; }
    .grp-table { font-size: 12px; }
    .grp-table th, .grp-table td { padding: 8px 10px; }
    .grp-event-head { padding: 16px; }
    .grp-event-banner { max-height: 200px; }
    .grp-signup-list > li { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .grp-signup-action { align-self: flex-start; }
    .grp-signup-img { max-height: 180px; }
    .grp-notify-link { padding: 12px 14px; }
    .grp-notify-title { font-size: 13px; }
    .grp-tabs-scroll {
        overflow-x: auto; overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .grp-tabs-scroll::-webkit-scrollbar { height: 4px; }
    .grp-tabs-scroll::-webkit-scrollbar-thumb { background: var(--grp-border); border-radius: 2px; }
    .grp-tabs-scroll .grp-tab { flex: 0 0 auto; }
    .grp-admin .grp-table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* ============================================================
   v2.1 签到功能增强：奖励标签 / 签到输入框 / 留言列表
   ============================================================ */

/* 签到卡标题旁的奖励标签 */
.grp-checkin-reward-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--grp-gold);
    background: var(--grp-gold-light);
    border: 1px solid var(--grp-gold-line);
    border-radius: 2px;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* 签到卡表单 */
.grp-checkin-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grp-checkin-form-inline {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    max-width: 480px;
}
.grp-checkin-form-inline .grp-checkin-msg {
    flex: 1 1 auto;
    min-width: 0;
}
.grp-checkin-msg {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    font-size: 13px;
}

/* 签到日历两栏布局 */
.grp-checkin-layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 16px;
}
@media (max-width: 1024px) {
    .grp-checkin-layout { grid-template-columns: 1fr; gap: 20px; }
}
.grp-checkin-left { min-width: 0; }
.grp-checkin-right { min-width: 0; }

/* 日历上"有留言"的额外标记 */
.grp-cal-has-msg {
    position: relative;
}
.grp-cal-msg-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--grp-gold);
}
.grp-cal-legend-msg {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--grp-gold-light);
    border: 1px solid var(--grp-gold-line);
    position: relative;
}
.grp-cal-legend-msg::after {
    content: "";
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--grp-gold);
}

/* 签到留言面板 */
.grp-checkin-msgs {
    background: var(--grp-card);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius-lg);
    padding: 18px 20px;
    position: sticky;
    top: 16px;
}
.grp-checkin-msgs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--grp-border);
}
.grp-checkin-msgs-empty {
    padding: 32px 16px;
    background: transparent;
    border: 1px dashed var(--grp-border-strong);
}

.grp-checkin-msg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 640px;
    overflow-y: auto;
}
.grp-checkin-msg-item {
    padding: 12px 4px;
    border-bottom: 1px dashed var(--grp-border);
}
.grp-checkin-msg-item:last-child {
    border-bottom: 0;
}
.grp-checkin-msg-item.is-today {
    background: var(--grp-gold-light);
    border-radius: var(--grp-radius);
    padding: 12px 10px;
    border-bottom: 0;
    margin-bottom: 4px;
}
.grp-checkin-msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.grp-checkin-msg-user {
    font-size: 13px;
    font-weight: 700;
    color: var(--grp-primary);
    text-decoration: none;
}
.grp-checkin-msg-user:hover {
    text-decoration: underline;
}
.grp-checkin-msg-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--grp-text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .2px;
}
.grp-checkin-msg-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--grp-text-2);
    word-break: break-word;
}

/* 移动端 */
@media (max-width: 640px) {
    .grp-checkin-form-inline {
        flex-direction: column;
        max-width: 100%;
    }
    .grp-checkin-msgs { position: static; padding: 14px 16px; }
    .grp-checkin-msg-list { max-height: none; }
}


/* ============================================================
   v3.0 角色标签配色
   ============================================================ */
.grp-role {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 2px;
    letter-spacing: .3px;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid transparent;
}
.grp-role-1 {
    color: #8a6914;
    background: linear-gradient(135deg, #fdf5e6, #fff3cd);
    border-color: #f0dca0;
    box-shadow: 0 1px 2px rgba(184, 134, 11, .15);
}
.grp-role-2 {
    color: var(--grp-primary);
    background: var(--grp-primary-light);
    border-color: var(--grp-primary-line);
}
.grp-role-3 {
    color: #6d28d9;
    background: #f3e8ff;
    border-color: #ddd6fe;
}
.grp-role-4 {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}
.grp-role-5 {
    color: var(--grp-text-3);
    background: var(--grp-bg);
    border-color: var(--grp-border);
}

/* 暗夜星辰主题下的角色标签 */
html[data-theme="dark"] .grp-role-1,
html.dark .grp-role-1,
body.dark .grp-role-1,
body.theme-dark .grp-role-1,
.dark-theme .grp-role-1 {
    color: #e3c56c;
    background: rgba(212, 160, 42, .15);
    border-color: rgba(212, 160, 42, .35);
}
html[data-theme="dark"] .grp-role-3,
html.dark .grp-role-3,
body.dark .grp-role-3,
body.theme-dark .grp-role-3,
.dark-theme .grp-role-3 {
    color: #a78bfa;
    background: rgba(109, 40, 217, .18);
    border-color: rgba(167, 139, 250, .35);
}
html[data-theme="dark"] .grp-role-4,
html.dark .grp-role-4,
body.dark .grp-role-4,
body.theme-dark .grp-role-4,
.dark-theme .grp-role-4 {
    color: #4ade80;
    background: rgba(22, 101, 52, .18);
    border-color: rgba(74, 222, 128, .35);
}

/* ============================================================
   v3.0.1 通用分页（插件自实现，不依赖核心 pagination）
   ============================================================ */
.grp-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 28px 0 8px;
    padding: 0;
    list-style: none;
}

.grp-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
    font-family: inherit;
    color: var(--grp-text-2, #5a6472);
    background: var(--grp-card, #fff);
    border: 1px solid var(--grp-border, #e3e6ec);
    border-radius: var(--grp-radius, 4px);
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: border-color .15s, color .15s, background .15s;
}
.grp-page-link:hover {
    border-color: var(--grp-primary, #1a4480);
    color: var(--grp-primary, #1a4480);
    background: var(--grp-primary-light, #eaf0f8);
}

.grp-page-link-active {
    color: #fff !important;
    background: var(--grp-primary, #1a4480) !important;
    border-color: var(--grp-primary, #1a4480) !important;
    font-weight: 700;
    cursor: default;
}
.grp-page-link-active:hover {
    color: #fff !important;
    background: var(--grp-primary, #1a4480) !important;
    border-color: var(--grp-primary, #1a4480) !important;
}

.grp-page-disabled {
    color: var(--grp-text-3, #8c94a0);
    background: var(--grp-bg, #f5f6f8);
    border-color: var(--grp-border, #e3e6ec);
    cursor: not-allowed;
    opacity: .6;
}
.grp-page-disabled:hover {
    color: var(--grp-text-3, #8c94a0);
    background: var(--grp-bg, #f5f6f8);
    border-color: var(--grp-border, #e3e6ec);
}

.grp-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 34px;
    color: var(--grp-text-3, #8c94a0);
    font-size: 13px;
    user-select: none;
}

@media (max-width: 640px) {
    .grp-pagination {
        gap: 4px;
        margin: 20px 0 6px;
    }
    .grp-page-link {
        min-width: 30px;
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* ============================================================
   ★ 修复：帖子列表字体强制改为无衬线字体（提升屏幕可读性）
   ------------------------------------------------------------
   原因：core-unity.css 中通过 --grp-serif 将帖子列表设为了衬线体，
        在 Windows/高分屏下宋体渲染发虚，故在此强制覆盖。
   ★ 不加粗：统一字重 400，仅靠字号和间距区分层级。
   ============================================================ */
.grp-wrap .grp-thread-table,
.grp-wrap .grp-thread-table-head,
.grp-wrap .grp-thread-table-head > div,
.grp-wrap .grp-thread-row,
.grp-wrap .grp-thread-title-line .grp-thread-title,
.grp-wrap .grp-thread-stat,
.grp-wrap .grp-thread-stat strong {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
}

/* 全部统一常规字重，不加粗 */
.grp-wrap .grp-thread-table-head,
.grp-wrap .grp-thread-title-line .grp-thread-title,
.grp-wrap .grp-thread-stat strong {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}