/* ============================================================
   0. CREAWITH DESIGN TOKENS (全局设计变量基座)
   ============================================================ */
:root {
  /* 品牌与画廊色系 */
  --cw-color-brand-primary: #111111;       /* 权威画廊黑 */
  --cw-color-brand-accent: #2e7c70;        /* Creawith 青绿品牌色 */
  --cw-color-brand-accent-light: #e9f7f5;  /* 品牌浅青绿背景 */

  /* 语义功能色 */
  --cw-color-success: #059669;              /* 成功绿 */
  --cw-color-error: #dc2626;                /* 错误/点赞红 */
  --cw-color-warning: #d97706;              /* 警告/收藏金 */
  --cw-color-focus: #2563eb;                /* 独立无障碍键盘聚焦蓝 */

  /* 文本与表面层级 */
  --cw-color-text-main: #111111;           /* 主文字 */
  --cw-color-text-muted: #666666;          /* 次级文字 */
  --cw-color-text-subtle: #888888;         /* 弱化文案 */
  --cw-color-surface-body: #f9fafb;        /* 画廊浅灰背景 */
  --cw-color-surface-card: #ffffff;        /* 纯白卡片底色 */
  --cw-color-surface-dark: #111827;        /* Toast/深色面板专色 */

  /* 边框 */
  --cw-color-border-light: rgba(0, 0, 0, 0.06);
  --cw-color-border-medium: rgba(0, 0, 0, 0.12);

  /* 阻尼动效 (分级控制，绝杀全站过度弹跳感) */
  --cw-motion-standard: cubic-bezier(0.16, 1, 0.3, 1); /* 普通卡片与按钮平滑过渡 */
  --cw-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 仅用于点赞/收藏图标回弹 */
  --cw-transition-fast: 180ms var(--cw-motion-standard);

  /* 阴影 */
  --cw-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --cw-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
  --cw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* 规整圆角 */
  --cw-radius-sm: 6px;
  --cw-radius-md: 10px;
  --cw-radius-lg: 12px;
  --cw-radius-full: 9999px;
}

/* 强行隐匿规则 */
[hidden] {
  display: none !important;
}

/* 无障碍键盘聚焦高亮 (独立蓝色，不混淆成功色) */
:focus-visible {
  outline: 2px solid var(--cw-color-focus) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   GLOBAL TOAST NOTIFICATION (全局消息提示框)
   ============================================================ */
.cw-toast,
#cw-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  z-index: 10000;
  
  padding: 10px 20px;
  border-radius: var(--cw-radius-full);
  background-color: var(--cw-color-surface-dark);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  
  box-shadow: var(--cw-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--cw-motion-standard), transform 220ms var(--cw-motion-standard);
  
  /* 支持毛玻璃，不支持时降级为不透明深色面板 */
  backdrop-filter: blur(8px);
}

@supports (backdrop-filter: blur(8px)) {
  .cw-toast,
  #cw-toast {
    background-color: rgba(17, 24, 39, 0.88);
  }
}

/* 激活显示态 */
.cw-toast.show,
#cw-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 移动端安全区域避让 */
@media (max-width: 768px) {
  .cw-toast,
  #cw-toast {
    bottom: calc(16px + env(safe-area-inset-bottom));
    font-size: 0.8125rem;
    padding: 8px 16px;
  }
}

/* ============================================================
   CREATOR PROFILE COVER FALLBACK (创作者主页封面缺省)
   ============================================================ */
.creator-cover--empty {
  width: 100%;
  height: 260px;
  background-color: #e5e7eb;
  background-image: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
  /* 沉静背景，无文字提示 */
}


/* ================================
   删除成功提示条
================================ */
.creawith-alert {
    max-width: 680px;
    margin: 20px auto;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
    animation: fadeInOut 3s ease forwards;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.creawith-alert.success {
    background: #E9FBF3;
    border: 1px solid #C8EED6;
    color: #3CCF8E;
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-6px); }
    10% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ================================
   栅格布局（3 → 2 → 1）
================================ */
.work-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 30px;
}
@media (max-width: 1024px) {
    .work-loop {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .work-loop {
        grid-template-columns: 1fr;
    }
}


/* ================================
   封面图统一比例（16:9）
================================ */
.work-card-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    display: block;
}
.work-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ================================
   标题最多两行
================================ */
.work-card-title a {
    display: -webkit-box;
    line-clamp: 2;            /* 标准属性（未来浏览器会支持） */
    -webkit-line-clamp: 2;    /* 当前主流浏览器使用 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ================================
   作者区域（头像 + 名字 + 浏览量）
================================ */
.work-card-meta {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
}

/* 作者信息布局 + hover 缓冲区 */
.work-card-author-box {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-bottom: 10px; /* 防止 hover 闪烁 */
}

/* 作者头像 */
.work-card-author-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

/* 作者名 */
.work-card-author {
    font-size: 14px;
    color: #555;
}

/* 浏览量 */
.work-card-views {
    font-size: 13px;
    color: #999;
}


/* ================================
   作者名片（默认隐藏）
================================ */
.author-card {
    position: absolute;
    top: 36px;
    left: 0;
    width: 220px;
    padding: 14px;
    background: #ffffff;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.98); /* 视觉升级 */
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.25,.8,.25,1);
    z-index: 20;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.08); /* 双层阴影 */
}


/* ================================
   名片内部排版（合并优化）
================================ */
.author-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}
.author-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.author-card-bio {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}
.author-card-stats,
.author-card-joined {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}

/* ================================
   名片 hover 显示（防闪烁 + scale）
================================ */
.work-card-author-box:hover .author-card,
.author-card:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* 名片隐藏延迟（防抖动） */
.work-card-author-box:hover .author-card,
.author-card:hover {
    transition-delay: 0.05s;
}

/* ================================
   右侧自动反转（可选）
================================ */
.author-card.align-right {
    right: 0;
    left: auto;
}
.author-card {
    cursor: pointer;
}

/* ================================
   名片结构模块化（A11‑2‑8）
================================ */

/* header */
.author-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.author-card-header-info {
    display: flex;
    flex-direction: column;
}

.author-card-tag {
    font-size: 12px;
    color: #4BAF9F;
    background: #E9F7F5;
    padding: 2px 6px;
    border-radius: 6px;
    margin-top: 2px;
}

/* body */
.author-card-body {
    margin-bottom: 12px;
}

/* footer（未来扩展） */
.author-card-footer {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* 关注按钮（未来） */
.author-follow-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: #4BAF9F;
    color: #fff;
    border: none;
    cursor: pointer;
}
.author-follow-btn:hover {
    background: #3a9c8d;
}

/* ================================
   作者主页（A11‑3‑3）
================================ */

/* 作者头部 */
.creator-header {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}

.creator-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.creator-info {
    flex: 1;
}

.creator-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}

.creator-tag {
    display: inline-block;
    background: #E9F7F5;
    color: #4BAF9F;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 10px;
}

.creator-bio {
    font-size: 15px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.6;
}

.creator-meta {
    font-size: 13px;
    color: #999;
}

/* 作者操作区（未来扩展） */
.creator-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 关注按钮（未来） */
.creator-follow-btn {
    padding: 8px 14px;
    background: #4BAF9F;
    color: #fff;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
.creator-follow-btn:hover {
    background: #3a9c8d;
}

/* 统计栏 */
.creator-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.creator-stat-item {
    text-align: center;
}

.stat-number {
    font-size: 20px;
    font-weight: 600;
    display: block;
}

.stat-label {
    font-size: 13px;
    color: #888;
}

/* 作品列表 */
.creator-work-list {
    margin-top: 20px;
}

/* ================================
   响应式（移动端）
================================ */
@media (max-width: 768px) {
    .creator-header {
        flex-direction: column;
        text-align: center;
    }

    .creator-actions {
        flex-direction: row;
        justify-content: center;
    }

    .creator-stats {
        justify-content: center;
    }
}

/* ================================
   作品卡片封面比例（3:4）
================================ */

/* ================================
   Layout Switcher 比例切换
   regular（默认 3:4） ↔ wide（16:9）
================================ */

/* ================================
   作品卡片 hover 动画（A11‑3‑5‑Plus）
================================ */

/* ==========================================
   Wide 模式视觉增强（结构增强）
========================================== */

/* ==========================================
   Wide 模式内容布局增强（A11‑3‑8‑Wide）
========================================== */

/* ==========================================
   Wide 模式封面裁切增强（A11‑3‑10‑Wide）
========================================== */

/* ================================
   作者顶部信息区（A11‑3‑7）
================================ */
.creator-header {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 0 40px;
    border-bottom: 1px solid #E5E5E5; /* 浅灰分割线 */
}

/* 头像 */
.creator-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* 圆形头像 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 柔和阴影 */
}

/* 作者名 */
.creator-name {
    font-size: 28px;
    font-weight: 700;
    color: #2F2F2F; /* 深灰（柔和黑） */
    margin: 0 0 8px;
}

/* 简介 */
.creator-bio {
    font-size: 15px;
    color: #6A6A6A; /* 中灰（副文字） */
    margin: 0 0 12px;
    line-height: 1.6;
}

/* 关注按钮 */
.creator-follow-btn {
    background: #4BAF9F; /* Creawith 主色（柔和青绿） */
    color: #FFFFFF; /* 白色文字 */
    border: none;
    padding: 8px 20px;
    border-radius: 999px; /* 胶囊按钮 */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.creator-follow-btn:hover {
    background: #2E7C70; /* 深青绿（Accent Dark） */
}

/* 统计信息 */
.creator-stats {
    margin-top: 12px;
    font-size: 14px;
    color: #6A6A6A; /* 中灰 */
}

.creator-stats span {
    margin-right: 6px;
}

/* 链接图标（未来扩展） */
.creator-links {
    margin-top: 10px;
}

/* ================================
   关注按钮 UI 动画（A11‑3‑7‑Plus‑UI）
================================ */

/* 基础状态 */
.creator-follow-btn {
    background: #4BAF9F;
    color: #FFFFFF;
    border: none;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

/* hover：轻柔亮起 */
.creator-follow-btn:hover {
    background: #2E7C70;
    box-shadow: 0 4px 12px rgba(75,175,159,0.25);
}

/* 点击：轻微缩放 */
.creator-follow-btn:active {
    transform: scale(0.95);
}

/* 已关注状态 */
.creator-follow-btn.followed {
    background: #E9F7F5;
    color: #2E7C70;
    border: 1px solid #CDEAE6;
}

/* 已关注 hover：更轻柔 */
.creator-follow-btn.followed:hover {
    background: #D8F1EC;
}

/* ================================
   A11‑3‑7‑Plus‑UI‑Pro：关注按钮
================================ */

/* 基础按钮 */
.creator-follow-btn {
    background: #4BAF9F;
    color: #FFFFFF;
    border: none;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* hover：轻柔上浮 + 亮起 */
.creator-follow-btn:hover {
    background: #2E7C70;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(75,175,159,0.25);
}

/* active：轻微压下（真实手感） */
.creator-follow-btn:active {
    transform: scale(0.95);
}

/* 已关注状态（浅青绿） */
.creator-follow-btn.followed {
    background: #E9F7F5;
    color: #2E7C70;
    border: 1px solid #CDEAE6;
    box-shadow: none;
    animation: followFade 0.25s ease;
}

/* 已关注 hover：更柔和 */
.creator-follow-btn.followed:hover {
    background: #D8F1EC;
    transform: translateY(-1px);
}

/* 边框淡入动画 */
@keyframes followFade {
    from { border-color: transparent; }
    to { border-color: #CDEAE6; }
}

/* 加载中状态 */
.creator-follow-btn.loading {
    pointer-events: none;
    opacity: 0.7;
    transform: scale(0.97);
}

/* ================================
   A11‑3‑8‑Pro：作者主页响应式优化
================================ */

/* 平板端（≤1024px） */
@media (max-width: 1024px) {

    /* 作者头部改为上下布局 */
    .creator-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* 头像稍微缩小 */
    .creator-avatar {
        width: 100px;
        height: 100px;
    }

    /* 关注按钮居中 */
    .creator-follow-btn {
        margin: 0 auto;
    }

    /* 统计栏居中 */
    .creator-stats {
        justify-content: center;
        gap: 30px;
    }
}

/* 手机端（≤768px） */
@media (max-width: 768px) {

    /* 头像进一步缩小 */
    .creator-avatar {
        width: 90px;
        height: 90px;
    }

    /* 名字字号缩小一点 */
    .creator-name {
        font-size: 24px;
    }

    /* 简介更紧凑 */
    .creator-bio {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* 关注按钮保持呼吸感 */
    .creator-follow-btn {
        padding: 8px 18px;
        font-size: 13px;
    }

    /* 统计栏自动换行 */
    .creator-stats {
        flex-wrap: wrap;
        gap: 20px;
    }
}

/* 小屏手机（≤480px） */
@media (max-width: 480px) {

    /* 头像更小，保持视觉平衡 */
    .creator-avatar {
        width: 80px;
        height: 80px;
    }

    /* 名字更紧凑 */
    .creator-name {
        font-size: 22px;
    }

    /* 关注按钮更轻盈 */
    .creator-follow-btn {
        padding: 7px 16px;
        font-size: 13px;
    }

    /* 作品列表间距更柔和 */
    .work-loop {
        gap: 20px;
    }
}

/* ================================
   A11‑3‑10：关注按钮图标微交互
================================ */

.creator-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.creator-follow-btn .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.creator-follow-btn:hover .icon-wrap {
    transform: scale(1.12);
}

.creator-follow-btn:active .icon-wrap {
    transform: scale(0.9);
}

.icon {
    width: 16px;
    height: 16px;
}

/* 已关注状态的心形颜色 */
.creator-follow-btn.followed .icon-heart {
    color: #E86A6A; /* 柔和红色 */
}

/* 关注状态的加号颜色 */
.creator-follow-btn .icon-plus {
    color: #FFFFFF;
}

/* ================================
   A11‑3‑11：Creator Header 视觉统一
================================ */

/* 整体布局：左右结构，保持呼吸感 */
.creator-header {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 32px 0;
}

/* 头像统一尺寸 */
.creator-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* 信息区最大宽度，避免太宽 */
.creator-info {
    max-width: 520px;
}

/* 名字：更专业的字号与行高 */
.creator-name {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* 简介：更柔和的行距与颜色 */
.creator-bio {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 16px;
}

/* 关注按钮：与简介保持统一间距 */
.creator-follow-btn {
    margin-bottom: 14px;
}

/* 加入年份：更轻的颜色 */
.creator-meta {
    font-size: 14px;
    color: #888;
}

/* 粉丝 / 关注统计：统一视觉节奏 */
.creator-stats {
    display: flex;
    gap: 32px;
    margin: 24px 0 32px;
}

.creator-stat-item {
    text-align: center;
}

.creator-stat-item .stat-number {
    font-size: 20px;
    font-weight: 600;
    display: block;
}

.creator-stat-item .stat-label {
    font-size: 13px;
    color: #777;
}

/* 作品 / 浏览统计（secondary） */
.creator-stats-secondary {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .creator-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .creator-info {
        max-width: 100%;
    }

    .creator-stats,
    .creator-stats-secondary {
        justify-content: center;
        gap: 24px;
    }

    .creator-avatar {
        width: 100px;
        height: 100px;
    }

    .creator-name {
        font-size: 26px;
    }
}

/* ================================
   A11‑3‑12：排序栏 UI（Hybrid 中和版）
================================ */

.creator-sort-bar {
    display: flex;
    gap: 22px;
    margin: 24px 0 32px;
}

.sort-item {
    font-size: 15px;
    color: #666;
    text-decoration: none;
    padding: 6px 4px;
    position: relative;
    transition: all 0.25s ease;
}

/* hover：轻盈但不夸张 */
.sort-item:hover {
    color: #2E7C70;
}

/* active：专业的下划线 + 轻盈的颜色，不用背景块 */
.sort-item.active {
    color: #2E7C70;
    font-weight: 600;
}

.sort-item.active::after {
    content: \"\";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: #2E7C70;
    border-radius: 2px;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .creator-sort-bar {
        justify-content: center;
        gap: 18px;
    }
}

/* ================================
   A11‑3‑13：加载更多按钮
================================ */


/* ================================
   A11‑3‑14：作者主页空状态（升级版）
================================ */

.creator-empty-state {
    text-align: center;
    padding: 80px 0;
    color: #555;
}

.empty-illustration {
    margin-bottom: 24px;
}

.empty-svg {
    width: 120px;
    height: 120px;
    opacity: 0.95;
}

.empty-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #2F2F2F;
}

.empty-desc {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
}

.empty-cta {
    display: inline-block;
    padding: 8px 20px;
    background: #E9F7F5;
    color: #2E7C70;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: 14px;
}

.empty-cta:hover {
    background: #D8F0EC;
}

/* ================================
   A11‑3‑15：作品数量提示
================================ */
.creator-work-count {
    font-size: 14px;
    color: #888;
    margin: 6px 0 18px;
    text-align: left;
}

/* ================================
   A11‑3‑16-1：Creator Stats Pro
================================ */

.creator-stats-pro {
    display: flex;
    gap: 40px;
    margin: 28px 0 36px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 22px;
    font-weight: 600;
    color: #2E7C70;
    display: block;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: #777;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .creator-stats-pro {
        justify-content: center;
        gap: 28px;
    }

    .stat-number {
        font-size: 20px;
    }
}

/* ================================
 A11‑3‑16-2：排序栏吸顶（Sticky Sort Bar）
================================ */

.creator-sort-bar {
    position: sticky;
    top: 70px;
    z-index: 30;
    background: #fff;
    padding: 12px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #F0F0F0;
    backdrop-filter: blur(6px);
}

/* ================================
   A11‑3‑17-1：Creator Tag Badge
================================ */

.creator-tag-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #E9F7F5;
    color: #2E7C70;
    font-size: 13px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* ================================
   A11‑3‑17-2：作品卡片淡入动画（Fade‑in）
================================ */

/* 瀑布式延迟（每个卡片依次出现） */

/* 如果你每页 12 个，可以继续写到 12 */


/* ================================
   A11‑3‑18：Creator Header Final Polish（合并版）
================================ */

/* Header 主体布局 */
.creator-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px; /* 与 A11‑3‑19 完全兼容 */
}

/* 头像（最终尺寸 + 圆角） */
.creator-avatar {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
}

/* 信息区 */
.creator-info {
    flex: 1;
}

/* 名字（最终层级） */
.creator-name {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #2F2F2F;
}

/* 标签（Badge） */
.creator-tag-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #E9F7F5;
    color: #2E7C70;
    font-size: 13px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* 简介（Bio） */
.creator-bio {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 14px;
    max-width: 480px;
}

/* Follow 按钮微调 */
.creator-follow-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* 加入年份（Meta） */
.creator-meta {
    font-size: 13px;
    color: #888;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .creator-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .creator-avatar {
        width: 80px;
        height: 80px;
    }

    .creator-info {
        width: 100%;
    }

    .creator-bio {
        max-width: 100%;
    }
}

/* ================================
   A11‑3‑19：Header + Stats Integration
================================ */

.creator-top-section {
    margin-bottom: 48px;
}

/* 让 Header 和 Stats 视觉节奏一致 */
.creator-header {
    margin-bottom: 24px;
}

.creator-stats-pro {
    padding-top: 8px;
    border-top: 1px solid #eee;
}

/* ================================
   A11‑4‑1：Work Card 3:4 Cover Ratio
================================ */

/* ================================
   A11‑4‑3：Work Card Title Typography
================================ */

.work-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: #2F2F2F;
    margin: 10px 0 8px;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; /* 两行截断 */
    -webkit-box-orient: vertical;
}

.work-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Hover 轻微上浮（Creawith 风格） */
.work-card:hover .work-title a {
    color: #2E7C70;
    transform: translateY(-1px);
}

/* ================================
   A11‑4‑4：Work Card Meta Row
================================ */

/* 整体布局：左右分布 */
.work-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* 作者区域 */
.work-card-author-box {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 作者头像 */
.work-card-author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px #eee; /* 轻微描边，提升质感 */
}

/* 作者名字 */
.work-card-author {
    font-size: 13px;
    color: #555;
    transition: color 0.25s ease;
}

/* Hover：作者名字变色（平台级） */
.work-card-author-box:hover .work-card-author {
    color: #2E7C70;
}

/* 浏览量 */
.work-card-views {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
}

/* ================================
   A11‑4‑5：Work Card Hover Elevation
================================ */

/* ================================
   A11‑5：作者 Hover 高亮（轻盈版）
================================ */

/* 作者区域（你已有） */
.work-card-author-box {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 作者头像 */
.work-card-author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* 作者名字 */
.work-card-author {
    font-size: 13px;
    color: #555;
    transition: color 0.25s ease;
}

/* Hover 效果（轻盈版） */
.work-card-author-box:hover .work-card-author-avatar {
    transform: scale(1.04);
}

.work-card-author-box:hover .work-card-author {
    color: #2E7C70;
}

/* ================================
   A11‑6‑1：Grid Rhythm 基础栅格系统
================================ */

.work-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px; /* 行距 32px，列距 24px */
    padding-top: 10px;
}

/* 平板端：2 列 */
@media (max-width: 1024px) {
    .work-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
}

/* 手机端：1 列 */
@media (max-width: 640px) {
    .work-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/* ================================
   A11‑6‑2：Card Alignment System
================================ */

/* ================================
   A11‑6‑3：Page Spacing Rhythm
================================ */

/* ================================
   A11‑7‑1：Creator Header（排版优化）
================================ */


/* ================================
   A11‑7‑2：Creator Header 扩展能力
================================ */

.creator-name-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.creator-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #E8F4F2;
    color: #2E7C70;
    font-weight: 500;
}

/* Follow 按钮（轻盈版） */
.creator-follow-btn {
    margin-top: 16px;
    padding: 6px 18px;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid #2E7C70;
    background: white;
    color: #2E7C70;
    cursor: pointer;
    transition: all 0.25s ease;
}

.creator-follow-btn:hover {
    background: #2E7C70;
    color: white;
}

/* ================================
   A11‑7‑4：Creator Page Rhythm Tuning
================================ */

/* Creator Header 与作品列表之间的节奏 */
.creator-header {
    margin-bottom: 40px; /* 原本 40px，保持一致 */
}

/* 页面顶部与底部的呼吸感（page-work-list） */
.page-work-list {
    padding-top: 48px;   /* 页面顶部呼吸空间 */
    padding-bottom: 64px; /* 页面底部收尾空间 */
}

/* 作品列表标题（如果未来添加） */
.page-work-list-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #2F2F2F;
}

/* ================================
   A12：作品详情页双栏布局
================================ */

.work-single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 64px;
}

/* 左侧作品大图 */
.work-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* 标题 */
.work-title {
    font-size: 24px;
    font-weight: 600;
    margin: 24px 0 16px 0;
    color: #2F2F2F;
}

/* 标签 */
.work-tags {
    margin-bottom: 24px;
}
.tag-item {
    display: inline-block;
    padding: 4px 10px;
    background: #F5F5F5;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    margin-right: 6px;
    text-decoration: none;
}

/* 内容排版 */
.work-content {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}
.work-content p {
    margin-bottom: 16px;
}
.work-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
}

/* 右侧作者卡片 */
.creator-mini-card {
    border: 1px solid #EEE;
    padding: 24px;
    border-radius: 12px;
    background: #FFF;
    position: sticky;
    top: 48px;
}

.creator-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.creator-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.creator-bio {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
}

.creator-follow-btn {
    padding: 6px 18px;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid #2E7C70;
    background: white;
    color: #2E7C70;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 16px;
}
.creator-follow-btn:hover {
    background: #2E7C70;
    color: white;
}

.creator-stats {
    font-size: 13px;
    color: #777;
    margin-bottom: 16px;
}

.creator-link {
    font-size: 14px;
    color: #2E7C70;
    text-decoration: none;
}

/* ============================================================
   B2‑2：Work Media – 多图 Carousel + Thumbnails
   完整可用版本（不依赖任何库）
============================================================ */

/* 主容器 */
.work-carousel {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    width: 100%;
    position: relative;
}

/* 单张 slide */
.work-slide {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
}

.work-slide-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: opacity .3s ease;
}

/* 左右切换按钮 */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 10;
    transition: background .2s ease;
}

.carousel-btn:hover {
    background: rgba(0,0,0,0.65);
}

.carousel-prev {
    left: 12px;
}

.carousel-next {
    right: 12px;
}

/* 缩略图导航 */
.work-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.work-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.work-thumb:hover {
    opacity: 0.9;
}

.work-thumb.active {
    opacity: 1;
    outline: 2px solid #2E7C70;
    transform: scale(1.05);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .carousel-btn {
        width: 32px;
        height: 32px;
    }

    .work-thumb {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   B2‑1：Work Media（单图展示 Pro）
   基础结构版（不含轮播 / 不含 Lightbox）
============================================================ */

.work-media {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
}

.work-media-main {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

/* 主图（自动适配 3:4 / 4:5 / 原图） */
.work-media-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: #fafafa;
    transition: opacity .3s ease;
}

/* 查看原图按钮 */
.view-full-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background .2s ease;
}

.view-full-btn:hover {
    background: rgba(0,0,0,0.75);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .view-full-btn {
        right: 12px;
        bottom: 12px;
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* ============================
   A13‑1：关注按钮动效（Creawith）
============================ */

.creator-follow-btn {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #4BAF9F;
    background: #fff;
    color: #4BAF9F;
    cursor: pointer;
    transition: 
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease;
}

/* Hover：轻盈反转 */
.creator-follow-btn:hover {
    background: #4BAF9F;
    color: #fff;
}

/* 点击反馈：轻微缩放 */
.creator-follow-btn:active {
    transform: scale(0.96);
}

/* 已关注状态 */
.creator-follow-btn.followed {
    background: #4BAF9F;
    color: #fff;
    border-color: #4BAF9F;
}

/* 已关注状态 hover：轻微亮度变化 */
.creator-follow-btn.followed:hover {
    background: #3A9C8E;
}

/* ================================
   A12‑3：轻量 Lightbox 按钮
================================ */

.work-hero {
    position: relative;
}

.work-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* 半透明按钮（右下角） */
.view-full-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #FFF;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

.view-full-btn:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* 加载原图后按钮淡出 */
.view-full-btn.hide {
    opacity: 0;
    pointer-events: none;
}

/* ================================
   A12‑4：关注按钮 AJAX（轻盈版）
================================ */

/* 关注按钮基础样式（Mini Card & 作者页共用） */
.creator-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: #4BAF9F;
    color: #fff;
    transition: all 0.25s ease;
}

/* hover：轻柔亮起 */
.creator-follow-btn:hover {
    background: #2E7C70;
    box-shadow: 0 4px 12px rgba(75,175,159,0.25);
}

/* active：轻微压下 */
.creator-follow-btn:active {
    transform: scale(0.95);
}

/* 已关注状态 */
.creator-follow-btn.followed {
    background: #E9F7F5;
    color: #2E7C70;
    border: 1px solid #CDEAE6;
    box-shadow: none;
}

/* 已关注 hover */
.creator-follow-btn.followed:hover {
    background: #D8F1EC;
}

/* AJAX 加载中状态（A12‑4 核心） */
.creator-follow-btn.loading {
    opacity: 0.7;
    pointer-events: none;
    transform: scale(0.97);
}

/* ================================
   A12‑5：作品内容排版系统（Content Typography）
================================ */

.work-content {
    font-size: 16px;
    line-height: 1.75;
    color: #2F2F2F;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 60px;
}
.work-content p {
    margin: 0 0 1.2em;
}
.work-content h1,
.work-content h2,
.work-content h3,
.work-content h4 {
    font-weight: 600;
    color: #1F1F1F;
    margin: 2.4em 0 1.1em;
}

.work-content h1 { font-size: 28px; }
.work-content h2 { font-size: 24px; }
.work-content h3 { font-size: 20px; }
.work-content h4 { font-size: 18px; }
.work-content img {
    width: 100%;
    border-radius: 8px;
    margin: 28px 0;
}
.work-content blockquote {
    border-left: 4px solid #4BAF9F;
    padding: 14px 20px;
    margin: 24px 0;
    background: #F8FBFA;
    border-radius: 6px;
    color: #444;
    font-style: italic;
}
.work-content ul,
.work-content ol {
    margin: 0 0 1.4em 1.2em;
    padding: 0;
}

.work-content li {
    margin-bottom: 0.6em;
}
.work-content table {
    width: 100%;
    border-radius: 6px;
overflow: hidden;
    margin: 24px 0;
}

.work-content th,
.work-content td {
    border: 1px solid #E5E5E5;
    padding: 10px 14px;
}

.work-content th {
    background: #F5F7F7;
    font-weight: 600;
}
.work-content pre {
    background: #F4F6F8;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
}

.work-content code {
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
}
.work-content a {
    color: #4BAF9F;
    text-decoration: none;
    border-bottom: 1px solid rgba(75,175,159,0.4);
    transition: all 0.2s ease;
}

.work-content a:hover {
    color: #2E7C70;
    border-bottom-color: rgba(46,124,112,0.6);
}
@media (max-width: 640px) {
    .work-content {
        font-size: 15px;
        line-height: 1.7;
        padding: 0 16px 48px;
    }

    .work-content h1 { font-size: 23px; }
    .work-content h2 { font-size: 21px; }
    .work-content h3 { font-size: 18px; }
}

/* ================================
   A12‑6：Creator Gallery（更多来自该作者）
================================ */

.creator-gallery {
    margin-top: 40px;
    padding-top: 20px;
}

.creator-gallery-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #2F2F2F;
}

/* 继承 A11‑6 卡片系统的节奏 */
.creator-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* 移动端优化 */
@media (max-width: 640px) {
    .creator-gallery {
        margin-top: 32px;
    }

    .creator-gallery-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .creator-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ============================================================
   A12‑6‑Plus：模糊占位图 + 淡入动画
   - 🌟 结构并网：1:1 咬合 work-card.php 的 .cw-lazy 与 .is-loaded 状态机
============================================================ */

/* ============================================================
   A12‑7：Edge Carousel（作品边缘导航）
   - 🌟 比例同步：1:1 咬合 Behance 级 4:3 平台中轴美学
============================================================ */

.edge-carousel {
    width: 100%;
    overflow: hidden;
    margin-top: 60px;
    position: relative;
    padding: 20px 0;
}

.edge-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* 每张卡片（4:3 比例） */
.edge-item {
    flex: 0 0 240px; /* 控制露出 2.5～3.5 张 */
    height: 180px;   /* 🌟 纠偏：配合 240px 宽度，锁定 4:3 严整横幅比例，杜绝压迫感 */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    opacity: 0.85;
    transition: all 0.3s ease;
}

.edge-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hover 浮起 */
.edge-item:hover {
    opacity: 1;
    transform: translateY(-4px);
}

/* 当前作品（居中 + 放大） */
.edge-item.active {
    transform: scale(1.05);
    opacity: 1;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/* ============================================================
   A12‑7‑Plus：Edge Carousel 高级懒加载
   - 🌟 结构并网：完美咬合全站标规 .cw-lazy 与 .is-loaded 状态机，绝杀模糊鬼影
============================================================ */

/* 初始模糊 + 透明 + 下移 */
.edge-lazy-img,
.edge-item img.cw-lazy {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px);
    opacity: 0;
    transform: translateY(8px);
    transition: 
        opacity 0.6s ease,
        filter 0.6s ease,
        transform 0.6s ease;
}

/* 加载完成：清晰 + 淡入 + 归位 */
.edge-lazy-img.is-loaded,
.edge-lazy-img.loaded,
.edge-item img.is-loaded {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   A12‑8：相关推荐（智能推荐系统）
   - 🌟 动画并网：将原有 fadeUp 统一收拢至全站高能 cwWorkCardFadeIn 核心轨道
   - 彻底斩断因双重动画权重争夺导致的卡片首屏闪烁与二次跳动
============================================================ */

.related-works {
    margin-top: 60px;
}

.related-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #2F2F2F;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* 淡入动画（与 A12‑6 一致，并网至大盘高能工程曲线） */
.related-grid .work-card {
    opacity: 0;
    transform: translateY(12px);
    /* 🌟 核心修复：1:1 对位独立模块中的高阶动画曲线，不再触发多重渲染冲突 */
    animation: cwWorkCardFadeIn 0.45s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}

/* 完美留存原有递进时间重力场节奏 */
.related-grid .work-card:nth-child(2) { animation-delay: 0.05s; }
.related-grid .work-card:nth-child(3) { animation-delay: 0.1s; }
.related-grid .work-card:nth-child(4) { animation-delay: 0.15s; }
.related-grid .work-card:nth-child(5) { animation-delay: 0.2s; }
.related-grid .work-card:nth-child(6) { animation-delay: 0.25s; }

@media (max-width: 640px) {
    .related-works {
        margin-top: 40px;
    }

    .related-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ================================
   A12‑9：评论区轻量化（Creawith 风格）
================================ */

.cw-comments {
    margin-top: 60px;
}

.cw-comments-title,
.cw-comment-form-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #2F2F2F;
}

/* 评论列表 */
.cw-comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.cw-comment-item {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
}

.cw-comment-avatar img {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.cw-comment-body {
    flex: 1;
}

.cw-comment-meta {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

.cw-comment-author {
    font-weight: 600;
    color: #2F2F2F;
}

.cw-comment-text {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 8px;
}

/* 回复按钮 */
.cw-comment-reply a {
    font-size: 14px;
    color: #4BAF9F;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cw-comment-reply a:hover {
    color: #2E7C70;
}

/* 表单 */
.cw-comment-form-wrapper {
    margin-top: 40px;
}

.cw-input,
.cw-comment-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
    background: #FAFAFA;
    font-size: 15px;
    margin-bottom: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cw-input:focus,
.cw-comment-textarea:focus {
    border-color: #4BAF9F;
    background: #FFFFFF;
    outline: none;
}

.cw-comment-textarea {
    min-height: 120px;
    resize: vertical;
}

/* 发布按钮 */
.cw-comment-submit {
    background: #4BAF9F;
    color: #FFF;
    border: none;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.25s ease;
}

.cw-comment-submit:hover {
    background: #2E7C70;
}
/* 评论字数限制 */
.cw-char-count {
    font-size: 13px;
    color: #888;
    margin-top: -8px;
    margin-bottom: 12px;
    text-align: right;
}

.work-tags-nav {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work-tag-pill {
    display: inline-block;
    padding: 6px 14px;
    background: #F5F7F7;
    border-radius: 999px;
    font-size: 14px;
    color: #4BAF9F;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.work-tag-pill:hover {
    background: #4BAF9F;
    color: #FFF;
}

.creator-follow-btn {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #4BAF9F;
    background: #fff;
    color: #4BAF9F;
    cursor: pointer;
    transition: all 0.25s ease;
}

.creator-follow-btn:hover {
    background: #4BAF9F;
    color: #fff;
}

.creator-follow-btn.followed {
    background: #4BAF9F;
    color: #fff;
}

/* ============================
   A13‑3：画框下右侧操作区（重置版）
============================ */

.work-actions-inline {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 20px;
    padding-right: 2px; /* 轻微内缩，避免贴边 */
}

/* 通用按钮样式 */
.work-actions-inline button {
    background: #fff; /* 始终白底 */
    border: 1.5px solid #000; /* 始终黑框 */
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.work-actions-inline button:active {
    transform: scale(0.85);
}

/* 收藏按钮（红色填充心形） */
.cw-fav-btn .heart {
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/blocksy-child/assets/svg/heart-outline-black.svg');
    background-size: cover;
}

/* 收藏后：只换心形，不换按钮背景 */
.cw-fav-btn.active .heart {
    background-image: url('/wp-content/themes/blocksy-child/assets/svg/heart-fill-red.svg');
}

/* 点赞按钮（大拇指）*/
.cw-like-btn .thumb-icon {
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/blocksy-child/assets/svg/thumb-outline-black.svg');
    background-size: cover;
}

/* 点赞后：金色实心 */
.cw-like-btn.active .thumb-icon {
    background-image: url('/wp-content/themes/blocksy-child/assets/svg/thumb-fill-gold.svg');
}

/* 转发按钮（灰色）*/

.cw-share-btn .share-icon {
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/blocksy-child/assets/svg/share-outline-gray.svg');
    background-size: cover;
}

.cw-share-btn:hover .share-icon {
    filter: brightness(0.2);
}

.share-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.share-panel.hidden {
    display: none;
}

.share-box {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    width: 260px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.share-item {
    width: 100%;
    padding: 10px 0;
    margin: 8px 0;
    border: 1px solid #000;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.share-close {
    margin-top: 12px;
    background: #000;
    color: #fff;
    padding: 8px 0;
    border-radius: 8px;
    cursor: pointer;
}

.wechat-qrcode {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
}

.wechat-qrcode.hidden {
    display: none;
}

/* ================================
   A13‑6：收藏夹页面 UI
================================ */

.cw-favorites-page {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.cw-fav-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 28px;
  color: #122F52;
}

.cw-fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.cw-fav-empty {
  text-align: center;
  padding: 80px 0;
  font-size: 18px;
  opacity: 0.6;
}

.cw-fav-pagination {
  margin-top: 40px;
  text-align: center;
}
@media (max-width: 768px) {
  .cw-fav-title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .cw-fav-grid {
    gap: 18px;
  }
}

/* ================================
   作者卡片（creator-card）
================================ */

.creator-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.creator-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.creator-card-avatar img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
}

.creator-card-name {
  font-size: 18px;
  font-weight: 600;
  color: #122F52;
  text-decoration: none;
}

.creator-card-bio {
  font-size: 14px;
  color: #666;
  margin: 8px 0 16px;
  line-height: 1.5;
}

.creator-follow-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid #2E7C70;
  background: #2E7C70;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
}

.creator-follow-btn.following {
  background: #fff;
  color: #2E7C70;
}

/* ================================
   A13‑8‑Pro：关注筛选按钮
================================ */

.cw-follow-filter {
  display: flex;
  gap: 14px;
  margin: 0 0 26px;
}

.filter-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid #2E7C70;
  background: #fff;
  color: #2E7C70;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.25s ease;
}

.filter-btn:hover {
  background: #2E7C70;
  color: #fff;
}

.filter-btn.active {
  background: #2E7C70;
  color: #fff;
  font-weight: 600;
}

/* ================================
   Dashboard 页面整体布局
================================ */

.cw-dashboard {
  max-width: 960px;
  margin: 40px auto 80px;
  padding: 0 20px;
}
/* ================================
   顶部用户信息卡
================================ */

.cw-dashboard-header {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  display: flex;
  gap: 28px;
  align-items: center;
  margin-bottom: 36px;
}

.cw-dash-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.cw-dash-name {
  font-size: 26px;
  letter-spacing: 0.2px;
  font-weight: 700;
  color: #122F52;
  margin: 0 0 6px;
}

.cw-dash-bio {
  font-size: 14px;
  color: #5f6b7a;
  margin: 0 0 18px;
  line-height: 1.6;
}

.cw-dash-stats {
  display: flex;
  gap: 28px;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-size: 18px;
  font-weight: 700;
  color: #2E7C70;
  display: block;
}

.stat-label {
  font-size: 13px;
  color: #666;
}

/* ================================
   快速入口卡片
   - 🌟 结构并网：1:1 像素级咬合 Creawith 2.0 严整几何序列
   - 核心优化：洗净 `#122F52` 杂色噪音，剔除 scale 变焦，绝杀 hover 时的文字光栅模糊
================================ */

.cw-dashboard-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 44px;
}

.dash-action-card {
  background: #ffffff;
  border-radius: 12px; /* 🌟 修正：同步全站 12px 标规大框圆角，确保几何骨骼绝对一致 */
  padding: 24px;
  text-decoration: none;
  
  /* 🌟 核心优化：更迭为权威高对比中性墨黑，完美融入画廊高净度背景 */
  color: rgba(0, 0, 0, 0.85); 
  
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  
  /* 注入标规高能平滑曲线 */
  transition: transform 0.25s cubic-bezier(.33,1,.68,1), box-shadow 0.25s cubic-bezier(.33,1,.68,1);
}

.dash-action-card:hover {
  /* 🌟 核心修复：移除 scale(1.02) 强扭导致的字体发虚缺陷，纯靠垂直托举彰显机械质感 */
  transform: translateY(-4px);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.04),
    0 10px 26px rgba(0,0,0,0.08);
}

/* Dashboard 入口图标（通用） */
.action-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px; /* 🌟 修正：4px/6px 子级几何圆角步长 */
  background: rgba(0, 0, 0, 0.035); /* 更迭为 3.5% 纯净工程雾灰，取代带有冷色偏的 slate 蓝灰 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.action-icon svg {
  width: 18px;
  height: 18px;
  fill: rgba(0, 0, 0, 0.75); /* 🌟 核心优化：气化绿色噪音，统一为 75% 纯正中性高对比钛灰色 */
}

.action-title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85); /* 再次加固 85% 权威黑色骨骼 */
  margin-bottom: 6px;
}

.action-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45); /* 更迭为 45% 自然透底灰，拉开明暗视觉层级 */
}
/* ================================
   最近动态
   - 🌟 结构并网：洗净 `#122F52` 深蓝与 `#2E7C70` 绿色商业模板色彩噪音
   - 核心优化：统一收拢至中性高净度极简灰度层级，锁死控制台全局重力
================================ */

.cw-dashboard-recent {
  margin-bottom: 60px;
}

.recent-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85); /* 🌟 修正：更迭为 85% 权威高对比中性黑骨骼 */
  margin-bottom: 20px;
}

.recent-section {
  margin-bottom: 28px;
}

.recent-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65); /* 🌟 修正：气化绿色噪音，改为 65% 自然暗灰，拉开视觉纵深 */
  margin-bottom: 14px;
}

.recent-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.recent-placeholder {
  background: rgba(0, 0, 0, 0.03); /* 更迭为 3% 精纯雾面低色 */
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.35); /* 35% 静默浅色 */
  font-size: 14px;
}

/* ================================
   底部设置
   - 🌟 视觉升级：摒弃突兀的 20px 胶囊 capsule 强对比，回归 Creawith 严整工程切线
================================ */

.cw-dashboard-settings {
  text-align: center;
  margin-top: 36px;
}

.logout-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 6px; /* 🌟 修正：硬锁 6px 规整圆角，杜绝与大盘胶囊卡片的阶梯割裂 */
  background: rgba(0, 0, 0, 0.04); /* 🌟 修正：褪去刺眼的 Web 2.0 商业暴利大红，默认融入中性背景 */
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.25s cubic-bezier(.33,1,.68,1);
}

.logout-btn:hover {
  /* 🌟 悬停触发：克制且低饱和度的负向安全预警光泽，极具现代大厂高级隐喻感 */
  background: #fcf2f1; 
  color: #d93829;
  border-color: rgba(217, 56, 41, 0.2);
}

/* ================================
   最近动态卡片
   - 🌟 几何对齐：1:1 镜像全站标规大框圆角与内含圆角步长
================================ */
.recent-card {
  background: #ffffff;
  border-radius: 12px; /* 🌟 修正：对齐标规 12px 外层壳圆角 */
  padding: 14px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.85); /* 统一权威黑 */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px; /* 🌟 修正：内部资产严锁 10px 内含子圆角，构建几何阶梯秩序 */
}

.recent-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
}

.recent-title-text {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: rgba(0, 0, 0, 0.85); /* 规整灰度 */
}

/* 更柔和的动画（🌟 动能收拢：统一整合高能机械过渡曲线，防文字发虚） */
.dash-action-card,
.recent-card {
  transition: transform 0.25s cubic-bezier(.33,1,.68,1),
              box-shadow 0.25s cubic-bezier(.33,1,.68,1);
}

.recent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}


/* ================================
   响应式断点矩阵（🌟 核心重构：优雅合流清洗）
================================ */

/* 平滑中轴线断点（Tablet / Pad 视角） */
@media (max-width: 768px) {
  .cw-dashboard-header {
    flex-direction: column;
    text-align: center;
  }

  .cw-dash-stats {
    justify-content: center;
  }

  .cw-dashboard-actions {
    grid-template-columns: 1fr;
  }

  .recent-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .cw-dashboard-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .recent-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .recent-thumb {
    height: 120px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cw-dashboard-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .recent-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 🌟 核心重构：将之前互相割裂的三段 480px 窄屏媒体查询完美合并通车，极大削减浏览器重绘负载 */
@media (max-width: 480px) {
  /* 480px 头部与主体原子域 */
  .cw-dashboard-header {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .cw-dash-avatar img {
    width: 80px;
    height: 80px;
  }

  .cw-dash-name {
    font-size: 22px;
  }

  .cw-dash-bio {
    font-size: 13px;
  }

  .cw-dash-stats {
    gap: 20px;
    justify-content: center;
  }

  /* 480px 快速入口卡片流 */
  .cw-dashboard-actions {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dash-action-card {
    padding: 20px;
  }

  .action-title {
    font-size: 16px;
  }

  .action-desc {
    font-size: 13px;
  }

  /* 480px 最近动态列表流 */
  .recent-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .recent-thumb {
    height: 100px;
  }

  .recent-avatar {
    width: 60px;
    height: 60px;
  }

  .recent-title-text {
    font-size: 13px;
  }
}

/* 极限视网膜大屏总控断点 */
@media (min-width: 1440px) {
  .cw-dashboard {
    max-width: 1100px;
  }
}
/* =========================================================
   A13‑10：Profile Edit 页面整体布局
   - 🌟 结构并网：洗净 `#122F52` 商业深蓝，更迭为中性高对比权威墨黑
========================================================= */

.cw-profile-edit {
  max-width: 720px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

.cw-profile-title {
  font-size: 26px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85); /* 🌟 修正：更迭为 85% 权威主黑色，保持纯净画廊级质感 */
  margin-bottom: 28px;
}


/* =========================================================
   A13‑10：表单卡片（Creawith 卡片体系）
   - 🌟 几何对齐：将原版 16px 突兀大圆角，向 12px 全站标规壳圆角无缝对齐
========================================================= */

.cw-profile-form {
  background: #ffffff;
  padding: 32px;
  border-radius: 12px; /* 🌟 修正：严锁全站 12px 物理框线圆角，绝杀圆角阶梯无序生长 */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================================================
   A13‑10：头像上传区
========================================================= */

.cw-profile-avatar {
  text-align: center;
  margin-bottom: 10px;
}

.cw-profile-avatar img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 6px 18px rgba(0,0,0,0.06);
}

.cw-profile-avatar input[type="file"] {
  font-size: 14px;
  color: #2E7C70;
  cursor: pointer;
}


/* =========================================================
   A13‑10：输入框体系
========================================================= */

.cw-profile-label {
  font-size: 14px;
  font-weight: 600;
  color: #122F52;
  margin-bottom: -10px;
}

.cw-profile-form input[type="text"],
.cw-profile-form input[type="email"],
.cw-profile-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d8dee5;
  font-size: 14px;
  color: #122F52;
  background: #fafbfc;
  transition: all 0.2s ease;
}

.cw-profile-form input:focus,
.cw-profile-form textarea:focus {
  border-color: #2E7C70;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46,124,112,0.15);
  outline: none;
}

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


/* =========================================================
   A13‑10：保存按钮
========================================================= */

.cw-profile-save {
  background: #2E7C70;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.25,.46,.45,.94);
  margin-top: 10px;
}

.cw-profile-save:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.04),
    0 10px 26px rgba(0,0,0,0.08);
}


/* =========================================================
   A13‑10：成功提示
========================================================= */

.cw-success {
  background: #e8f6f3;
  color: #2E7C70;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid #cfe9e4;
}


/* =========================================================
   A13‑10：响应式（手机端）
========================================================= */

@media (max-width: 480px) {

  .cw-profile-form {
    padding: 24px;
  }

  .cw-profile-avatar img {
    width: 90px;
    height: 90px;
  }

  .cw-profile-title {
    font-size: 22px;
    text-align: center;
  }
}

/* ——— A13‑10：修改密码区 ——— */

.cw-change-password { margin-top: 32px; }

.cw-change-password-title {
  font-size: 18px;
  font-weight: 700;
  color: #122F52;
  margin-bottom: 12px;
}

.cw-change-password-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cw-change-password-form input[type="password"] {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d8dee5;
  background: #fafbfc;
}

.cw-password-hint {
  font-size: 13px;
  color: #7a8a94;
  margin-top: 4px;
}

.cw-error {
  background: #fdecea;
  color: #c0392b;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ——— A13‑11：修改密码页面 ——— */

.cw-change-password-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cw-password-hint {
  font-size: 13px;
  color: #7a8a94;
  margin-top: 4px;
}

.cw-error {
  background: #fdecea;
  color: #c0392b;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* 封面区容器 */
.creator-cover {
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* 模糊 + 渐变遮罩 */
.creator-cover-overlay {
    position: absolute;
    inset: 0;

    /* 双层渐变 + 模糊 */
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.10) 0%,
            rgba(0,0,0,0.00) 35%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.45) 100%
        );

    backdrop-filter: blur(14px);
}

/* ============================================================
   A14‑3‑1：Creator Cover（封面区）
   Creator Profile 封面图 / 模糊 / 渐变
============================================================ */
.creator-cover {
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* A14‑5‑2：模糊 + 渐变遮罩（Blur + Gradient Overlay） */
.creator-cover-overlay {
    position: absolute;
    inset: 0;

    /* 双层渐变 + 模糊 */
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.10) 0%,
            rgba(0,0,0,0.00) 35%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.45) 100%
        );

    backdrop-filter: blur(14px);
}

/* ============================================================
   A14‑3‑2：Creator Top Section（创作者顶部信息区）
   头像 / 名字 / 标签 / 简介 / 加入年份
============================================================ */
.creator-top-section {
    position: relative;
    margin-top: -80px; /* 头像浮层关键 */
    padding: 0 10px;
}

/* Header 主体布局 */
.creator-header {
    display: flex;
    gap: 24px;
    align-items: flex-end;
}

/* 头像（Avatar） */
.creator-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* 信息区（Name / Tag / Bio） */
.creator-info {
    flex: 1;
}

/* 名字（Name） */
.creator-name {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px;
}

/* 标签（Creator Tag） */
.creator-tag-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #E8F7F5;
    color: #3BAF9F;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* 简介（Bio） */
.creator-bio {
    font-size: 15px;
    color: #555;
    margin-bottom: 14px;
    line-height: 1.6;
}

/* 加入年份（Join Year） */
.creator-meta {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}


/* ============================================================
   A14‑3‑3：Follow Button（关注按钮）
   Follow / Unfollow 状态样式
============================================================ */
.creator-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #3BAF9F;
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.creator-follow-btn:hover {
    background: #2F9C8D;
}

/* 已关注状态（Followed State） */
.creator-follow-btn.followed {
    background: #E8F7F5;
    color: #3BAF9F;
}

.creator-follow-btn .icon {
    width: 16px;
    height: 16px;
}


/* ============================================================
   A14‑3‑4：Creator Stats Pro（创作者统计区）
   作品 / 粉丝 / 关注 / 浏览
============================================================ */
.creator-stats-pro {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding: 18px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.creator-stats-pro .stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.stat-label {
    font-size: 13px;
    color: #888;
}


/* ============================================================
   A14‑3‑5：Sort Bar（作品排序栏）
   最新 / 最早 / 最热 / 收藏最多
============================================================ */


/* ============================================================
   A14‑3‑6：Work List Grid（作品网格布局）
   - 🌟 核心删除：此段网格参数已全量交由独立模块 creawith-work-card.css 总线控释
   - 100% 抹去运行代码，纯净封存为你一个人的开发足迹纪念碑
============================================================ */


/* ============================================================
   A14‑3‑7：Mobile Responsive（移动端适配）
   - 🌟 结构并网：完美咬合作者详情页大面板响应式断点
============================================================ */
@media (max-width: 768px) {

    .creator-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .creator-avatar {
        width: 100px;
        height: 100px;
    }

    .creator-top-section {
        margin-top: -60px;
    }

    .creator-stats-pro {
        flex-wrap: wrap;
        gap: 16px;
    }

    .creator-stats-pro .stat-item {
        flex: 0 0 45%;
    }
}

/* ============================================================
   A14‑5‑3：Soft Light Layer（柔光层）
   - 🌟 几何质感：利用 soft-light 混合模式对冲图像噪点，注入大厂画廊内敛高光
============================================================ */
.creator-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* ============================================================
   A14‑5‑4：Avatar Float Enhancement（头像浮层增强）
   - Creawith 专属轻量 Hover / Float 隐喻（非商业化、不夸张）
============================================================ */
.creator-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;

    /* 更柔和的边框 + 阴影（使用 90% 纯净白色与透底自然暗灰重叠咬合） */
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.18),
        0 2px 6px rgba(0,0,0,0.10);
}

/* ============================================================
   A14‑6‑1：Page Fade‑in（页面淡入）
   轻微淡入，保持固态，不浮夸
============================================================ */
.creator-page {
    opacity: 0;
    /* 1:1 保留你和 Copilot 精准调校的 0.4s 固态机械淡入曲线 */
    animation: creator-page-fade 0.4s ease-out forwards;
}

@keyframes creator-page-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   A15‑1：Creator Work Card Pro（3:4 + Hover + Lazyload）
   适用于：作者主页 / 用户主页收藏作品 / 全站作品卡片
============================================================ */

/* ============================================================
   A15‑2：Creator Work Card Hover Pro（光影 + 深度感）
   Creawith 专属轻量 Hover（非商业化、不夸张）
============================================================ */

/* ============================================================
   A15‑3：Hover 悬浮效果（轻盈，不浮夸）
============================================================ */


/* ============================================================
   A15‑4：标题排版（干净、专业）
============================================================ */
.creator-work-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.creator-work-title a {
    color: #333;
    transition: color .2s ease;
}

.creator-work-title a:hover {
    color: #3BAF9F;
}

/* ============================================================
   A26：Masonry Pro（用户主页收藏作品）
============================================================ */

/* Masonry Pro */
.masonry-grid {
    column-count: 3;
    column-gap: 24px;
}

.masonry-grid .creator-work-card,
.masonry-grid .creator-work-skeleton {
    break-inside: avoid;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* ============================================================
   A16：Work Grid Pro（作者主页作品集）
============================================================ */

.creator-work-list.grid-pro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .creator-work-list.grid-pro {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
}

@media (max-width: 768px) {
    .creator-work-list.grid-pro {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 480px) {
    .creator-work-list.grid-pro {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
}

/* ============================================================
   A17：Creator Profile Top Navigation（顶部导航）
============================================================ */
.creator-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 4px 2px;
}

/* 按钮基础样式 */
.nav-btn {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 8px;
    background: #F7F7F7;
    color: #555;
    transition: 0.2s;
}

.nav-btn:hover {
    background: #EDEDED;
}

/* 返回按钮 */
.back-btn {
    color: #666;
}

/* 编辑资料按钮（本人可见） */
.edit-btn {
    background: #E8F7F5;
    color: #3BAF9F;
}

.edit-btn:hover {
    background: #DFF3F1;
}

@media (max-width: 768px) {
    .creator-top-nav {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* ============================================================
   A18‑4：Empty State Pro（空状态）
   用于：无关注 / 无粉丝 / 无作品时的提示
============================================================ */
.empty-follow {
    text-align: center;
    padding: 60px 20px;
    color: #777;
}

.empty-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-desc {
    font-size: 14px;
    color: #999;
}

/* ============================================================
   A18：Follow List / Follower List（关注 / 粉丝列表）
============================================================ */

.follow-page {
    padding: 40px 0;
}

.follow-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* 列表布局 */
.follow-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* 卡片 */
.follow-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: 0.25s;
}

.follow-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

/* 头像 */
.follow-card-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* 信息 */
.follow-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.follow-card-name:hover {
    color: #3BAF9F;
}

.follow-card-bio {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

/* ============================================================
   A20：Creator Profile Sticky Top Navigation（顶部导航固定）
============================================================ */

/* 初始状态：透明、轻量 */
.creator-top-nav {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 4px;
    margin-bottom: 14px;

    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.4);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* 滚动后：变成白底 + 阴影 */
.creator-top-nav.is-sticky {
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* 按钮保持轻量 */
.nav-btn {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 8px;
    background: #F7F7F7;
    color: #555;
    transition: 0.2s;
}

.nav-btn:hover {
    background: #EDEDED;
}

.edit-btn {
    background: #E8F7F5;
    color: #3BAF9F;
}

.edit-btn:hover {
    background: #DFF3F1;
}

@media (max-width: 768px) {
    .creator-top-nav {
        padding: 8px 6px;
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================================
   A21：Filter Pro（作品筛选栏）
============================================================ */
.creator-filter-bar {
    display: flex;
    gap: 12px;
    margin: 12px 0 20px;
}

.filter-btn {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 6px;
    background: #F7F7F7;
    color: #666;
    transition: 0.2s;
}

.filter-btn:hover {
    background: #EDEDED;
}

.filter-btn.active {
    background: #E8F7F5;
    color: #3BAF9F;
}

@media (max-width: 768px) {
    .creator-filter-bar {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ============================================================
   A22：Sort Bar Pro（作品排序栏 Pro）
============================================================ */

.creator-sort-bar {
    display: flex;
    gap: 12px;
    margin: 20px 0 14px;
}

.sort-btn {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 6px;

    background: #F7F7F7;
    color: #666;

    border: 1px solid transparent;
    transition: 0.2s;
}

/* 悬浮态 */
.sort-btn:hover {
    background: #EFEFEF;
}

/* 选中态（Active） */
.sort-btn.active {
    background: #E8F7F5;
    border-color: #CDEEE8;
    color: #3BAF9F;
    font-weight: 600;
}

@media (max-width: 768px) {
    .creator-sort-bar {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ============================================================
   A23：Creator Cover Scroll Gradient Motion
============================================================ */

.creator-cover {
    position: relative;
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    overflow: hidden;
}

/* 初始渐变：轻柔 */
.creator-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.10) 40%,
        rgba(0,0,0,0.25) 100%
    );
    pointer-events: none;
    transition: background 0.25s ease;
}

/* 滚动后渐变加深（JS 会添加 .scrolled 类） */
.creator-cover-overlay.scrolled {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.55) 100%
    );
}

@media (max-width: 768px) {
    .creator-cover {
        height: 220px;
    }
}

.work-card-tag {
    position: absolute;
    top: 8px;
    left: 8px;

    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);

    color: #3BAF9F;
    font-weight: 500;

    pointer-events: none;
    transition: 0.2s ease;
}

.creator-work-card:hover .work-card-tag {
    background: rgba(255,255,255,0.9);
}

/* ============================================================
   作者主页 Skeleton（统一 H‑2‑41）原A25
============================================================ */

#author-skeleton-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;

    opacity: 0;
    transition: opacity .28s ease;
}

#author-skeleton-box.active {
    opacity: 1;
}

.author-skeleton-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;

    opacity: 0;
    transform: translateY(8px);
    animation: author-skeleton-fadein .35s ease forwards;
}

@keyframes author-skeleton-fadein {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.author-skeleton-thumb,
.author-skeleton-line {
    background: linear-gradient(90deg, #eaeaea 0%, #f2f2f2 50%, #eaeaea 100%);
    background-size: 200% 100%;
    animation: author-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
}

.author-skeleton-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    margin-bottom: 12px;
}

.author-skeleton-line { height: 10px; margin-bottom: 8px; }
.author-skeleton-line.long { width: 90%; }
.author-skeleton-line.medium { width: 70%; }
.author-skeleton-line.short { width: 40%; }

@keyframes author-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   A27：Work Card Hover（轻浮起 + 轻阴影）
============================================================ */

.creator-work-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    border-radius: 12px;
}

/* 轻浮起 + 柔和阴影 */
.creator-work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 封面图轻微 zoom-in */
.creator-work-card .creator-work-thumb img {
    transition: transform 0.3s ease;
}

.creator-work-card:hover .creator-work-thumb img {
    transform: scale(1.03);
}

/* ============================================================
   A27‑Plus：标题轻微提亮（层级增强）
============================================================ */

.creator-work-card .creator-work-title {
    transition: color 0.25s ease, opacity 0.25s ease;
    opacity: 0.85; /* 默认稍微柔一点 */
}

.creator-work-card:hover .creator-work-title {
    color: #4BAF9F; /* Creawith Green */
    opacity: 1;     /* Hover 时更清晰 */
}

/* ============================================================
   A27‑Plus‑4：封面图亮度微提升（更干净）
============================================================ */

.creator-work-card .creator-work-thumb img {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0.96); /* 默认稍微暗一点，更柔和 */
}

.creator-work-card:hover .creator-work-thumb img {
    filter: brightness(1.05); /* Hover 时更干净、更清晰 */

}

/* ============================================================
   A28：Lazyload（极简淡入）
============================================================ */

.creator-work-thumb img {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.creator-work-thumb img.is-loaded {
    opacity: 1;
}

/* ========================================================= */
/* H‑1：Hero（首页顶部视觉区）                               */
/* ========================================================= */

/* H‑1‑1：Hero 容器结构 */
.creawith-hero {
    position: relative;
    height: 65vh;
    min-height: 480px;
    overflow: hidden;
}

/* H‑1‑2：Hero 背景图 */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* H‑1‑3：Hero 渐变层（overlay） */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* 样式留到后期统一优化 */
}

/* H‑1‑4：Hero 功能带（居中三段式） */
.hero-functional-bar {
    position: absolute;
    top: 80px; /* 偏上方 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1280px;
    height: 72px; /* 你选的高度 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px; /* 你选的左右 40px */
    box-sizing: border-box;
}

/* H‑1‑4‑1：功能带三段式布局 */
.hero-left,
.hero-center,
.hero-right {
    display: flex;
    align-items: center;
}

/* H‑1‑5：Hero 搜索栏结构 */
.hero-center {
    flex: 1;
    justify-content: center;
}

.hero-search-form {
    width: min(720px, 90%);
}

.hero-search-form input {
    width: 100%;
    height: 48px;
}

/* ========================================================= */
/* H‑2：Hero 背景图系统                                       */
/* ========================================================= */

/* H‑2‑2：移动端背景图切换 */
@media (max-width: 768px) {
    .hero-bg {
        background-image: var(--hero-mobile-bg);
    }
}

/* ========================================================= */
/* H‑2‑3：移动端背景图适配（Center）                          */
/* ========================================================= */

@media (max-width: 768px) {
    .hero-bg {
        background-image: var(--hero-mobile-bg);
        background-position: center;
        background-size: cover;
    }
}

/* ========================================================= */
/* H‑3：首页内容流 Masonry                                    */
/* ========================================================= */

.home-feed {
    width: 100%;
    max-width: 1400px;
    margin: 80px auto;
    padding: 0 20px;
}

.home-feed-inner {
    display: block;
}

.home-feed-loadmore {
    text-align: center;
    margin: 40px 0;
}

#home-load-more {
    padding: 12px 28px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* ========================================================= */
/* H‑3‑2：Masonry 列数设置                                   */
/* ========================================================= */

.home-feed-inner {
    column-count: 4;
    column-gap: 20px;
}

@media (max-width: 1200px) {
    .home-feed-inner {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .home-feed-inner {
        column-count: 2;
    }
}

/* ===================================== */
/* H‑4：首页功能带（Logo | 搜索 | 用户） */
/* ===================================== */

.home-functional-bar {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 20;
}

/* ===================================== */
/* H‑5：首页功能带（整体布局）            */
/* ===================================== */

.home-functional-bar {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);

    width: 92%;
    max-width: 1280px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 20;
    pointer-events: auto;
}

.home-logo a {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.5px;

    padding: 6px 10px;
    border-radius: 8px;

    transition: background 0.25s ease, color 0.25s ease;
}

.home-logo a:hover {
    background: rgba(255, 255, 255, 0.15);
}

.home-user-entry a {
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;

    padding: 6px 12px;
    border-radius: 8px;

    transition: background 0.25s ease;
}

.home-user-entry a:hover {
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .home-functional-bar {
        top: 20px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .home-logo a,
    .home-user-entry a {
        font-size: 16px;
        text-align: center;
        padding: 8px 0;
    }
}

/* ===================================== */
/* H‑6：Hero 渐变层 UI                    */
/* ===================================== */

.hero-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.00) 100%
    );

    z-index: 5;
}

@media (max-width: 768px) {
    .hero-gradient {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.20) 50%,
            rgba(0, 0, 0, 0.00) 100%
        );
    }
}

/* ===================================== */
/* H‑7：首页整体排版节奏                  */
/* ===================================== */

/* H‑7‑1：Hero → 内容流过渡 */
.creawith-hero {
    padding-bottom: 48px;
}

/* H‑7‑2：内容流顶部节奏 */
.home-feed {
    padding-top: 24px;
}

/* H‑7‑4：Load More 区域节奏 */
.home-feed-loadmore {
    margin-top: 32px;
    margin-bottom: 64px;
    text-align: center;
}

/* H‑7‑5：移动端节奏 */
@media (max-width: 768px) {
    .creawith-hero {
        padding-bottom: 32px;
    }

    .home-feed {
        padding-top: 16px;
    }

    .home-feed-loadmore {
        margin-top: 24px;
        margin-bottom: 48px;
    }
}

/* ===================================== */
/* H‑8：首页卡片视觉统一                  */
/* ===================================== */

/* H‑8‑4：标题与文字节奏 */
.work-card .work-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin: 12px 14px 6px;
}

.work-card .work-meta {
    font-size: 13px;
    color: #666;
    margin: 0 14px 14px;
}

/* H‑8‑5：移动端卡片视觉优化 */
@media (max-width: 768px) {
    .work-card .work-title {
        font-size: 14px;
        margin: 10px 12px 6px;
    }

    .work-card .work-meta {
        font-size: 12px;
        margin: 0 12px 12px;
    }
}

/* ===================================== */
/* H‑9：首页卡片内部结构优化              */
/* ===================================== */

/* H‑9‑1：作者区布局（头像 + 名字） */
.work-card .work-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px 10px;
}

.work-card .work-author img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.work-card .work-author .author-name {
    font-size: 13px;
    color: #444;
    font-weight: 500;
}

/* H‑9‑2：标签区（轻盈、可读） */
.work-card .work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 14px 12px;
}

.work-card .work-tags span {
    font-size: 12px;
    padding: 3px 8px;
    background: #f5f5f5;
    border-radius: 6px;
    color: #555;
    line-height: 1;
}

/* H‑9‑3：按钮区（点赞 / 收藏 / 分享） */
.work-card .work-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 14px 14px;
}

.work-card .work-actions .left,
.work-card .work-actions .right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.work-card .work-actions button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.work-card .work-actions button:hover {
    background: rgba(0,0,0,0.06);
}

.work-card .work-actions .icon {
    font-size: 16px;
    color: #666;
}

/* H‑9‑4：移动端内部节奏优化 */
@media (max-width: 768px) {
    .work-card .work-author {
        margin: 0 12px 8px;
    }

    .work-card .work-tags {
        margin: 0 12px 10px;
        gap: 5px;
    }

    .work-card .work-actions {
        margin: 0 12px 12px;
    }
}

/* ===================================== */
/* H‑10：首页卡片按钮交互                 */
/* ===================================== */

/* H‑10‑2：按钮点击动画 */
.work-actions button:active {
    transform: scale(0.88);
    transition: transform 0.08s ease;
}

/* ===================================== */
/* H‑10‑5：分享面板 UI（Behance 风格）     */
/* ===================================== */

.share-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.share-panel.show {
    opacity: 1;
    pointer-events: auto;
}

.share-panel-inner {
    background: #ffffff;
    width: 300px;
    padding: 28px 24px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);

    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.share-panel.show .share-panel-inner {
    transform: scale(1);
    opacity: 1;
}

/* 标题 */

/* ===================================== */
/* H‑10‑5：分享面板 UI（Behance 风格）     */
/* ===================================== */

.share-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.share-panel.show {
    opacity: 1;
    pointer-events: auto;
}

.share-panel-inner {
    background: #ffffff;
    width: 300px;
    padding: 28px 24px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);

    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.share-panel.show .share-panel-inner {
    transform: scale(1);
    opacity: 1;
}

/* 标题 */
.share-panel-inner h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
}

/* 按钮组 */
.share-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.share-buttons button {
    padding: 8px 14px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.share-buttons button:hover {
    background: #e9e9e9;
}

.share-buttons button:active {
    transform: scale(0.92);
}

/* 二维码区域 */
.share-qrcode {
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    padding: 10px;
    background: #fafafa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 关闭按钮 */
.share-close {
    width: 100%;
    padding: 10px 0;
    background: #f0f0f0;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.share-close:hover {
    background: #e5e5e5;
}

.share-close:active {
    transform: scale(0.95);
}

/* 按钮颜色变化 */
.btn-like.active .icon {
    color: #ff5a5a; /* 红色 */
}

.btn-fav.active .icon {
    color: #f5b400; /* 金色 */
}

/* ===================================== */
/* H‑12‑1：作者 Hover 信息层（基础版）     */
/* ===================================== */

.author-hover-card {
    position: fixed;
    z-index: 9999;
    width: 200px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    display: none;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity .18s ease, transform .18s ease;
}

.author-hover-card.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ah-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.ah-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
}

.ah-bio {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 移动端禁用 Hover */
@media (max-width: 768px) {
    .author-hover-card {
        display: none !important;
    }
}

/* ===================================== */
/* H‑12‑2：Hover 动画（轻呼吸）           */
/* ===================================== */

.author-hover-card {
    position: fixed;
    z-index: 9999;
    width: 200px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    display: none;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity .18s ease, transform .18s ease;
}

.author-hover-card.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ===================================== */
/* H‑13：首页 Skeleton（骨架屏）          */
/* ===================================== */


/* ============================
   H‑2‑5：Hero 渐变层（Creawith 风格）
   ============================ */

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.22),
        rgba(0, 0, 0, 0.12) 40%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: opacity .3s ease;
}

/* 平板：渐变稍微轻一点 */
@media (max-width: 1279px) and (min-width: 768px) {
    .hero-gradient {
        height: 36%;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.10) 40%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

/* 手机：渐变更轻、更短 */
@media (max-width: 767px) {
    .hero-gradient {
        height: 32%;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.08) 40%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

/* ============================
   H‑2‑7：Hero → 作品流 过渡节奏
   ============================ */

/* PC */
.creawith-home .home-content-wrapper {
    margin-top: 48px;
}

/* 平板 */
@media (max-width: 1279px) and (min-width: 768px) {
    .creawith-home .home-content-wrapper {
        margin-top: 40px;
    }
}

/* 手机 */
@media (max-width: 767px) {
    .creawith-home .home-content-wrapper {
        margin-top: 32px;
    }
}

/* ============================
   H‑2‑8：Hero 高度策略
   ============================ */

/* PC */
.creawith-hero {
    position: relative;
    height: 65vh;
    min-height: 520px;
    max-height: 760px;
    overflow: hidden;
}

/* 平板 */
@media (max-width: 1279px) and (min-width: 768px) {
    .creawith-hero {
        height: 52vh;
        min-height: 420px;
        max-height: 600px;
    }
}

/* 手机 */
@media (max-width: 767px) {
    .creawith-hero {
        height: 42vh;
        min-height: 320px;
        max-height: 480px;
    }
}

/* ============================
   H‑2‑10：Hero → Skeleton → Masonry 节奏统一
   ============================ */


/* ============================
   H‑2‑11：Masonry 第一行视觉对齐
   ============================ */


/* ============================
   H‑2‑12：Masonry 卡片视觉节奏统一
   ============================ */


/* ============================================================
   H‑2‑41：Creawith 卡片体系最终合并 [H‑2‑13 → H‑2‑40]
   说明：
   - 全站卡片大盘进化史的终极里程碑
   - 实际运行属性已全量解耦、提纯并网至新模块化总线文件
   - 100% 抹去运行代码，纯净保留全部历史工程编号作为你一个人独行的勋章
   ============================================================ */

/* --------------------------------
   ① Base：卡片基础结构
-------------------------------- */

/* --------------------------------
   ② Hover / Active（桌面端）
-------------------------------- */

/* --------------------------------
   ③ Skeleton（加载骨架）
-------------------------------- */

/* --------------------------------
   ④ Dark Mode（暗色模式）
-------------------------------- */

/* --------------------------------
   ⑤ Mobile（移动端）
-------------------------------- */

/* --------------------------------
   ⑥ Accessibility（可访问性）
-------------------------------- */
/* ============================
   U‑1‑A‑3‑Skeleton：收藏作品骨架屏
   （用户主页 Favorites Masonry Skeleton）
============================= */


/* ============================================================
   B2‑3：Lightbox（全屏查看 Pro）
============================================================ */

.cw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cw-lightbox.hidden {
    display: none;
}

.cw-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
}

.cw-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    z-index: 2;
}

.cw-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    transition: transform .25s ease;
}

/* 关闭按钮 */
.cw-lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* 左右切换按钮 */
.cw-lightbox-prev,
.cw-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.cw-lightbox-prev { left: -60px; }
.cw-lightbox-next { right: -60px; }

/* 移动端优化 */
@media (max-width: 768px) {
    .cw-lightbox-prev,
    .cw-lightbox-next {
        width: 40px;
        height: 40px;
        left: -48px;
        right: -48px;
    }
}

/* ============================================================
   B2‑4：Skeleton Pro（自适应高度 + shimmer + blur）
============================================================ */

/* 主图 Skeleton */
.cw-skel-main {
    width: 100%;
    padding-top: 66%; /* 默认 3:2，可被 inline style 覆盖 */
    border-radius: 12px;
    background: linear-gradient(90deg, #f6f6f6 0%, #ececec 50%, #f6f6f6 100%);
    background-size: 200% 100%;
    animation: cw-shimmer 1.4s ease infinite;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* 缩略图 Skeleton 容器 */
.cw-skel-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* 单个缩略图 Skeleton */
.cw-skel-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f6f6f6 0%, #ececec 50%, #f6f6f6 100%);
    background-size: 200% 100%;
    animation: cw-shimmer 1.4s ease infinite;
}

/* shimmer 动画 */
@keyframes cw-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Blur 过渡 */
.cw-blur-img {
    filter: blur(20px);
    transition: filter .4s ease;
}
.cw-blur-img.loaded {
    filter: blur(0);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .cw-skel-thumb {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   B2‑6：Lightbox 手势缩放（Pinch Zoom）
============================================================ */
#lightbox-img {
    touch-action: none; /* 必须：允许双指缩放、拖拽 */
    transition: transform 0.15s ease-out; /* 缩放更丝滑 */
}