/* rebang 主题应用页补充样式。
   首页样式完全由 rebang.css（真实站编译产物）承担，此文件只放：
   1) 非首页页面（详情/搜索/认证/个人中心/错误页等）的通用排版；
   2) 对真实站样式的少量修正/兜底。
   颜色一律使用 rebang.css :root 暴露的 CSS 变量（--primary/--muted/--border...），
   深色模式由 html.dark 类自动切换。 */

/* 2026-08-30：去掉衬线字体——--font-serif 原本用于 logo/弹窗标题/日报/排名数字，
   改为与 --font-sans 一致，全站统一系统无衬线（ui-sans-serif/system-ui）。 */
:root {
    --font-serif: var(--font-sans);
}

/* 2026-08-30 性能：信息流/产品卡片离屏时跳过渲染（content-visibility: auto），
   浏览器只渲染视口附近的卡片，长列表首屏渲染大幅提速。
   contain-intrinsic-size 预留高度避免滚动跳变（auto=记住已渲染尺寸）。 */
[data-testid="item-layout-1001"],
[data-testid="product-card"] {
    content-visibility: auto;
    contain-intrinsic-size: auto 160px;
}

/* 深色模式与 :root 由 rebang.css 的 .dark 类驱动。
   页面背景遵循真实站：body 为 bg-card（白），main 内容区为 bg-background（灰），
   因此在 base.html 上通过 Tailwind 类控制，这里不再覆盖 html/body 背景。 */

/* 投票按钮激活态（main.js 切换 .active 时使用） */
.vote-btn.active {
    color: var(--primary);
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}

/* 热度火苗（卡片来源行）：填充红 = 已达热度档位，空心灰 = 未达。
   link_card.html 最多渲染 5 个，filled/hollow 各一套 class */
.heat-flame {
    flex-shrink: 0;
}
.heat-flame--filled {
    color: #ef4444;
}
.heat-flame--hollow {
    color: var(--muted-foreground);
    opacity: 0.5;
}

/* 首页卡片圆角收小（仅首页 body.home-page 生效）：
   rebang 原值 feed=rounded-lg(10px)、侧栏/标签条=rounded-md(8px)，统一收小 */
.home-page .rounded-lg {
    border-radius: calc(var(--radius) * 0.5); /* 10px -> 5px */
}
.home-page .rounded-md {
    border-radius: calc(var(--radius) * 0.4); /* 8px -> 4px */
}
.home-page .rounded-xl {
    border-radius: calc(var(--radius) * 0.7); /* 14px -> 7px */
}

/* ============================================================
   真实站 CSS 缺失类的兜底
   rebang.css 是 Tailwind v4 编译产物：hover 变体只编译出 group-hover
   形式，普通 hover:xxx / focus-visible 类缺失；个别间距/比例类也未生成。
   这里补充新页面与首页用到的几个（与 Tailwind v4 行为一致）。
   ============================================================ */
.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-muted-foreground:hover { color: var(--muted-foreground); }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:bg-muted:hover { background-color: var(--muted); }
.hover\:bg-accent:hover { background-color: var(--accent); }
.hover\:bg-card:hover { background-color: var(--card); }
.hover\:bg-primary\/80:hover { background-color: color-mix(in oklab, var(--primary) 80%, transparent); }
.hover\:bg-secondary\/80:hover { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); }
.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }

.py-12 { padding-block: 3rem; }
.py-16 { padding-block: 4rem; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }

/* ============ 非首页页面的通用容器 ============ */
/* 详情页 / 搜索页 / 标签页 / 个人中心 内容宽度与首页一致；
   上下左右留白由 base.html 的 main（px-4 py-5 sm:px-6）统一提供 */
.app-page {
    width: 100%;
    max-width: var(--site-content-max-width);
    margin: 0 auto;
}

.app-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--card);
    box-shadow: var(--shadow-xs, none);
    padding: 1rem;
}

/* 空状态 / 提示文本 */
.app-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted-foreground);
}

/* 链接卡片列表容器：去掉最后一张卡片的下边框（用于搜索/标签/个人中心） */
.app-link-list > article:last-child {
    border-bottom: 0;
}

/* ============ 表单 ============ */
/* 注意：Django 表单 widget 硬编码了 form-control 类（apps 下各 forms.py），
   这里将其映射为 app-input 样式，二者等价可互换 */
.app-input,
.form-control {
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md, 0.5rem) - 2px);
    background-color: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.app-input:focus,
.form-control:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}
textarea.app-input,
textarea.form-control {
    height: auto;
    min-height: 6rem;
    padding: 0.6rem 0.75rem;
}

.app-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    border-radius: 9999px;
    padding: 0 1.25rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, transform 0.1s;
}
.app-btn-primary:hover {
    background-color: color-mix(in oklab, var(--primary) 80%, transparent);
}
.app-btn-primary:active {
    transform: translateY(1px);
}
/* 签到已签/请求中：禁用态弱化（增长四件套 #2） */
.app-btn-primary:disabled {
    cursor: default;
    opacity: 0.55;
}
/* 大号主按钮（详情页「前往原文」，需求 6） */
.app-btn-primary--lg {
    height: 2.75rem;
    padding: 0 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

/* 描边按钮：透明底 + 主色描边（详情页「前往原文」正文末尾，需求 6 轻量版） */
.app-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    border: 1px solid var(--primary);
    border-radius: 9999px;
    padding: 0 1.25rem;
    background-color: transparent;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.app-btn-outline:hover {
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}
.app-btn-outline:active {
    transform: translateY(1px);
}
/* 大号描边按钮（详情页「前往原文」） */
.app-btn-outline--lg {
    height: 2.75rem;
    padding: 0 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

/* 详情页「前往原文」主 CTA（2026-08-23 设计重构）：实心主色 + 尾部外链图标，
   hover 图标右移微动暗示离站跳转；移动端整行触达（thumb 友好），桌面自动收窄 */
.app-btn-go {
    width: 100%;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 6px 16px -8px rgb(0 0 0 / 0.16);
}
.app-btn-go__icon {
    transition: transform 0.15s;
}
.app-btn-go:hover {
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 12px 24px -10px color-mix(in oklab, var(--primary) 40%, transparent);
}
.app-btn-go:hover .app-btn-go__icon {
    transform: translateX(2px);
}
.app-btn-go:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--primary) 45%, transparent);
    outline-offset: 2px;
}
@media (min-width: 40rem) {
    .app-btn-go {
        width: auto;
    }
}

.app-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: 9999px;
    padding: 0 1.25rem;
    background-color: transparent;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.app-btn-ghost:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.app-btn-ghost:active {
    transform: translateY(1px);
}

.app-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: 9999px;
    padding: 0 1.25rem;
    background-color: var(--destructive, #dc2626);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.app-btn-danger:hover {
    opacity: 0.85;
}

.app-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
}
.app-form-group { margin-bottom: 1rem; }
.app-form-error {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--destructive, #dc2626);
}
.app-form-help {
    display: block;
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
/* 封面图上传（2026-08-23）：原生 file input 视觉隐藏，入口按钮放右侧预览栏 */
.app-cover-upload { display: none; }
.app-form-error.app-cover-error { margin: 0 0 0.5rem; }
.app-form-rules {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}
.app-form-rules a,
.app-rules-inline {
    color: var(--primary);
}
.app-form-rules a:hover,
.app-rules-inline:hover {
    text-decoration: underline;
}

/* ============================================================
   分享 / 编辑链接页
   ============================================================ */
.app-share-card {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.75rem);
    background-color: var(--card);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 28px -14px rgb(0 0 0 / 0.14);
    padding: 2rem 1.75rem 1.75rem;
}
.app-share-card .app-form-title { margin: 0; font-size: 1.25rem; }
.app-share-card .app-form-sub { margin: 0.25rem 0 0; }
.app-share-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.75rem;
}
.app-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.875rem;
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 16%, transparent);
    color: var(--primary);
}
.app-share-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* 嵌入模式（2026-08-23，首页发布弹窗 iframe 内加载 /s/new?embed=1）：
   去掉分享卡外框与阴影，直接铺满 iframe，白底（用户要求弹窗内背景白色，非站点灰底）；
   与 embed_base.html 的 body.app-embed-body（bg-card）配合 */
body.app-embed-body { background: var(--card); }
body.app-embed-body main { padding: 0; }
body.app-embed-body .app-share-card {
    max-width: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
body.app-embed-body .app-share-header { margin-bottom: 1.25rem; }

/* 输入框左侧图标前缀 */
.app-input-affix {
    position: relative;
}
.app-input-affix .form-control,
.app-input-affix .app-input {
    padding-left: 2.25rem;
}
.app-input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
}

/* 封面预览 */
.app-preview-box {
    position: relative;
    min-height: 8rem;
    overflow: hidden;
    border: 1px dashed color-mix(in oklab, var(--border) 55%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in oklab, var(--background) 50%, transparent);
}
.app-preview-empty {
    display: flex;
    min-height: 7rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    text-align: center;
}
.app-preview-empty svg {
    width: 1.5rem;
    height: 1.5rem;
}
.app-preview-img {
    display: block;
    width: 100%;
    max-height: 14rem;
    object-fit: cover;
}
.app-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in oklab, var(--background) 88%, transparent);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    text-align: center;
    padding: 0 1rem;
}

/* 分享页双栏：左表单 + 右实时预览（2026-08-22） */
.app-share-card--split {
    max-width: 62rem;
}
.app-share-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 52rem) {
    .app-share-grid {
        grid-template-columns: minmax(0, 1fr) 21rem;
    }
}

/* 右侧预览面板 */
.app-share-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}
.app-share-preview__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.app-cover-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.app-cover-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.app-cover-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.app-cover-btn--primary {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.app-share-preview__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
}
.app-share-preview__hint {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.app-preview-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background-color: var(--card);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.app-preview-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: color-mix(in oklab, var(--muted) 55%, transparent);
}
.app-preview-card__media .app-preview-empty {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
}
.app-preview-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-preview-card__body {
    padding: 0.875rem 1rem 1rem;
}
.app-preview-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--foreground);
}
.app-preview-card__title.is-placeholder {
    color: var(--muted-foreground);
    font-weight: 600;
}
.app-preview-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
}

/* 芯片式标签输入（发布页：空格/回车自动分隔，2026-08-22） */
.app-tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md, 0.5rem) - 2px);
    background-color: var(--background);
    font-size: 0.875rem;
    color: var(--foreground);
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.app-tag-box:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}
.app-tag-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--muted-foreground);
}
.app-tag-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.app-tag-chips[hidden] { display: none; }
.app-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.app-tag-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    opacity: 0.55;
    font-size: 1.05rem;
    line-height: 1;
}
.app-tag-chip__remove:hover { opacity: 1; }
.app-tag-input__field {
    flex: 1;
    min-width: 7rem;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0.125rem 0;
    font-size: 0.875rem;
    color: var(--foreground);
}
.app-tag-input__field::placeholder { color: var(--muted-foreground); }

/* 自动打标提示（标题/描述就绪后自动生成标签） */
.app-tag-suggest {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: color-mix(in oklab, var(--primary) 85%, transparent);
}
.app-tag-suggest[hidden] { display: none; }
.app-tag-suggest svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
.app-tag-suggest__names { font-weight: 600; }

/* URL 抓取状态提示（发布页：输入链接后自动抓取标题/描述/封面时提醒） */
.app-fetch-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: color-mix(in oklab, var(--primary) 85%, transparent);
}
.app-fetch-status[hidden] { display: none; }
.app-fetch-status.is-error {
    color: var(--destructive, #dc2626);
}
.app-fetch-spinner {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: app-spin 0.7s linear infinite;
}
.app-fetch-status.is-error .app-fetch-spinner { display: none; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* 认证 / 表单卡片：居中窄卡 */
.app-form-card {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--card);
    box-shadow: var(--shadow-xs, none);
    padding: 1.5rem;
}
.app-form-title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--foreground);
}
.app-form-sub {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.app-form-switch {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.app-form-switch a {
    color: var(--primary);
    font-weight: 500;
}
.app-form-switch a:hover { text-decoration: underline; }

/* ============ 消息提示 ============ */
/* 表单内联错误（users/login.html 等）：跟随表单原地展示，不进 toast */
.app-message {
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--card);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--foreground);
}
/* 语义色变体（real site 无 --success，用固定色 + color-mix 兼容深色） */
.app-message--success {
    border-color: color-mix(in oklab, #22c55e 35%, transparent);
    background-color: color-mix(in oklab, #22c55e 8%, transparent);
}
.app-message--error,
.app-message--danger {
    border-color: color-mix(in oklab, var(--destructive, #dc2626) 35%, transparent);
    background-color: color-mix(in oklab, var(--destructive, #dc2626) 8%, transparent);
}
.app-message--warning {
    border-color: color-mix(in oklab, var(--warning, #eab308) 35%, transparent);
    background-color: color-mix(in oklab, var(--warning, #eab308) 8%, transparent);
}
.app-message--info {
    border-color: color-mix(in oklab, var(--primary) 35%, transparent);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}

/* 弹窗提示 Toast（includes/messages.html）：屏幕中央 fixed 弹出，自动消失 + 手动关闭 */
.app-toasts {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70; /* 高于弹窗(60)，低于一切页面内容之上 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none; /* 容器本身不挡点击，仅各 toast 可交互 */
}
.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--card);
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    color: var(--foreground);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
    animation: app-toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-toast.is-leaving { animation: app-toast-out 0.25s ease both; }
.app-toast-close {
    flex-shrink: 0;
    padding: 0 0.125rem;
    font-size: 1.125rem;
    line-height: 1;
    color: currentColor;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s;
}
.app-toast-close:hover { opacity: 1; }
/* 语义色变体（复用 app-message 的固定色 + color-mix，兼容深色） */
.app-toast--success {
    border-color: color-mix(in oklab, #22c55e 35%, transparent);
    background-color: color-mix(in oklab, #22c55e 8%, transparent);
}
.app-toast--error,
.app-toast--danger {
    border-color: color-mix(in oklab, var(--destructive, #dc2626) 35%, transparent);
    background-color: color-mix(in oklab, var(--destructive, #dc2626) 8%, transparent);
}
.app-toast--warning {
    border-color: color-mix(in oklab, var(--warning, #eab308) 35%, transparent);
    background-color: color-mix(in oklab, var(--warning, #eab308) 8%, transparent);
}
.app-toast--info {
    border-color: color-mix(in oklab, var(--primary) 35%, transparent);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}
@keyframes app-toast-in {
    from { opacity: 0; transform: translateX(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes app-toast-out {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateX(24px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
    .app-toast,
    .app-toast.is-leaving { animation: none; }
}

/* ============ 分页（includes/pagination.html） ============ */
.app-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 0 0.25rem;
}
.app-page-btn {
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: var(--card);
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: background-color 0.15s, color 0.15s;
}
.app-page-btn:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.app-page-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.app-page-info {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* ============ 标签 / 标签云 ============ */
.app-tag-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: var(--background);
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.app-tag-chip:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    color: var(--primary);
}

.app-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}
.app-tag-cloud a {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: var(--card);
    padding: 0.375rem 0.875rem;
    color: var(--muted-foreground);
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.app-tag-cloud a:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    color: var(--primary);
}
/* 标签云字号权重：模板用 widthratio 把链接数归一为 1-5 档输出 data-weight */
.app-tag-cloud a[data-weight='1'] { font-size: 0.8125rem; }
.app-tag-cloud a[data-weight='2'] { font-size: 0.9375rem; }
.app-tag-cloud a[data-weight='3'] { font-size: 1.0625rem; }
.app-tag-cloud a[data-weight='4'] { font-size: 1.1875rem; }
.app-tag-cloud a[data-weight='5'] { font-size: 1.3125rem; }
/* P1.1.2 系统标签徽标：后台维护的标签在标签云中带小徽标，区分用户自定义标签 */
.app-tag-system {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.625rem;
    line-height: 1.2;
    vertical-align: middle;
}

/* ============ 评论列表 ============ */
.app-comment-list { display: flex; flex-direction: column; }
.app-comment {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}
.app-comment:last-child { border-bottom: 0; }
.app-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.app-comment-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}
.app-comment-user:hover { color: var(--primary); }
.app-comment-time { font-size: 0.75rem; color: var(--muted-foreground); }
.app-comment-content {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--foreground);
}
/* 2026-08-16 软删占位：顶层评论含回复被删后，以灰色占位保留讨论上下文 */
.app-comment-content.app-comment-deleted {
    color: var(--muted-foreground);
    font-style: italic;
}
.app-comment-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    font-size: 0.8125rem;
}
.app-comment-delete {
    color: var(--muted-foreground);
    transition: color 0.15s;
}
.app-comment-delete:hover { color: var(--destructive, #dc2626); }

/* 二级回复（楼中楼仅一层） */
.app-comment-replies {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--border);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--muted);
}
.app-comment--reply { border-bottom: 0; padding: 0.5rem 0; }
.app-comment--reply:last-child { padding-bottom: 0; }
.app-comment-reply {
    color: var(--muted-foreground);
    transition: color 0.15s;
}
.app-comment-reply:hover { color: var(--primary); }
.app-comment-replyform { display: none; }
.app-comment-replyform.open { display: block; }
.app-comment-at {
    color: var(--primary);
    font-weight: 500;
    margin-right: 0.25rem;
}

/* ============ 举报入口（<details> 折叠表单） ============ */
.app-report { position: relative; display: inline-flex; }
.app-report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    cursor: pointer;
    white-space: nowrap;
    list-style: none; /* 去掉 summary 默认三角箭头 */
    transition: color 0.15s;
}
/* 边角弱化举报（内容页右上角，需求 8）：比互动栏里的更小更淡 */
.app-report--corner .app-report-toggle {
    font-size: 0.75rem;
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}
.app-report--corner .app-report-toggle:hover,
.app-report--corner.app-report[open] .app-report-toggle {
    color: var(--primary);
}
.app-report-toggle::-webkit-details-marker { display: none; }
.app-report-toggle:hover,
.app-report[open] .app-report-toggle { color: var(--primary); }
.app-report-form {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 30;
    width: 16rem;
    max-width: 80vw;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    white-space: normal;
    text-align: left;
}
.app-report-form label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.app-report-form select,
.app-report-form textarea {
    width: 100%;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background-color: var(--background);
    color: var(--foreground);
}
.app-report-form textarea { resize: vertical; }
.app-report-form .app-btn-primary { align-self: flex-end; }

/* ============ 信息流互动操作栏（需求 13：赞/评论放大、收藏弱化图标） ============ */
.app-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s;
}
.app-reaction svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.app-reaction:hover {
    color: var(--foreground);
    background-color: var(--muted);
}
.app-reaction.active {
    color: var(--primary);
}
/* 需求 3 信息流卡片评论数高亮：评论是讨论入口，数字用主色加粗，
   区别于赞/收藏的弱化计数（vote-count），引导点击进评论区 */
.app-reaction .app-reaction-count {
    color: var(--primary);
    font-weight: 700;
}
.app-reaction--fav {
    font-size: 0.8125rem;
    font-weight: 400;
    opacity: 0.72;
}
.app-reaction--fav:hover {
    opacity: 1;
}

/* ============ 评论点赞（需求 7） ============ */
.app-comment-vote {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    transition: color 0.15s, background-color 0.15s;
}
.app-comment-vote svg {
    width: 0.875rem;
    height: 0.875rem;
}
.app-comment-vote:hover {
    color: var(--foreground);
    background-color: var(--muted);
}
.app-comment-vote.is-voted {
    color: var(--primary);
}

/* ============ 头像 ============ */
.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 700;
    user-select: none;
}
.app-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-avatar--sm { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
.app-avatar--md { width: 2rem; height: 2rem; font-size: 0.875rem; }
.app-avatar--lg { width: 3rem; height: 3rem; font-size: 1.125rem; }
.app-avatar--xl { width: 5rem; height: 5rem; font-size: 2rem; }

/* ============ 资料编辑 · 头像区 ============ */
.app-avatar-edit {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.app-avatar-edit__preview {
    flex-shrink: 0;
}
.app-avatar-edit__fields {
    min-width: 0;
    flex: 1;
}
.app-avatar-edit__fields input[type="file"] {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
}
.app-avatar-edit__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    cursor: pointer;
}

/* ============ 头像库选择（2026-08-30） ============ */
.app-avatar-lib__title {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.app-avatar-lib__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.5rem;
    max-width: 24rem;
}
.app-avatar-lib__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid transparent;
    background-color: var(--muted);
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.app-avatar-lib__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-avatar-lib__item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--primary) 50%, transparent);
}
.app-avatar-lib__item.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}

/* ============ 详情页 ============ */
/* 原链接地址框 */
.app-url-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--background);
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    word-break: break-all;
}
.app-url-box a {
    flex-shrink: 0;
    color: var(--primary);
    font-weight: 500;
}
.app-url-box a:hover { text-decoration: underline; }

/* 详情页作者信息 */
.app-meta-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* 详情页「本文来自」来源高亮条（需求 17） */
.app-source-line {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.15s, color 0.15s;
}
.app-source-line:hover {
    background-color: color-mix(in oklab, var(--muted) 60%, var(--primary) 12%);
    color: var(--primary);
}
.app-source-line .app-source-line__label {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--muted-foreground);
}

/* ============ 错误页 ============ */
.app-error-code {
    margin: 0;
    font-size: clamp(4rem, 15vw, 7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--foreground);
}

/* ============================================================
   广告位容器（P2 商业化）：占位样式。
   容器内是后台配置的自定义 HTML（AdSlot），仅兜底外边距与溢出，
   具体外观由后台填写的代码决定。
   2026-08-14：未配置时 ad_slot 返回空串 → 空 div 仍带 margin-block:1rem
   会在信息流每 5 条留下 32px 空档（块高度不一致）——:empty 直接 display:none，
   彻底不占位。广告真实有内容时 :empty 不命中，正常显示。
   ============================================================ */
.shiqu-ad {
    margin-block: 1rem;
    overflow: hidden;
}
.shiqu-ad:empty {
    display: none;
}
.shiqu-ad--detail {
    margin-top: 1.5rem;
}

/* 需求 3/13 详情页互动栏「评论」高亮胶囊：评论数是高频引导（对齐卡片 .app-reaction），
   主色描边 + 浅色底 + 加粗数字，明显区别于普通胶囊；锚到评论区。 */
.app-comment-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    transition: background-color 0.15s ease;
}
.app-comment-pill:hover {
    background-color: color-mix(in oklab, var(--primary) 18%, transparent);
}
.app-comment-pill .vote-count {
    color: var(--primary);
}

/* 需求 21 等级徽章：用户名旁 Lv.X（作者对象已 select_related，成本有界；
   feed 批量页若成瓶颈，后续性能批可改用注解预计算，见 users/models.py::level） */
.app-level-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary);
}

/* ============================================================
   首页横幅（home-banner）：编辑刊头式 Slogan
   概念：「世界很吵」→ 噪点粒子；「这里很【识趣】」→ 安静衬线大字。
   左侧品牌蓝块延用 favicon 的「趣」字视觉，右侧内容交错入场。
   颜色一律用 rebang.css 变量，深浅色模式自动切换。
   ============================================================ */
.shiqu-banner {
    position: relative;
    display: flex;
    min-height: 6.25rem;
    overflow: hidden;
    isolation: isolate;
}
/* ---- 右侧内容：浅色底 + 品牌蓝光晕 ---- */
.shiqu-banner-body {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.875rem 1.25rem;
    z-index: 1;
}
.shiqu-banner-glow {
    position: absolute;
    width: 9rem;
    height: 9rem;
    top: -3rem;
    right: -2.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--primary) 17%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: shiqu-banner-float 9s ease-in-out infinite;
}
/* ---- chip / slogan / 描述 ---- */
/* 顶部行：chip 左、发布分享 CTA 右（压矮横幅，slogan 独占一行） */
.shiqu-banner-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}
.shiqu-banner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary);
}
.shiqu-banner-chip svg { flex-shrink: 0; }
/* 右侧「社区规范」链接：右对齐，悬停转品牌色 */
.shiqu-banner-rules {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s;
}
.shiqu-banner-rules:hover { color: var(--primary); }
.shiqu-banner-rules svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
/* 分享输入行：链接输入框 + 发布按钮（2026-08-23 输入/按钮放大，与 slogan 融合一体） */
.shiqu-banner-compose {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
    margin-top: 0.5rem;
}
.shiqu-banner-input {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md, 0.5rem) * 0.75);
    background-color: var(--background);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.shiqu-banner-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.shiqu-banner-input svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--muted-foreground);
}
.shiqu-banner-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--foreground);
}
.shiqu-banner-input input::placeholder { color: var(--muted-foreground); }
.shiqu-banner-publish {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.75rem;
    padding: 0 1.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--primary) 35%, transparent);
    transition: background-color 0.18s, box-shadow 0.18s, transform 0.18s, opacity 0.18s;
    cursor: pointer;
}
.shiqu-banner-publish svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.shiqu-banner-publish:hover {
    background-color: color-mix(in oklab, var(--primary) 82%, transparent);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--primary) 42%, transparent);
    transform: translateY(-1px);
}
.shiqu-banner-publish:active { transform: translateY(0); }
.shiqu-banner-publish:disabled { opacity: 0.65; cursor: wait; transform: none; }
.shiqu-banner-tip {
    width: 100%;
    margin: 0.375rem 0 0;
    text-align: left;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.shiqu-banner-tip-error { color: var(--destructive); }
@media (min-width: 48rem) {
    .shiqu-banner-body { padding: 1rem 1.5rem; }
}
/* 移动端居中（无品牌块时），输入行保持全宽 */
@media (max-width: 47.99rem) {
    .shiqu-banner-body { align-items: center; }
    .shiqu-banner-top { justify-content: center; }
    .shiqu-banner-compose { width: 100%; }
    .shiqu-banner-input { text-align: left; }
    .shiqu-banner-tip { text-align: center; }
}
/* ---- 氛围动效（光晕漂浮） ---- */
@keyframes shiqu-banner-float {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6px, 5px); }
}
@media (prefers-reduced-motion: reduce) {
    .shiqu-banner-glow {
        animation: none;
    }
}

/* ============================================================
   产品推荐横向滚动曝光区（home-product-scroll，第三模块）
   首页顶部专属曝光：纯 CSS 横向滚动（overflow-x:auto），零外部依赖。
   卡片固定宽、封面 16:10、超出一行横向滑动；滚动条隐藏但保留滑动能力。
   ============================================================ */
.shiqu-product-strip {
    overflow: hidden;
    padding: 0.75rem 1rem 0.875rem;
}
.shiqu-product-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.625rem;
}
.shiqu-product-strip-title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
}
.shiqu-product-strip-title svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}
.shiqu-product-strip-sub {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--muted-foreground);
}
.shiqu-product-strip-head-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
/* 左右滚动按钮：仅在有溢出时显示（JS 控制 hidden），禁用态降透明 */
.shiqu-product-strip-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.shiqu-product-strip-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.shiqu-product-strip-nav-btn:hover:not(:disabled) {
    color: var(--primary);
    border-color: var(--primary);
}
.shiqu-product-strip-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.shiqu-product-strip-more {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s;
}
.shiqu-product-strip-more:hover { color: var(--primary); }
.shiqu-product-strip-more svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
/* 横向滚动轨道：露出即可横向滑，隐藏滚动条但保留滑动能力 */
.shiqu-product-strip-track {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.shiqu-product-strip-track::-webkit-scrollbar { display: none; }
/* 卡片：固定宽 + 16:10 封面，悬停名称转品牌色 */
.shiqu-product-card {
    flex: 0 0 8.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--foreground);
}
.shiqu-product-card-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md, 0.5rem) * 0.6);
    background-color: var(--muted);
}
.shiqu-product-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shiqu-product-card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, transparent), transparent 72%);
}
.shiqu-product-card-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
    transition: color 0.15s;
}
.shiqu-product-card:hover .shiqu-product-card-name { color: var(--primary); }
.shiqu-product-card-cat {
    display: block;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}
/* 分类徽标（产品列表/详情页） */
.shiqu-product-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================================
   分享确认弹框（share-modal）：发布前展示抓取到的 标题/描述/封面
   可编辑后 POST 到分享页；深浅色模式用变量自动切换。
   ============================================================ */
.shiqu-modal-open { overflow: hidden; }
.shiqu-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.shiqu-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, 0.5);
    backdrop-filter: blur(6px);
    animation: shiqu-modal-fade 0.25s ease both;
}
.shiqu-modal-card {
    position: relative;
    /* 复用发布页双栏（左表单 + 右预览）：宽度对齐分享页 .app-share-card--split（62rem），
       窄视口自动收窄，低于 52rem 时嵌入页退回单栏 */
    width: min(100%, 62rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background-color: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
    animation: shiqu-modal-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.shiqu-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem 0.875rem;
    border-bottom: 1px solid var(--border);
}
.shiqu-modal-title {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
}
.shiqu-modal-sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.shiqu-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    color: var(--muted-foreground);
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
}
.shiqu-modal-close:hover { background-color: var(--muted); color: var(--foreground); }
.shiqu-modal-close svg {
    width: 1rem;
    height: 1rem;
}
.shiqu-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem 1.25rem;
}
.shiqu-modal-body {
    padding: 1rem 1.25rem 1.25rem;
}
.shiqu-modal-frame {
    display: block;
    width: 100%;
    height: min(78vh, 44rem);
    border: 0;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--card);
}
.shiqu-modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.shiqu-modal-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.shiqu-modal-input {
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md, 0.5rem) * 0.6);
    background-color: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.shiqu-modal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.shiqu-modal-input::placeholder { color: var(--muted-foreground); }
.shiqu-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 0.375rem;
}
.shiqu-modal-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: transparent;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
}
.shiqu-modal-cancel:hover { background-color: var(--muted); color: var(--foreground); }
.shiqu-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 1.125rem;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--primary) 35%, transparent);
    transition: background-color 0.18s, box-shadow 0.18s, transform 0.18s;
    cursor: pointer;
}
.shiqu-modal-submit svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
.shiqu-modal-submit:hover {
    background-color: color-mix(in oklab, var(--primary) 82%, transparent);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--primary) 42%, transparent);
    transform: translateY(-1px);
}
.shiqu-modal-submit:active { transform: translateY(0); }
@keyframes shiqu-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shiqu-modal-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .shiqu-modal-backdrop,
    .shiqu-modal-card {
        animation: none;
    }
}

/* ---- 分享成功弹窗（includes/share_success_modal.html，最简版） ---- */
.app-success-modal__card {
    width: min(100%, 20rem);
    padding: 2.5rem 1.5rem 1.75rem;
    text-align: center;
}
.app-success-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    background-color: color-mix(in oklab, #22c55e 14%, transparent);
    color: #22c55e;
}
.app-success-modal__icon svg { width: 1.75rem; height: 1.75rem; }
.app-success-modal__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
}
.app-success-modal__actions {
    margin-top: 1.5rem;
}
.app-success-modal__actions .app-btn-primary {
    min-width: 9rem;
    justify-content: center;
}

/* ============================================================
   时间周期筛选下拉（工具栏右侧）
   自定义下拉：触发器药丸 + 自绘选项面板（选中对勾 / hover 高亮 /
   右上原点入场），完全掌控外观，深浅色用变量自动切换。
   ============================================================ */
.shiqu-period {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
/* ---- 触发器：时钟图标 + 当前值 + 旋转箭头 ---- */
.shiqu-period-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: min(var(--radius-md, 0.5rem), 12px);
    background-color: transparent;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.shiqu-period-trigger:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.shiqu-period-trigger:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}
.shiqu-period-trigger[aria-expanded="true"] {
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--foreground);
}
.shiqu-period-trigger svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
.shiqu-period-trigger .shiqu-period-chevron {
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.shiqu-period-chevron.is-open { transform: rotate(180deg); }
/* ---- 选项面板：卡片式，右上原点展开 ---- */
.shiqu-period-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 50;
    min-width: 9rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--card);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
    transform-origin: top right;
    animation: shiqu-period-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.shiqu-period-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: calc(var(--radius-md, 0.5rem) - 2px);
    background-color: transparent;
    color: var(--foreground);
    font-size: 0.8125rem;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}
.shiqu-period-option:hover,
.shiqu-period-option:focus-visible {
    outline: none;
    background-color: var(--muted);
}
.shiqu-period-option.is-selected {
    color: var(--primary);
    font-weight: 600;
}
.shiqu-period-check {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.shiqu-period-option.is-selected .shiqu-period-check {
    opacity: 1;
    transform: scale(1);
}
@keyframes shiqu-period-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .shiqu-period-panel,
    .shiqu-period-check {
        animation: none;
        transition: none;
    }
}

/* ============================================================
   顶部导航悬浮置顶：滚动超过阈值后 header 加投影，强化悬浮感
   （is-scrolled 类由 base.html 内联脚本按 scrollY 切换）
   ============================================================ */
[data-site-header] {
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.2s ease;
}
[data-site-header].is-scrolled {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -16px rgb(0 0 0 / 0.16);
}
@media (prefers-reduced-motion: reduce) {
    [data-site-header] {
        transition: none;
    }
}

/* ============================================================
   社区规范单页（/rules/）：复用 app-share-card 外壳，正文排版
   内容来自后台 SiteConfig.community_rules，linebreaks 按空行分段
   ============================================================ */
.shiqu-rules-body {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.85;
    color: var(--foreground);
}
.shiqu-rules-body p {
    margin: 0 0 0.875rem;
}
.shiqu-rules-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   登录弹窗错误提示（main.js AJAX 提交后展示）
   ============================================================ */
.shiqu-modal-error {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--destructive, #e03131) 35%, transparent);
    border-radius: 0.5rem;
    background-color: color-mix(in oklab, var(--destructive, #e03131) 10%, transparent);
    color: var(--destructive, #e03131);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ---- 居中消息小弹窗（main.js ShiquDialog.alert，自赞/自收藏等拦截提示） ---- */
.shiqu-modal--alert .shiqu-modal-card {
    width: min(100%, 22rem);
}
.shiqu-modal--alert .shiqu-modal-message {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    white-space: pre-wrap;
    word-break: break-word;
}
.shiqu-modal--alert .shiqu-modal-foot {
    margin-top: 1rem;
}
.shiqu-modal--alert .shiqu-modal-submit {
    width: 100%;
}

/* ============================================================
   封面占位图：链接无图时用渐变 + 图标占位，保持媒体列宽稳定
   （深色模式随 var(--muted) 自动切换）
   ============================================================ */
.app-cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 7%, transparent) 0%, transparent 55%),
                var(--muted);
    color: var(--muted-foreground);
    text-align: center;
}
.app-cover-placeholder-icon {
    width: 2rem;
    height: 2rem;
    opacity: 0.65;
}
.app-cover-placeholder-text {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.7;
}

/* ============================================================
   评论区排序切换：最新 / 最早
   ============================================================ */
.app-comment-sort {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    color: var(--muted-foreground);
    transition: color 0.15s, background-color 0.15s;
}
.app-comment-sort:hover {
    color: var(--foreground);
    background-color: var(--muted);
}
.app-comment-sort.is-active {
    background-color: var(--muted);
    color: var(--foreground);
    font-weight: 500;
}

/* ============================================================
   侧边栏飙升榜：金银铜排名色（2026-08-11 需求14①）
   第一名金黄色、第二三名银灰，其余 muted，去掉来源标签背景色块
   ============================================================ */
.shiqu-rise-rank-gold {
    color: #b8860b;
    font-weight: 600;
}
.shiqu-rise-rank-silver {
    color: #9ca3af;
}

/* ============================================================
   侧边栏飙升榜：序号列宽兜底（2026-08-23 修复）
   rebang.css 编译产物缺失 base [--sidebar-rising-rank-col:1.5ch] 规则，
   导致视口 <1280px 时该 CSS 变量未定义，grid-template-columns 变成无效值、
   塌陷成单列，序号与标题错位一行（标题被推到下一行）。
   此处补齐 base 值，并在 ≥1280px 覆盖回 2ch（与模板 xl:[--sidebar-rising-rank-col:2ch] 一致）。
   ============================================================ */
.\[\--sidebar-rising-rank-col\:1\.5ch\] {
    --sidebar-rising-rank-col: 1.5ch;
}
@media (min-width: 80rem) {
    .\[\--sidebar-rising-rank-col\:1\.5ch\] {
        --sidebar-rising-rank-col: 2ch;
    }
}

/* ============================================================
   字体排版（2026-08-11 需求14②）：
   字体栈优先 苹方/思源黑体，正文加大行距与段落间距
   ============================================================ */
:root {
    --font-sans: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
                 "Noto Sans SC", "Microsoft YaHei", ui-sans-serif, system-ui,
                 -apple-system, "Segoe UI", sans-serif;
}
body {
    font-family: var(--font-sans);
}
/* 阅读正文：链接描述 / 帖子正文共用 */
.shiqu-article-body {
    font-size: 1.0625rem;
    line-height: 1.85;
    overflow-wrap: break-word;
}
.shiqu-article-body p {
    margin: 0 0 0.875rem;
}
.shiqu-article-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   移动端适配（2026-08-11 需求24）：
   底部导航（首页/发布/消息/我的）+ 汉堡下拉菜单 + 主体留白
   ============================================================ */
/* 主内容底部留白：给固定底部导航让位（仅移动端） */
.shiqu-main {
    padding-bottom: 4.5rem;
}
@media (min-width: 768px) {
    .shiqu-main {
        padding-bottom: 0;
    }
}

/* 移动端底部导航：四格（首页 / 发布 / 消息 / 我的） */
.shiqu-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    background-color: var(--card);
    box-shadow: 0 -1px 12px rgb(0 0 0 / 0.05);
}
@media (max-width: 767.98px) {
    .shiqu-bottom-nav {
        display: grid;
    }
}
.shiqu-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    padding: 0.4375rem 0 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    line-height: 1;
    transition: color 0.15s;
}
.shiqu-bottom-nav a.is-active {
    color: var(--primary);
    font-weight: 600;
}
.shiqu-bottom-nav a:active {
    opacity: 0.8;
}
.shiqu-bottom-nav a svg {
    width: 1.375rem;
    height: 1.375rem;
}

/* 移动端汉堡下拉菜单 */
.shiqu-mobile-menu {
    display: none;
    border-top: 1px solid var(--border);
    background-color: var(--card);
}
.shiqu-mobile-menu.is-open {
    display: block;
}
.shiqu-mobile-menu a,
.shiqu-mobile-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    color: var(--foreground);
    text-align: left;
}
.shiqu-mobile-menu a:active,
.shiqu-mobile-menu button:active {
    color: var(--primary);
}

/* ---- 卡片徽标（需求 1 热/新、需求 4 外链标识）---- */
.shiqu-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
}
.shiqu-badge--new {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.shiqu-badge--hot {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
/* 链接失效（需求 25）：灰 + 划线，弱化但不刺眼 */
.shiqu-badge--broken {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
    text-decoration: line-through;
}
/* 疑似推广（P1.1.6）：琥珀色警示，提示内容命中推广/软文特征 */
.shiqu-badge--promo {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}
/* 置顶推荐（P0）：管理员人工置顶，靛蓝色标识 */
.shiqu-badge--pin {
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
}
/* ============ 关注按钮（P1 关注 Tab）：已关注态弱化为灰 ============ */
.app-follow-btn.is-following {
    color: var(--muted-foreground);
    background-color: var(--muted);
    border-color: transparent;
}

/* ============ 收藏分组选择器弹窗（P1 收藏夹分组） ============ */
.app-group-picker {
    z-index: 90;
    min-width: 180px;
    padding: 0.375rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.app-group-picker__title {
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.app-group-picker__item,
.app-group-picker__new {
    display: block;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--foreground);
    text-align: left;
    cursor: pointer;
}
.app-group-picker__item:hover,
.app-group-picker__new:hover { background: var(--muted); }
.app-group-picker__new { color: var(--primary); }

/* ============ 收藏分组筛选 chip（P1 收藏夹分组） ============ */
.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}
.app-chip:hover { color: var(--foreground); }
.app-chip.is-active {
    color: var(--primary);
    background-color: color-mix(in oklab, var(--primary) 12%, transparent);
}
.app-chip--ghost { background-color: transparent; border: 1px solid var(--border); }

/* ============ 发布合一页 tab（需求 9：分享链接 / 发纯文字） ============ */
.app-publish-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.app-publish-tab {
    appearance: none;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-bottom: -1px;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: color 0.15s, background-color 0.15s;
}
.app-publish-tab::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1px;
    height: 2px;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.15s, transform 0.15s;
}
.app-publish-tab:hover {
    color: var(--foreground);
    background-color: var(--muted);
}
.app-publish-tab.is-active {
    color: var(--primary);
    font-weight: 600;
}
.app-publish-tab.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}
.app-publish-panel[hidden] {
    display: none;
}
@keyframes app-publish-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.app-publish-panel:not([hidden]) {
    animation: app-publish-panel-in 0.2s ease-out;
}

/* 发布页 hero URL 输入：加大 + 胶囊圆角（与顶栏搜索同族） */
.app-form-group--hero .form-control {
    height: 3rem;
    padding-left: 2.75rem;
    padding-right: 1rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
}
.app-form-group--hero .app-input-icon {
    left: 1.05rem;
    width: 1.125rem;
    height: 1.125rem;
}

/* 发布页操作区：全宽主按钮 + 居中取消 */
.app-publish-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    margin-top: 1.5rem;
}
.app-publish-actions .app-btn-primary {
    width: 100%;
}
.app-publish-cancel {
    align-self: center;
    height: 2rem;
}

/* ============ 消息通知铃铛（P1）：顶栏图标 + 未读角标 ============ */
.app-bell {
    position: relative;
    display: inline-flex;
}
.app-bell__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    transform: translate(30%, -25%);
}
/* 移动端底部导航「消息」：小红点即可，不显示数字 */
.shiqu-bottom-nav a { position: relative; }
.shiqu-bottom-nav .app-bell__badge {
    top: 5px;
    right: auto;
    left: 50%;
    margin-left: 8px;
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    line-height: 8px;
    transform: none;
}

/* ============ 达人标识 & 贡献榜（P2） ============ */
/* 达人胶囊徽章：浅金底 + 深金字，与 Lv 徽章的浅底深字风格一致 */
.app-expert-badge {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: #fef3c7; /* amber-100 */
    color: #b45309;      /* amber-700 */
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

/* 贡献榜名次：前三名金色，其余灰色 */
.app-leaderboard-rank {
    color: var(--muted-foreground);
}
.app-leaderboard-rank.is-top {
    color: #d97706; /* amber-600 */
}


/* ============ 邮箱验证提示条（includes/email_verify_banner.html） ============ */
.shiqu-email-banner {
    width: 100%;
    max-width: var(--site-content-max-width);
    margin: 0 auto 0.75rem;
}
.shiqu-email-banner__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
    border-radius: var(--radius-md, 0.5rem);
    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    padding: 0.625rem 0.875rem;
}
.shiqu-email-banner__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--foreground);
}
.shiqu-email-banner__form {
    flex: 0 0 auto;
    margin: 0;
}
.shiqu-email-banner__btn {
    border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground, #fff);
    padding: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.shiqu-email-banner__btn:hover { opacity: 0.9; }
.shiqu-email-banner__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.shiqu-email-banner__close:hover {
    background: color-mix(in oklab, var(--muted-foreground) 12%, transparent);
    color: var(--foreground);
}
/* 移动端：提示条换行堆叠，按钮整行 */
@media (max-width: 640px) {
    .shiqu-email-banner__inner { flex-wrap: wrap; }
    .shiqu-email-banner__text { flex-basis: 100%; }
    .shiqu-email-banner__form { flex: 1 1 auto; }
}

/* ============ 新手引导弹层（includes/guide_modal.html） ============ */
.shiqu-guide-body {
    padding: 1rem 1.25rem;
}
.shiqu-guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.shiqu-guide-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--foreground);
}
.shiqu-guide-ico {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.5;
}
.shiqu-guide-note {
    margin: 0.875rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.shiqu-guide-start {
    width: 100%;
    border: none;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground, #fff);
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}
.shiqu-guide-start:hover { opacity: 0.9; }
.shiqu-guide-start:active { transform: scale(0.98); }

/* 产品发布页 · 官网截图实时预览（自动抓取） */
.shiqu-shot-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background-color: var(--muted);
}
.shiqu-shot-preview-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--card);
}
.shiqu-shot-preview-img.is-loaded { display: block; }
.shiqu-shot-preview-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.shiqu-shot-preview-msg.is-hidden { display: none; }

/* 产品网格：1 → 2(≥640) → 3(≥1024) → 4(≥1280)。
   不用 Tailwind 工具类：lg:grid-cols-3 未编译进 rebang.css，桌面端会回落到 2 列，
   故手写本类（app.css 直接热加载，无需重编译）。 */
.shiqu-product-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .shiqu-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .shiqu-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .shiqu-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ 信息流评论展开（Batch C）：卡片评论按钮点击展开热门评论 ============
   面板用 hidden 属性显隐（非绝对定位下拉 —— 操作区 overflow-hidden 会裁剪），
   inline 展开会把下方卡片挤下去，属预期。*/
.shiqu-feed-comments {
    margin-top: 0.5rem;
    border: 1px solid #f0dfa2;
    border-radius: 0.5rem;
    background-color: #fef7e0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}
/* 淡黄色强调在深色模式回落暖棕色，避免高亮过刺眼 */
.dark .shiqu-feed-comments {
    border-color: #5c4f1e;
    background-color: #3a3218;
}
.shiqu-feed-comments__list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.shiqu-feed-comments__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}
.shiqu-feed-comments__author {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--foreground);
}
.shiqu-feed-comments__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shiqu-feed-comments__likes {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--primary);
}
.shiqu-feed-comments__empty {
    margin: 0;
}
.shiqu-feed-comments__actions {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.shiqu-feed-comments__more {
    font-weight: 500;
    color: var(--primary);
    transition: opacity 0.15s;
}
.shiqu-feed-comments__more:hover {
    opacity: 0.85;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* 信息流行内快捷评论：输入区与面板同黄体系（border-top 用面板黄边），输入框回落 --background/--border。
   单行紧凑：input flex:1 + 发表按钮同行（按钮固定宽不挤压输入框），整体高度与默认按钮一致。 */
.shiqu-feed-comment-form {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0dfa2;
}
.dark .shiqu-feed-comment-form {
    border-top-color: #5c4f1e;
}
.shiqu-feed-comment-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.shiqu-feed-comment-input {
    flex: 1;
    min-width: 0;
    height: 2.25rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background-color: var(--background);
    color: var(--foreground);
    padding: 0 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.shiqu-feed-comment-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 25%, transparent);
}
.shiqu-feed-comment-input::placeholder {
    color: var(--muted-foreground);
}
.shiqu-feed-comment-submit {
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
}
.shiqu-feed-comment-err {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--destructive, #dc2626);
}
.shiqu-feed-comment-login {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

/* ============ 编辑资料页：左侧设置导航（app-settings-nav） ============ */
.app-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.app-settings-nav__item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    border-left: 3px solid transparent;
    transition: color .15s ease, background-color .15s ease;
}
.app-settings-nav__item:hover {
    color: var(--foreground);
    background-color: var(--muted);
}
.app-settings-nav__item.is-active {
    color: var(--primary);
    background-color: var(--muted);
    border-left-color: var(--primary);
    font-weight: 600;
}

/* ============ 编辑资料页两栏布局（app-settings-layout，≥48rem 左侧导航+右侧内容） ============ */
/* 不用 Tailwind md:grid 等任意值类（预编译 rebang.css 未含 13rem 列宽），断点 48rem 与 Tailwind md 一致 */
.app-settings-layout {
    margin-top: 1rem;
}
.app-settings-aside {
    display: none;               /* 移动端隐藏导航，卡片竖排 */
}
@media (min-width: 48rem) {
    .app-settings-layout {
        display: grid;
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;      /* 防止 asides 拉伸占满整行高，保证 sticky 生效 */
    }
    .app-settings-aside {
        display: block;
        position: sticky;
        top: 6rem;               /* 避开粘性头部 */
    }
}

/* ============ 头像裁剪弹层（app-crop-*） ============ */
.app-crop-stage {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}
.app-crop-viewport {
    position: relative;
    width: 260px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.75rem;
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #fff;
    touch-action: none;
    cursor: grab;
}
.app-crop-viewport.is-dragging {
    cursor: grabbing;
}
.app-crop-img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: 0 0;
    will-change: transform;
}
.app-crop-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
    background-position: center;
}
.app-crop-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.app-crop-zoom-label {
    min-width: 3.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.app-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
}

/* ============================================================
   评论抽屉（2026-08-23，includes/comment-drawer in base.html）：
   PC 右侧抽屉 / 移动端底部浮层。z-index 55：盖住底部导航(50)、
   header(40)，被登录弹窗/toast（60/70）盖上来——登录弹窗天然浮在抽屉上。
   body 滚动锁用 .shiqu-drawer-open（与 .shiqu-modal-open 分开，
   抽屉与登录弹窗同时开时各自管理，互不误关）。
   深浅色全部走 CSS 变量，无需 .dark 特判。
   ============================================================ */
.shiqu-drawer-open { overflow: hidden; }
.shiqu-drawer {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
}
.shiqu-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, 0.5);
    backdrop-filter: blur(4px);
    animation: shiqu-modal-fade 0.25s ease both;
}
.shiqu-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(100%, 42rem);
    display: flex;
    flex-direction: column;
    background-color: var(--card);
    color: var(--foreground);
    border-left: 1px solid var(--border);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
    animation: shiqu-drawer-slide-right 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.shiqu-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.shiqu-drawer-title {
    min-width: 0;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shiqu-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    color: var(--muted-foreground);
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
}
.shiqu-drawer-close:hover { background-color: var(--muted); color: var(--foreground); }
.shiqu-drawer-close svg { width: 1rem; height: 1rem; }
.shiqu-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.125rem 1.5rem;
}
.shiqu-drawer-foot {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
}
.shiqu-drawer-more {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}
.shiqu-drawer-more:hover { text-decoration: underline; }
.shiqu-drawer-loading {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
@keyframes shiqu-drawer-slide-right {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

/* ---- 抽屉评论区内容（comment_section_drawer.html） ---- */
.shiqu-comment-top {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}
.shiqu-comment-top__badge {
    flex-shrink: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.4;
}
.shiqu-comment-top__text { min-width: 0; word-break: break-word; }
.shiqu-comment-top__author { flex-shrink: 0; color: var(--primary); font-weight: 500; }

/* ---- 信息流卡神评论行（post_card/link_card，2026-08-23 复刻保留，点击打开评论抽屉）。
       2026-08-23 弱化：去掉主色边框/底色大盒，改为弱化文字行 + 小号 muted 徽标；不显示用户名。 ---- */
.shiqu-feed-top-comment {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0.125rem 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}
.shiqu-feed-top-comment:hover {
    color: var(--foreground);
}
.shiqu-feed-top-comment:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--foreground) 35%, transparent);
    outline-offset: 2px;
    border-radius: 0.25rem;
}
.shiqu-feed-top-comment__badge {
    flex-shrink: 0;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    background: lab(93 0 -0.01);  /* 用户 2026-08-23 在 DevTools 定稿的浅灰底，固定值不随 --secondary 变 */
    color: var(--secondary-foreground);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
}
.shiqu-feed-top-comment__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shiqu-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.shiqu-comment-count { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.shiqu-comment-count span { color: var(--primary); font-weight: 800; }
.shiqu-comment-sorts { display: flex; align-items: center; gap: 0.5rem; }
.shiqu-comment-login { margin-bottom: 0.875rem; font-size: 0.875rem; color: var(--muted-foreground); }
.shiqu-comment-login a { font-weight: 600; }

/* ---- 移动端：底部浮层（断点对齐底部导航 max-width:767.98px） ---- */
@media (max-width: 767.98px) {
    .shiqu-drawer-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: 85dvh;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 1rem 1rem 0 0;
        animation-name: shiqu-drawer-slide-up;
    }
    .shiqu-drawer-head { padding-top: 1.5rem; }
    .shiqu-drawer-panel::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.5rem;
        height: 0.25rem;
        border-radius: 9999px;
        background: var(--muted-foreground);
        opacity: 0.35;
    }
}
@keyframes shiqu-drawer-slide-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shiqu-drawer-backdrop,
    .shiqu-drawer-panel {
        animation: none;
    }
}