/* ============================================================
   ZOZEAI · 前台视觉体系
   设计语言：现代编辑风 —— 深空 Hero、玻璃导航、精致卡片、
   大留白、强字号层级、靛紫渐变强调
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --bg:        #f6f7fb;
    --bg-rgb:    246,247,251;
    --surface:   #ffffff;
    --surface-2: #f1f2f8;
    --ink:       #0c0f17;
    --ink-2:     #3d4553;
    --muted:     #6b7280;
    --line:      #e6e8f0;
    --brand:     #4f46e5;
    --brand-2:   #7c3aed;
    --brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --accent:    #f59e0b;
    --ok:        #059669;
    --err:       #dc2626;
    --hero-bg:   #0a0e1c;
    --hero-2:    #0d1226;
    /* 以下 RGB 三元组供 rgba(var(--x-rgb), α) 形式使用；由 include/theme.php 按后台「主题」页签注入覆盖 */
    --brand-rgb:   79,70,229;
    --brand-2-rgb: 124,58,237;
    --glow:      #6366f1;
    --glow-rgb:  99,102,241;
    --soft:      #c7d2fe;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 10px 30px -12px rgba(16, 24, 40, .16);
    --shadow-lg: 0 24px 60px -20px rgba(16, 24, 40, .28);
    --radius:    16px;
    --radius-lg: 22px;
    --font: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .35); outline-offset: 2px; }
/* 整体框架：桌面屏按屏宽 65% 展示（保底 900px），更小视口自然收缩为全宽 */
.container { max-width: max(65vw, 900px); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.text-sm { font-size: 13px; }
.site-main { min-height: 58vh; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 66px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { display: inline-flex; filter: drop-shadow(0 4px 10px rgba(var(--brand-rgb), .35)); }
/* 自定义站点 Logo（后台「站点信息」上传）：按高度等比缩放，兼容方形与横向图片 */
.brand-mark img { display: block; height: 28px; width: auto; max-width: 160px; border-radius: 7px; object-fit: contain; }
.logo-preview { margin-bottom: 10px; }
.logo-preview img { display: block; max-width: 260px; max-height: 90px; padding: 10px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 10px; background: #f8fafc; object-fit: contain; }
.logo-clear { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.brand-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--ink);
    white-space: nowrap;
}
.brand-light .brand-name { color: #fff; }
.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.main-nav::-webkit-scrollbar { display: none; }
/* 桌面端：主导航整排居中（左右自动留白均分）；放不下时自动回退为左起横向滑动，不会藏住前面的项 */
@media (min-width: 861px) {
    .main-nav > .nav-link:first-child { margin-left: auto; }
    .main-nav > .nav-link:last-child { margin-right: auto; }
}
.nav-link {
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 500;
    transition: background .18s, color .18s;
}
.nav-link:hover { background: rgba(15, 23, 42, .05); color: var(--ink); }
.nav-link.is-active { color: var(--brand); background: rgba(var(--brand-rgb), .09); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.avatar-link { display: inline-flex; }
.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--shadow-sm);
}
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 84px; height: 84px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    color: #fff;
    background: var(--brand-grad);
    box-shadow: 0 8px 20px -8px rgba(var(--glow-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { box-shadow: 0 12px 26px -8px rgba(var(--glow-rgb), .8); transform: translateY(-1px); }
.btn-ghost {
    color: var(--ink-2);
    background: #fff;
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { color: var(--brand); border-color: rgba(var(--brand-rgb), .35); background: #fbfbff; }
.btn-soft {
    color: var(--brand);
    background: rgba(var(--brand-rgb), .08);
}
.btn-soft:hover { background: rgba(var(--brand-rgb), .14); }
.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
}
.btn-danger:hover { box-shadow: 0 8px 18px -8px rgba(220, 38, 38, .7); }
.btn-soft-danger { color: var(--err); background: rgba(220, 38, 38, .07); }
.btn-soft-danger:hover { background: rgba(220, 38, 38, .13); }
.btn-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
}
.btn-light:hover { background: rgba(255, 255, 255, .14); }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ---------- 窄屏移动端按钮定制（--btn-* 由 include/theme.php 注入；≤860px 生效，PC 端保持原样） ---------- */
@media (max-width: 860px) {
    .btn {
        border-radius: var(--btn-radius, 999px);
        padding: calc(11px * var(--btn-scale, 1)) calc(22px * var(--btn-scale, 1));
        font-size: calc(15px * var(--btn-scale, 1));
    }
    .btn-sm {
        padding: calc(8px * var(--btn-scale, 1)) calc(16px * var(--btn-scale, 1));
        font-size: calc(13.5px * var(--btn-scale, 1));
    }
    .btn-lg {
        padding: calc(14px * var(--btn-scale, 1)) calc(30px * var(--btn-scale, 1));
        font-size: calc(16px * var(--btn-scale, 1));
    }
    .btn-primary {
        color: var(--btn-color, #fff);
        background: var(--btn-bg, var(--brand-grad));
    }
}

/* ---------- Flash ---------- */
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    min-width: 320px;
    max-width: min(92vw, 640px);
    padding: 12px 12px 12px 18px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: #fff;
    box-shadow: var(--shadow-lg);
    animation: flash-in .35s cubic-bezier(.21, 1.02, .73, 1);
}
@keyframes flash-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.flash-success { background: linear-gradient(135deg, #059669, #0d9488); }
.flash-error   { background: linear-gradient(135deg, #dc2626, #e11d48); }
.flash-warn    { background: linear-gradient(135deg, #d97706, #dc2626); }
.flash-info    { background: linear-gradient(135deg, #2563eb, var(--brand-2)); }
.flash-x {
    flex: none;
    width: 26px; height: 26px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.flash-x:hover { background: rgba(255, 255, 255, .3); }
.flash.is-hide { opacity: 0; transform: translate(-50%, -14px); transition: all .3s; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    color: #fff;
    background:
        radial-gradient(1000px 520px at 82% -12%, rgba(var(--glow-rgb), .42), transparent 62%),
        radial-gradient(760px 420px at -6% 4%, rgba(var(--brand-2-rgb), .22), transparent 58%),
        radial-gradient(640px 380px at 55% 120%, rgba(14, 165, 233, .16), transparent 60%),
        linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-2) 100%);
    overflow: hidden;
}
.hero::before {   /* 细网格 */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
    pointer-events: none;
}
.hero::after {   /* 底部过渡雾化 */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 90px;
    background: linear-gradient(180deg, transparent, var(--bg));
    pointer-events: none;
}
.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 56px;
    align-items: center;
    padding: 76px 24px 92px;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
    color: var(--soft);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
}
.hero-kicker .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}
/* 标题按本列宽度自适应字号，保证整句单行显示 */
.hero-copy { container-type: inline-size; }
.hero-title {
    margin: 22px 0 18px;
    font-size: clamp(2.5rem, 5.2vw, 4.05rem); /* 兜底：不支持容器查询的旧浏览器 */
    font-size: min(4.05rem, 7.4cqi);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.028em;
    text-wrap: balance;
}
.hero-title em {
    font-style: normal;
    background: linear-gradient(92deg, #a5b4fc 8%, #c084fc 48%, #67e8f9 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    max-width: 540px;
    color: #aab2c8;
    font-size: clamp(15.5px, 1.6vw, 17.5px);
    line-height: 1.8;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 34px;
    color: #8f98b4;
    font-size: 13.5px;
}
.hero-facts b {
    display: block;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* Hero 精选大卡 */
.feat-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .75);
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    aspect-ratio: 4 / 4.6;
    display: flex;
}
.feat-media {
    position: absolute;
    inset: 0;
}
.feat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.feat-card:hover .feat-media img { transform: scale(1.045); }
.feat-card .feat-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, rgba(var(--glow-rgb), .5), rgba(12, 16, 30, .4) 55%), radial-gradient(300px 300px at 85% 20%, rgba(var(--brand-2-rgb), .35), transparent 70%);
}
.feat-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    background: linear-gradient(185deg, transparent 22%, rgba(6, 9, 20, .42) 52%, rgba(5, 7, 16, .92) 100%);
}
.feat-tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.feat-title {
    margin-top: 14px;
    color: #fff;
    font-size: clamp(18px, 1.9vw, 23px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feat-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #c3c9dd;
    font-size: 13px;
}
.feat-card.is-empty .feat-overlay { background: linear-gradient(180deg, transparent 20%, rgba(5, 7, 16, .8)); }
/* 精选大卡尺寸：桌面端缩到列宽一半（内容整体小一倍）并居中；鼠标经过放大一点 */
@media (min-width: 861px) {
    .feat-card {
        justify-self: center;
        width: 50%;
        transition: transform .38s cubic-bezier(.2, .6, .2, 1);
    }
    .feat-card:hover { transform: scale(1.05); }
}

/* ---------- Section ---------- */
.section { padding: 64px 0 8px; }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-eyebrow::before {
    content: "";
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--brand-grad);
}
.section-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.section-more { color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.section-more:hover { color: var(--brand); }

/* ---------- 分类快捷导航 ---------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 6px;
}
.chip {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: all .18s;
}
.chip:hover { border-color: rgba(var(--brand-rgb), .4); color: var(--brand); transform: translateY(-1px); }
.chip.is-active {
    color: #fff;
    border-color: transparent;
    background: var(--brand-grad);
    box-shadow: 0 8px 18px -8px rgba(var(--glow-rgb), .8);
}

/* ---------- 同城 · 城市筛选条 ---------- */
.city-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px;
}
.city-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
.city-bar-label svg { flex: none; opacity: .85; }
.city-bar .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 13px;
}
.city-bar .chip svg { flex: none; opacity: .9; }

/* ---------- 文章卡片 ---------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .28s cubic-bezier(.2, .6, .2, 1), box-shadow .28s;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(140deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-2-rgb), .12) 55%, #e4f3fb);
}
.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
.card:hover .card-media img { transform: scale(1.06); }
.card-media .no-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--brand-rgb), .22);
}
.card-media.is-featured::after {
    content: "置顶";
    position: absolute;
    top: 14px; left: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(12, 10, 30, .55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.card-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.card-cat {
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
}
.card-date { color: var(--muted); font-size: 12.5px; }
.card-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.005em;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card:hover .card-title { color: var(--brand); }
.card-summary {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--muted);
}
.card-meta .avatar { width: 24px; height: 24px; border: 0; }
.card-meta .author-name { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta .meta-spacer { flex: 1; }
.card-meta .meta-eye { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- 空状态 ---------- */
.empty-state {
    padding: 84px 24px;
    text-align: center;
    color: var(--muted);
}
.empty-state .empty-icon {
    width: 84px; height: 84px;
    margin: 0 auto 22px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, rgba(var(--brand-rgb), .08), #faf5ff);
    color: var(--soft);
}
.empty-state h3 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }
.empty-state p { max-width: 380px; margin: 0 auto 22px; font-size: 14.5px; }

/* ---------- 分页 ---------- */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 46px 0 30px;
}
.pager-btn {
    min-width: 40px;
    padding: 9px 14px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all .16s;
}
.pager-btn:hover { color: var(--brand); border-color: rgba(var(--brand-rgb), .4); }
.pager-btn.is-current { color: #fff; background: var(--brand-grad); border-color: transparent; }

/* ---------- 文章详情 ---------- */
.detail-hero {
    position: relative;
    padding: 34px 0 0;
}
.detail-head { max-width: 860px; }
.detail-title {
    margin: 18px 0 16px;
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.detail-cover {
    margin: 30px 0 6px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--surface-2);
}
/* 竖屏封面：完整展示不裁切，居中，最高 640px（内容图以 9:16 为主） */
.detail-cover img { display: block; width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; }
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    padding-top: 34px;
}
.prose {
    font-size: 16.5px;
    line-height: 1.95;
    color: #242a35;
    word-break: break-word;
}
.prose p { margin: 0 0 1.35em; }
.prose h2 { font-size: 24px; font-weight: 800; margin: 2em 0 .8em; letter-spacing: -.01em; }
.prose h3 { font-size: 19.5px; font-weight: 700; margin: 1.9em 0 .7em; }
.prose ul, .prose ol { margin: 0 0 1.35em; }
.prose li { margin: .35em 0; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: 14px; margin: 1.6em auto; box-shadow: var(--shadow-sm); }
.prose blockquote {
    margin: 1.8em 0;
    padding: 18px 24px;
    border-left: 4px solid var(--brand-2);
    background: linear-gradient(90deg, rgba(var(--brand-rgb), .06), transparent 85%);
    border-radius: 0 14px 14px 0;
    color: var(--ink-2);
    font-style: normal;
}
.prose pre {
    margin: 1.6em 0;
    padding: 18px 22px;
    border-radius: 14px;
    background: #0d1120;
    color: #d7dcec;
    font-size: 13.5px;
    line-height: 1.7;
    overflow-x: auto;
}
.prose code { background: rgba(var(--brand-rgb), .08); color: var(--brand-2); padding: 2px 7px; border-radius: 6px; font-size: .92em; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 700; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }

.side-stack { display: flex; flex-direction: column; gap: 22px; }
.author-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.author-card .author-top { display: flex; align-items: center; gap: 14px; }
.author-card .author-info { min-width: 0; }
.author-card .author-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.author-card .author-bio {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.side-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.side-card h4 { font-size: 15px; margin-bottom: 12px; letter-spacing: .01em; }
.side-list { display: flex; flex-direction: column; }
.side-list a {
    padding: 10px 0;
    border-bottom: 1px dashed var(--line);
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}
.side-list a:last-child { border-bottom: 0; }
.side-list a:hover { color: var(--brand); }

.article-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 34px 0 10px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    color: var(--muted);
}
.article-actions .share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font-weight: 600;
    border: 1px solid var(--line);
    background: #fff;
    padding: 7px 15px;
    border-radius: 999px;
    transition: all .16s;
}
.article-actions .share-btn:hover { color: var(--brand); border-color: rgba(var(--brand-rgb), .4); }

/* 创作者“页头”小横幅(分类页/作者页共用) */
.page-band {
    position: relative;
    color: #fff;
    background:
        radial-gradient(700px 300px at 88% -30%, rgba(var(--brand-2-rgb), .45), transparent 65%),
        linear-gradient(120deg, #0c1024, #131a38 60%, #0f1430);
    padding: 52px 0;
    overflow: hidden;
}
.page-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(90% 100% at 20% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(90% 100% at 20% 0%, #000 20%, transparent 75%);
}
.page-band .band-title {
    position: relative;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
}
.page-band .band-sub { position: relative; color: #aeb6d2; margin-top: 10px; font-size: 15px; }

/* ---------- Auth（登录/注册） ---------- */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: #fff;
}
.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px clamp(40px, 6vw, 96px);
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(900px 600px at 90% -10%, rgba(var(--glow-rgb), .5), transparent 60%),
        radial-gradient(700px 480px at -10% 100%, rgba(var(--brand-2-rgb), .32), transparent 58%),
        linear-gradient(160deg, var(--hero-bg), var(--hero-2) 65%, var(--hero-bg));
}
.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(100% 90% at 60% 30%, #000 25%, transparent 80%);
    -webkit-mask-image: radial-gradient(100% 90% at 60% 30%, #000 25%, transparent 80%);
    pointer-events: none;
}
.auth-aside > * { position: relative; }
.auth-aside .brand-name { color: #fff; }
.auth-quote { margin-top: 46px; }
.auth-quote h2 {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
    max-width: 440px;
}
.auth-quote h2 em {
    font-style: normal;
    background: linear-gradient(92deg, #a5b4fc, #e9d5ff 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-points { margin-top: 34px; display: grid; gap: 16px; }
.auth-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: #c3c9dd;
    font-size: 14.5px;
    max-width: 400px;
}
.auth-point .pt-icon {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--soft);
}
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}
.auth-box { width: 100%; max-width: 420px; }
.auth-box .mobile-brand { display: none; margin-bottom: 26px; }
.auth-title { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); font-size: 14.5px; margin: 10px 0 30px; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}
.input, .select, textarea.input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid #dde1ea;
    background: #fbfcfe;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.input:focus, .select:focus, textarea.input:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14);
}
.input.is-err { border-color: var(--err); }
.form-hint { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.form-error {
    padding: 11px 15px;
    margin-bottom: 18px;
    border-radius: 11px;
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .18);
    color: #b91c1c;
    font-size: 13.5px;
}
.form-error ul { margin: 0; padding-left: 18px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 14px; }
.alt-line { text-align: center; margin-top: 26px; color: var(--muted); font-size: 14px; }

/* ---------- 创作者中心 ---------- */
.work-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.creator-layout {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 28px;
    padding: 30px 0 70px;
}
.creator-side .side-inner { position: sticky; top: 90px; }
.creator-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-sm);
}
.creator-menu .cm-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 12px 14px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 8px;
}
.creator-menu .cm-user { min-width: 0; }
.creator-menu .cm-name {
    font-weight: 700;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.creator-menu .cm-id { color: var(--muted); font-size: 12px; }
.creator-menu a.cm-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 500;
    transition: all .16s;
}
.creator-menu a.cm-item svg { color: #9aa1b2; transition: color .16s; }
.creator-menu a.cm-item:hover { background: rgba(15, 23, 42, .04); color: var(--ink); }
.creator-menu a.cm-item.is-active {
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    font-weight: 600;
}
.creator-menu a.cm-item.is-active svg { color: var(--brand); }
.creator-side .cm-tip {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 13px;
    background: linear-gradient(140deg, rgba(var(--brand-rgb), .06), rgba(var(--brand-2-rgb), .05));
    border: 1px solid rgba(var(--brand-rgb), .14);
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.7;
}

.creator-main { min-width: 0; }
.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-title-row h1 { font-size: 23px; font-weight: 800; letter-spacing: -.015em; }
.page-title-row .sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.stat-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 20px 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.stat-card .sc-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat-card .sc-num {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-card .sc-ico {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 38px; height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
}
.stat-card.tone-violet .sc-ico { background: rgba(var(--brand-2-rgb), .09); color: var(--brand-2); }
.stat-card.tone-green  .sc-num { color: var(--ok); }
.stat-card.tone-green  .sc-ico { background: rgba(5, 150, 105, .09); color: var(--ok); }
.stat-card.tone-amber  .sc-num { color: #d97706; }
.stat-card.tone-amber  .sc-ico { background: rgba(217, 119, 6, .09); color: #d97706; }
.stat-card.tone-red    .sc-num { color: var(--err); }
.stat-card.tone-red    .sc-ico { background: rgba(220, 38, 38, .08); color: var(--err); }
.stat-card.tone-blue   .sc-num { color: #2563eb; }
.stat-card.tone-blue   .sc-ico { background: rgba(37, 99, 235, .08); color: #2563eb; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 16px; font-weight: 700; }
.panel-body { padding: 20px 22px; }
.panel-body.no-pad { padding: 0; }

/* 表格 */
.table-wrap { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 640px;
}
.table th {
    text-align: left;
    padding: 12px 22px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    background: #fafbff;
    white-space: nowrap;
}
.table td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fbfbff; }
.table .t-title {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink);
}
.table .t-muted { color: var(--muted); }
.table .t-actions { display: flex; gap: 8px; white-space: nowrap; }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge-gray  { color: #5b6472; background: #eef0f4; }
.badge-green { color: #047857; background: #e3f6ee; }
.badge-amber { color: #b45309; background: #fdf0dc; }
.badge-red   { color: #b91c1c; background: #fde8e8; }
.badge-blue  { color: #1d4ed8; background: #e4ecfd; }
.badge-violet{ color: var(--brand-2); background: rgba(var(--brand-2-rgb), .12); }
.badge-gold  { color: #8a6400; background: #f9efcf; }

/* V认证标识：圆底白 V 字，按认证类别着色（企业蓝 / 名人红 / 机构绿；v_type=0 兜底通用蓝） */
.vbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: none;
}
.vbadge-blue  { background: #2563eb; }
.vbadge-red   { background: #dc2626; }
.vbadge-green { background: #16a34a; }

/* ---------- 编辑器 ---------- */
.article-form { max-width: 980px; }
.form-title-input {
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 2px solid var(--line);
    background: transparent;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    font-family: inherit;
    color: var(--ink);
    letter-spacing: -.01em;
    transition: border-color .18s;
}
.form-title-input:focus { outline: none; border-color: var(--brand); }
.form-title-input::placeholder { color: #c3c8d4; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.upload-zone {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1.6px dashed #ccd2e0;
    border-radius: 14px;
    background: #fafbff;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.upload-zone:hover { border-color: var(--brand); background: rgba(var(--brand-rgb), .03); }
.upload-zone .uz-icon {
    flex: none;
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
}
.upload-zone .uz-text { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); }
.upload-zone .uz-text b { display: block; color: var(--ink-2); font-size: 14.5px; margin-bottom: 3px; }
.cover-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6.5;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
    display: none;
}
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-preview .cp-remove {
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 9px;
    background: rgba(8, 10, 18, .6);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #fafbff;
}
.tb-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.tb-btn:hover { background: rgba(var(--brand-rgb), .1); color: var(--brand); }
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.editor-area {
    width: 100%;
    min-height: 440px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    background: #fff;
    font-size: 15px;
    line-height: 1.8;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    color: var(--ink);
    resize: vertical;
}
.editor-area:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .1); }

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.form-actions .hint-right { margin-left: auto; color: var(--muted); font-size: 13px; }

/* ---------- 页脚 ---------- */
.site-footer {
    margin-top: 70px;
    color: #aeb6cc;
    background: linear-gradient(180deg, #0b0e1a, #070a13);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 44px;
    padding: 58px 0 44px;
}
/* 有对外客户端入口时的四列变体；用复合选择器保持与断点规则同特异性可覆盖 */
.footer-grid.footer-grid-4 { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer-desc { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: #8d95ad; max-width: 380px; }
.footer-col h4 {
    color: #fff;
    font-size: 14.5px;
    letter-spacing: .08em;
    margin: 4px 0 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: #aeb6cc; font-size: 14px; transition: color .16s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px;
    color: #6f7792;
}
.footer-bottom a { color: #8d95ad; }

/* ---------- 工具类 ---------- */
.flex { display: flex; align-items: center; gap: 12px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.link-danger { color: var(--err); font-weight: 600; }
.link-plain { color: var(--ink-2); font-weight: 600; }
.link-plain:hover { color: var(--brand); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
    .feat-card { aspect-ratio: 16 / 9; max-width: 640px; }
    .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-page { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-box .mobile-brand { display: flex; }
    .footer-grid.footer-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .main-nav { order: 3; width: 100%; flex-basis: 100%; height: 46px; align-items: center; justify-content: flex-start; border-top: 1px solid rgba(15, 23, 42, .05); }
    .header-inner { flex-wrap: wrap; gap: 12px; height: auto; padding: 8px 24px 0; }
    .creator-layout { grid-template-columns: 1fr; }
    .creator-side .side-inner { position: static; }
    .creator-menu { display: flex; flex-wrap: wrap; gap: 4px; }
    .creator-menu .cm-head { width: 100%; }
    .detail-layout { grid-template-columns: 1fr; gap: 28px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid.footer-grid-4 { grid-template-columns: 1fr 1fr; }
    .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .grid-cards { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .section { padding-top: 44px; }
    .flash { min-width: 0; width: calc(100vw - 32px); }
}

/* ---------- 轻提示（app.js toast） ---------- */
.jz-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, .92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.5;
    z-index: 9999;
    max-width: 80vw;
    box-shadow: 0 10px 28px rgba(2, 6, 23, .28);
    animation: jzToastIn .25s ease;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jz-toast-error { background: rgba(190, 18, 60, .94); }
.jz-toast-out { opacity: 0; transform: translateX(-50%) translateY(10px); }
@keyframes jzToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tb-btn:disabled { opacity: .55; cursor: default; }

/* ============================================================
   v2：创作者分组菜单 / 多内容类型 / 评论 / 数据组件
   ============================================================ */

/* ---------- 分组侧栏 ---------- */
.creator-menu .cm-group {
    padding: 15px 12px 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #9aa1b2;
}
.creator-menu .cm-sep {
    border-top: 1px dashed var(--line);
    margin: 10px 4px 8px;
}

/* ---------- 类型徽章 ---------- */
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.8;
    white-space: nowrap;
}
.type-doc   { background: rgba(100, 116, 139, .13); color: #475569; }
.type-video { background: rgba(var(--brand-2-rgb), .1);  color: var(--brand-2); }
.type-audio { background: rgba(8, 145, 178, .11);  color: #0e7490; }
.type-image { background: rgba(225, 29, 72, .1);   color: #be123c; }

/* ---------- 媒体缩略 / 播放角标 ---------- */
.media-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #0b0e14;
    flex: none;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.media-thumb .mt-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-thumb .mt-icon svg {
    width: 25px;
    height: 25px;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}
.media-thumb .mt-icon.is-audio svg { width: 20px; height: 20px; }
.media-thumb .dur-tag {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(2, 6, 23, .74);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.media-cell { width: 140px; flex: none; }
.media-cell .media-thumb { width: 140px; height: 80px; }

/* ---------- 前台列表卡片角标（配合 .post-card 等定位容器使用） ---------- */
.post-type-tag { position: absolute; left: 10px; top: 10px; z-index: 2; }

/* ---------- 详情页媒体播放 ---------- */
.media-stage { margin: 0 0 8px; }
.media-stage video {
    width: 100%;
    max-height: 560px;
    border-radius: var(--radius-lg);
    background: #000;
    display: block;
    box-shadow: var(--shadow-md);
}
.media-audio {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(var(--brand-rgb), .06), rgba(var(--brand-2-rgb), .05));
    box-shadow: var(--shadow-sm);
}
.media-audio .ma-cover {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    object-fit: cover;
    flex: none;
    box-shadow: var(--shadow-sm);
    background: var(--surface-2);
}
.media-audio .ma-info { flex: 1; min-width: 0; }
.media-audio .ma-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-audio audio { width: 100%; display: block; }
.media-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
    margin: 16px 0 4px;
}

/* ---------- 评论区 ---------- */
.comments-wrap { margin-top: 30px; }
.comment-headline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.comment-headline h3 { font-size: 18px; font-weight: 800; }
.comment-headline .cn { color: var(--muted); font-size: 13px; }
.comment-box { display: flex; gap: 12px; margin-bottom: 6px; }
.comment-box .avatar { flex: none; }
.comment-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    padding: 11px 14px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 88px;
    color: var(--ink);
    line-height: 1.7;
}
.comment-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .13);
}
.comment-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; }
.comment-foot .hint { font-size: 12.5px; color: var(--muted); }
.comment-item { display: flex; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.comment-item .avatar { flex: none; }
.comment-main { flex: 1; min-width: 0; }
.comment-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-name { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.comment-name .me-flag {
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-size: 10.5px;
    font-weight: 600;
}
.comment-time { font-size: 12px; color: var(--muted); font-weight: 400; }
.comment-body { margin-top: 5px; font-size: 14.5px; line-height: 1.7; word-break: break-word; white-space: pre-wrap; }
.comment-del { margin-left: auto; }

/* ---------- 数据：柱状趋势 ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.bar-col .bar-i {
    width: 100%;
    max-width: 36px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, var(--glow), var(--brand-2));
    min-height: 3px;
    opacity: .92;
    transition: height .3s;
}
.bar-col:hover .bar-i { opacity: 1; }
.bar-col .bar-l { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bar-col .bar-v {
    font-size: 10px;
    color: #a0a7b8;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bar-col .bar-i.alt { background: linear-gradient(180deg, #10b981, #34d399); }
.bar-col.is-today .bar-i { background: linear-gradient(180deg, var(--accent), #fbbf24); }

/* ---------- 钱包卡（提现） ---------- */
.wallet-card {
    background: linear-gradient(135deg, #141737 0%, #261a52 100%);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.wallet-card::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--glow-rgb), .28), transparent 65%);
}
.wallet-card .wb { color: var(--soft); font-size: 12.5px; letter-spacing: .06em; }
.wallet-card .wn {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.wallet-card .wn small { font-size: 15px; font-weight: 600; color: var(--soft); margin-right: 3px; }
.wallet-meta { display: flex; gap: 36px; margin-top: 20px; color: var(--soft); font-size: 13px; flex-wrap: wrap; position: relative; z-index: 1; }
.wallet-meta b { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- 关注按钮 ---------- */
.following-state .btn-following { display: none; } /* 预留 */

/* ---------- 主页概览：快速创作 / 最近作品 ---------- */
.quick-create {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 18px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.quick-create:hover {
    border-color: rgba(var(--brand-rgb), .45);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    text-decoration: none;
}
.qc-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.qc-doc   { background: linear-gradient(135deg, #64748b, #94a3b8); }
.qc-video { background: linear-gradient(135deg, var(--brand-2), var(--soft)); }
.qc-audio { background: linear-gradient(135deg, #0e7490, #22d3ee); }
.qc-image { background: linear-gradient(135deg, #be123c, #fb7185); }
.qc-name  { font-size: 15px; font-weight: 700; color: var(--ink); }
.qc-sub   { font-size: 12px; color: var(--muted); }
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { text-decoration: none; }
.list-row .row-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-row .row-sub {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}
.list-row .row-sub .type-badge { margin-right: 4px; }
@media (max-width: 1080px) {
    .grid-2col { grid-template-columns: 1fr !important; }
}

/* ---------- 前台列表卡媒体角标（v2 多类型） ---------- */
.card-media .dur-tag,
.card-media .img-tag {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(2, 6, 23, .72);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.card-media.media-coverless {
    background: linear-gradient(140deg, #181c2c, #251b3d);
}
.card-media .no-cover.is-media { color: rgba(255, 255, 255, .9); }

/* ---------- 详情页评论正文 ---------- */
.comment-text {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ink-2);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.comment-topline .me-flag {
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.9;
    align-self: center;
}

/* ============================================================
   v3：作者页资料分组胶囊 + 个人资料“更多资料”头部布局
   ============================================================ */

/* ---- 作者页：深色页头 band 上的分组资料胶囊 ---- */
.profile-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    min-width: 0;
}
.profile-group .pg-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #aeb6d2;
}
.profile-group .pg-name::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
}
.profile-group .pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-chip {
    background: rgba(255, 255, 255, .94);
    color: #334155;
    border-radius: 999px;
    padding: 4px 13px;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(2, 6, 23, .12);
}

/* ---- 个人资料：更多资料标题与可见范围同行 ---- */
.profile-more-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 28px;
    flex-wrap: wrap;
    margin: 28px 0 16px;
    padding-top: 4px;
}
.profile-more-head .more-title { min-width: 0; }
.profile-more-head .more-name { font-weight: 700; font-size: 15px; line-height: 1.5; }
.profile-more-head .more-note { font-size: 12px; font-weight: 400; }
.profile-more-head .more-vis { width: min(340px, 100%); }
.profile-more-head .more-vis .form-label { margin-bottom: 6px; }
.profile-more-head .more-vis .select { width: 100%; }
.profile-more-head .more-vis .form-hint { margin-top: 6px; }
@media (max-width: 640px) {
    .profile-more-head .more-vis { width: 100%; }
}

/* ============================================================
   v4：星座胶囊 + 个人照片（创作者主页相册 / 个人资料管理）
   ============================================================ */

/* ---- 星座高亮胶囊（作者页深色 band 内首枚胶囊） ---- */
.pi-chip-zodiac {
    background: linear-gradient(135deg, #6d5cff 0%, #9b5cff 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(var(--brand-2-rgb), .38);
}

/* ---- 作者页：个人相册照片墙 ---- */
.photo-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.photo-wall img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    background: var(--surface-2);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: zoom-in;
}
.photo-wall img:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
@media (max-width: 760px) {
    .photo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 个人资料页：照片管理面板 ---- */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
}
.photo-cell {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
}
.photo-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-del-form {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
}
.photo-del-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: rgba(12, 15, 23, .55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: background .15s ease;
}
.photo-del-btn:hover { background: var(--err); }
.photo-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 4 / 3;
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.photo-add:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(var(--brand-rgb), .04);
}

/* ---------- 推荐机制 v5：内容互动栏（点赞/收藏/分享/举报） ---------- */
.article-actions .aa-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.article-actions .aa-form { display: inline-flex; margin: 0; }
.article-actions .aa-form button { font-family: inherit; }
.article-actions .share-btn {
    text-decoration: none;
    cursor: pointer;
    font-size: 13.5px;
    line-height: 1.4;
}
.article-actions .share-btn .aa-n {
    margin-left: 3px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .85;
}
.article-actions .aa-report { margin-left: auto; }
.article-actions .aa-like.is-on {
    color: #e11d48;
    border-color: rgba(225, 29, 72, .4);
    background: #fff5f6;
}
.article-actions .aa-fav.is-on {
    color: #b45309;
    border-color: rgba(180, 83, 9, .35);
    background: #fffbeb;
}
.article-actions .share-btn.is-on svg { fill: currentColor; }

/* ============================================================
   发现页 v1：竖屏双列瀑布流（A 形态）/ 沉浸式竖屏流（B 形态）
   ============================================================ */

/* ---------- 发现页：页头 / 工具条 ---------- */
.dis-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 40px;
}
.dis-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 2px;
}
@media (max-width: 720px) {
    .dis-subbar .input { width: 150px !important; }
    .dis-head .btn { padding: 8px 14px; font-size: 13px; }
}

/* ---------- 竖卡瀑布（首页/发现/栏目共用）：单层多列 CSS 瀑布，2/3/5 列自适应 ---------- */
.wf-grid {
    columns: 2;
    column-gap: 20px;
}
.wf-grid .wf-card {
    break-inside: avoid;
    margin-bottom: 20px;
}
@media (min-width: 641px) and (max-width: 1079px) {
    .wf-grid { columns: 3; }
}
@media (min-width: 1080px) {
    .wf-grid { columns: 5; }
}
@media (max-width: 640px) {
    .wf-grid { column-gap: 12px; }
    .wf-grid .wf-card { margin-bottom: 12px; }
}
.wf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease;
}
.wf-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--brand-rgb), .3);
}

/* 图卡媒体（9:16 竖幅） */
.wf-media {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-2-rgb), .12) 55%, #e4f3fb);
}
.wf-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.wf-card:hover .wf-media > img { transform: scale(1.05); }
.wf-media .no-cover.is-media {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 100% at 18% 8%, rgba(var(--glow-rgb), .16), transparent 56%),
        linear-gradient(155deg, rgba(var(--brand-rgb), .1), #e7edf8 58%, #eef4ea);
}

/* 置顶 / 张数 角标 */
.wf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(12, 10, 30, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}
.wf-media > .wf-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}
.wf-tag {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(2, 6, 23, .72);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 城市角标（同城内容；文字卡在 .wf-text-top 内，图卡浮在媒体左下角） */
.wf-city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(2, 6, 23, .72);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.wf-city svg { flex: none; opacity: .9; }
.wf-city .wf-city-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wf-media > .wf-city {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    max-width: calc(100% - 90px);
}
.wf-text-top .wf-city {
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
}

/* 图卡文字区 */
.wf-cap {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 14px 16px 6px;
}
.wf-cap-title {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.wf-author {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 12.5px;
}
.wf-author .avatar {
    width: 20px;
    height: 20px;
    border: 0;
    box-shadow: none;
    flex: none;
}
.wf-author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文字卡（只展示标题） */
.wf-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 22px 20px 16px;
    background:
        radial-gradient(130% 90% at 100% 0%, rgba(var(--brand-2-rgb), .1), transparent 58%),
        linear-gradient(160deg, #fbfbff 0%, #f5f4fc 100%);
}
.wf-text-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-text-title {
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.wf-text-cat {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
}

/* 互动数据行（播放 / 点赞 / 评论） */
.wf-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 14px;
    margin-top: 6px;
    border-top: 1px dashed var(--line);
}
.wf-num {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .wf-meta { gap: 12px; }
}

/* ============================================================
   沉浸式竖屏流（B 形态：scroll-snap 全屏竖卡）
   ============================================================ */
.reel-body {
    height: 100vh;
    overflow: hidden;
    background: #05070f;
    color: #f2f3f7;
}
@supports (height: 100dvh) {
    .reel-body { height: 100dvh; }
}

/* 顶部悬浮条 */
.reel-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: max(14px, env(safe-area-inset-top)) 12px 30px;
    background: linear-gradient(180deg, rgba(2, 4, 12, .55), rgba(2, 4, 12, 0));
    pointer-events: none;
}
.reel-bar-in {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1040px;
    margin: 0 auto;
    color: #fff;
}
.reel-back,
.reel-brand,
.reel-label,
.reel-tabs,
.reel-count { pointer-events: auto; }
.reel-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    flex: none;
}
.reel-back:hover { background: rgba(255, 255, 255, .26); }
.reel-brand {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* 「推荐」固定频道胶囊（沉浸流不再按栏目筛选） */
.reel-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
    flex: none;
}
.reel-label svg { opacity: .9; }
.reel-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex: none;
}
.reel-tabs a {
    padding: 5px 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .85);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.reel-tabs a.is-on {
    color: #10122a;
    background: #fff;
}
.reel-count {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: none;
}
@media (max-width: 700px) {
    .reel-brand { display: none; }
    .reel-tabs a { padding: 5px 10px; font-size: 12px; }
    .reel-count { font-size: 11px; padding: 4px 9px; }
}

/* 滚动舞台：整屏 scroll-snap */
.reel-main {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.reel-main::-webkit-scrollbar { display: none; }
@supports (height: 100dvh) {
    .reel-main { height: 100dvh; }
}
.reel-card {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #070a15;
}
.reel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0d1a;
}
.reel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reel-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 4, 12, .5) 0%, transparent 24%, transparent 58%, rgba(2, 4, 12, .62) 88%, rgba(2, 4, 12, .78) 100%);
}
.reel-stage > .no-cover.is-media {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 20% 8%, rgba(var(--glow-rgb), .3), transparent 60%),
        radial-gradient(110% 90% at 85% 100%, rgba(var(--brand-2-rgb), .28), transparent 60%),
        linear-gradient(155deg, #1a1e3d, #0b0f20 60%, #201536);
}
.reel-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
}

/* 视频卡（content_type=2）：整屏播放，原生控件（信息区/侧栏上移避开控件条） */
.reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #04060e;
}
.reel-card-video .reel-veil {
    background: linear-gradient(180deg, rgba(2, 4, 12, .4) 0%, transparent 20%, transparent 62%, rgba(2, 4, 12, .46) 100%);
}
.reel-card-video .reel-info {
    bottom: calc(74px + env(safe-area-inset-bottom));
    padding-bottom: 0;
}
.reel-card-video .reel-side {
    bottom: calc(180px + env(safe-area-inset-bottom));
}

/* 文字卡（只展示标题，不展示封面/正文） */
.reel-card-art .reel-stage {
    background:
        radial-gradient(95% 75% at 18% 0%, rgba(var(--brand-2-rgb), .3), transparent 60%),
        radial-gradient(95% 75% at 85% 100%, rgba(var(--brand-rgb), .34), transparent 60%),
        linear-gradient(158deg, #161838, #0a0e1e 55%, #221441);
}
.reel-art {
    position: relative;
    z-index: 2;
    max-width: min(660px, 84vw);
    padding: 90px 28px 150px;
    text-align: center;
    pointer-events: none;
}
.reel-art-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.reel-card .type-doc   { background: rgba(255, 255, 255, .14); color: #e7e9f4; }
.reel-card .type-video { background: rgba(var(--brand-2-rgb), .22); color: var(--soft); }
.reel-card .type-audio { background: rgba(103, 212, 232, .2);  color: #c9f2fa; }
.reel-card .type-image { background: rgba(255, 148, 178, .2);  color: #ffd3e0; }
.reel-art-cat {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .92);
    font-size: 11.5px;
    font-weight: 600;
}
.reel-art-title {
    color: #fff;
    font-size: clamp(22px, 4.2vw, 38px);
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: -.01em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    word-break: break-word;
}

/* 底部信息（作者 / 栏目 / 图集角标） */
.reel-info {
    position: absolute;
    left: 20px;
    right: 96px;
    bottom: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 max(26px, env(safe-area-inset-bottom));
    pointer-events: none;
}
.ri-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reel-tag,
.reel-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(2, 6, 23, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
}
.reel-badge { letter-spacing: .05em; }
.ri-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.ri-by {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.ri-by .avatar {
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    background: #fff;
    flex: none;
}
.ri-author {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ri-cat {
    flex: none;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
    font-size: 11.5px;
    font-weight: 500;
}
@media (max-width: 640px) {
    .reel-info { left: 14px; right: 88px; }
}

/* 右侧竖排：详情 / 播放 / 点赞 / 评论 */
.reel-side {
    position: absolute;
    right: 10px;
    bottom: calc(112px + env(safe-area-inset-bottom));
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}
.reel-side .rs-btn { pointer-events: auto; }
.rs-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 56px;
    padding: 8px 0;
    border-radius: 999px;
    background: rgba(8, 11, 22, .34);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.rs-btn svg { filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .4)); }
a.rs-btn:hover { background: rgba(var(--brand-rgb), .55); transform: scale(1.05); }
a.rs-go {
    width: 58px;
    padding: 9px 0;
    border-color: transparent;
    background: linear-gradient(150deg, rgba(var(--brand-rgb), .9), rgba(var(--brand-2-rgb), .85));
    box-shadow: 0 10px 24px -10px rgba(var(--glow-rgb), .9);
}
.rs-hint {
    margin-top: 6px;
    color: rgba(255, 255, 255, .6);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

/* 空态 */
.reel-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.reel-empty-in { max-width: 430px; text-align: center; }
.reel-empty-icon { font-size: 54px; line-height: 1; margin-bottom: 20px; }
.reel-empty h2 { color: #fff; font-size: 22px; margin-bottom: 10px; }
.reel-empty p { color: rgba(255, 255, 255, .62); font-size: 14.5px; margin-bottom: 26px; }

/* ============================================================
   v5：详情页图集网格 + 全屏图片查看器（点击看图 / 封面 / 正文插图）
   ============================================================ */

/* ---------- 图集（详情页 content_type=4）：左右滑动查看，一屏一张 ---------- */
.gallery-grid {
    columns: 3 230px;
    column-gap: 18px;
}
.g-card {
    margin: 0 0 18px;
    break-inside: avoid;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    transition: transform .18s ease, box-shadow .18s ease;
}
.g-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.g-card img { display: block; width: 100%; height: auto; }
.g-card figcaption {
    padding: 9px 14px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    word-break: break-word;
}

/* 详情页图集：横向滑动轨道（一屏一张；触摸左右滑动 / 触控板横滑 / 箭头翻页） */
.gallery-stage { margin: 30px 0 6px; position: relative; }
.gallery-stage .gallery-grid {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.gallery-stage .gallery-grid::-webkit-scrollbar { width: 0; height: 0; }
.gallery-stage .g-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.gallery-stage .g-card img {
    max-height: 62vh;
    object-fit: contain;
    background: #10131f;
}
/* 翻页箭头（图片 ≥2 张时由脚本注入） */
.gallery-stage .g-nav {
    position: absolute;
    top: 40%;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity .15s ease, background .15s ease;
}
.gallery-stage .g-prev { left: 10px; }
.gallery-stage .g-next { right: 10px; }
.gallery-stage .g-nav:hover { background: #fff; }
.gallery-stage .g-nav.is-off { opacity: 0; pointer-events: none; }

/* 封面与正文插图也支持点击放大（与图集共用查看器） */
.detail-cover img { cursor: zoom-in; }
.prose img { cursor: zoom-in; }

/* ---------- 全屏图片查看器（v- 前缀独立命名，不与第三方库冲突） ---------- */
body.v-lock { overflow: hidden; }

.v-viewer {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    background: rgba(4, 6, 15, .94);
}
.v-viewer.is-open { display: flex; animation: v-viewer-in .18s ease; }
@keyframes v-viewer-in { from { opacity: 0; } }

.v-track-wrap { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.v-viewer.v-grabbing .v-track-wrap { cursor: grabbing; }
.v-viewer.is-single .v-track-wrap { cursor: default; }
.v-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform .34s cubic-bezier(.25, .7, .3, 1);
}
.v-track.v-noanim { transition: none; }
.v-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 3vw 52px; /* 顶留 HUD、底部留说明条；沉浸竖屏尽量给足图片高度 */
}
.v-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    background: #0b0e1a;
    box-shadow: 0 34px 90px -24px rgba(0, 0, 0, .65);
    user-select: none;
    -webkit-user-drag: none;
}
.v-slide.has-err img { visibility: hidden; }
.v-slide.has-err::after {
    content: attr(data-err);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
}

/* HUD：顶部计数 + 关闭 */
.vs-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 12px 0;
    pointer-events: none;
}
.vs-hud > * { pointer-events: auto; }
.vs-count {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .05em;
}
.vs-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.vs-icon-btn:hover { background: rgba(255, 255, 255, .24); }
.vs-icon-btn svg { display: block; }
.vs-icon-btn .vs-x { width: 15px; height: 15px; }
.vs-icon-btn .vs-chev { width: 19px; height: 19px; }

/* 上/下箭头（右侧竖排；窄屏隐藏，以纵向滑动为主） */
.vs-arrow { position: absolute; right: 16px; z-index: 6; }
.vs-arrow .vs-chev { transform: rotate(90deg); } /* 沉浸竖屏：图标由左/右转为上/下 */
.vs-arrow.vs-prev { top: calc(50% - 56px); }
.vs-arrow.vs-next { top: calc(50% + 16px); }
.vs-arrow.is-off { opacity: .35; pointer-events: none; }
@media (max-width: 720px) {
    .vs-arrow { display: none; }
    .v-slide { padding: 60px 0 48px; }
}

/* 底部说明条（当前图片 alt） */
.vs-cap {
    position: absolute;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 6;
    display: none;
    max-width: min(560px, 86vw);
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(8, 11, 22, .5);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
}
.vs-cap.show { display: block; }

/* 查看器小补丁：触摸手势约束；单图时隐藏切换箭头 */
.v-track-wrap { touch-action: none; -webkit-user-select: none; user-select: none; }
.v-viewer.is-single .vs-arrow { display: none; }

/* ============================================================
   图片贴 v6：创作者图集编辑器（发布 / 编辑图片贴）
   ============================================================ */

/* ---------- 图集面板（列表 / 空态 / 工具条） ---------- */
.gallery-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px 16px 16px;
}
.gallery-list { display: grid; gap: 10px; }
.gallery-list:empty { display: none; }
.gallery-empty {
    padding: 26px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}
.gallery-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
}

/* ---------- 单图条目：缩略图 + 说明 + 排序 / 删除 ---------- */
.gallery-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}
.gi-thumb {
    flex: none;
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--surface);
}
.gi-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.gi-cap { width: 100%; }
.gi-meta { color: var(--muted); font-size: 12.5px; }
.gi-first { color: var(--brand); font-weight: 600; }
.gi-ops { flex: none; display: flex; align-items: center; gap: 6px; }
.gi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.gi-btn:hover { border-color: var(--brand); color: var(--brand); }
.gi-btn[disabled] { opacity: .35; cursor: default; }
.gi-btn[disabled]:hover { border-color: var(--line); color: var(--ink-2); }
.gi-del { color: var(--err); font-size: 17px; }
.gi-del:hover { border-color: var(--err); color: var(--err); }

/* ---------- AI 生图面板 ---------- */
.ai-box {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.ai-box .input { background: var(--surface); }

@media (max-width: 720px) {
    .gallery-item { flex-wrap: wrap; }
    .gi-thumb { width: 64px; height: 64px; }
    .gi-ops { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   发现页 v2：作品发现（搜索 / 排序 / 筛选）+ 创作者发现（卡片墙）
   ============================================================ */

/* ---------- 页头说明 / 分段 Tab ---------- */
.dis-lead {
    margin: 12px 0 0;
    max-width: 640px;
    color: var(--muted);
    font-size: 14.5px;
}
.dis-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 20px 0 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
}
.dis-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 600;
    transition: background .18s, color .18s, box-shadow .18s;
}
.dis-tab:hover { color: var(--brand); }
.dis-tab.is-active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.dis-tab-n {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dis-tab.is-active .dis-tab-n { color: #fff; background: var(--brand-grad); }

/* ---------- 工具条部件 ---------- */
.chip.is-sm { padding: 5px 13px; font-size: 13px; }
.dis-sep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--line);
}
.dis-sort-label {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
}
.dis-count {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13.5px;
}
.dis-count b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- 城市筛选（单行横向滑动，标签吸边） ---------- */
.dis-cityrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 2px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.dis-cityrow::-webkit-scrollbar { display: none; }
.dis-cityrow > * { flex: none; }
.dis-cityrow .city-bar-label {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 2px 12px 2px 0;
    background: linear-gradient(90deg, var(--bg) 0 76%, rgba(var(--bg-rgb), 0) 100%);
}
.dis-cityrow .chip { display: inline-flex; align-items: center; gap: 5px; }
.dis-cityrow .chip svg { flex: none; opacity: .9; }
.dis-num {
    margin-left: 1px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.chip.is-active .dis-num { color: rgba(255, 255, 255, .82); }

/* ---------- 创作者卡片墙 ---------- */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 16px;
}
.pcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--brand-rgb), .28);
}
.pcard-top { display: flex; align-items: center; gap: 13px; }
.pcard-ava { flex: none; display: inline-flex; }
.pcard-ava .avatar { width: 58px; height: 58px; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.pcard-id { flex: 1; min-width: 0; }
.pcard-name { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.pcard-name:hover { color: var(--brand); }
.pcard-id .badge, .pcard-id .vbadge { margin-left: 6px; vertical-align: 2px; }
.pcard-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
}
.pcard-sub svg { flex: none; opacity: .8; }
.pcard-sub .dot { opacity: .45; }

/* 资料胶囊 / 锁定提示 / 兴趣行 */
.pcard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
}
.pc-chip.is-star { color: var(--brand-2); background: rgba(var(--brand-2-rgb), .12); }
.pcard-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12.5px;
}
.pcard-lock svg { flex: none; opacity: .85; }
.pcard-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pcard-line-k {
    flex: none;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.pcard-line-v { min-width: 0; color: var(--ink-2); font-size: 13px; }
.pcard-bio { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }

/* 单行 / 双行截断 */
.clamp-1,
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }

/* 作品缩略图（最多 3 张） */
.pcard-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pcard-work {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-2-rgb), .12) 55%, #e4f3fb);
}
.pcard-work img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.pcard-work:hover img { transform: scale(1.06); }
.pcard-work-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(var(--brand-rgb), .45);
}
.pcard-nowork {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 82px;
    border-radius: 10px;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: 12.5px;
}

/* 底部数据 + 关注 */
.pcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.pcard-stats { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pcard-stats b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.pcard-follow { margin: 0; }

@media (max-width: 720px) {
    .dis-tab { padding: 8px 15px; font-size: 14px; }
    .people-grid { grid-template-columns: 1fr; gap: 14px; }
    .pcard { padding: 15px; }
}

/* ---------- 发现页 v2.1：重置链接 / 创作者搜索条 ---------- */
.dis-reset {
    margin-left: 10px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.dis-reset:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .dis-subbar .dis-psearch { width: 100%; }
    .dis-subbar .dis-psearch .input { flex: 1; width: auto !important; }
}

/* ---------- 详情浮层：卡片弹窗式打开内容（片段由 app.js 注入） ---------- */
.dm-layer {
    position: fixed;
    inset: 0;
    z-index: 850;             /* 高于站点头部(60)，低于图片查看器(900)与轻提示(9999) */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s;
}
.dm-layer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
body.dm-lock { overflow: hidden; }

.dm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 28, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.dm-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(1080px, 94vw);
    height: min(88vh, 1000px);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translate(-50%, -48%);
    transition: transform .18s ease;
}
.dm-layer.is-open .dm-panel { transform: translate(-50%, -50%); }

.dm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink-2);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.dm-close:hover { color: var(--ink); border-color: #d5d8e4; }

.dm-scroll {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.dm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 110px 0;
    color: var(--muted);
    font-size: 14px;
}
.dm-spin {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(var(--brand-rgb), .16);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: dmSpin .8s linear infinite;
}
@keyframes dmSpin { to { transform: rotate(360deg); } }

/* 浮层内正文按面板宽度排版；关闭按钮独占右上角，隐藏弹窗里意义不大的「返回首页」 */
.dm-body .container { max-width: none; padding: 26px 30px 34px; }
.dm-body .detail-head { padding-right: 40px; }
.dm-body .detail-head a.chip[href="/"] { display: none; }

@media (max-width: 720px) {
    .dm-panel { width: 100%; height: 100%; border-radius: 0; }
    .dm-body .container { padding: 18px 16px 26px; }
}

/* ---------- 客户端入口页（client.php） ---------- */
.client-page { padding-top: 36px; padding-bottom: 44px; }
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    align-items: stretch;
}
.client-card { display: flex; flex-direction: column; scroll-margin-top: 92px; }
.client-card .panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 26px 24px 28px;
}
.client-meta { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.client-note { color: var(--muted); font-size: 13.5px; line-height: 1.8; margin: 0; max-width: 380px; }
.client-qr {
    width: 210px;
    height: 210px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
}
.client-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 2px; }

@media (max-width: 860px) {
    .client-card { scroll-margin-top: 126px; }
}
@media (max-width: 640px) {
    .client-page { padding-top: 26px; }
    .client-qr { width: 180px; height: 180px; }
    .client-actions { width: 100%; }
    .client-actions .btn { flex: 1 1 auto; }
}

/* ---------- 创作者中心 · 移动端微调（App WebView 内嵌访问） ---------- */
@media (max-width: 640px) {
    .creator-layout { padding: 16px 0 48px; gap: 16px; }
    .creator-menu { padding: 8px; gap: 3px; }
    .creator-menu a.cm-item { padding: 9px 11px; font-size: 13.5px; }
    .creator-side .cm-tip { margin-top: 10px; padding: 10px 12px; font-size: 12px; }
    .creator-main .page-title-row { margin-bottom: 16px; }
    .creator-main .stat-grid { gap: 10px; margin-bottom: 18px; }
    .creator-main .stat-card { padding: 14px 14px 12px; }
    .creator-main .stat-card .sc-num { font-size: 24px; }
    .creator-main .stat-card .sc-ico { width: 32px; height: 32px; right: 10px; top: 10px; }
    .creator-main .panel-head { padding: 14px 16px; }
    .creator-main .panel-body { padding: 16px; }
    .creator-main .bars { gap: 3px; }
}

/* ============================================================
   创作者中心 · 移动端适配 v2（顶部横滑导航 / 表格压缩 / 编辑器紧凑）
   仅 ≤860px 与 ≤640px 生效；桌面端（>860px）完全不受影响
   ============================================================ */
@media (max-width: 860px) {
    /* 侧栏改为顶部单行横滑导航：隐藏头像区 / 分组标题 / 分隔线 */
    .creator-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .creator-menu::-webkit-scrollbar { display: none; }
    .creator-menu .cm-head,
    .creator-menu .cm-group,
    .creator-menu .cm-sep { display: none; }
    .creator-menu a.cm-item { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
    .creator-menu a.cm-item svg { flex: none; }

    /* 30 天趋势图：固定柱宽横向滑动，数值不再被截断 */
    .creator-main .bars {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .creator-main .bars::-webkit-scrollbar { display: none; }
    .creator-main .bar-col { flex: 0 0 34px; }
    .creator-main .bar-v { max-width: none; white-space: nowrap; }
}

@media (max-width: 640px) {
    /* 数据表格：保留表格结构，压缩间距；宽表在 .table-wrap 内横向滑动 */
    .creator-main .table { min-width: 0; font-size: 13px; }
    .creator-main .table th { padding: 9px 12px; font-size: 11.5px; }
    .creator-main .table td { padding: 10px 12px; }
    .creator-main .table .t-title { max-width: 170px; }
    .creator-main .table .t-actions { gap: 6px; }
    .creator-main .table .btn-sm { padding: 8px 12px; }
    .creator-main .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .creator-main .media-cell { width: 104px; }
    .creator-main .media-cell .media-thumb { width: 104px; height: 59px; }

    /* 编辑器与上传区：压缩留白，降低编辑区最小高度 */
    .creator-main .editor-area { min-height: 260px; padding: 15px 16px; }
    .creator-main .tb-btn { min-width: 36px; height: 36px; }
    .creator-main .upload-zone { gap: 12px; padding: 14px; }
    .creator-main .upload-zone .uz-icon { width: 44px; height: 44px; }

    /* 图集条目：放大排序 / 删除按钮触控面积 */
    .creator-main .gi-btn { width: 36px; height: 36px; }

    /* 空状态：减少上下留白 */
    .creator-main .empty-state { padding: 48px 18px; }
}

/* ============================================================
   创作者中心 · 移动端适配 v3（参考抖音：扁平标签 / 触屏细节 / 吸底操作条）
   仅 ≤860px 与 ≤640px 生效；桌面端（>860px）完全不受影响
   ============================================================ */
@media (max-width: 860px) {
    /* 顶部标签：激活项去掉色块，改为「高亮文字 + 短下划线」的扁平样式 */
    .creator-menu a.cm-item { -webkit-tap-highlight-color: transparent; }
    .creator-menu a.cm-item:active { transform: scale(.95); }
    .creator-menu a.cm-item.is-active { position: relative; background: transparent; }
    .creator-menu a.cm-item.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 20px;
        height: 3px;
        margin-left: -10px;
        border-radius: 2px;
        background: var(--brand);
    }
    .creator-main .btn { -webkit-tap-highlight-color: transparent; }

    /* 输入控件字号 ≥16px：避免 iOS 聚焦输入框时页面自动放大 */
    .creator-main .input,
    .creator-main .select,
    .creator-main .editor-area { font-size: 16px; }
}

@media (max-width: 640px) {
    /* 编辑 / 上传 / 提现：操作按钮区吸底常驻，长表单随时可提交 */
    .creator-main .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background: #fff;
        border-top: 1px solid var(--line);
        padding: 12px 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 20px -12px rgba(15, 23, 42, .18);
    }
}

/* 触屏设备（无 hover 能力）：清除点按后残留的 hover 高亮 */
@media (hover: none) and (max-width: 860px) {
    .creator-menu a.cm-item:hover { background: transparent; }
    .creator-main .table tr:hover td { background: transparent; }
}

/* ============================================================
   创作者中心 · 移动端适配 v4（创作概览专项：抖音式入口宫格 / 密度收紧）
   仅 ≤640px 与触屏 ≤860px 生效；桌面端（>860px）完全不受影响
   ============================================================ */
@media (max-width: 640px) {
    /* 快速创作：4 张竖排大卡压成 2×2 宫格入口（覆盖页面内联 flex/min-width） */
    .creator-main .quick-create {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 6px) !important;
        padding: 12px 12px 13px;
        gap: 6px;
    }
    .creator-main .quick-create:active { transform: scale(.98); }
    .creator-main .quick-create .qc-ico { width: 36px; height: 36px; border-radius: 10px; }
    .creator-main .quick-create .qc-name { font-size: 14px; }
    .creator-main .quick-create .qc-sub { font-size: 11.5px; line-height: 1.5; }

    /* 面板横向留白收紧（概览页多处内联 padding，需 !important 覆盖） */
    .creator-main .panel-body { padding-left: 14px !important; padding-right: 14px !important; }
    .creator-main .panel-body.no-pad { padding-left: 0 !important; padding-right: 0 !important; }

    /* 概览标题行与「最近作品」列表密度 */
    .creator-main .page-title-row h1 { font-size: 21px; }
    .creator-main .page-title-row .sub { font-size: 12.5px; }
    .creator-main .list-row { padding: 11px 0; gap: 10px; }
    .creator-main .list-row .row-title { font-size: 13.5px; }
    .creator-main .list-row .row-sub { font-size: 11.5px; margin-top: 4px; }
}

/* 触屏设备：清除快速入口点按后残留的 hover 高亮 */
@media (hover: none) and (max-width: 860px) {
    .creator-main .quick-create:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   创作者中心 · 移动端适配 v5（App 观感：通栏标签栏 / 扁平面板 / 整行大按钮 / 满宽留白）
   仅 ≤860px 与 ≤640px 生效；桌面端（>860px）完全不受影响
   ============================================================ */
@media (max-width: 860px) {
    /* 页面留白：修正左右 padding 被 .creator-layout 简写清零导致的内容贴边 */
    .container.creator-layout { padding: 14px 14px 56px !important; }

    /* 顶部创作标签栏：由「悬浮卡片」变为通栏无缝标签栏（细线收尾） */
    .creator-menu {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 2px 0 8px;
        border-bottom: 1px solid var(--line);
    }
    .creator-menu a.cm-item { border-radius: 999px; padding: 9px 13px; }

    /* 侧栏说明卡：去边框、浅底，降低「网页卡片」感 */
    .creator-side .cm-tip {
        border: 0;
        background: rgba(15, 23, 42, .035);
    }
}

@media (max-width: 640px) {
    /* 整站头部：移动端横向留白与内容对齐（24px → 12px），第一屏更紧凑 */
    .header-inner { padding-left: 12px; padding-right: 12px; }

    /* 页面留白：左右 12px 满宽排布（此前左右为 0，卡片直接贴屏幕边缘） */
    .container.creator-layout { padding: 10px 12px 40px !important; }

    /* 标题行：按钮整行排开，触控目标加大 */
    .creator-main .page-title-row { gap: 12px; margin-bottom: 14px; }
    .creator-main .page-title-row > .flex { width: 100%; gap: 10px !important; }
    .creator-main .page-title-row > .flex > .btn {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 12px;
        border-radius: 12px;
        font-size: 15px;
    }

    /* 面板与统计卡：去边框阴影，改为扁平分组（App 设置页观感） */
    .creator-main .panel { border: 0; box-shadow: none; }
    .creator-main > .panel { margin-bottom: 12px !important; }
    .creator-main .grid-2col { gap: 12px !important; }
    .creator-main .stat-card { border: 0; box-shadow: none; }

    /* 快捷创作：宫格卡片居中、浅底无边框、图标加大 */
    .creator-main .quick-create {
        align-items: center;
        text-align: center;
        justify-content: center;
        min-height: 106px;
        border: 0;
        background: var(--surface-2);
    }
    .creator-main .quick-create .qc-ico { width: 40px; height: 40px; }

    /* 列表与文案：字号整体上调一档 */
    .creator-main .list-row .row-title { font-size: 15px; }
    .creator-main .list-row .row-sub { font-size: 12.5px; }
    .creator-main .panel-body > .flex .chip { padding: 7px 14px !important; font-size: 13px !important; }
}