/* OPC 人工智能社区 — 视觉框架完全采用 aista.tech（globals.css / style.css），
   本文件只声明 OPC 业务组件（顶栏品牌区、卡片、表单、表格、分页等），
   颜色统一复用 aista 的 --color-* 变量，不重复定义色值。
   下方 var(--color-*, 回退值) 的回退值供 gov/ 目录下未接入 globals.css 的
   旧版裸页面使用，两侧取值保持一致，仅接入范围不同 */
:root {
    --opc-primary: var(--color-primary, #1e88e5);
    --opc-primary-light: var(--color-primary-light, #64b5f6);
    --opc-primary-dark: var(--color-primary-dark, #072066);
    --opc-accent: var(--color-accent, #2196f3);
    --opc-accent-soft: #f2f8fe;
    --opc-accent-soft-hover: #e1eefc;
    --opc-bg: var(--color-surface-scase, #f8f9fa);
    --opc-surface: var(--color-surface, #ffffff);
    --opc-border: #edf1f5;
    --opc-text: var(--color-text-secondary, #424242);
    --opc-text-muted: #64748b;
    --opc-link: var(--color-primary, #1e88e5);
    --opc-danger: #b91c1c;
    --opc-danger-soft: #fef2f2;
    --opc-danger-border: #fecaca;
    --opc-radius: 8px;
    --opc-shadow: var(--box-shadow, 0 0 20px rgba(116, 116, 116, 0.1));
    --opc-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* 英文站点字体链只保留西文字体，避免西文回退到中文字体
   （PingFang SC / Microsoft YaHei 等）的西文字形 */
html[lang="en"] {
    --opc-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 业务页西文统一使用系统字体，不用 globals.css 自托管的 Inter / Poppins：
   两者以 font-display: swap 加载，刷新时会先显示系统字体、下载完成后再
   换成字距更宽的 Inter / Poppins，造成明显跳动。这里覆盖 globals.css
   中显式指定 Inter / Poppins 的选择器；营销首页不加载本文件，不受影响 */
.opc-body h1,
.opc-body h2,
.opc-body h3,
.opc-body h4,
.opc-body h5,
.opc-body h6,
.opc-body .footer .footer-title,
.opc-body .header .navbar .nav-menu .dropdown .dropdown-menu .dropdown-item {
    font-family: var(--opc-font);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* body 背景（aista 全站统一的科技感插画）已由 globals.css/style.css 的
   body / .body-1 规则提供，这里只补充 OPC 自身排版相关属性。
   display:flex + flex-direction:column + min-height:100vh 实现 sticky footer：
   内容较短的页面（如登录页）footer 也会贴在视口底部，而不是紧跟在内容后面，
   与首页那种"内容天然超过一屏"的情况保持一致的视觉效果。header 是 fixed 定位，
   脱离文档流，不受此 flex 布局影响。 */
body.opc-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--opc-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--opc-text);
}

.opc-body .opc-main {
    flex: 1 0 auto;
}

.opc-body .footer {
    flex-shrink: 0;
}

/* globals.css turns the fixed header into a plain white block once
   scrolled (.header-scrolled { background-color: var(--color-surface) }).
   Reuse the footer's tech-hexagon texture here instead of flat white so
   the scrolled header and the footer share the same visual language. */
.header.header-scrolled {
    background-color: var(--color-surface);
    background-image: url("../images/footer.jpg");
    background-size: cover;
    background-position: center;
}

/* globals.css sets .nav-menu .nav-link to 18px but .nav-menu .dropdown-toggle
   (used by "动态"/"资源") to 20px, so those two items render larger than the
   rest of the nav bar. Align dropdown-toggle to the same 18px. */
@media (min-width: 1025px) {
    .header .navbar .nav-menu .dropdown .dropdown-toggle {
        font-size: 18px;
    }
}

/* The dropdown arrow is a text glyph (globals.css: content "▼"), so its
   shape depends on the font. body.opc-body switches to --opc-font
   (system-ui first), which draws a visibly smaller ▼ than the marketing
   homepage's Inter. Pin every dropdown arrow to the homepage's font stack
   so all pages show the identical arrow. */
.header .navbar .nav-menu .dropdown .dropdown-toggle::after,
.opc-col-filter-caret {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 兼容尚未接入 base.html / aista 框架的旧版裸页面（gov/ 目录下的页面）：
   这些页面只 <link> 了 app.css，没有 globals.css/style.css，
   仅用标签选择器兜底基础排版，不影响任何已使用 .opc-* class 的页面 */
body:not(.opc-body) {
    margin: 0;
    min-height: 100vh;
    font-family: var(--opc-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--opc-text);
    background: var(--opc-bg);
    padding: 28px 20px 60px;
}

body:not(.opc-body) center {
    display: block;
    max-width: 420px;
    margin: 60px auto;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow);
    padding: 40px 36px;
}

body:not(.opc-body) h1 {
    font-family: var(--opc-font);
    font-size: 22px;
    color: var(--opc-primary-dark);
    margin: 0 0 20px;
    text-align: center;
}

body:not(.opc-body) h4 {
    font-family: var(--opc-font);
    color: var(--opc-primary-dark);
    font-size: 16px;
    margin: 0 0 14px;
}

body:not(.opc-body) a {
    color: var(--opc-link);
    text-decoration: none;
}

body:not(.opc-body) a:hover {
    color: var(--opc-primary-dark);
    text-decoration: underline;
}

body:not(.opc-body) input[type="text"],
body:not(.opc-body) input[type="password"],
body:not(.opc-body) input[type="number"],
body:not(.opc-body) input[type="email"],
body:not(.opc-body) input[type="file"],
body:not(.opc-body) select,
body:not(.opc-body) textarea {
    width: 100%;
    padding: 9px 12px;
    margin: 6px 0 14px;
    border: 1px solid var(--opc-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--opc-text);
    background: var(--opc-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

body:not(.opc-body) input:focus,
body:not(.opc-body) select:focus,
body:not(.opc-body) textarea:focus {
    outline: none;
    border-color: var(--opc-primary);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
    background: var(--opc-surface);
}

body:not(.opc-body) button,
body:not(.opc-body) input[type="submit"] {
    display: inline-block;
    padding: 9px 22px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--opc-primary);
    border: 1px solid var(--opc-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

body:not(.opc-body) button:hover,
body:not(.opc-body) input[type="submit"]:hover {
    background: var(--opc-primary);
    border-color: var(--opc-primary);
    filter: brightness(0.92);
}

/* 顶栏品牌区——复用 aista .header/.container 的定位与响应式行为，
   仅重写 .logo 内部品牌标识（OPC 用文字徽标代替 aista 的图片 Logo） */
/* aista .header .logo 默认按图片 Logo 设计，未考虑内部为可变长文本时的收缩，
   这里补充 min-width: 0 使其在移动端能正常压缩换行，不遮挡右侧汉堡菜单按钮 */
.header .logo {
    min-width: 0;
    flex-shrink: 1;
}

/* Main content area — matches the login/register card's visual language:
   a light rounded card floating over body's fixed tech-illustration
   background, with the background peeking through above the header and
   below the footer instead of a full-width block butting directly against
   the footer (which caused an abrupt color seam).
   margin-top must clear the fixed .header (85px tall, z-index: 800) on
   top of body's own 40px padding-top — otherwise the card scrolls up
   underneath the header instead of stopping below it. 24px alone left a
   45px gap, so the card overlapped the header while scrolling. */
.opc-main {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    background-color: var(--color-surface-scase);
    max-width: 1080px;
    margin: 64px auto 48px;
    padding: 24px 20px 48px;
    box-sizing: border-box;
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow);
}

/* Login/register pages: the card itself (.opc-auth-card / .opc-auth-box)
   already has its own rounded border and shadow, so .opc-main shouldn't
   wrap it in a second card shell — let it float directly on body's tech
   background instead, avoiding a large plain margin around the card. */
.opc-main:has(> .opc-auth-page),
.opc-main:has(> .opc-auth-wrap) {
    width: 100%;
    background: none;
    margin: 0 auto;
    padding: 0;
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 登录后各页面统一放宽容器上限：1080px 是为窄屏手机优化的宽度，
   在桌面端会显得局促。窄屏下保持原宽度不变（≤600px 常见手机断点），
   仅在有足够视口宽度时放宽到一个较为保守的上限，所有使用 .opc-main
   的页面保持一致（不含上方 auth 页，已单独设为 max-width: none）。 */
@media (min-width: 1200px) {
    .opc-main:not(:has(> .opc-auth-page)):not(:has(> .opc-auth-wrap)) {
        max-width: 1240px;
    }
}

.opc-page-title {
    margin: 0 0 20px;
    font-family: var(--opc-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--opc-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(33, 150, 243, 0.25);
    display: inline-block;
}

/* 页面标题 + 积分 — 同一行 */
.opc-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(33, 150, 243, 0.25);
}

.opc-page-head-title {
    margin: 0;
    font-family: var(--opc-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--opc-primary);
    line-height: 1.3;
}

.opc-page-head-score {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 10px 20px;
    text-align: center;
    background: linear-gradient(180deg, var(--opc-accent-soft) 0%, #fff 100%);
    border: 1px solid #bcdffb;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
}

.opc-page-head-score-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--opc-accent);
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
}

.opc-page-head-score-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--opc-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .opc-page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .opc-page-head-score {
        align-self: flex-end;
    }
}

/* 导航条 */
.opc-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    font-size: 13px;
}

.opc-nav-current {
    color: var(--opc-primary);
    font-weight: 600;
}

.opc-nav a {
    color: var(--opc-link);
    text-decoration: none;
}

.opc-nav a:hover {
    text-decoration: underline;
}

.opc-nav-sep {
    width: 1px;
    height: 14px;
    background: var(--opc-border);
    margin: 0 4px;
}

/* 页面顶栏 — 一体化大气导航条 */
.opc-page-nav-bar {
    display: flex;
    align-items: stretch;
    min-height: 80px;
    margin-bottom: 28px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    box-shadow: 0 4px 20px rgba(7, 32, 102, 0.1), 0 12px 40px rgba(7, 32, 102, 0.06);
}

.opc-page-nav-bar-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 148px;
    padding: 0 28px;
    background: linear-gradient(180deg, var(--opc-primary) 0%, var(--opc-primary-light) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.opc-page-nav-bar-back:hover {
    filter: brightness(1.08);
    color: #fff;
}

.opc-page-nav-bar-back-icon {
    font-size: 18px;
    line-height: 1;
    opacity: 0.9;
}

.opc-page-nav-bar-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 18px 32px;
    background: linear-gradient(90deg, var(--opc-accent-soft) 0%, rgba(255, 255, 255, 0) 55%);
}

.opc-page-nav-bar-kicker {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--opc-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.opc-page-nav-bar-title {
    margin: 0;
    font-family: var(--opc-font);
    font-size: 26px;
    font-weight: 700;
    color: var(--opc-primary);
    line-height: 1.25;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .opc-page-nav-bar {
        flex-direction: column;
        min-height: 0;
    }

    .opc-page-nav-bar-back {
        min-width: 0;
        width: 100%;
        padding: 14px 20px;
        justify-content: flex-start;
    }

    .opc-page-nav-bar-main {
        padding: 20px 24px;
    }

    .opc-page-nav-bar-title {
        font-size: 22px;
    }
}

/* AISTA 合作区 — 大气分段导航 */
.opc-section-nav {
    display: flex;
    align-items: stretch;
    min-height: 72px;
    margin-bottom: 28px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    box-shadow: 0 4px 20px rgba(7, 32, 102, 0.1), 0 12px 40px rgba(7, 32, 102, 0.06);
}

.opc-section-nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 132px;
    padding: 0 22px;
    background: linear-gradient(180deg, var(--opc-primary) 0%, var(--opc-primary-light) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.opc-section-nav-back:hover {
    filter: brightness(1.08);
    color: #fff;
}

.opc-section-nav-back-icon {
    font-size: 16px;
    line-height: 1;
    opacity: 0.9;
}

.opc-section-nav-tabs {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    padding: 14px 20px;
    background: linear-gradient(90deg, var(--opc-accent-soft) 0%, rgba(255, 255, 255, 0) 48%);
}

.opc-section-nav-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-primary);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

a.opc-section-nav-tab:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--opc-border);
    color: var(--opc-accent);
}

.opc-section-nav-tab.is-current {
    background: #fff;
    border-color: var(--opc-accent);
    color: var(--opc-accent);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.12);
}

/* 独立分类筛选行：复用 .opc-section-nav-tabs 的 tab 样式，但脱离
   .opc-section-nav 的返回按钮布局，用于页面已有自己的返回导航、
   只需要在内容区加一行分类筛选的场景（如 premodel_list.html） */
.opc-section-nav-tabs-standalone {
    border-radius: 12px;
    border: 1px solid var(--opc-border);
    box-shadow: 0 4px 20px rgba(7, 32, 102, 0.1), 0 12px 40px rgba(7, 32, 102, 0.06);
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .opc-section-nav {
        flex-direction: column;
        min-height: 0;
    }

    .opc-section-nav-back {
        min-width: 0;
        width: 100%;
        padding: 12px 18px;
        justify-content: flex-start;
    }

    .opc-section-nav-tabs {
        padding: 14px 16px;
    }

    .opc-section-nav-tab {
        font-size: 13px;
        padding: 9px 14px;
    }
}

/* 卡片列表 */
.opc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opc-card {
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-left: 1px solid rgba(33, 150, 243, 0.25);
    border-radius: var(--opc-radius);
    padding: 16px 18px;
    transition: border-color 0.15s;
}

.opc-card:hover {
    border-left-color: rgba(33, 150, 243, 0.25);
}

.opc-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 20px;
    margin: 0;
}

.opc-meta-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.opc-meta-row dt {
    margin: 0;
    font-size: 12px;
    color: var(--opc-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.opc-meta-row dt::after {
    content: "：";
}

/* overflow-wrap: anywhere 而不是 word-break: break-all：后者会把英文单词
   从中间断开（"Communi / ty"），前者只在超长无空格串（URL 等）上才强制断行；
   中文本来就可在任意字间换行，不受影响 */
.opc-meta-row dd {
    margin: 0;
    font-size: 13px;
    color: var(--opc-text);
    overflow-wrap: anywhere;
}

/* 纵向字段表（如社区介绍页）：每个字段独占一行，标签列按最长标签对齐，
   长文本值在右侧整列内换行，不再被 auto-fill 网格挤进半宽的一列 */
.opc-meta.opc-meta-stack {
    grid-template-columns: max-content 1fr;
    gap: 12px 16px;
}

.opc-meta-stack .opc-meta-row {
    display: contents;
}

.opc-meta-stack .opc-meta-row dt {
    font-size: 13px;
    line-height: 1.7;
}

.opc-meta-stack .opc-meta-row dd {
    font-size: 14px;
    line-height: 1.7;
}

/* 标签右对齐修饰（信息发布列表/详情页）：标签右对齐，末尾的“：”落在
   同一竖列上。纵向字段表（.opc-meta-stack）的标签列本身就等于最长标签；
   多列网格里每个字段各自成行，需给标签统一的最小宽度才能上下对齐——
   取值略大于该页最长标签（中文“资助 / 费用：”≈5.9em，英文
   “Event Dates：”≈6.6em，12px 下实测），用 min-width 而非 width，
   将来出现更长的标签只会撑宽、不会溢出 */
.opc-meta.opc-meta-label-end .opc-meta-row dt {
    text-align: right;
}

.opc-meta.opc-meta-label-end:not(.opc-meta-stack) .opc-meta-row dt {
    min-width: 6.2em;
}

html[lang="en"] .opc-meta.opc-meta-label-end:not(.opc-meta-stack) .opc-meta-row dt {
    min-width: 7em;
}

@media (max-width: 600px) {
    .opc-meta.opc-meta-stack {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    /* 窄屏标签改为在值上方单独成行，恢复左对齐 */
    .opc-meta-stack.opc-meta-label-end .opc-meta-row dt {
        text-align: left;
    }

    .opc-meta-stack .opc-meta-row dd {
        margin-bottom: 12px;
    }
}

.opc-card-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--opc-border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 单行卡片：信息与操作按钮同一行 */
.opc-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

.opc-card-row-main {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.opc-card-row-action {
    flex-shrink: 0;
}

.opc-inline-field {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 13px;
    color: var(--opc-text);
    white-space: nowrap;
    min-width: 0;
}

.opc-inline-field-label {
    font-size: 12px;
    color: var(--opc-text-muted);
    flex-shrink: 0;
}

.opc-inline-field-label::after {
    content: "：";
}

.opc-inline-field-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 积分流水卡片 */
.opc-flow-card-title {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--opc-border);
}

.opc-flow-card-label {
    display: block;
    font-size: 12px;
    color: var(--opc-text-muted);
    margin-bottom: 4px;
}

.opc-flow-card-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--opc-primary);
    line-height: 1.5;
    word-break: break-word;
}

.opc-flow-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

.opc-flow-meta-sub {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--opc-border);
}

.opc-flow-meta .opc-meta-row dd {
    word-break: break-word;
}

.opc-flow-score {
    font-size: 16px;
    font-weight: 600;
    color: #072066;
}

.opc-flow-score.is-minus {
    color: #b91c1c;
}

.opc-flow-inline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--opc-text);
}

.opc-flow-inline-item {
    min-width: 0;
    white-space: nowrap;
}

.opc-flow-inline-item:nth-child(1) {
    text-align: left;
}

.opc-flow-inline-item:nth-child(2),
.opc-flow-inline-item:nth-child(3) {
    text-align: center;
}

.opc-flow-inline-item:nth-child(4) {
    text-align: right;
}

.opc-flow-inline-item dt,
.opc-flow-inline-item dd {
    display: inline;
    margin: 0;
}

.opc-flow-inline-item dt {
    color: var(--opc-text-muted);
    font-weight: normal;
}

.opc-flow-inline-item dt::after {
    content: "：";
}

html[lang="en"] .opc-flow-inline-item dt::after {
    content: ": ";
}

.opc-flow-inline .opc-flow-score {
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .opc-flow-meta {
        grid-template-columns: 1fr 1fr;
    }

    .opc-flow-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opc-flow-inline-item:nth-child(n) {
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .opc-flow-meta {
        grid-template-columns: 1fr;
    }

    .opc-flow-inline {
        grid-template-columns: 1fr;
    }
}

/* 积分活动卡片 */
.opc-activity-meta-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opc-activity-meta-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--opc-border);
}

.opc-activity-card {
    border-left: none;
    border-radius: 12px;
    padding: 26px 28px;
    transition: border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.opc-activity-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--opc-accent) 0%, var(--opc-primary-light) 100%);
}

.opc-activity-card:hover {
    border-color: var(--opc-primary-light);
}

.opc-activity-card .opc-flow-card-title {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--opc-border);
}

.opc-activity-card .opc-flow-card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opc-accent);
    margin-bottom: 8px;
}

.opc-activity-card .opc-flow-card-name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.opc-activity-card .opc-activity-stats {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 20px 0 0;
    padding: 18px 22px;
    background: var(--opc-accent-soft);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    border-collapse: collapse;
}

.opc-activity-card .opc-activity-inline-item {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.opc-activity-card .opc-activity-inline-item.is-left {
    text-align: left;
}

.opc-activity-card .opc-activity-inline-item.is-center {
    text-align: center;
}

.opc-activity-card .opc-activity-inline-item.is-right {
    text-align: right;
}

.opc-activity-card .opc-activity-inline-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--opc-text-muted);
    margin-right: 6px;
}

.opc-activity-inline-label::after {
    content: "：";
}

html[lang="en"] .opc-activity-inline-label::after {
    content: "";
}

.opc-activity-card .opc-activity-inline-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text);
}

.opc-activity-card .opc-activity-stats .opc-flow-score {
    font-size: 14px;
    font-weight: 700;
}

.opc-activity-card .opc-card-actions {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--opc-border);
    gap: 12px;
}

.opc-join-card .opc-join-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 18px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(224, 242, 241, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid var(--opc-border);
    border-radius: 10px;
}

.opc-join-status-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text-muted);
}

.opc-join-status-label::after {
    content: "：";
}

html[lang="en"] .opc-join-status-label::after {
    content: ": ";
}

.opc-join-status-badge {
    font-size: 13px;
    padding: 6px 14px;
}

.opc-list-join-projects {
    gap: 22px;
}

.opc-search-bar {
    margin-bottom: 20px;
    padding: 18px 22px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(7, 32, 102, 0.06), 0 8px 24px rgba(7, 32, 102, 0.05);
}

.opc-search-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-accent);
    letter-spacing: 0.04em;
}

.opc-search-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.opc-search-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--opc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--opc-text);
}

.opc-search-input:focus {
    outline: none;
    border-color: var(--opc-accent);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.15);
}

.opc-search-field .opc-btn {
    flex-shrink: 0;
}

.opc-join-card .opc-flow-card-name {
    font-size: 22px;
}

.opc-join-card .opc-card-actions .opc-btn {
    min-width: 148px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
}

.opc-activity-card .opc-job-card-desc {
    margin-top: 16px;
}

.opc-activity-card .opc-job-card-desc + .opc-job-card-desc {
    margin-top: 12px;
}

/* 社区板块列表卡片 — 紧凑大气布局 */
.opc-site-card,
.opc-job-card {
    border-left: none;
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.opc-site-card::before,
.opc-job-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--opc-primary-light) 0%, var(--opc-accent-soft) 100%);
}

.opc-site-card-title,
.opc-job-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--opc-primary);
}

.opc-site-card-meta,
.opc-job-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0;
    padding: 10px 12px;
    background: var(--opc-accent-soft);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.opc-site-card-meta-item,
.opc-job-card-meta-item {
    min-width: 0;
}

.opc-site-card-meta-item dt,
.opc-site-card-meta-item dd,
.opc-job-card-meta-item dt,
.opc-job-card-meta-item dd {
    display: inline;
    margin: 0;
}

.opc-site-card-meta-item dt,
.opc-job-card-meta-item dt {
    color: var(--opc-text-muted);
    font-weight: normal;
}

.opc-site-card-meta-item dt::after,
.opc-job-card-meta-item dt::after {
    content: "：";
}

html[lang="en"] .opc-site-card-meta-item dt::after,
html[lang="en"] .opc-job-card-meta-item dt::after {
    content: ": ";
}

.opc-site-card-meta-item dd,
.opc-job-card-meta-item dd {
    font-weight: 600;
    color: var(--opc-primary);
    word-break: break-word;
}

.opc-site-card-meta-item dd .opc-site-card-link {
    font-weight: 500;
}

.opc-site-card-detail,
.opc-job-card-detail {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f8fafb;
    border: 1px solid var(--opc-border);
    border-radius: 8px;
}

.opc-site-card-detail + .opc-site-card-detail,
.opc-job-card-detail + .opc-job-card-detail {
    margin-top: 8px;
}

.opc-site-card-label,
.opc-job-card-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-accent);
}

.opc-site-card-label::after,
.opc-job-card-label::after {
    content: none;
}

.opc-site-card-text,
.opc-job-card-text {
    display: block;
    font-size: 14px;
    line-height: 1.75;
    color: var(--opc-text);
    word-break: break-word;
    white-space: pre-wrap;
}

/* Skill 详情页 — 单栏卡片，复用 .opc-card 基础样式，
   放宽 .opc-site-card-compact 系列的紧凑网格约束 */
.opc-premodel-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 20px;
}

@media (max-width: 860px) {
    .opc-premodel-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.opc-site-card-detail-page {
    min-width: 0;
    border-left: 1px solid rgba(33, 150, 243, 0.25);
}

.opc-site-card-detail-page:hover {
    border-left-color: rgba(33, 150, 243, 0.25);
}

.opc-premodel-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 100px;
}

.opc-premodel-sidebar .opc-card {
    padding: 18px 20px;
    border-left: 1px solid rgba(33, 150, 243, 0.25);
}

.opc-premodel-sidebar .opc-card:hover {
    border-left-color: rgba(33, 150, 243, 0.25);
}

.opc-premodel-sidebar-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text);
}

.opc-premodel-sidebar .opc-card-actions {
    flex-direction: column;
    align-items: stretch;
}

.opc-premodel-sidebar .opc-btn {
    text-align: center;
}

.opc-premodel-sidebar .opc-detail-meta {
    grid-template-columns: 1fr auto;
}

@media (max-width: 860px) {
    .opc-premodel-sidebar {
        position: static;
    }
}

.opc-code-block {
    margin-top: 6px;
    padding: 12px 14px;
    background: #f8fafb;
    border: 1px solid var(--opc-border);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--opc-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.opc-code-block-scroll {
    max-height: 480px;
    overflow-y: auto;
}

.opc-detail-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}

.opc-detail-meta dt {
    color: var(--opc-text-muted);
    font-weight: 600;
}

.opc-detail-meta dd {
    margin: 0;
    color: var(--opc-text);
}

.opc-site-card-link-row {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-all;
}

.opc-site-card-title + .opc-site-card-link-row,
.opc-site-card-meta + .opc-site-card-link-row {
    margin-top: 10px;
}

.opc-site-card-link-row + .opc-site-card-detail {
    margin-top: 10px;
}

.opc-site-card-link-row + .opc-site-card-link-row {
    margin-top: 4px;
}

.opc-site-card-link-label {
    color: var(--opc-accent);
    font-weight: 600;
}

.opc-site-card-link-label::after {
    content: "：";
}

html[lang="en"] .opc-site-card-link-label::after {
    content: ": ";
}

.opc-site-card-link {
    color: var(--opc-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.opc-site-card-link:hover {
    color: var(--opc-accent);
}

/* 整卡可点击：透明覆盖层撑满卡片（卡片需保留 position: relative），
   卡片内仍需独立可点的元素（如服务地址链接）通过 position + z-index
   浮在覆盖层之上，避免被覆盖层拦截点击 */
.opc-site-card-stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.opc-site-card:has(.opc-site-card-stretched-link) .opc-site-card-link-row {
    position: relative;
    z-index: 2;
}

.opc-list:has(> .opc-site-card),
.opc-list:has(> .opc-job-card) {
    gap: 14px;
}

/* 多列网格修饰：用于内容较短、单卡片撑满整行显得空旷的列表页
   （如 premodel_list.html），不改变 .opc-list 默认的单列行为 */
.opc-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

/* 配合 .opc-list-grid 使用的紧凑卡片：纵向 flex 排列，标题/作者固定在
   顶部、描述区 flex:1 撑满中间剩余空间、标签行与统计信息行始终贴在
   卡片底部，使同一行内高度不同的卡片也不会在底部留白 */
.opc-site-card-compact {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
}

.opc-site-card-compact .opc-site-card-title {
    margin-bottom: 2px;
    font-size: 16px;
}

.opc-site-card-byline {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--opc-text-muted);
}

.opc-site-card-compact .opc-site-card-detail {
    flex: 1;
    margin-top: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.opc-site-card-compact .opc-site-card-text {
    font-size: 13px;
    line-height: 1.6;
}

.opc-site-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.opc-site-card-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 10px;
    padding-left: 2px;
    border-top: 1px solid var(--opc-border);
    font-size: 12px;
    color: var(--opc-text-muted);
}

.opc-site-card-footer-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.opc-site-card-footer-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    opacity: 0.6;
}

.opc-site-card-footer-license {
    margin-left: auto;
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--opc-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--opc-text-muted);
}

.opc-site-card-meta.is-cols-1,
.opc-job-card-meta.is-cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.opc-site-card-meta.is-cols-2,
.opc-job-card-meta.is-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opc-site-card-meta.is-plain {
    margin-top: 10px;
    padding: 0;
    background: transparent;
}

.opc-site-card-meta.is-plain + .opc-site-card-meta.is-plain {
    margin-top: 8px;
}

.opc-site-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--opc-border);
}

.opc-page-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -12px 0 20px;
    padding: 10px 14px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(7, 32, 102, 0.04);
}

.opc-page-subnav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--opc-text-muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

a.opc-page-subnav-link:hover {
    background: var(--opc-accent-soft);
    color: var(--opc-accent);
}

.opc-page-subnav-link.is-current {
    background: var(--opc-accent-soft);
    color: var(--opc-accent);
    font-weight: 600;
}

@media (max-width: 720px) {
    .opc-site-card,
    .opc-job-card {
        padding: 14px 16px;
    }

    .opc-site-card-title,
    .opc-job-card-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .opc-site-card-meta,
    .opc-job-card-meta {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 10px;
    }
}

.opc-activity-card .opc-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
}

.opc-list:has(> .opc-activity-card) {
    gap: 18px;
}

@media (max-width: 720px) {
    .opc-activity-card {
        padding: 22px 20px;
    }

    .opc-activity-card .opc-flow-card-name {
        font-size: 18px;
    }

    .opc-activity-card .opc-activity-stats {
        display: block;
        padding: 16px 18px;
    }

    .opc-activity-card .opc-activity-inline-item {
        display: block;
        text-align: left !important;
        padding: 6px 0;
    }
}

@media (max-width: 768px) {
    .opc-activity-meta-info {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .opc-activity-meta-info {
        grid-template-columns: 1fr;
    }
}

/* 企业列表卡片 */
.opc-enterprise-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.opc-enterprise-fields {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.opc-enterprise-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.opc-enterprise-field dt {
    margin: 0;
    font-size: 12px;
    color: var(--opc-text-muted);
    letter-spacing: 0.02em;
}

.opc-enterprise-field dd {
    margin: 0;
    font-size: 13px;
    color: var(--opc-text);
    line-height: 1.55;
    word-break: break-word;
}

.opc-enterprise-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--opc-primary);
    line-height: 1.45;
}

.opc-enterprise-field-desc {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px dashed var(--opc-border);
}

.opc-enterprise-field-desc dd {
    line-height: 1.65;
    color: var(--opc-text-muted);
}

.opc-enterprise-empty {
    color: var(--opc-text-muted);
}

.opc-enterprise-card .opc-card-actions {
    margin-top: 14px;
}

@media (max-width: 560px) {
    .opc-enterprise-fields {
        grid-template-columns: 1fr;
    }

    .opc-enterprise-field-desc {
        grid-column: auto;
    }
}

/* 按钮与链接 */
.opc-btn {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.opc-btn-primary {
    background: var(--opc-accent);
    color: #fff;
    border-color: var(--opc-accent);
}

.opc-btn-primary:hover {
    background: var(--opc-primary);
    color: #fff;
}

.opc-btn-outline {
    background: transparent;
    color: var(--opc-primary);
    border-color: var(--opc-border);
}

.opc-btn-outline:hover {
    background: var(--opc-accent-soft);
    border-color: var(--opc-accent);
}

.opc-btn-success {
    background: #059669;
    color: #fff;
    border-color: #059669;
}

.opc-btn-success:hover {
    background: #047857;
    border-color: #047857;
    color: #fff;
}

.opc-link {
    color: var(--opc-link);
    text-decoration: none;
    cursor: pointer;
}

.opc-link:hover {
    text-decoration: underline;
}

/* 状态标签 */
.opc-site-card.is-self {
    border-color: #64b5f6;
    box-shadow: 0 2px 12px rgba(38, 166, 154, 0.12);
}

.opc-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 12px;
    font-weight: 500;
}

.opc-badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.opc-badge-approved {
    background: #d1fae5;
    color: #065f46;
}

.opc-badge-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.opc-badge-info {
    background: var(--opc-accent-soft);
    color: var(--opc-accent);
}

.opc-badge-neutral {
    background: var(--opc-bg);
    color: var(--opc-text-muted);
}

.opc-badge-joined {
    background: #d1fae5;
    color: #065f46;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.opc-community-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.opc-community-name-main {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    flex: 1;
}

.opc-community-name-label {
    font-size: 12px;
    color: var(--opc-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.opc-community-name-label::after {
    content: "：";
}

.opc-community-name-text {
    font-size: 13px;
    color: var(--opc-text);
    word-break: break-word;
}

html[lang="en"] .opc-community-name-label::after {
    content: ": ";
}

/* 社区列表 — 大气卡片 */
.opc-community-card {
    border-left: none;
    border-radius: 12px;
    padding: 26px 28px;
    transition: border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.opc-community-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--opc-primary-light) 0%, var(--opc-accent-soft) 100%);
}

.opc-community-card:hover {
    border-color: var(--opc-primary-light);
}

.opc-community-card-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--opc-border);
}

.opc-community-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--opc-primary-light) 0%, var(--opc-accent-soft) 100%);
    color: var(--opc-primary);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(7, 32, 102, 0.06), 0 4px 12px rgba(7, 32, 102, 0.06);
}

.opc-community-card-title-wrap {
    flex: 1;
    min-width: 0;
}

.opc-community-card .opc-community-name-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opc-accent);
}

.opc-community-card .opc-community-name-label::after {
    content: none;
}

.opc-community-card .opc-community-name-text {
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--opc-primary);
    line-height: 1.35;
    word-break: break-word;
}

.opc-community-card .opc-badge-joined {
    align-self: center;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
}

.opc-community-card-desc {
    padding: 0;
    background: none;
    border-radius: 0;
}

.opc-community-desc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-accent);
    margin-bottom: 6px;
    letter-spacing: normal;
}

.opc-community-card-desc p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--opc-text);
    word-break: break-word;
}

.opc-community-card .opc-card-actions {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--opc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
}

.opc-community-card .opc-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
}

.opc-list:has(> .opc-community-card) {
    gap: 18px;
}

@media (max-width: 600px) {
    .opc-community-card {
        padding: 22px 20px;
    }

    .opc-community-card-head {
        flex-wrap: wrap;
    }

    .opc-community-card .opc-community-name-text {
        font-size: 18px;
    }

    .opc-community-card .opc-badge-joined {
        width: 100%;
        text-align: center;
    }
}

/* 数据表格 — 参照 GitLab 列表：表头 + 行分隔线，不做卡片；
   首列编号，中间标题链接 + 灰色简介，末列状态徽章；
   不单设操作列，点击标题即进入社区（已加入）或社区详情页（未加入） */
/* 不设 overflow：表头筛选浮窗（.opc-col-filter-panel）需要溢出表格显示，
   因此 hover 底色画在 td 上，最后一行首尾格补圆角，不露出直角 */
.opc-table-wrap {
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
}

.opc-table {
    width: 100%;
    border-collapse: collapse;
}

/* 表头所有列同一个颜色（--opc-text-muted，与编号列一致）——列的修饰类
   （-id / -count / -date …）只管宽度和对齐，不能让某一列表头单独变色 */
.opc-table th {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--opc-border);
    white-space: nowrap;
}

.opc-table td {
    padding: 18px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--opc-border);
}

.opc-table tbody tr:last-child td {
    border-bottom: none;
}

/* 整行可点击：标题链接的 ::after 铺满整行（tr 作为定位容器），点击行内
   任意位置都等于点击标题；hover 背景色与论坛列表 a.opc-forum-list-item
   一致，不做位移/阴影 */
.opc-table tbody tr {
    position: relative;
}

.opc-table tbody tr:not(.opc-table-empty-row):hover > td {
    background: var(--opc-bg);
}

.opc-table tbody tr:last-child > td:first-child {
    border-bottom-left-radius: var(--opc-radius);
}

.opc-table tbody tr:last-child > td:last-child {
    border-bottom-right-radius: var(--opc-radius);
}

.opc-table-empty-row td {
    padding: 40px 20px;
    text-align: center;
    color: var(--opc-text-muted);
}

/* 表头按列筛选 — 移植自 opcmanage app.css 的 .opc-col-filter：表头文字本身
   是 <details><summary> 触发器，点击后在表头下方弹出小浮窗，不常驻搜索框；
   有筛选条件时表头文字变为主色 */
.opc-col-filter {
    position: relative;
}

.opc-col-filter summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    list-style: none;
}

.opc-col-filter summary::-webkit-details-marker {
    display: none;
}

.opc-col-filter-caret {
    font-size: 10px;
    color: var(--opc-text-muted);
    transition: transform 0.15s;
}

.opc-col-filter[open] .opc-col-filter-caret {
    transform: rotate(180deg);
}

.opc-col-filter summary.opc-col-filter-active,
.opc-col-filter summary.opc-col-filter-active .opc-col-filter-caret {
    color: var(--opc-primary);
}

.opc-col-filter-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max-content;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow);
    padding: 10px;
    font-weight: 400;
}

/* 靠右的列（状态）浮窗向左展开，避免超出表格右边界 */
.opc-col-filter-end .opc-col-filter-panel {
    left: auto;
    right: 0;
}

.opc-col-filter-panel .opc-search-input {
    display: block;
    width: 220px;
    padding: 7px 10px;
    font-size: 13px;
}

.opc-col-filter-panel select.opc-search-input {
    width: 160px;
}

.opc-table-title::after {
    content: "";
    position: absolute;
    inset: 0;
}

.opc-table .opc-table-id {
    width: 1%;
    white-space: nowrap;
    color: var(--opc-text-muted);
    font-variant-numeric: tabular-nums;
}

.opc-table .opc-table-count {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.opc-table .opc-table-status {
    width: 1%;
    white-space: nowrap;
}

.opc-table-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--opc-link);
    text-decoration: none;
    word-break: break-word;
}

.opc-table tbody tr:hover .opc-table-title {
    text-decoration: underline;
}

.opc-table-desc {
    margin-top: 4px;
    max-width: 640px;
    font-size: 13px;
    color: var(--opc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 窄屏：表头只保留两个筛选触发器，每行改为两行网格 — 第一行编号 + 名称/简介，
   第二行状态徽章 + 成员数（表头隐藏后用 data-label 补上"成员"字样），
   避免社区名称列被挤成一两个字宽 */
@media (max-width: 640px) {
    .opc-table thead tr {
        display: flex;
        gap: 20px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--opc-border);
    }

    .opc-table thead th {
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    .opc-table thead th:not(.opc-table-filter-th) {
        display: none;
    }

    .opc-table-empty-row td {
        grid-column: 1 / -1;
    }

    .opc-table tbody tr:not(.opc-table-empty-row):hover {
        background: var(--opc-bg);
    }

    .opc-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 12px;
        row-gap: 10px;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid var(--opc-border);
    }

    .opc-table tbody tr:last-child {
        border-bottom: none;
    }

    .opc-table td,
    .opc-table .opc-table-id,
    .opc-table .opc-table-count,
    .opc-table .opc-table-status {
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    .opc-table .opc-table-id {
        grid-row: 1;
        grid-column: 1;
        align-self: start;
        line-height: 24px;
    }

    .opc-table td:nth-child(2) {
        grid-row: 1;
        grid-column: 2 / 4;
    }

    .opc-table .opc-table-status {
        grid-row: 2;
        grid-column: 2;
    }

    .opc-table .opc-table-count {
        grid-row: 2;
        grid-column: 3;
        font-size: 13px;
        color: var(--opc-text-muted);
    }

    .opc-table .opc-table-count::before {
        content: attr(data-label) " ";
    }

    .opc-table-desc {
        white-space: normal;
    }
}

/* 空状态 */
.opc-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--opc-text-muted);
    background: var(--opc-surface);
    border: 1px dashed var(--opc-border);
    border-radius: var(--opc-radius);
}

/* 分页 */
.opc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--opc-border);
}

.opc-pagination a,
.opc-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--opc-text);
    border: 1px solid var(--opc-border);
    background: var(--opc-surface);
}

.opc-pagination a:hover {
    border-color: var(--opc-accent);
    color: var(--opc-accent);
}

.opc-pagination .opc-page-current {
    background: var(--opc-primary);
    color: #fff;
    border-color: var(--opc-primary);
    font-weight: 600;
}

.opc-pagination .opc-page-disabled {
    color: var(--opc-text-muted);
    background: #f8fafc;
    cursor: default;
}

.opc-pagination .opc-page-ellipsis {
    border: none;
    background: transparent;
    color: var(--opc-text-muted);
    cursor: default;
    min-width: auto;
    padding: 0 4px;
}

/* 弹窗 */
dialog.opc-dialog {
    width: min(400px, 92vw);
    border: none;
    border-radius: var(--opc-radius);
    padding: 0;
    box-shadow: 0 8px 32px rgba(7, 32, 102, 0.2);
    overflow: hidden;
}

dialog.opc-dialog::backdrop {
    background: rgba(7, 32, 102, 0.45);
}

.opc-dialog-header {
    background: var(--opc-primary);
    color: #fff;
    padding: 16px 20px;
}

.opc-dialog-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.opc-dialog-body {
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--opc-text);
}

.opc-dialog-footer {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--opc-border);
}

.opc-dialog-footer button {
    padding: 7px 18px;
    font-size: 13px;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--opc-border);
    background: var(--opc-surface);
    color: var(--opc-text);
}

.opc-dialog-footer button.opc-btn-confirm {
    background: var(--opc-accent);
    color: #fff;
    border-color: var(--opc-accent);
}

.opc-dialog-footer button:hover {
    opacity: 0.9;
}

/* 社区首页 — 分类网格 */
.opc-hub-section {
    margin-bottom: 28px;
}

.opc-hub-section h2 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--opc-primary);
    padding-left: 10px;
    border-left: 1px solid rgba(33, 150, 243, 0.25);
}

.opc-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.opc-hub-item {
    display: block;
    padding: 14px 16px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    color: var(--opc-text);
    text-decoration: none;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.opc-hub-item:hover {
    border-color: var(--opc-primary-light);
    color: var(--opc-primary);
}

.opc-hub-item .opc-hub-num {
    display: block;
    font-size: 11px;
    color: var(--opc-accent);
    font-weight: 600;
    margin-bottom: 4px;
}

.opc-hub-item .opc-hub-num svg {
    display: block;
    width: 22px;
    height: 22px;
}

@media (max-width: 600px) {
    .opc-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .opc-meta {
        grid-template-columns: 1fr;
    }

    .opc-header-nav {
        flex-wrap: wrap;
    }
}

/* ========== 全站扩展：顶栏导航 / 页脚 / 表单 / 认证 ========== */

.opc-header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.opc-header-nav a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.opc-header-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.38);
}

.opc-lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.opc-lang-switch a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
}

.opc-lang-switch a:hover {
    color: #fff;
    text-decoration: underline;
}

.opc-footer {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--opc-text-muted);
    border-top: 1px solid var(--opc-border);
}

.opc-footer p {
    margin: 4px 0;
}

.opc-footer-sub {
    opacity: 0.75;
}

/* 认证 / 居中面板 */
.opc-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
}

.opc-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--opc-shadow);
}

.opc-auth-card-body {
    padding: 28px 28px 24px;
}

.opc-auth-card-logo {
    display: block;
    margin: 0 auto 12px;
    height: 40px;
    width: auto;
}

/* Error/warning variant: account issues, 403/404/500 fallback pages.
   Keeps the brand logo untouched and signals "something's wrong" via the
   card's own border/background tint plus a red heading, reusing the
   existing --opc-danger-* tokens rather than recoloring the logo (which
   would read as a broken brand mark, not a warning). */
.opc-auth-card-warning {
    background: var(--opc-danger-soft);
    border-color: var(--opc-danger-border);
}

.opc-auth-card-warning .opc-auth-card-body {
    padding-top: 64px;
    padding-bottom: 60px;
}

.opc-auth-eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--opc-text-muted);
    letter-spacing: 0.08em;
    text-align: center;
}

.opc-auth-card-body h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500;
    color: var(--opc-primary);
    text-align: center;
    letter-spacing: 0.06em;
}

.opc-auth-card-body h2.opc-auth-card-warning-title {
    width: fit-content;
    margin: 44px auto 48px;
    padding: 20px 28px;
    font-size: 24px;
    font-weight: 600;
    color: var(--opc-danger);
    background: rgba(185, 28, 28, 0.05);
    border: 1px solid rgba(185, 28, 28, 0.3);
    border-radius: var(--opc-radius);
}

.opc-auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
}

.opc-auth-box {
    width: 100%;
    max-width: 440px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    padding: 32px 28px;
    box-shadow: var(--opc-shadow);
}

.opc-auth-box h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--opc-primary);
    text-align: center;
}

.opc-auth-hint {
    font-size: 13px;
    color: var(--opc-text-muted);
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.6;
}

.opc-auth-card-body .opc-auth-hint {
    margin-bottom: 22px;
}

.opc-auth-footer.opc-auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--opc-border);
    font-size: 12px;
    color: var(--opc-text-muted);
}

.opc-auth-footer a {
    color: var(--opc-link);
}

.opc-auth-card-body .opc-form-actions button[type="submit"] {
    width: 100%;
}

/* 表单 */
.opc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.opc-auth-box .opc-form {
    align-items: stretch;
    width: 100%;
}

.opc-form p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opc-form p:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.opc-form p:has(input[type="checkbox"]) label {
    margin: 0;
    order: 1;
}

.opc-form p:has(input[type="checkbox"]) input[type="checkbox"] {
    width: auto;
    margin: 0;
    order: 0;
}

.opc-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--opc-text);
}

.opc-form input[type="text"],
.opc-form input[type="password"],
.opc-form input[type="email"],
.opc-form input[type="number"],
.opc-form input[type="url"],
.opc-form input[type="date"],
.opc-form select,
.opc-form textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--opc-border);
    border-radius: 4px;
    background: #fff;
    color: var(--opc-text);
    transition: border-color 0.15s;
}

.opc-form input:focus,
.opc-form select:focus,
.opc-form textarea:focus {
    outline: none;
    border-color: var(--opc-accent);
    box-shadow: 0 0 0 2px var(--opc-accent-soft);
}

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

.opc-otp-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.opc-form input.opc-otp-input {
    width: 44px;
    height: 52px;
    padding: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}

.opc-login-method {
    display: flex;
    width: 100%;
    margin-bottom: 16px;
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    overflow: hidden;
}

.opc-login-method label {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--opc-text-muted);
    background: var(--opc-surface, #fff);
}

.opc-login-method label:not(:first-child) {
    border-left: 1px solid var(--opc-border);
}

.opc-login-method label:has(input:checked) {
    color: var(--opc-primary);
    font-weight: 600;
    background: var(--opc-accent-soft);
}

.opc-login-method input[type="radio"] {
    display: none;
}

.opc-form:has(.opc-login-method input[value="email"]:checked) .opc-login-field-phone {
    display: none;
}

.opc-form:has(.opc-login-method input[value="phone"]:checked) .opc-login-field-email {
    display: none;
}

.opc-country-code-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opc-login-phone-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.opc-login-phone-row > input {
    flex: 1 1 auto;
    min-width: 0;
}

.opc-country-code-field--compact {
    flex: 0 0 110px;
}

.opc-country-code-field--compact .opc-country-code-list {
    right: auto;
    width: 260px;
}

.opc-country-code-field input[data-country-search]:focus {
    border-color: var(--opc-primary);
    box-shadow: 0 0 0 3px var(--opc-accent-soft);
    outline: none;
}

.opc-country-code-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 4px 0 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    background: var(--opc-surface, #fff);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    scrollbar-width: thin;
    scrollbar-color: var(--opc-border) transparent;
}

.opc-country-code-list::-webkit-scrollbar {
    width: 6px;
}

.opc-country-code-list::-webkit-scrollbar-thumb {
    background: var(--opc-border);
    border-radius: 3px;
}

.opc-country-code-list::-webkit-scrollbar-track {
    background: transparent;
}

.opc-country-code-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

.opc-country-code-list-code {
    color: var(--opc-text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.opc-country-code-iso-tag {
    display: inline-block;
    min-width: 20px;
    padding: 1px 4px;
    margin-right: 2px;
    border-radius: 4px;
    background: rgba(33, 150, 243, 0.06);
    color: var(--opc-primary);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    vertical-align: middle;
}

.opc-country-code-list li:hover,
.opc-country-code-list li:focus {
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    outline: none;
}

.opc-country-code-list li:hover .opc-country-code-list-code,
.opc-country-code-list li:focus .opc-country-code-list-code {
    color: var(--opc-primary);
}

.opc-country-code-list li.opc-country-code-list-selected {
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    font-weight: 600;
}

.opc-form-actions {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.opc-form-actions input[type="submit"],
.opc-form-actions button[type="submit"] {
    padding: 9px 24px;
    font-size: 14px;
    font-family: inherit;
    background: var(--opc-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.opc-form-actions input[type="submit"]:hover,
.opc-form-actions button[type="submit"]:hover {
    background: var(--opc-primary);
}

/* 提交后锁定按钮（注册页等耗时提交）：灰掉 + 行内转圈，防止重复点击 */
.opc-form-actions button[type="submit"]:disabled,
.opc-form-actions button[type="submit"]:disabled:hover {
    background: var(--opc-text-muted);
    cursor: not-allowed;
}

.opc-btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: opc-btn-spin 0.7s linear infinite;
}

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

/* 论坛列表/详情——用户反馈标题字号(.opc-site-card-title 20px/700)偏大、
   页头太重(.opc-page-nav-bar 的大色块+26px标题)，参照 Reddit 的紧凑密度
   要求改造。不能直接改 .opc-site-card-title/.opc-page-nav-bar 本身：那两个
   类被 Opensource/Chengguo/Project 等其他列表页共用，改了会连带影响不
   相关页面，所以论坛改用自己的一套更紧凑的 class。 */
.opc-forum-list {
    gap: 2px;
}

.opc-forum-list-item {
    padding: 12px 16px;
}

/* 帖子列表条目本身就是 <a>（整块可点击，仿 Reddit），覆盖链接默认样式，
   hover 只做背景色变化——不用 transform/放大/阴影，遵循本项目"卡片 hover
   不做位移和发光阴影"的既有约定（见 CLAUDE.md，其余卡片 hover 只变
   border-color，这里额外加背景色是用户对论坛列表的明确要求）。 */
a.opc-forum-list-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.opc-forum-list-item:hover {
    background: var(--opc-bg);
}

.opc-forum-list-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--opc-text);
}

a.opc-forum-list-item:hover .opc-forum-list-title {
    color: var(--opc-accent);
}

/* 信息发布列表：标题改用与字段标签相同的 --opc-text-muted，比默认的
   --opc-text 更淡，与卡片整体配色统一；hover 仍由上一条规则变为强调蓝
   （上一条选择器优先级更高） */
.opc-topic-list .opc-forum-list-title {
    color: var(--opc-text-muted);
}

/* 帖子详情页大标题——.opc-page-title 默认是强调蓝+下划线，那是给"社区
   论坛"这种栏目级标题用的；具体某一篇帖子的标题只需要清楚可读，不需要
   和栏目标题一样抢眼，所以去掉下划线、改回中性深色文字。 */
.opc-forum-post-title {
    font-size: 18px;
    color: var(--opc-text);
    border-bottom: none;
    padding-bottom: 0;
}

/* "全部回复 (n)" 是列表区的小节标签，不是帖子标题，复用
   .opc-forum-list-title 的字号但弱化颜色/字重，避免和上面的帖子内容
   抢视觉层级。 */
h3.opc-forum-list-title {
    margin: 4px 0 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--opc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 评论卡片——默认 .opc-card 的浅灰边框在白底页面上区隔感弱，截图反馈
   "卡片贴在一起"；改用带一点层次的浅底色 + 加大内边距，拉开视觉呼吸感，
   不引入新的阴影/位移效果（遵循既有 hover 约定）。 */
.opc-list .opc-forum-list-item:not(a) {
    padding: 14px 16px;
    background: var(--opc-bg);
    border-color: var(--opc-border);
}

.opc-forum-list .opc-meta-row,
.opc-forum-list-item .opc-meta-row {
    gap: 10px;
    font-size: 12px;
    color: var(--opc-text-muted);
}

/* 论坛帖子/评论正文——渲染 Quill 产出的 HTML（<p>/<h2>/<h3>/<strong> 等），
   不能复用 .opc-site-card-text：那个 class 的 white-space:pre-wrap 是给
   Chengguo.quanwen 这类纯文本字段设计的，配合真实 HTML 标签会导致换行
   错乱；且不加约束时 <h2>/<h3> 会吃到浏览器默认字号（24px+），比周围
   UI 大出一截。这里统一收进 14px 正文基调，标题只用加粗+字号差异区分
   层级，不追求 Quill 编辑区里的视觉大小。 */
.opc-forum-content {
    font-size: 14px;
    line-height: 1.75;
    color: var(--opc-text);
    word-break: break-word;
}

.opc-forum-content p {
    margin: 0 0 10px;
}

/* font-size: inherit 抵消 globals.css 全局 p:last-child 的 15px，
   否则帖子最后一段会比其余段落(14px)大一号。 */
.opc-forum-content p:last-child {
    margin-bottom: 0;
    font-size: inherit;
}

.opc-forum-content h2,
.opc-forum-content h3 {
    margin: 16px 0 8px;
    font-family: var(--opc-font, inherit);
    font-weight: 600;
    color: var(--opc-text);
}

.opc-forum-content h2 {
    font-size: 17px;
}

.opc-forum-content h3 {
    font-size: 15px;
}

.opc-forum-content ol,
.opc-forum-content ul {
    margin: 0 0 10px;
    padding-left: 22px;
}

.opc-forum-content a {
    color: var(--opc-accent);
}

.opc-forum-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 8px 0;
}

/* 帖子/评论的"删除"是作者本人操作，用 POST 表单而不是 GET 链接（区别
   于 opcmanage 后台管理员删除走 GET，见 CLAUDE.md §4——那条约定针对的是
   后台无 CSRF 顾虑的管理端，会员端这里特意用 POST + csrf_protect，把
   <button> 用 .opc-link 样式伪装成行内链接，放进 .opc-meta-row 跟日期
   同一行，不占用单独一行。 */
.opc-forum-inline-form {
    margin: 0 0 0 auto;
    display: inline-flex;
}

/* 图标按钮，不是文字链接——用户反馈"删除"文字链接太显眼，改成小垃圾桶
   图标，默认用弱化的 --opc-text-muted，跟日期文字一样不起眼，hover 才
   提示危险色，而不是常态就用红色抢注意力。 */
.opc-forum-delete-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    padding: 0;
    color: var(--opc-text-muted);
    cursor: pointer;
}

.opc-forum-delete-link svg {
    width: 14px;
    height: 14px;
}

.opc-forum-delete-link:hover {
    color: var(--opc-danger);
}

/* 内容面板 */
.opc-panel {
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    padding: 20px;
    box-shadow: var(--opc-shadow);
}

.opc-panel + .opc-panel {
    margin-top: 16px;
}

/* 个人信息 */
.opc-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.opc-profile-item {
    padding: 14px;
    background: var(--opc-accent-soft);
    border-radius: var(--opc-radius);
}

.opc-profile-item dt {
    font-size: 12px;
    color: var(--opc-text-muted);
    margin-bottom: 4px;
}

.opc-profile-item dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--opc-primary);
}

/* 提示信息 */
.opc-alert {
    padding: 12px 16px;
    border-radius: var(--opc-radius);
    font-size: 13px;
    margin-bottom: 16px;
}

.opc-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.opc-alert-info {
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    border: 1px solid #bcdffb;
}

.opc-alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* 首页导航项（带描述） */
.opc-hub-item-title {
    font-weight: 500;
    color: var(--opc-primary);
}

.opc-hub-item-desc {
    display: block;
    font-size: 12px;
    color: var(--opc-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* 快捷链接列表 */
.opc-quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opc-quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    color: var(--opc-text);
    text-decoration: none;
    transition: border-color 0.15s;
}

.opc-quick-link:hover {
    border-color: var(--opc-primary-light);
    color: var(--opc-primary);
}

.opc-quick-link-desc {
    font-size: 12px;
    color: var(--opc-text-muted);
    margin-left: 12px;
    flex: 1;
    text-align: right;
}

.opc-quick-link.is-danger {
    color: var(--opc-danger);
    font-weight: 600;
}

.opc-quick-link.is-danger .opc-quick-link-desc {
    color: var(--opc-text-muted);
    font-weight: normal;
}

.opc-quick-link.is-danger:hover {
    border-color: var(--opc-danger-border);
    background: var(--opc-danger-soft);
    color: #991b1b;
}

/* 媒体内容 */
.opc-media-panel {
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(7, 32, 102, 0.06), 0 8px 24px rgba(7, 32, 102, 0.08);
}

.opc-avatar-upload-desc {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--opc-text-muted);
}

.opc-avatar-upload-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opc-avatar-upload-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-accent);
    letter-spacing: 0.04em;
}

.opc-avatar-upload-field input[type="file"] {
    width: 100%;
    padding: 18px 16px;
    font-size: 14px;
    font-family: inherit;
    border: 2px dashed #bcdffb;
    border-radius: 10px;
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.opc-avatar-upload-field input[type="file"]:hover {
    border-color: var(--opc-accent);
    background: #e0f2f1;
}

.opc-avatar-upload-field input[type="file"]:focus {
    outline: none;
    border-color: var(--opc-accent);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

.opc-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--opc-radius);
    background: #000;
}

.opc-media-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--opc-radius);
}

.opc-score-banner {
    padding: 14px 18px;
    margin-bottom: 20px;
    background: var(--opc-accent-soft);
    border: 1px solid #bcdffb;
    border-radius: var(--opc-radius);
    font-size: 15px;
    color: var(--opc-primary);
}

.opc-score-banner strong {
    font-size: 20px;
    margin-left: 8px;
}

/* 个人信息 — 大气身份卡片 */
.opc-profile-hero {
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(7, 32, 102, 0.06), 0 8px 24px rgba(7, 32, 102, 0.08);
}

.opc-profile-hero-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 32px 28px;
    background: linear-gradient(135deg, var(--opc-primary) 0%, var(--opc-primary-light) 55%, #2196f3 100%);
    color: #fff;
}

.opc-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 3px solid rgba(255, 255, 255, 0.35);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.opc-profile-hero-text {
    flex: 1;
    min-width: 0;
}

.opc-profile-hero-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
}

.opc-profile-hero-name {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #fff;
}

.opc-profile-hero-org {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.88;
}

.opc-profile-hero-mobile {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.72;
    letter-spacing: 0.02em;
}

.opc-profile-hero-score {
    flex-shrink: 0;
    min-width: 120px;
    padding: 16px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.opc-profile-hero-score-label {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.opc-profile-hero-score-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.opc-profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0;
}

.opc-profile-stat {
    padding: 24px 22px;
    border-top: 1px solid var(--opc-border);
    border-right: 1px solid var(--opc-border);
}

.opc-profile-stat:last-child {
    border-right: none;
}

.opc-profile-stat dt {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--opc-text-muted);
    letter-spacing: 0.04em;
}

.opc-profile-stat dd {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--opc-primary);
    line-height: 1.4;
    word-break: break-word;
}

.opc-profile-stat--highlight {
    background: var(--opc-accent-soft);
}

.opc-profile-stat--highlight dd {
    font-size: 24px;
    color: var(--opc-accent);
}

@media (max-width: 768px) {
    .opc-profile-hero-banner {
        flex-wrap: wrap;
        padding: 24px 20px;
    }

    .opc-profile-hero-score {
        width: 100%;
        min-width: 0;
    }

    .opc-profile-stat-grid {
        grid-template-columns: 1fr;
    }

    .opc-profile-stat {
        border-right: none;
        border-bottom: 1px solid var(--opc-border);
    }

    .opc-profile-stat:last-child {
        border-bottom: none;
    }
}

/* 个人信息 — 大气功能卡片 */
.opc-hub-section--feature {
    margin-top: 32px;
}

.opc-hub-section--feature > h2 {
    font-size: 18px;
    color: var(--opc-primary);
    margin-bottom: 20px;
    padding-left: 12px;
    border-left-width: 4px;
}

.opc-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.opc-feature-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    min-height: 96px;
    padding: 20px 22px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    color: var(--opc-text);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.opc-feature-card:hover {
    border-color: var(--opc-primary-light);
    color: var(--opc-primary);
}

.opc-feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    transition: background 0.2s ease, color 0.2s ease;
}

.opc-feature-card-icon svg {
    width: 24px;
    height: 24px;
}

.opc-feature-card-body {
    flex: 1;
    min-width: 0;
}

.opc-feature-card-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--opc-primary);
    line-height: 1.35;
}

.opc-feature-card-desc {
    display: block;
    font-size: 13px;
    color: var(--opc-text-muted);
    margin-top: 8px;
    line-height: 1.65;
}

.opc-feature-card:hover .opc-feature-card-title {
    color: var(--opc-accent);
}

@media (max-width: 768px) {
    .opc-feature-grid {
        grid-template-columns: 1fr;
    }

    .opc-feature-card {
        min-height: 0;
    }
}

/* 两列变体 — 用于入口数量固定为 2 的场景（如资源引导页），
   避免默认 3 列在只有 2 张卡片时被拉伸变形 */
.opc-feature-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .opc-feature-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* 欢迎首页 — 顶部横幅 */
.opc-welcome-hero {
    margin-bottom: 32px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--opc-primary) 0%, var(--opc-primary-light) 52%, #2196f3 100%);
    box-shadow: 0 4px 20px rgba(7, 32, 102, 0.14), 0 12px 40px rgba(7, 32, 102, 0.1);
}

.opc-welcome-hero-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 36px 32px;
    color: #fff;
}

.opc-welcome-hero-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.32);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.opc-welcome-hero-kicker {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.88;
}

.opc-welcome-hero-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.opc-welcome-hero-desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.86;
    max-width: 36em;
}

@media (max-width: 600px) {
    .opc-welcome-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .opc-welcome-hero-title {
        font-size: 26px;
    }
}

/* 欢迎首页 — 大气导航卡片 */
.opc-welcome-page .opc-hub-section {
    margin-bottom: 32px;
}

.opc-welcome-page .opc-hub-section h2 {
    font-size: 18px;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left-width: 4px;
}

/* 固定列数而非 auto-fill 自适应：列宽随容器宽度自然均分，
   宽屏下卡片本身跟着变大，不会在两侧留出大片空白 */
.opc-welcome-page .opc-hub-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

/* 分段标题下的卡片整体右缩进 16px（= 标题左侧 4px 竖条 + 12px 内边距），
   卡片左边缘与标题文字对齐，竖条单独突出在左侧，分段层级更容易辨认 */
.opc-welcome-page .opc-hub-section > .opc-hub-grid {
    margin-left: 16px;
}

@media (min-width: 640px) {
    .opc-welcome-page .opc-hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .opc-welcome-page .opc-hub-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.opc-welcome-page .opc-hub-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 22px;
    row-gap: 6px;
    min-height: 96px;
    padding: 20px 22px;
    border-radius: 12px;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.opc-welcome-page .opc-hub-item:hover {
    border-color: var(--opc-primary-light);
    color: var(--opc-primary);
}

.opc-welcome-page .opc-hub-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.78;
    background: #f5f8fa;
    border-color: var(--opc-border);
    box-shadow: none;
    color: var(--opc-text-muted);
}

.opc-welcome-page .opc-hub-item.is-disabled:hover {
    transform: none;
    border-color: var(--opc-border);
    box-shadow: none;
    color: var(--opc-text-muted);
}

.opc-welcome-page .opc-hub-item.is-disabled .opc-hub-item-title {
    color: var(--opc-text-muted);
}

.opc-welcome-page .opc-hub-item.is-disabled .opc-hub-item-desc {
    color: #94a3b8;
    font-size: 12px;
}

/* 圆形浅蓝底徽标，对应 aista .abbbb-left 的图标容器视觉 */
.opc-welcome-page .opc-hub-num {
    grid-row: 1 / span 2;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    margin-bottom: 0;
    border-radius: 50%;
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.opc-welcome-page .opc-hub-item:not(.is-disabled):hover .opc-hub-num {
    background: var(--opc-accent-soft-hover);
    color: var(--opc-accent);
}

.opc-welcome-page .opc-hub-num svg {
    width: 24px;
    height: 24px;
}

.opc-welcome-page .opc-hub-item-title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--opc-primary);
    line-height: 1.35;
}

.opc-welcome-page .opc-hub-item-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    margin-top: 0;
    line-height: 1.6;
}

.opc-welcome-page .opc-hub-item:hover .opc-hub-item-title {
    color: var(--opc-accent);
}

/* 仅标题 — 大气卡片，无编号 */
.opc-welcome-page .opc-hub-item:not(:has(.opc-hub-item-desc)) {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 20px 26px;
}

.opc-welcome-page .opc-hub-item:not(:has(.opc-hub-item-desc)) .opc-hub-item-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 16px;
}

.opc-welcome-page .opc-quick-link {
    padding: 16px 22px;
    border-radius: 12px;
    transition: border-color 0.2s ease;
}

.opc-welcome-page .opc-quick-link:hover {
    border-color: var(--opc-primary-light);
}

.opc-welcome-page .opc-quick-link.is-danger:hover {
    border-color: var(--opc-danger-border);
}

@media (max-width: 600px) {
    .opc-welcome-page .opc-hub-item {
        min-height: 0;
    }
}

/* 修正 footer「联系方式/Contact Info」栏与其余三栏对齐方式不一致的问题：
   globals.css 里 .footer-contact 本身是 flex-direction:column +
   align-items:center + justify-content:center（水平垂直都居中），而
   About/Navigation/Updates 三栏都是左上对齐。4 栏改 flex 布局、行高统一后
   "联系方式"栏内容比"导航"栏少，justify-content:center 会把标题往下推，
   导致标题看起来比其他栏矮一截；align-items:center 则导致标题、内容整体
   偏右。这里都改成 flex-start，与其余栏目对齐；不直接改 globals.css，
   避免下次从源站重新抓取该文件时又丢失这处修正。 */
.footer .footer-contact {
    align-items: flex-start;
    justify-content: flex-start;
}

/* Footer 4 栏 + 底部版权行的左右边界要保持一致，改用一个共享的 wrapper
   （.footer-inner，见各模板 diff：.footer-content 和 .footer-bottom 现在
   都包在这一个 div 里）替换掉原本 display:inline-block + float:left +
   每栏内联 width/margin-left 百分比硬编码的做法。硬编码百分比
   （24% / 27%+8% / 15% / 15%+8%）加总不满 100%，"动态"栏内容只有两行链接
   却被分到 15% 宽度，右边出现一大片和内容无关的空白。
   走过三轮弯路：flex + space-between 会把剩余空间整个塞进栏间空当；
   flex + 不带 justify-content 的紧凑排列会让内容贴在 .container 左边；
   .footer-content 单独 justify-content:center 能让 4 栏本身居中，但
   .footer-bottom 若各自居中/撑满，宽度基准和上面 4 栏不是同一个来源，
   会对不齐；给 wrapper 写死 width 数值又要在 4 栏宽度变化时手动同步。
   现在 .footer-inner 用 display:table，宽度由内部最宽的一行（.footer-content
   本身用 flex 紧凑排列的自然宽度）自动撑开，不需要任何硬编码数字；
   .footer-inner 再用 margin:auto 在 .container 内居中。.footer-bottom 是
   .footer-inner 的另一个子元素，共享同一个由内容决定的宽度，两行因此
   天然对齐，4 栏宽度以后调整也不需要同步任何数字。 */
.footer .footer-inner {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* flex-wrap 桌面端必须是 nowrap，不能是 wrap：Safari/WebKit 给
   display:table 的 .footer-inner 计算自适应宽度时比 Chrome 少算出
   约 100px，四栏总宽超出这个偏小的宽度后，wrap 会把 Contact Info
   挤到下一行、独占一行且高度错误。详见 marketing-home.css 同名规则
   的注释——两个文件各自维护同一份 footer 布局，这里保持一致修复。
   移动端仍需要换行堆叠，在下面的媒体查询里改回 wrap。 */
.footer .footer-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 48px;
}

.footer .footer-section {
    width: auto;
    float: none;
    flex: 0 0 auto;
}

/* 每栏用 width 而不是 flex-basis 定宽：Safari 计算 display:table 的 .footer-inner
   自适应宽度时按各栏内容的 max-content 算，不认 flex-basis，算出的宽度比 Chrome
   窄约 100px，.footer-bottom（width:100%）随之变窄，和上面 4 栏左右对不齐。
   width 在两个引擎里都会被当作该栏的固有宽度，两行宽度才一致。 */
.footer .footer-about {
    width: 320px;
    max-width: 320px;
}

.footer .footer-links {
    width: 140px;
}

.footer .footer-services {
    width: 140px;
}

.footer .footer-contact {
    width: 160px;
}

@media (max-width: 1024px) {
    .footer .footer-content {
        flex-wrap: wrap;
        gap: 32px;
    }

    .footer .footer-inner {
        display: block;
        width: 100%;
    }
}

/* 除首页外所有页面（huiyuan/cn/base.html、huiyuan/foreign/base.html 共用
   的 footer，<body> 带 opc-body 类；首页 marketing/index.html 没有这个类，
   不受影响）的 footer 改为深色背景 + 浅色文字。globals.css 里 .footer 系列
   规则默认是白底深字（.footer { background:#fff; color:#000 } 等），这里
   不改 globals.css 本身，只在 opc-body 作用域下覆盖背景色和各处硬编码的
   color:#000，保留原有的 footer.jpg 纹理图，叠加比 --color-background
   （#072066，hero/header 滚动态已在用的深蓝）更深的近黑蓝色遮罩，透明度
   调高到 0.97，避免纹理图的浅色区域把底色冲淡。 */
body.opc-body .footer {
    background: #030f33;
}
body.opc-body .footer .footer-main {
    background:
        linear-gradient(rgba(3, 15, 51, 0.97), rgba(3, 15, 51, 0.97)),
        url("../images/footer.jpg");
}
body.opc-body .footer .footer-title,
body.opc-body .footer .footer-about .footer-description,
body.opc-body .footer .footer-link,
body.opc-body .footer .footer-contact .contact-text .contact-label,
body.opc-body .footer .footer-contact .contact-text .contact-value {
    color: rgba(255, 255, 255, 0.85);
}
body.opc-body .footer .footer-link:hover {
    color: var(--opc-primary-light, #64b5f6);
}

/* globals.css 的 .footer-main 是 padding: 4% 0 + padding-bottom: 2%（vendored，不改），
   桌面宽度下 2% ≈ 29px，footer-bottom 行结束后还留一截与内容无关的空白。
   这里只覆盖 padding-bottom，压缩到固定的 12px，不影响 vendored 文件本身。 */
.footer .footer-main {
    padding-bottom: 12px;
}

/* Footer 底部版权 + About Us + 语言切换行（apple.com 风格），复用与 marketing-home.css
   同名的 .footer-bottom/.footer-bottom-links 结构。这是次要的辅助信息，不应该跟上方
   .footer-link（rgba(255,255,255,0.85)）一样亮——测试后满亮度反而显得突兀。降到
   0.55 的柔和灰白，字号也比正文栏略小一档，悬停时才过渡到强调色。
   对齐说明：.footer-content 现在用 justify-content:center 让 4 栏作为一组固定宽度
   内容整体居中（不再撑满 .container），如果这里继续用 space-between 撑满 .container
   全宽，会导致这一行的左右边界比上面 4 栏更靠外，视觉上不对齐。这里同样改成不撑满、
   two ends 用 max-width 限定实际宽度并居中，让两行共享同一套居中逻辑。 */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom-links a {
    position: relative;
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.footer-bottom-links a:first-child {
    padding-left: 0;
}

.footer-bottom-links a:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.footer-bottom-links a:hover {
    color: var(--opc-primary-light, #64b5f6);
    transform: translateX(5px);
}

/* 资源入口介绍页（算力 / AI-Agent Skills）— 复用 --opc-* token 与
   .opc-feature-card 的卡片语言，不引入新配色。
   hero 改为白底 + 细边框，用色只落在标题关键词与按钮上，避免大面积
   渐变色块带来的"AI 生成模板"既视感 */
.opc-intro-hero {
    position: relative;
    margin-bottom: 32px;
    padding: 48px 40px;
    border-radius: var(--opc-radius);
    text-align: center;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    box-shadow: var(--opc-shadow);
    color: var(--opc-text);
    overflow: hidden;
}

.opc-intro-hero::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: var(--opc-accent-soft);
    border-radius: 50%;
    z-index: 0;
}

.opc-intro-hero::after {
    content: "";
    position: absolute;
    bottom: -70px;
    left: -70px;
    width: 200px;
    height: 200px;
    background: var(--opc-accent-soft);
    border-radius: 50%;
    z-index: 0;
    opacity: 0.7;
}

.opc-intro-hero > * {
    position: relative;
    z-index: 1;
}

.opc-intro-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--opc-accent-soft);
    color: var(--opc-accent);
}

.opc-intro-hero-icon svg {
    width: 28px;
    height: 28px;
}

.opc-intro-hero-kicker {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--opc-accent);
}

.opc-intro-hero-title {
    margin: 0 auto;
    max-width: 32em;
    font-family: var(--opc-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--opc-primary);
}

.opc-intro-hero-desc {
    margin: 14px auto 0;
    max-width: 34em;
    font-size: 14px;
    line-height: 1.7;
    color: var(--opc-text-muted);
}

.opc-intro-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.opc-intro-hero-actions .opc-btn {
    padding: 10px 24px;
    font-size: 14px;
}

@media (max-width: 600px) {
    .opc-intro-hero {
        padding: 32px 24px;
    }

    .opc-intro-hero-title {
        font-size: 22px;
    }

    .opc-intro-hero-actions {
        flex-direction: column;
    }
}

/* 介绍页小节标题，样式对齐 .opc-hub-section--feature > h2 但独立命名，
   避免与 hub 网格语义（社区导航）混用 */
.opc-intro-section {
    margin-bottom: 36px;
}

.opc-intro-section-head {
    text-align: center;
    margin-bottom: 24px;
}

.opc-intro-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--opc-primary);
}

.opc-intro-section-desc {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--opc-text-muted);
}

/* 介绍页能力网格 — 卡片改为定宽而非 auto-fill 拉伸铺满，网格本身居中，
   避免卡片数量不能整除列数时（如 3 张卡片）整行偏左 */
.opc-intro-section .opc-hub-grid {
    grid-template-columns: repeat(auto-fit, 240px);
    justify-content: center;
}

/* 覆盖 .opc-hub-item 默认的左对齐版式，改为图标居上、文字居中，
   图标改方形圆角底色块；卡片交互收敛为细边框 + 淡阴影，
   不用位移/放大动效，避免过度的"AI 生成模板"既视感 */
.opc-intro-section .opc-hub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 28px 20px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.opc-intro-section .opc-hub-item .opc-hub-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    transition: background 0.2s ease, color 0.2s ease;
}

.opc-intro-section .opc-hub-item:hover .opc-hub-num {
    background: var(--opc-accent-soft-hover);
    color: var(--opc-accent);
}

.opc-intro-section .opc-hub-item .opc-hub-num svg {
    width: 22px;
    height: 22px;
}

.opc-intro-section .opc-hub-item-title {
    font-size: 15px;
}

.opc-intro-section .opc-hub-item-desc {
    font-size: 12px;
}

/* 三步流程卡片 — 同样改为图标居上、文字居中的版式，
   覆盖 .opc-feature-card 默认的左右并排版式，并收敛其自带的
   双层阴影 + 位移动效为细边框 + 淡阴影 */
.opc-intro-section .opc-feature-card {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 32px 24px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.opc-intro-section .opc-feature-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.opc-intro-section .opc-feature-card-icon svg {
    width: 24px;
    height: 24px;
}

.opc-intro-section .opc-feature-card:hover .opc-feature-card-icon {
    background: var(--opc-accent-soft-hover);
    color: var(--opc-accent);
}

/* 资源引导页的两个主入口卡片 — 比三步流程卡片更需要视觉分量，
   恢复左右并排版式，用渐变图标块 + 右上角大号水印图标替代纯色圆形
   图标，在不引入新配色/图片素材的前提下让卡片不再显得单薄 */
.opc-intro-section .opc-feature-card-highlight {
    position: relative;
    flex-direction: row;
    text-align: left;
    gap: 22px;
    padding: 20px 22px;
    overflow: hidden;
}

.opc-intro-section .opc-feature-card-highlight::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: var(--opc-accent-soft);
    border-radius: 50%;
    z-index: 0;
}

.opc-intro-section .opc-feature-card-highlight .opc-feature-card-icon,
.opc-intro-section .opc-feature-card-highlight .opc-feature-card-body {
    position: relative;
    z-index: 1;
}

.opc-intro-section .opc-feature-card-highlight .opc-feature-card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--opc-accent-soft);
    color: var(--opc-accent);
    transition: background 0.2s ease, color 0.2s ease;
}

.opc-intro-section .opc-feature-card-highlight .opc-feature-card-icon svg {
    width: 24px;
    height: 24px;
}

.opc-intro-section .opc-feature-card-highlight:hover .opc-feature-card-icon {
    background: var(--opc-accent-soft-hover);
    color: var(--opc-accent);
}

/* 第二张入口卡片的差异化变体 — 同一浅底配色用在两张卡片上会显得
   过于雷同，这里图标块改圆形、菱形水印代替圆形水印，让两张卡片
   有可辨识度但仍在同一配色体系内，不引入新色相 */
.opc-intro-section .opc-feature-card-highlight-alt::after {
    top: auto;
    bottom: -34px;
    right: -34px;
    width: 130px;
    height: 130px;
    border-radius: 30%;
    transform: rotate(20deg);
}

.opc-intro-section .opc-feature-card-highlight-alt .opc-feature-card-icon {
    border-radius: 50%;
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-intro-section .opc-feature-card-highlight-alt:hover .opc-feature-card-icon {
    background: var(--opc-accent-soft-hover);
    color: var(--opc-primary);
}

@media (max-width: 600px) {
    .opc-intro-section .opc-feature-card-highlight {
        flex-direction: column;
        text-align: center;
    }
}

/* 统计数字行 */
.opc-intro-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.opc-intro-stat {
    padding: 20px;
    text-align: center;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
}

.opc-intro-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--opc-primary);
    font-variant-numeric: tabular-nums;
}

.opc-intro-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--opc-text-muted);
}

/* CTA 横幅 */
.opc-intro-cta {
    padding: 40px;
    text-align: center;
    border-radius: var(--opc-radius);
    background: var(--opc-accent-soft);
    border: 1px solid #bcdffb;
}

.opc-intro-cta-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--opc-primary);
}

.opc-intro-cta-desc {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--opc-text-muted);
}

.opc-intro-cta .opc-btn-primary {
    margin-top: 20px;
    padding: 10px 28px;
    font-size: 14px;
}

/* 资源列表多维度筛选（模型能力 / 算力资源 / 数据集 / 技能市场）——
   左侧分类导航 + 右侧结果区，参考 222.186.51.120 各 marketplace 页的筛选侧栏。
   每个维度是一个原生 <details>（可折叠、无需 JS），选项是两列小按钮，
   选中态沿用 .opc-section-nav-tab.is-current 的强调色边框 + 浅蓝底；
   hover 只改边框色，不做位移/阴影动效（见 CLAUDE.md §4） */
.opc-filter-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.opc-filter-sidebar {
    position: sticky;
    top: 100px;
    padding: 6px 0;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    box-shadow: var(--box-shadow-sm);
}

.opc-filter-group + .opc-filter-group {
    border-top: 1px solid var(--opc-border);
}

.opc-filter-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.opc-filter-group-title::-webkit-details-marker {
    display: none;
}

.opc-filter-group-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--opc-accent);
    flex-shrink: 0;
}

.opc-filter-group-title::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid var(--opc-text-muted);
    border-bottom: 1.5px solid var(--opc-text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
}

.opc-filter-group:not([open]) .opc-filter-group-title::after {
    transform: rotate(-45deg);
}

.opc-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px 16px;
}

.opc-filter-option {
    display: block;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    color: var(--opc-text);
    text-decoration: none;
    background: var(--color-surface-scase, #f8f9fa);
    border: 1px solid var(--opc-border);
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

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

.opc-filter-option.is-active {
    background: var(--opc-accent-soft);
    border-color: var(--opc-accent);
    color: var(--opc-accent);
    font-weight: 600;
}

/* 结果区顶部：关键词搜索 + 结果数 + 清除筛选 */
.opc-filter-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 16px;
}

.opc-filter-search {
    display: flex;
    flex: 1;
    min-width: 240px;
    max-width: 560px;
    gap: 8px;
}

.opc-filter-search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--opc-text);
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 6px;
    transition: border-color 0.15s;
}

.opc-filter-search input[type="search"]:focus {
    outline: none;
    border-color: var(--opc-accent);
    box-shadow: 0 0 0 2px var(--opc-accent-soft);
}

.opc-filter-search .opc-btn {
    padding: 9px 20px;
    font-size: 14px;
    border-radius: 6px;
}

.opc-filter-summary {
    font-size: 13px;
    color: var(--opc-text-muted);
}

.opc-filter-summary strong {
    color: var(--opc-text);
}

.opc-filter-clear {
    font-size: 13px;
    color: var(--opc-accent);
    text-decoration: none;
}

.opc-filter-clear:hover {
    text-decoration: underline;
}

@media (max-width: 860px) {
    .opc-filter-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .opc-filter-sidebar {
        position: static;
    }

    .opc-filter-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 资源列表卡片（模型能力 / 算力资源 / 数据集 / 技能市场）——视觉对齐社区首页
   .opc-welcome-page .opc-hub-item：12px 圆角、宽松内边距、无顶部渐变条，
   头部是 56px 浅蓝圆形图标 + 标题 + 灰色副标题；字段值用正文色而非加粗主色，
   避免一张卡片里堆满蓝色粗体。只有整卡可点（含 stretched-link）的卡片才有
   hover 边框反馈，不可点的卡片保持静止，免得看起来像能点 */
.opc-site-card.opc-resource-card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.2s ease;
}

.opc-site-card.opc-resource-card::before {
    display: none;
}

.opc-site-card.opc-resource-card:has(.opc-site-card-stretched-link):hover {
    border-color: var(--opc-primary-light);
}

.opc-resource-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    margin-bottom: 14px;
}

.opc-resource-card-icon {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
    transition: background 0.2s ease, color 0.2s ease;
}

.opc-resource-card-icon svg {
    width: 26px;
    height: 26px;
}

.opc-resource-card:has(.opc-site-card-stretched-link):hover .opc-resource-card-icon {
    background: var(--opc-accent-soft-hover);
    color: var(--opc-accent);
}

.opc-site-card.opc-resource-card .opc-site-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--opc-primary);
    overflow-wrap: anywhere;
}

.opc-resource-card:has(.opc-site-card-stretched-link):hover .opc-site-card-title {
    color: var(--opc-accent);
}

.opc-site-card.opc-resource-card .opc-site-card-byline {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--opc-text-muted);
}

.opc-site-card.opc-resource-card .opc-site-card-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--opc-text-muted);
}

.opc-site-card.opc-resource-card .opc-site-card-meta.is-plain {
    gap: 6px;
    font-size: 13px;
}

.opc-site-card.opc-resource-card .opc-site-card-meta-item dd {
    font-weight: 500;
    color: var(--opc-text);
}

.opc-site-card.opc-resource-card .opc-site-card-tags {
    margin: 12px 0 14px;
}

.opc-filter-results .opc-list-grid {
    gap: 16px;
}

/* 资源相关页面（资源中心 / 四个资源列表 / 技能详情）的紧凑页头——用户反馈
   默认 .opc-page-nav-bar（80px 高、26px 标题）太大，要求和 opcmanage 控制台
   顶部横幅（h4.opc-hero-banner：约 52px 高、16px 标题、13px 按钮）一致。
   与论坛页同理，不直接改 .opc-page-nav-bar（其它列表页共用），用修饰类 */
.opc-page-nav-bar.opc-page-nav-bar-compact {
    min-height: 52px;
    margin-bottom: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(7, 32, 102, 0.1);
}

.opc-page-nav-bar-compact .opc-page-nav-bar-back {
    gap: 6px;
    min-width: 0;
    padding: 0 18px;
    font-size: 13px;
}

.opc-page-nav-bar-compact .opc-page-nav-bar-back-icon {
    font-size: 14px;
}

.opc-page-nav-bar-compact .opc-page-nav-bar-main {
    padding: 10px 20px;
}

.opc-page-nav-bar-compact .opc-page-nav-bar-title {
    font-size: 16px;
    letter-spacing: 0;
}

@media (max-width: 600px) {
    .opc-page-nav-bar-compact .opc-page-nav-bar-back {
        padding: 10px 16px;
    }

    .opc-page-nav-bar-compact .opc-page-nav-bar-main {
        padding: 10px 16px;
    }

    .opc-page-nav-bar-compact .opc-page-nav-bar-title {
        font-size: 16px;
    }
}

/* 资源列表页整体字号收小一号、间距收紧（用户反馈"松松垮垮"）。只作用于
   .opc-resource-page 包裹的四个资源列表，不影响其它使用相同组件的页面 */
.opc-resource-page .opc-filter-layout {
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 16px;
}

/* 上面这条比 860px 断点里的 .opc-filter-layout 更具体，会把窄屏的单栏布局覆盖回两栏
   （手机上筛选栏和卡片挤在一行、卡片被截断），所以窄屏要在这里再改回单栏 */
@media (max-width: 860px) {
    .opc-resource-page .opc-filter-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.opc-resource-page .opc-filter-group-title {
    padding: 11px 14px;
    font-size: 13px;
}

.opc-resource-page .opc-filter-options {
    gap: 6px;
    padding: 0 14px 12px;
}

.opc-resource-page .opc-filter-option {
    padding: 6px 4px;
    font-size: 12px;
}

.opc-resource-page .opc-filter-toolbar {
    margin-bottom: 12px;
}

.opc-resource-page .opc-filter-search input[type="search"] {
    padding: 7px 10px;
    font-size: 13px;
}

.opc-resource-page .opc-filter-search .opc-btn {
    padding: 7px 16px;
    font-size: 13px;
}

.opc-resource-page .opc-filter-summary,
.opc-resource-page .opc-filter-clear {
    font-size: 12px;
}

.opc-resource-page .opc-filter-results .opc-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.opc-resource-page .opc-site-card.opc-resource-card {
    padding: 16px 18px;
}

.opc-resource-page .opc-resource-card-head {
    column-gap: 12px;
    row-gap: 2px;
    margin-bottom: 10px;
}

.opc-resource-page .opc-resource-card-icon {
    width: 44px;
    height: 44px;
}

.opc-resource-page .opc-resource-card-icon svg {
    width: 22px;
    height: 22px;
}

/* 小卡片标题基线 14px（2026-10-02 用户在模型能力页确认后定为四个资源板块统一标准） */
.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-title {
    font-size: 14px;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-byline {
    font-size: 12px;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-text {
    font-size: 13px;
    line-height: 1.55;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-meta.is-plain {
    gap: 4px;
    font-size: 12px;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-tags {
    gap: 4px;
    margin: 10px 0 12px;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-badge {
    padding: 1px 7px;
    font-size: 10px;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-footer {
    font-size: 11px;
}

/* 社区/会员各页面统一采用资源页的紧凑格式（用户要求"其他所有类似页面套用同样的
   格式"）。.opc-section-nav（带分段 tab 的页头）也给一个和 .opc-page-nav-bar-compact
   同尺寸的紧凑版：约 52px 高、13px 返回按钮/分段 tab */
.opc-section-nav.opc-section-nav-compact {
    min-height: 52px;
    margin-bottom: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(7, 32, 102, 0.1);
}

.opc-section-nav-compact .opc-section-nav-back {
    gap: 6px;
    min-width: 0;
    padding: 0 18px;
    font-size: 13px;
}

.opc-section-nav-compact .opc-section-nav-back-icon {
    font-size: 14px;
}

.opc-section-nav-compact .opc-section-nav-tabs {
    gap: 6px;
    padding: 6px 16px;
}

@media (max-width: 768px) {
    .opc-section-nav-compact .opc-section-nav-back {
        padding: 10px 16px;
    }
}

/* 用了紧凑页头的页面，正文常用组件整体收小一号（约 20→17、18→16、14→13、
   13→12），与资源列表页的密度保持一致。用 :has() 按"页头是否紧凑"划定作用
   范围，而不是给每个模板再加一个包裹类；资源列表卡片自身有更具体的规则，
   不受这里影响 */
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-page-title {
    font-size: 17px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-site-card-title,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-job-card-title {
    font-size: 16px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-site-card-meta,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-job-card-meta {
    padding: 8px 10px;
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-site-card-label,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-job-card-label {
    font-size: 12px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-site-card-text,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-job-card-text,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-site-card-link-row {
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-meta-stack .opc-meta-row dd {
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-section-nav-tab {
    padding: 6px 14px;
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-table th {
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-table-title {
    font-size: 15px;
}

/* 只缩小数据格（td），表头 th 保持上面统一的 13px，不能有一列表头单独变小 */
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-table-desc,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-table td.opc-table-count {
    font-size: 12px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-community-card .opc-community-name-text {
    font-size: 16px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-community-card-desc p,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-community-card .opc-btn {
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-hub-section h2,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-hub-section--feature > h2 {
    font-size: 16px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-profile-hero-name {
    font-size: 22px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-profile-hero-org {
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-profile-hero-score-value {
    font-size: 28px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-profile-item dd {
    font-size: 15px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form label {
    font-size: 12px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form input[type="text"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form input[type="password"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form input[type="email"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form input[type="number"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form input[type="url"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form input[type="date"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form select,
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form textarea {
    font-size: 13px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form-actions input[type="submit"],
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-form-actions button[type="submit"] {
    font-size: 13px;
}
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-page-subnav {
    padding: 8px 12px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-page-subnav-link {
    padding: 6px 12px;
    font-size: 13px;
}
.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-intro-hero {
    padding: 32px 28px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-intro-hero-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-intro-hero-icon svg {
    width: 24px;
    height: 24px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-intro-hero-kicker {
    margin-bottom: 6px;
    font-size: 12px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-intro-hero-title {
    font-size: 24px;
}

.opc-main:has(> .opc-page-nav-bar-compact, > .opc-section-nav-compact) .opc-intro-hero-desc {
    margin-top: 10px;
    font-size: 13px;
}

/* 模型详情抽屉（hy_aimodel_list 点击卡片弹出）——沿用 dialog.opc-dialog 的蓝色标题栏，
   改为贴右侧、满高的抽屉，参考站 222.186.51.120 的模型详情即是这种右侧面板。
   字号按 §2.5 卡片标准：标题 18px、正文/字段 13px、分组标题 14px；
   <p> 类规则带 .opc-detail-drawer 前缀，是为了压过 vendored 的 p:last-child { font-size: 15px } */
dialog.opc-dialog.opc-detail-drawer {
    width: min(440px, 100vw);
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0 0 0 auto;
    border-radius: 0;
}

dialog.opc-detail-drawer[open] {
    display: flex;
    flex-direction: column;
}

.opc-detail-drawer .opc-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.opc-detail-drawer .opc-dialog-header form {
    margin: 0;
}

.opc-detail-drawer-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.opc-detail-drawer-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.opc-detail-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px 28px;
}

.opc-detail-drawer .opc-resource-card-head {
    margin-bottom: 12px;
}

.opc-detail-drawer-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--opc-primary);
    overflow-wrap: anywhere;
}

.opc-detail-drawer .opc-detail-drawer-byline {
    margin: 0;
    font-size: 12px;
    color: var(--opc-text-muted);
}

.opc-detail-drawer .opc-site-card-tags {
    margin: 0 0 12px;
}

.opc-detail-drawer .opc-badge {
    font-size: 11px;
}

.opc-detail-drawer .opc-detail-drawer-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--opc-text-muted);
    white-space: pre-line;
}

.opc-detail-drawer-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--opc-border);
}

.opc-detail-drawer-section h5 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text);
}

.opc-detail-drawer-rows {
    margin: 0;
}

.opc-detail-drawer-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 13px;
}

.opc-detail-drawer-rows > div + div {
    border-top: 1px dashed var(--opc-border);
}

.opc-detail-drawer-rows dt {
    color: var(--opc-text-muted);
}

.opc-detail-drawer-rows dd {
    margin: 0;
    text-align: right;
    white-space: pre-line;
    font-weight: 500;
    color: var(--opc-text);
}

.opc-detail-drawer-rows dd.opc-detail-drawer-price {
    font-weight: 600;
    color: var(--opc-primary);
}

.opc-detail-drawer .opc-detail-drawer-empty {
    margin: 0;
    font-size: 13px;
    color: var(--opc-text-muted);
}

.opc-detail-drawer-code {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--opc-border);
    border-radius: 8px;
    background: var(--opc-bg);
}

.opc-detail-drawer-code code {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
    color: var(--opc-text);
}

/* 复制按钮：图标按钮（复制 → 成功后绿色对勾，见 _detail_drawer_js.html），文字只放在 aria-label / title */
.opc-detail-drawer-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--opc-border);
    border-radius: 6px;
    background: var(--opc-surface);
    color: var(--opc-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.opc-detail-drawer-copy:hover {
    border-color: var(--opc-primary-light);
    color: var(--opc-primary);
}

.opc-detail-drawer-copy svg {
    width: 16px;
    height: 16px;
}

.opc-detail-drawer-copy .opc-copied-icon,
.opc-detail-drawer-copy.is-copied .opc-copy-icon {
    display: none;
}

/* 成功绿：与 .opc-badge-approved（#d1fae5 / #065f46）同一色系 */
.opc-detail-drawer-copy.is-copied .opc-copied-icon {
    display: block;
    color: #10b981;
}

/* 数据集详情抽屉（hy_dataset_list）补充：多行 git 命令代码块、获取数据链接、提示文字间距 */
.opc-detail-drawer-code.opc-detail-drawer-code-block {
    align-items: flex-start;
}

.opc-detail-drawer-code-block pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.7;
}

.opc-detail-drawer-section .opc-detail-drawer-code,
.opc-detail-drawer-section .opc-detail-drawer-rows + .opc-detail-drawer-empty,
.opc-detail-drawer-section .opc-detail-drawer-code + .opc-detail-drawer-empty {
    margin-top: 8px;
}

.opc-detail-drawer-section .opc-site-card-tags {
    margin: 0;
}

.opc-detail-drawer-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--opc-primary);
    text-decoration: none;
}

.opc-detail-drawer-link:hover {
    color: var(--opc-accent);
}

/* 整卡可点（打开详情抽屉）的资源卡片里，页脚自带的外链（如数据集「获取数据 →」）
   要浮在透明覆盖层之上，否则点击会被覆盖层拦截、变成打开抽屉 */
.opc-resource-card:has(.opc-site-card-stretched-link) .opc-site-card-footer a {
    position: relative;
    z-index: 2;
}

/* 筛选选项左侧的小图标（模型能力「接入厂商」），对照参考站：浅底圆角小方块，
   图标按比例缩放；参考站没有图标的厂商保留空白小方块，使各选项文字对齐 */
.opc-filter-option:has(.opc-filter-option-logo) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.opc-filter-option-logo {
    flex: 0 0 auto;
    display: inline-flex;
    width: 16px;
    height: 16px;
    padding: 1px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.opc-filter-option-logo:empty {
    background: var(--color-surface-scase, #f8f9fa);
}

.opc-filter-option-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.opc-filter-option-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 全站「显示不全」提示：CSS 截断（ellipsis / line-clamp）的文字 hover / 聚焦时显示完整内容，
   脚本 static/js/opc-tip.js（base.html 加载，运行时检测截断，无需给元素加标记）。管理后台有同款样式 */
.opc-tip {
    position: fixed;
    z-index: 900;
    max-width: 320px;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    background: rgba(30, 41, 59, 0.92);
    border-radius: 6px;
    box-shadow: var(--box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    white-space: normal;
    word-break: break-word;
    /* 长文本（如卡片描述）最多显示 10 行 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;
}

.opc-tip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 技能市场详情抽屉（hy_premodel_list）补充：SKILL.md 全文代码块限高滚动；下载 / 原始仓库两个链接并排 */
.opc-detail-drawer-code-scroll pre {
    max-height: 320px;
    overflow: auto;
}

.opc-detail-drawer-code-scroll code {
    font-size: 12px;
}

.opc-detail-drawer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.opc-detail-drawer-links:not(:has(a)) {
    display: none;
}

/* 资源小卡片：同一页里每张卡片大小一致、内部各区块高度固定（2026-10-02 用户要求，参照源站）。
   标题 / 署名单行省略；描述固定两行（line-clamp，没有描述显示「暂无描述」占位）；
   标签只显示一行，放不下的整枚隐藏（详情抽屉里有全部），单枚过长时省略；
   页脚各项单行。被截断的文字由全站 opc-tip（static/js/opc-tip.js）在 hover 时显示完整内容 */
.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-title,
.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-byline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}

.opc-resource-page .opc-resource-card .opc-site-card-detail {
    flex: none;
    height: calc(13px * 1.55 * 2);
    overflow: hidden;
}

.opc-resource-page .opc-resource-card .opc-site-card-detail .opc-site-card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

.opc-resource-page .opc-resource-card .opc-site-card-detail .opc-site-card-text.is-empty {
    color: var(--opc-text-muted);
    opacity: 0.7;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-tags {
    flex-wrap: wrap;
    height: 18px;
    overflow: hidden;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-tags .opc-badge {
    max-width: 100%;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-footer {
    min-width: 0;
    white-space: nowrap;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-footer > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-footer-stat:not(:has(svg)) {
    display: block;
}

.opc-resource-page .opc-site-card.opc-resource-card .opc-site-card-footer-license {
    flex-shrink: 0;
    max-width: 45%;
}

/* 入口大卡片（.opc-welcome-page .opc-hub-item：社区首页、会员首页、企业页）同一页里大小一致
   （2026-10-02 用户要求）：宽度由网格均分，高度固定 96px；标题、描述各占一行，超出用省略号，
   hover 时由全站 opc-tip 显示全文。英文标题较长时不再撑高卡片 */
.opc-welcome-page .opc-hub-item {
    height: 96px;
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
}

.opc-welcome-page .opc-hub-item-title,
.opc-welcome-page .opc-hub-item-desc {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 我的申请（hy_action）沿用社区列表的 .opc-table：标题链接的 ::after 铺满整行，
   行内的「取消申请」按钮要浮在这层覆盖之上才点得到；申请时间是定长文本，
   与编号列一样收窄不换行 */
.opc-table .opc-table-date {
    width: 1%;
    white-space: nowrap;
}

.opc-table td.opc-table-date {
    color: var(--opc-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.opc-table .opc-table-action {
    position: relative;
    z-index: 1;
    width: 1%;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .opc-table .opc-table-date,
    .opc-table .opc-table-action {
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    .opc-table .opc-table-date {
        grid-row: 3;
        grid-column: 2;
    }

    .opc-table .opc-table-action {
        grid-row: 3;
        grid-column: 3;
    }
}

/* 积分项目申请确认框居中：vendored globals.css 的 * { margin: 0 } 把 <dialog> 默认的
   margin: auto 清掉了，弹窗会贴在左上角。先只给新的申请确认框加回居中；其余 .opc-dialog
   也有同样问题，是否全站修复待确认（届时把这条并进 dialog.opc-dialog 并删掉本条） */
dialog.opc-dialog.opc-dialog-centered {
    margin: auto;
}

/* 表格行内操作（积分项目「申请参加 / 申请兑换」、我的申请「取消申请」）只用图标：
   样式照搬详情抽屉的复制按钮（30px 描边方块、16px 线条图标），文字只放在 title /
   aria-label 里。申请是主操作，图标用主色；积分不足时变灰（仍可点开提示）；取消平时
   中性、悬停变红，同 opcmanage 的 .opc-btn-icon-danger */
.opc-table-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--opc-border);
    border-radius: 6px;
    background: var(--opc-surface);
    color: var(--opc-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.opc-table-icon-btn svg {
    width: 16px;
    height: 16px;
}

.opc-table-icon-btn.is-primary {
    color: var(--opc-primary);
}

.opc-table-icon-btn:hover {
    border-color: var(--opc-primary-light);
    color: var(--opc-primary);
}

.opc-table-icon-btn.is-muted {
    opacity: 0.55;
}

.opc-table-icon-btn.is-danger:hover {
    border-color: var(--opc-danger);
    color: var(--opc-danger);
}

/* 「无需操作」占位：与其它图标按钮同一个 30px 描边方块（形状统一），
   只是整体变淡、悬停不变色、默认光标，表示这一行没有可做的操作 */
.opc-table-icon-btn.is-static {
    opacity: 0.45;
    cursor: default;
}

.opc-table-icon-btn.is-static:hover {
    border-color: var(--opc-border);
    color: var(--opc-text-muted);
}

/* 表格标题没有详情页时（积分变化里的管理员调整、社区消费等）用 .is-static：
   普通文字色、无整行覆盖链接、悬停不加下划线，避免看起来可点 */
.opc-table-title.is-static {
    color: var(--opc-text);
}

.opc-table-title.is-static::after {
    content: none;
}

.opc-table tbody tr:hover .opc-table-title.is-static {
    text-decoration: none;
}

/* 顶部导航（仿 Facebook，2026-10-06 用户确认改版）：原来的文字菜单（首页 / 关于 / 服务 /
   动态 / 资源 / 我的信息）换成图标——中间三个标签（首页 / 社区 / 资源），右侧圆形按钮
   （菜单 / 头像；之后的消息、通知按钮也用 .opc-topbar-btn，大小一致）。
   头部固定叠在深色背景插图上（滚动后是 footer.jpg 深色纹理），所以按钮是半透明白底，
   展开后的下拉面板是白色卡片。下拉用原生 <details>，脚本见 js/opc-topbar.js；
   模板见 huiyuan/{cn,foreign}/_topbar.html。高度沿用 vendored .header 的 85px，
   不影响 .opc-main 的 margin-top。 */
.opc-topbar .container {
    position: relative;
}

.opc-topbar-tabs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 8px;
}

.opc-topbar-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 48px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.opc-topbar-tab:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white, #fff);
}

.opc-topbar-tab.is-active,
.opc-topbar-tab.is-active:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--opc-primary-light);
}

.opc-topbar-tab svg {
    width: 24px;
    height: 24px;
}

.opc-topbar-actions {
    position: relative;
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.opc-topbar-menu > summary {
    list-style: none;
    cursor: pointer;
}

.opc-topbar-menu > summary::-webkit-details-marker {
    display: none;
}

/* 右侧圆形按钮：菜单 / 头像（以及之后的消息、通知）同一尺寸 */
.opc-topbar-btn,
.opc-topbar-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.opc-topbar-btn {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--color-white, #fff);
}

.opc-topbar-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.opc-topbar-menu[open] > .opc-topbar-btn {
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-topbar-btn svg {
    width: 20px;
    height: 20px;
}

.opc-topbar-avatar {
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.opc-topbar-menu[open] > .opc-topbar-avatar {
    box-shadow: 0 0 0 2px var(--opc-accent-soft);
}

.opc-topbar-avatar-caret {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--opc-bg);
    color: var(--opc-text);
}

.opc-topbar-avatar-caret svg {
    width: 10px;
    height: 10px;
}

/* 下拉面板：右对齐到按钮组，白色卡片 */
.opc-topbar-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 360px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 8px;
    background-color: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    box-shadow: var(--box-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 15px;
    line-height: 1.3333;
    text-align: left;
}

.opc-topbar-panel-title {
    margin: 4px 8px 8px;
    font-family: var(--opc-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1667;
    color: var(--opc-text);
}

.opc-topbar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px;
    border-radius: 8px;
    color: var(--opc-text);
    text-decoration: none;
}

a.opc-topbar-item:hover {
    background-color: var(--opc-bg);
    color: var(--opc-text);
}

.opc-topbar-item-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-topbar-item-icon svg {
    width: 20px;
    height: 20px;
}

.opc-topbar-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-topbar-lang {
    display: flex;
    gap: 4px;
    font-size: 13px;
}

.opc-topbar-lang a,
.opc-topbar-lang .is-current {
    padding: 2px 10px;
    border: 1px solid var(--opc-border);
    border-radius: 999px;
}

.opc-topbar-lang a {
    color: var(--opc-text-muted);
}

.opc-topbar-lang a:hover {
    border-color: rgba(33, 150, 243, 0.25);
    color: var(--opc-primary);
}

.opc-topbar-lang .is-current {
    border-color: var(--opc-accent);
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
    font-weight: 600;
}

.opc-topbar-divider {
    height: 1px;
    margin: 8px;
    background-color: var(--opc-border);
}

/* 头像面板顶部的个人卡片：整块链到「我的信息」 */
.opc-topbar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 14px 12px;
    border: 1px solid var(--opc-border);
    border-radius: 10px;
    color: var(--opc-text);
    text-decoration: none;
}

.opc-topbar-profile:hover {
    background-color: var(--opc-bg);
    color: var(--opc-text);
}

.opc-topbar-profile-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.opc-topbar-profile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opc-topbar-profile-name {
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-topbar-profile-desc {
    overflow: hidden;
    font-size: 13px;
    color: var(--opc-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 窄屏：中间标签收进「菜单」面板顶部，面板改成贴边铺满 */
.opc-topbar-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .opc-topbar-tabs {
        display: none;
    }

    .opc-topbar-mobile-only {
        display: block;
    }

    .opc-topbar-panel {
        position: fixed;
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* 滚动后头部换成浅色六边形纹理（见上方 .header.header-scrolled），半透明白底的按钮和白色
   图标在浅底上看不见，改用浅底配色：标签灰色、当前标签主色；圆形按钮浅蓝底主色图标 */
.header-scrolled .opc-topbar-tab {
    color: var(--opc-text-muted);
}

.header-scrolled .opc-topbar-tab:hover {
    background-color: var(--opc-accent-soft);
    color: var(--opc-text);
}

.header-scrolled .opc-topbar-tab.is-active,
.header-scrolled .opc-topbar-tab.is-active:hover {
    background-color: var(--opc-accent-soft-hover);
    color: var(--opc-primary);
}

.header-scrolled .opc-topbar-btn {
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.header-scrolled .opc-topbar-btn:hover,
.header-scrolled .opc-topbar-menu[open] > .opc-topbar-btn {
    background-color: var(--opc-accent-soft-hover);
}

/* 站内通知（2026-10-06）：顶部导航铃铛的角标与下拉面板、通知列表页 /hy_notice/、站内邮件详情页。
   面板布局仿 Facebook Chats：标题行（右侧圆形图标按钮）、胶囊筛选标签
   （全部 / 未读 / 站内邮件 / 系统通知），条目两行——来源名 + 「标题 · 时间」单行省略。
   尺寸：条目图标 56px、文字 15px / 13px、未读蓝点 12px。条目在面板和列表页共用（_notice_items.html）。 */
.opc-topbar-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--opc-danger);
    color: var(--color-white, #fff);
    font-size: 12px;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
}

.opc-topbar-badge[hidden] {
    display: none;
}

.opc-notice-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 8px;
}

.opc-notice-panel-head .opc-topbar-panel-title {
    margin: 0 8px;
}

.opc-notice-panel-actions {
    display: flex;
    gap: 4px;
}

.opc-notice-head-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--opc-text);
    cursor: pointer;
}

.opc-notice-head-btn:hover {
    background-color: var(--opc-bg);
    color: var(--opc-text);
}

.opc-notice-head-btn svg {
    width: 20px;
    height: 20px;
}

.opc-notice-tabs {
    display: flex;
    gap: 4px;
    margin: 0 8px 4px;
}

.opc-notice-tab {
    padding: 6px 12px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3333;
    white-space: nowrap;
    cursor: pointer;
}

.opc-notice-tab:hover {
    background-color: var(--opc-bg);
}

.opc-notice-tab.is-active,
.opc-notice-tab.is-active:hover {
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-notice-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    color: var(--opc-text);
    text-decoration: none;
}

.opc-notice-item[hidden] {
    display: none;
}

.opc-notice-item:hover {
    background-color: var(--opc-bg);
    color: var(--opc-text);
}

.opc-notice-item-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-notice-item-icon svg {
    width: 24px;
    height: 24px;
}

.opc-notice-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* 通知条目第一行：名称靠左、时间右对齐（2026-10-06 用户要求） */
.opc-notice-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.opc-notice-item-top .opc-notice-item-name {
    flex: 0 1 auto;
    min-width: 0;
}

.opc-notice-item-top .opc-notice-item-time {
    font-size: 13px;
    white-space: nowrap;
}

.opc-notice-item-name {
    overflow: hidden;
    color: var(--opc-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-notice-item-line {
    display: flex;
    gap: 4px;
    min-width: 0;
    color: var(--opc-text-muted);
    font-size: 13px;
    line-height: 1.3846;
}

/* 通知列表里站内邮件按会话一行：名称后面的灰色数字 = 会话内邮件数（原邮件 + 往来回复，>1 时显示） */
.opc-notice-item-count {
    margin-left: 6px;
    color: var(--opc-text-muted);
    font-size: 13px;
    font-weight: 400;
}

.opc-notice-item-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-notice-item-time {
    flex-shrink: 0;
}

.opc-notice-item.is-unread .opc-notice-item-name,
.opc-notice-item.is-unread .opc-notice-item-line {
    font-weight: 600;
}

.opc-notice-item.is-unread .opc-notice-item-line {
    color: var(--opc-text);
}

.opc-notice-item.is-unread .opc-notice-item-time {
    color: var(--opc-primary);
}

.opc-notice-item-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--opc-primary);
}

/* 已读行保留蓝点的位置（不可见），让所有行右侧的时间对齐成一列 */
.opc-notice-item-dot.is-read {
    visibility: hidden;
}

.opc-notice-empty {
    margin: 0;
    padding: 24px 8px;
    color: var(--opc-text-muted);
    font-size: 15px;
    text-align: center;
}

.opc-notice-empty[hidden] {
    display: none;
}

/* 通知列表页与站内邮件详情页：内容列居中、限宽，便于阅读 */
.opc-notice-page {
    max-width: 760px;
    margin: 0 auto;
}

.opc-notice-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.opc-card.opc-notice-list {
    padding: 8px;
}

/* 站内邮件 / 通知详情（Gmail 式会话排版，2026-10-06 用户指定）：一张白卡——主题行（18px + 标签，
   与名称 / 正文同样左缩进 60px，右侧 28px 上一封 / 下一封）；每封邮件左侧 48px 头像，与右侧信息栏等高（展开：名称 / 发件人 / 收件人三行，含邮箱；
   折叠：名称 / 摘要两行），时间始终靠右与名称同行；正文 14px 与名称左对齐（缩进 60px），头像下方留空；邮件之间细线分隔；折叠的邮件只显示
   一行摘要（原生 <details>）；最下面是同样缩进的「回复」按钮，点开才显示带会员头像的回复框。 */
.opc-mail-convo {
    max-width: 760px;
    margin: 0 auto;
    padding: 4px 24px 20px;
    background-color: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    box-shadow: var(--box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.opc-mail-convo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 16px 0 14px 60px;
}

.opc-mail-convo-subject {
    margin: 0;
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.opc-mail-convo-tag {
    padding: 1px 8px;
    border-radius: 4px;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
    font-size: 12px;
    white-space: nowrap;
}

.opc-mail-pager {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
    margin: -4px -8px -4px auto;
}

.opc-mail-pager .opc-notice-head-btn {
    width: 28px;
    height: 28px;
}

.opc-mail-pager .opc-notice-head-btn svg {
    width: 16px;
    height: 16px;
}

.opc-notice-head-btn.is-disabled,
.opc-notice-head-btn.is-disabled:hover {
    background: transparent;
    color: var(--opc-text);
    opacity: 0.35;
    cursor: default;
}

.opc-mail-msg {
    border-top: 1px solid var(--opc-border);
}

.opc-mail-msg-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    list-style: none;
    cursor: pointer;
}

.opc-mail-msg-head::-webkit-details-marker {
    display: none;
}

.opc-mail-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.opc-mail-avatar.is-platform {
    border: 1px solid var(--opc-border);
    background-color: var(--opc-surface);
}

.opc-mail-avatar.is-platform img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* 社区管理员发的邮件：社区名首字，浅蓝底 + 主色字，和会员自己的头像（主色底白字）区分开 */
.opc-mail-avatar.is-community {
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-mail-msg-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.opc-mail-msg-from {
    height: 20px;
    overflow: hidden;
    color: var(--opc-text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.opc-mail-msg-from strong {
    font-weight: 600;
}

.opc-mail-msg-role {
    margin-left: 6px;
    color: var(--opc-text-muted);
    font-size: 12px;
}

/* 展开时信息栏三行（名称 20px + 发件人 14px + 收件人 14px = 48px），与 48px 头像等高 */
.opc-mail-msg-addr {
    overflow: hidden;
    color: var(--opc-text-muted);
    font-size: 12px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-mail-msg-snippet {
    overflow: hidden;
    color: var(--opc-text-muted);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 展开时显示发件人 / 收件人两行；折叠时显示一行摘要。时间始终在右侧，与名称行对齐 */
.opc-mail-msg[open] .opc-mail-msg-snippet,
.opc-mail-msg:not([open]) .opc-mail-msg-addr {
    display: none;
}

.opc-mail-msg-time {
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 20px;
    color: var(--opc-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.opc-mail-msg:not([open]) .opc-mail-msg-time {
    margin-top: 5px;
}

.opc-mail-msg-body {
    padding: 0 0 18px 60px;
    color: var(--opc-text);
    font-size: 14px;
    line-height: 1.7;
}

.opc-mail-reply {
    padding-top: 16px;
    border-top: 1px solid var(--opc-border);
}

/* 「回复」按钮：与正文同缩进；点开后隐藏按钮、显示带头像的回复框 */
.opc-mail-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 60px;
    list-style: none;
    cursor: pointer;
}

.opc-mail-reply-toggle::-webkit-details-marker {
    display: none;
}

.opc-mail-reply-toggle svg {
    width: 16px;
    height: 16px;
}

.opc-mail-reply[open] > .opc-mail-reply-toggle {
    display: none;
}

.opc-mail-reply-form {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.opc-mail-reply-main {
    flex: 1;
    min-width: 0;
}

.opc-mail-reply textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--opc-border);
    border-radius: 8px;
    background-color: var(--opc-surface);
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.opc-mail-reply textarea:focus {
    border-color: var(--opc-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--opc-accent-soft);
}

.opc-mail-reply-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .opc-mail-convo {
        padding: 4px 16px 16px;
    }

    .opc-mail-msg-age,
    .opc-mail-reply-form > .opc-mail-avatar {
        display: none;
    }

    .opc-mail-msg-body,
    .opc-mail-convo-head {
        padding-left: 0;
    }

    .opc-mail-reply-toggle {
        margin-left: 0;
    }
}


/* ===== 站内即时消息（IM，仿 Messenger，2026-10-06）=====
   顶栏「消息」面板与消息页左栏沿用通知行 .opc-notice-item；这里只加人物头像（首字，主色底白字，
   与顶栏头像一致）和消息页本身：一张白卡，左栏 340px 会话列表，右栏对话（气泡：对方浅灰、自己主色）。 */
.opc-notice-item-icon.opc-chat-avatar {
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-size: 22px;
    font-weight: 600;
}

.opc-notice-item.opc-chat-item.is-active {
    background-color: var(--opc-accent-soft);
}

.opc-chat-page {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    height: calc(100vh - 290px);
    min-height: 480px;
    overflow: hidden;
    background-color: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
    font-family: var(--opc-font);
}

.opc-chat-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--opc-border);
}

.opc-chat-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
}

.opc-chat-sidebar-title {
    margin: 0;
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.opc-chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 0 12px;
    height: 36px;
    border-radius: 18px;
    background-color: var(--opc-bg);
    color: var(--opc-text-muted);
    cursor: text;
}

.opc-chat-search svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.opc-chat-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 14px;
}

.opc-chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.opc-chat-list[hidden] {
    display: none;
}

.opc-chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.opc-chat-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--opc-border);
}

.opc-chat-head-avatar,
.opc-chat-intro-avatar,
.opc-chat-msg-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-weight: 600;
    line-height: 1;
}

.opc-chat-head-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.opc-chat-head-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opc-chat-head-name {
    overflow: hidden;
    color: var(--opc-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-chat-head-sub {
    overflow: hidden;
    color: var(--opc-text-muted);
    font-size: 12px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 窄屏时对话页左上角的「返回会话列表」，桌面隐藏 */
.opc-chat-head-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--opc-primary);
}

.opc-chat-head-back svg {
    width: 20px;
    height: 20px;
}

.opc-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 8px;
}

.opc-chat-stream {
    display: flex;
    flex-direction: column;
}

.opc-chat-older {
    display: block;
    margin: 0 auto 8px;
    padding: 4px 12px;
    border: none;
    border-radius: 14px;
    background-color: var(--opc-bg);
    color: var(--opc-primary);
    font-family: var(--opc-font);
    font-size: 12px;
    cursor: pointer;
}

.opc-chat-older:disabled {
    opacity: 0.6;
    cursor: default;
}

.opc-chat-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 0 16px;
    text-align: center;
}

.opc-chat-intro-avatar {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.opc-chat-intro-name {
    color: var(--opc-text);
    font-size: 16px;
    font-weight: 600;
}

.opc-chat-intro-text {
    color: var(--opc-text-muted);
    font-size: 13px;
}

.opc-chat-time {
    align-self: center;
    margin: 14px 0 6px;
    color: var(--opc-text-muted);
    font-size: 12px;
}

.opc-chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.opc-chat-msg.is-grouped {
    margin-top: 2px;
}

.opc-chat-msg.is-mine {
    justify-content: flex-end;
}

.opc-chat-msg-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* 同一组里非末条的对方消息不显示头像，但保留位置，让气泡左边对齐 */
.opc-chat-msg-avatar.is-hidden {
    visibility: hidden;
}

.opc-chat-bubble {
    max-width: 65%;
    padding: 8px 12px;
    border-radius: 18px;
    background-color: var(--opc-bg);
    color: var(--opc-text);
    font-size: 14px;
    line-height: 1.4286;
    overflow-wrap: anywhere;
}

.opc-chat-msg.is-mine .opc-chat-bubble {
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
}

.opc-chat-seen {
    margin-top: 4px;
    color: var(--opc-text-muted);
    font-size: 12px;
    text-align: right;
}

.opc-chat-seen[hidden] {
    display: none;
}

.opc-chat-compose {
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--opc-border);
}

.opc-chat-compose textarea {
    flex: 1;
    min-width: 0;
    height: 36px;
    max-height: 120px;
    margin: 0;
    padding: 8px 14px;
    resize: none;
    border: none;
    border-radius: 18px;
    outline: none;
    background-color: var(--opc-bg);
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 14px;
    line-height: 20px;
}

/* 提示文字只占一行（窄屏下超出部分省略），不撑破单行输入框 */
.opc-chat-compose textarea::placeholder {
    overflow: hidden;
    color: var(--opc-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-chat-send {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--opc-primary);
    cursor: pointer;
}

.opc-chat-send:hover {
    background-color: var(--opc-accent-soft);
}

.opc-chat-send:disabled {
    opacity: 0.5;
    cursor: default;
}

.opc-chat-send svg {
    width: 20px;
    height: 20px;
}

.opc-chat-notice {
    margin: 0;
    padding: 0 16px 12px;
    color: var(--opc-danger);
    font-size: 13px;
}

.opc-chat-notice[hidden] {
    display: none;
}

/* 不能再发时（已不在同一社区）的提示放在输入框的位置 */
.opc-chat-messages + .opc-chat-notice {
    padding-top: 12px;
    border-top: 1px solid var(--opc-border);
    color: var(--opc-text-muted);
    text-align: center;
}

.opc-chat-placeholder {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: var(--opc-text-muted);
    font-size: 14px;
    text-align: center;
}

.opc-chat-placeholder p {
    margin: 0;
}

.opc-chat-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-chat-placeholder-icon svg {
    width: 30px;
    height: 30px;
}

/* 窄屏：只显示一栏——选中会话时显示对话（左上角返回列表），否则显示会话列表 */
@media (max-width: 768px) {
    .opc-chat-page {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100vh - 290px);
        min-height: 360px;
    }

    .opc-chat-page.has-thread .opc-chat-sidebar,
    .opc-chat-page:not(.has-thread) .opc-chat-main {
        display: none;
    }

    .opc-chat-sidebar {
        border-right: none;
    }

    .opc-chat-head-back {
        display: flex;
    }

    .opc-chat-placeholder .opc-chat-head-back {
        align-self: flex-start;
    }

    .opc-chat-bubble {
        max-width: 80%;
    }
}


/* ===== 浮动聊天窗口（仿 Facebook，2026-10-06 用户要求）=====
   base.html 的 .opc-chat-dock：右下角并排的小窗口（328×455，最近打开的在最右），右侧一列是最小化后的
   48px 圆形头像和白色圆形「新消息」按钮。窗口里的对话复用上面消息页的 .opc-chat-* 气泡与输入框。 */
.opc-chat-dock-windows {
    position: fixed;
    right: 88px;
    bottom: 0;
    z-index: 700;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.opc-chat-dock-windows > * {
    pointer-events: auto;
}

.opc-chat-window {
    display: flex;
    flex-direction: column;
    width: 328px;
    height: 455px;
    overflow: hidden;
    background-color: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
    color: var(--opc-text);
    font-family: var(--opc-font);
    text-align: left;
}

.opc-chat-window-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid var(--opc-border);
}

.opc-chat-window-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.opc-chat-window-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.opc-chat-window-name {
    overflow: hidden;
    color: var(--opc-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-chat-window-sub {
    overflow: hidden;
    color: var(--opc-text-muted);
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-chat-window-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--opc-primary);
    cursor: pointer;
}

.opc-chat-window-btn:hover {
    background-color: var(--opc-accent-soft);
}

.opc-chat-window-btn svg {
    width: 18px;
    height: 18px;
}

.opc-chat-window .opc-chat-messages {
    padding: 8px 12px;
}

.opc-chat-window .opc-chat-intro {
    padding: 20px 0 8px;
}

.opc-chat-window .opc-chat-intro-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.opc-chat-window .opc-chat-bubble {
    max-width: 75%;
}

.opc-chat-window .opc-chat-compose {
    padding: 8px;
}

.opc-chat-window .opc-chat-notice {
    padding: 0 12px 8px;
}

.opc-chat-window .opc-chat-notice.is-closed {
    padding: 10px 12px;
    border-top: 1px solid var(--opc-border);
    color: var(--opc-text-muted);
    text-align: center;
}

/* 「新消息」窗口：发送给（找人） */
.opc-chat-window-to {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--opc-border);
    color: var(--opc-text-muted);
    font-size: 14px;
}

.opc-chat-window-to input {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 14px;
}

.opc-chat-window-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.opc-chat-window-person {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--opc-text);
    font-family: var(--opc-font);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.opc-chat-window-person:hover {
    background-color: var(--opc-bg);
}

.opc-chat-dock-side {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.opc-chat-dock-bubbles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opc-chat-dock-bubbles:empty {
    display: none;
}

.opc-chat-bubble-head {
    position: relative;
}

.opc-chat-bubble-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    font-family: var(--opc-font);
    font-size: 18px;
    font-weight: 600;
}

/* 头像右上角的关闭按钮：悬停时出现 */
.opc-chat-bubble-close {
    position: absolute;
    top: -4px;
    left: -4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--opc-border);
    border-radius: 50%;
    background-color: var(--opc-surface);
    color: var(--opc-text-muted);
    cursor: pointer;
}

.opc-chat-bubble-close svg {
    width: 10px;
    height: 10px;
}

.opc-chat-bubble-head:hover .opc-chat-bubble-close {
    display: flex;
}

/* 顶栏「消息」面板里的搜索联系人：与面板左右内边距对齐 */
.opc-chat-search.opc-chat-panel-search {
    margin: 0 8px 8px;
}

/* 登录后右下角归聊天用，vendored 的「回到顶部」按钮挪到左下角 */
body:has(.opc-chat-dock) .scroll-to-top {
    right: auto;
    left: 20px;
    bottom: 20px;
}

@media (max-width: 768px) {
    .opc-chat-dock-windows {
        right: 0;
        left: 0;
    }

    .opc-chat-window {
        width: 100%;
        height: 70vh;
    }

    /* 窄屏只开一个窗口，开着时右侧按钮列让位 */
    .opc-chat-dock:has(.opc-chat-window) .opc-chat-dock-side {
        display: none;
    }
}
/* 表头快速筛选框的清空按钮（static/js/opc-col-filter.js / opc_col_filter.js 插入）：
   输入框有内容时，右端显示一个圆圈 × 小图标，点击清空。按钮浮在输入框内右侧，
   输入框右内边距让出位置，文字不会压到图标下面。两个 app.css 数值一致。 */
.opc-col-filter-panel input.opc-col-filter-clearable {
    padding-right: 32px;
}

.opc-col-filter-panel input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.opc-col-filter-clear {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--opc-text-muted);
    cursor: pointer;
}

.opc-col-filter-clear:hover,
.opc-col-filter-clear:focus-visible {
    color: var(--opc-danger);
    background: transparent;
    border-color: transparent;
    filter: none;
}

.opc-col-filter-clear[hidden] {
    display: none;
}

/* 个人主页 /hy_info/（仿 Facebook 个人主页，用户要求 2026-10-07）：
   白色资料头（120px 圆头像 + 姓名 + 右侧按钮，底部标签栏），
   下方两栏白卡片：左「个人资料 / 联系方式 / 已加入社区」，右「积分 / 积分动态」。
   标签栏选中态沿用 Facebook 的 3px 主色下划线（标签指示条，不是卡片装饰条）。 */
.opc-me {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.opc-me-head,
.opc-me-card {
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: 12px;
}

.opc-me-head {
    padding: 24px 28px 0;
}

.opc-me-head-main {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--opc-border);
}

.opc-me-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    box-shadow: 0 0 0 4px var(--opc-surface), 0 0 0 5px var(--opc-border);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

/* 头像即数智分身入口（用户要求 2026-10-07，不单设按钮）：右下角铅笔圆钮，
   位置同 Facebook 头像上的相机按钮；悬停只加深圆钮，不做位移 */
a.opc-me-avatar,
a.opc-me-avatar:hover {
    color: var(--color-white, #fff);
    text-decoration: none;
}

.opc-me-avatar-edit {
    position: absolute;
    right: 0;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
    box-shadow: 0 0 0 3px var(--opc-surface);
    transition: background-color 0.15s ease;
}

.opc-me-avatar:hover .opc-me-avatar-edit,
.opc-me-avatar:focus-visible .opc-me-avatar-edit {
    background-color: var(--opc-accent-soft-hover);
}

.opc-me-avatar-edit svg {
    width: 16px;
    height: 16px;
}

.opc-me-id {
    flex: 1;
    min-width: 0;
}

.opc-main .opc-me-name {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-primary, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opc-me-count {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text-muted);
}

.opc-me-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--opc-text);
}

.opc-me-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.opc-me-fact svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--opc-text-muted);
}

.opc-me-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 8px;
    align-self: flex-start;
    margin-top: 8px;
}

.opc-me-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.opc-me-btn:hover {
    background-color: var(--opc-accent-soft-hover);
    color: var(--opc-primary);
}

.opc-me-btn.is-primary {
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
}

.opc-me-btn.is-primary:hover {
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
    filter: brightness(0.92);
}

.opc-me-btn svg {
    width: 16px;
    height: 16px;
}

.opc-me-tabs {
    display: flex;
    gap: 4px;
}

.opc-me-tab {
    position: relative;
    padding: 14px 14px 13px;
    color: var(--opc-text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.opc-me-tab:hover {
    color: var(--opc-text);
}

.opc-me-tab.is-active,
.opc-me-tab.is-active:hover {
    color: var(--opc-primary);
}

.opc-me-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--opc-primary);
}

.opc-me-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 16px;
    align-items: start;
}

.opc-me-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.opc-me-card {
    padding: 18px 20px;
}

.opc-me-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.opc-main .opc-me-card-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-primary, #000);
}

.opc-me-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--opc-link);
    text-decoration: none;
    white-space: nowrap;
}

.opc-me-card-link:hover {
    text-decoration: underline;
}

.opc-me-rows,
.opc-me-feed {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.opc-me-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.opc-me-row > svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--opc-text-muted);
}

.opc-me-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opc-me-row-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary, #000);
}

a.opc-me-row-value {
    text-decoration: none;
}

a.opc-me-row-value:hover {
    color: var(--opc-primary);
    text-decoration: underline;
}

.opc-me-row-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
    color: var(--opc-text-muted);
}

.opc-me-community-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--opc-accent-soft);
    color: var(--opc-primary);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.opc-me-empty {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 14px;
    color: var(--opc-text-muted);
}

.opc-me-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 0;
}

.opc-me-stat {
    padding: 12px 14px;
    border-radius: 8px;
    background-color: var(--opc-bg);
}

.opc-me-stat dt {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--opc-text-muted);
}

.opc-me-stat dd {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary, #000);
}

.opc-me-stat:first-child dd {
    color: var(--opc-primary);
}

.opc-me-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--opc-border);
}

.opc-me-feed-item:first-child {
    border-top: 0;
}

.opc-me-feed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #d1fae5;
    color: #065f46;
}

.opc-me-feed-icon.is-spend {
    background-color: #fee2e2;
    color: #991b1b;
}

.opc-me-feed-icon svg {
    width: 20px;
    height: 20px;
}

.opc-me-feed-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.opc-me-feed-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary, #000);
}

.opc-me-feed-time {
    font-size: 13px;
    line-height: 1.4;
    color: var(--opc-text-muted);
}

.opc-me-feed-amount {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: #065f46;
}

.opc-me-feed-amount.is-spend {
    color: #991b1b;
}

@media (max-width: 860px) {
    .opc-me-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .opc-me-head {
        padding: 20px 16px 0;
    }

    .opc-me-head-main {
        flex-direction: column;
        text-align: center;
    }

    .opc-main .opc-me-name {
        white-space: normal;
    }

    .opc-me-facts {
        justify-content: center;
    }

    .opc-me-actions {
        align-self: stretch;
        align-items: stretch;
        margin-top: 0;
    }

    .opc-me-btn {
        justify-content: center;
    }

    .opc-me-tabs {
        overflow-x: auto;
    }
}

/* 个人设置 /hy_settings/（仿 Facebook 设置页，用户要求 2026-10-07）：左侧分类卡片 + 右侧当前分类的表单卡片，
   白卡片沿用个人主页的 .opc-me-card / .opc-me-card-title。分类项 = 36px 圆图标 + 名称 + 一行说明，
   选中态 accent-soft 底色（同顶栏头像菜单）。表单沿用 .opc-form 的输入框；开关同 opcmanage 的
   .opc-switch（44×26，关 = 边框色，开 = 主色），两边数值一致。 */
.opc-settings {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.opc-settings-nav {
    padding: 18px 12px;
}

.opc-settings-nav .opc-me-card-title {
    padding: 0 8px;
}

.opc-settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.opc-settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    color: var(--color-text-primary, #000);
    text-decoration: none;
}

.opc-settings-nav-item:hover {
    background-color: var(--opc-bg);
    color: var(--color-text-primary, #000);
}

.opc-settings-nav-item.is-active,
.opc-settings-nav-item.is-active:hover {
    background-color: var(--opc-accent-soft);
}

.opc-settings-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--opc-bg);
    color: var(--opc-text);
}

.opc-settings-nav-item.is-active .opc-settings-nav-icon {
    background-color: var(--opc-primary);
    color: var(--color-white, #fff);
}

.opc-settings-nav-icon svg {
    width: 18px;
    height: 18px;
}

.opc-settings-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opc-settings-nav-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.opc-settings-nav-item.is-active .opc-settings-nav-label {
    color: var(--opc-primary);
}

.opc-settings-nav-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
    color: var(--opc-text-muted);
}

.opc-settings-panel {
    padding: 20px 24px 24px;
}

.opc-settings-panel .opc-alert {
    margin-bottom: 14px;
}

.opc-main .opc-settings-intro,
.opc-main .opc-settings-group-desc {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--opc-text-muted);
}

.opc-settings-form {
    max-width: 480px;
    margin-top: 18px;
}

.opc-settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opc-settings-actions {
    justify-content: flex-start;
    margin-top: 4px;
}

.opc-settings-actions button.opc-settings-btn-secondary,
.opc-settings-actions button.opc-settings-btn-secondary:hover {
    background: var(--opc-accent-soft);
    color: var(--opc-primary);
}

.opc-settings-actions button.opc-settings-btn-secondary:hover {
    background: var(--opc-accent-soft-hover);
}

.opc-settings-static {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 480px;
}

.opc-settings-divider + .opc-settings-static {
    margin-top: 0;
}

.opc-settings-static-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--opc-text);
}

.opc-settings-static-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #000);
}

.opc-settings-static-note {
    font-size: 12px;
    font-weight: 400;
    color: var(--opc-text-muted);
}

.opc-settings-divider {
    max-width: 480px;
    margin: 24px 0 20px;
    border-top: 1px solid var(--opc-border);
}

.opc-settings-group + .opc-settings-group {
    padding-top: 18px;
    border-top: 1px solid var(--opc-border);
}

.opc-main .opc-settings-group-title {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.4;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, #000);
}

.opc-settings-group-desc + .opc-settings-choice {
    margin-top: 10px;
}

.opc-settings-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.opc-settings-choice:hover {
    background-color: var(--opc-bg);
}

.opc-settings-choice input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--opc-primary);
}

.opc-settings-choice-text,
.opc-switch-field-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.opc-settings-choice-label,
.opc-switch-field-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #000);
}

.opc-settings-choice-desc,
.opc-switch-field-help {
    font-size: 12px;
    line-height: 1.5;
    color: var(--opc-text-muted);
}

.opc-switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    padding: 10px 12px;
}

.opc-switch-field-text {
    margin: 0;
    cursor: pointer;
}

input[type="checkbox"].opc-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 13px;
    background-color: var(--opc-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

input[type="checkbox"].opc-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--opc-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

input[type="checkbox"].opc-switch:checked {
    background-color: var(--opc-primary);
}

input[type="checkbox"].opc-switch:checked::before {
    transform: translateX(18px);
}

input[type="checkbox"].opc-switch:focus-visible {
    outline: 2px solid var(--opc-accent);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .opc-settings {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 社区成员 /hy_saler_list/（2026-10-07 按资源小卡片规范改版）：图标位放成员首字，
   底部右侧是行内图标按钮（同表格操作列的 .opc-table-icon-btn），左侧账号 */
.opc-member-card-avatar {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.opc-member-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* 窄屏表格只保留表头里的筛选触发器（见上方 @media 640px）；没有筛选列的表格（我的社区好友
   hy_saler_friend_list）表头就会剩一条空白，整行隐藏 */
@media (max-width: 640px) {
    .opc-table thead tr:not(:has(.opc-table-filter-th)) {
        display: none;
    }
}

/* 我的社区好友「联系方式」列：标签（手机： / 邮箱：）深色加粗右对齐，冒号上下对齐；
   值保持表格日期列的字号和颜色，左对齐 */
.opc-table-contact {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 4px;
    margin: 0;
}

.opc-table-contact dt {
    color: color-mix(in srgb, var(--opc-text) 45%, var(--opc-text-muted)); /* 比正文深灰浅一点，介于正文色和值的浅灰之间 */
    font-weight: 600;
    text-align: right;
}

.opc-table-contact dd {
    margin: 0;
    text-align: left;
}

/* 社区成员卡片 /hy_saler_list/ 的联系方式沿用上面的 .opc-table-contact（标签右对齐、冒号对齐、同一配色）。
   放在资源小卡片固定两行高的描述区里：每行 13px / 1.55，值单行省略（完整内容由 opc-tip 显示），卡片仍等高 */
.opc-resource-card .opc-site-card-detail .opc-table-contact {
    grid-template-columns: auto minmax(0, 1fr);
    font-size: 13px;
    line-height: 1.55;
    color: var(--opc-text-muted);
}

.opc-resource-card .opc-site-card-detail .opc-table-contact dd {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 社区成员卡片：联系方式和关系标签与上面的姓名 / 单位左对齐，左侧留出头像那一列的空白
   （44px 头像 + 12px 间距，见 .opc-resource-page .opc-resource-card-head）；分隔线下的页脚不缩进 */
.opc-resource-page .opc-site-card.opc-member-card .opc-site-card-detail,
.opc-resource-page .opc-site-card.opc-member-card .opc-site-card-tags {
    margin-left: calc(44px + 12px);
}

/* 个人设置「注销账号」（2026-10-07）：分类项与其它分类同一个盒子，只把文字 / 选中态图标换成危险色；
   正文用一块浅红提示框列出会被删除的内容，确认勾选框 + 红色提交按钮（悬停同主按钮的 brightness 变暗） */
.opc-settings-nav-item.is-danger .opc-settings-nav-label,
.opc-settings-nav-item.is-danger.is-active .opc-settings-nav-label {
    color: var(--opc-danger);
}

.opc-settings-nav-item.is-danger.is-active,
.opc-settings-nav-item.is-danger.is-active:hover {
    background-color: var(--opc-danger-soft);
}

.opc-settings-nav-item.is-danger.is-active .opc-settings-nav-icon {
    background-color: var(--opc-danger);
}

.opc-settings-danger {
    max-width: 480px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--opc-danger-border);
    border-radius: 8px;
    background-color: var(--opc-danger-soft);
}

.opc-settings-danger-list {
    margin: 8px 0 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 13px;
    line-height: 1.7;
    color: var(--opc-text);
}

.opc-settings-danger-list strong {
    color: var(--opc-danger);
}

.opc-settings-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--opc-text);
    cursor: pointer;
}

.opc-settings-confirm input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--opc-danger);
}

.opc-settings-actions button.opc-settings-btn-danger,
.opc-settings-actions button.opc-settings-btn-danger:hover {
    background: var(--opc-danger);
}

.opc-settings-actions button.opc-settings-btn-danger:hover {
    filter: brightness(0.92);
}

/* ---- 富文本编辑器（js/opc_rich_editor.js），版式参考 GitHub 评论框（用户确认的标准，2026-10-10，见 CLAUDE.md §4.6）----
   顶部一行：左边「编写 / 预览」标签，右边格式按钮；编辑区聚焦时整个框蓝色描边（与输入框 focus 同色）；可选底部附件条。
   三个项目（opcmanage / webhuiyuan 的 app.css、outreach 的 oc.css）各有一份相同的规则，改动时一起改。 */
.opc-editor {
    margin: 6px 0 14px;
    text-align: left;
    background: var(--opc-surface);
    border: 1px solid var(--opc-border);
    border-radius: var(--opc-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.opc-editor:has(.ql-editor:focus),
.opc-editor.is-dragging {
    border-color: var(--opc-primary);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}

.opc-editor.is-dragging {
    background: var(--opc-accent-soft);
}

.opc-editor [hidden] {
    display: none !important;
}

.opc-editor-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 0;
    background: var(--opc-bg);
    border-bottom: 1px solid var(--opc-border);
    border-radius: var(--opc-radius) var(--opc-radius) 0 0;
}

.opc-editor-tabs {
    display: flex;
    gap: 2px;
}

/* 标签按钮：复位全局 button 样式，当前标签是白底、与编辑区连成一体 */
button.opc-editor-tab {
    margin: 0 0 -1px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--opc-text-muted);
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
    cursor: pointer;
}

button.opc-editor-tab:hover {
    color: var(--opc-text);
    background: none;
    border-color: transparent;
    filter: none;
}

button.opc-editor-tab.is-active,
button.opc-editor-tab.is-active:hover {
    color: var(--opc-text);
    background: var(--opc-surface);
    border-color: var(--opc-border);
}

.opc-editor-toolbar.ql-toolbar.ql-snow {
    padding: 0 0 6px;
    border: none;
    font-family: inherit;
}

.opc-editor-toolbar.ql-toolbar.ql-snow .ql-formats {
    margin-right: 10px;
}

.opc-editor-toolbar.ql-toolbar.ql-snow .ql-formats:last-child {
    margin-right: 0;
}

/* 标题下拉的文字：Quill 自带的是英文（Normal / Heading 2），中文界面换成中文 */
.opc-editor[data-lang="zh"] .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.opc-editor[data-lang="zh"] .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "正文";
}

.opc-editor[data-lang="zh"] .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.opc-editor[data-lang="zh"] .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "二级标题";
}

.opc-editor[data-lang="zh"] .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.opc-editor[data-lang="zh"] .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "三级标题";
}

.opc-editor-body .ql-container.ql-snow {
    height: auto;
    border: none;
    font-family: inherit;
    font-size: 14px;
}

.opc-editor-body .ql-editor {
    min-height: 240px;
    padding: 14px 16px;
    line-height: 1.7;
}

.opc-editor-body .ql-editor.ql-blank::before {
    left: 16px;
    right: 16px;
    font-style: normal;
    color: var(--opc-text-muted);
}

/* 编辑区和预览里的段落一律是普通段落（opcmanage 的全局 p 是卡片样式、webhuiyuan 的 .opc-form p 是竖排 flex，都要复位） */
.opc-editor-body .ql-editor p,
.opc-editor-preview p {
    display: block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit !important;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.opc-editor-preview p {
    margin: 0 0 1em;
}

.opc-editor-body blockquote {
    margin: 0 0 1em;
    padding-left: 12px;
    color: var(--opc-text-muted);
    border-left: 3px solid var(--opc-border);
}

.opc-editor-preview {
    min-height: 240px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.opc-editor-preview img {
    max-width: 100%;
}

.opc-editor-preview-subject {
    margin-bottom: 12px;
    font-weight: 600;
}

.opc-editor-preview p.opc-editor-empty {
    color: var(--opc-text-muted) !important;
}

.opc-editor-preview p.opc-editor-note.is-error {
    color: var(--opc-danger, #b91c1c) !important;
}

.opc-editor-preview p.opc-editor-note.is-warning {
    color: #b45309 !important;
}

/* 底部附件条：左边“粘贴、拖放或点击添加附件”，右边放附加选项（如附件方式） */
.opc-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--opc-text-muted);
    border-top: 1px dashed var(--opc-border);
}

.opc-editor-attach {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
}

.opc-editor-attach:hover {
    color: var(--opc-primary);
}

.opc-editor-attach input[type="file"] {
    display: none;
}

.opc-editor-attach-list {
    overflow: hidden;
    color: var(--opc-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}