/* ============================================================
   H-4：Creawith 顶部核心布局与品牌总线（基础沉淀版）
   路径：assets/css/creawith-header.css
   ============================================================ */

.creawith-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 999;
    box-sizing: border-box;
}

/* 内层容器：释放硬宽度限制，升级为 100% 全弹性视窗跑道 */
.cw-container {
    width: 100%;
    height: 100%;
    position: relative; /* 绝对定位的基准线 */
}

/* 左栏：优雅贴合屏幕左侧安全舱 */
.header-left {
    position: absolute;
    left: 40px;          /* 宽屏下大厂画廊风呼吸感更足 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* 右栏：优雅贴合屏幕右侧安全舱 */
.header-right {
    position: absolute;
    right: 40px;         /* 对称 40px */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 16px; 
}

/* 中间栏：真正几何居中 & 灵动岛宽度状态总控 */
.header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 真正几何居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    
    /* 将变量提权到共同父级，确保下拉框和搜索栏宽度 100% 同步 */
    --search-width: 360px;   
}

/* 父级捕获焦点或搜索上下文锁定时，统一下发展开宽度 */
.header-center:focus-within,
.header-center:has(.home-search-bar.is-search-expanded),
body.search .header-center {
    --search-width: 520px;
}

/* 页面内容不被 Header 遮挡 */
#main-container {
    padding-top: 72px;
}

/* ============================================================
   H-4-A：品牌 Logo 艺术字体高定
   ============================================================ */
.site-logo {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    /* 微观负字距，让英文字母紧凑有力，极具高级感 */
    letter-spacing: -0.03em; 
    transition: opacity 0.22s ease;
}

.site-logo:hover {
    opacity: 0.75;
}

/* ============================================================
   未登录态入口：登录 / 加入 Creawith
============================================================ */
.auth-guest-gate {
    --guest-height: 40px;
    --guest-radius: 999px;
    --guest-text: #555555;
    --guest-ink: #111111;
    --guest-ink-hover: #262626;
    --guest-muted-bg: rgba(17, 17, 17, 0.045);
    --guest-focus: rgba(17, 17, 17, 0.32);
    --guest-ease: cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;
    align-items: center;
    gap: 12px;
    animation: cwHeaderFadeIn 0.3s var(--guest-ease) both;
}

.auth-guest-gate .cw-guest-link,
.auth-guest-gate .cw-guest-btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--guest-height);
    border-radius: var(--guest-radius);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.015em;
    text-decoration: none !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* 登录 */
.auth-guest-gate .cw-guest-link {
    padding: 0 18px;
    color: var(--guest-text);
    background: transparent;
    transition:
        background-color 0.22s var(--guest-ease),
        color 0.22s var(--guest-ease);
}

.auth-guest-gate .cw-guest-link:hover {
    background: var(--guest-muted-bg);
    color: var(--guest-ink);
}

/* 加入 Creawith - 极简画廊细框版 */
.auth-guest-gate .cw-guest-btn-join {
    padding: 0 22px;
    color: var(--guest-ink);      /* 常态回归高纯度黑键色 */
    background: transparent;      /* 彻底释放底色，保持空气感通透 */
    border: 1.2px solid var(--guest-ink); /* 极精细画廊约束边框 */
    box-shadow: none;             /* 抽干常态阴影，维持顶栏绝对平面秩序 */
    transition:
        background-color 0.22s var(--guest-ease),
        border-color 0.22s var(--guest-ease),
        color 0.22s var(--guest-ease),
        box-shadow 0.22s var(--guest-ease),
        transform 0.15s ease;
}

/* 契合 Scheme A：原地纯净反转，不带任何宏观 translateY 抖动 */
.auth-guest-gate .cw-guest-btn-join:hover {
    transform: none;
    background: var(--guest-ink); /* 悬停时平滑反转为实心黑键 */
    border-color: var(--guest-ink);
    color: #ffffff !important;    /* 文字反白 */
    box-shadow: 0 6px 16px rgba(17, 17, 17, 0.12); /* 此时优雅释放漫散射高级阴影，形成浮雕错觉 */
}

.auth-guest-gate .cw-guest-btn-join:active {
    transform: scale(0.975);      /* 就地克制微弹 */
    box-shadow: 0 2px 6px rgba(17, 17, 17, 0.1);
}

/* 键盘焦点态 */
.auth-guest-gate .cw-guest-link:focus-visible,
.auth-guest-gate .cw-guest-btn-join:focus-visible {
    outline: 2px solid var(--guest-focus);
    outline-offset: 3px;
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
    .auth-guest-gate,
    .auth-guest-gate .cw-guest-link,
    .auth-guest-gate .cw-guest-btn-join {
        animation: none;
        transition: none;
    }

    .auth-guest-gate .cw-guest-btn-join:active {
        transform: none;
    }

    .home-search-bar,
    .home-search-bar .search-inner,
    .home-search-bar .search-input,
    .home-search-bar .cw-search-switcher,
    .home-search-bar .cw-search-switcher::before,
    .home-search-bar .switcher-btn,
    .home-search-bar .search-btn {
        animation: none;
        transition: none;
    }

    .home-search-bar .search-inner {
        transform: none;
    }
}

@keyframes cwHeaderFadeIn {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===============================
   灵动岛搜索栏（最终版）
=============================== */
.home-search-bar {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    flex-shrink: 0;
    width: var(--search-width);
    height: 48px;
    padding: 0 16px;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(16px);
    border-radius: 999px;

    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);

    transition:
        width 0.28s cubic-bezier(.25,.8,.25,1),
        background 0.25s ease,
        box-shadow 0.25s ease;
    box-sizing: border-box;
}

/* 灵动岛展开：仅增强阴影（宽度变化已交由父级变量控制） */
.home-search-bar:focus-within {
    background: rgba(255,255,255,0.92);
    box-shadow: 0 8px 26px rgba(0,0,0,0.16);
}

/* 内部呼吸动画 */
.search-inner {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    transition: transform 0.25s ease;
}

.home-search-bar:focus-within .search-inner {
    transform: scale(1.015);
}

/* 输入框 */
.search-input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    padding-left: 14px;
    padding-right: 12px;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #111;
    outline: none;
    box-shadow: none;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    transition: padding-right 0.25s ease; /* 新增：让聚焦拉伸时长出右边距的过程拥有丝滑过渡 */
}

/* 搜索框自身不显示浏览器默认蓝色轮廓；焦点反馈由外层灵动岛的阴影统一承担 */
.creawith-header .home-search-bar:focus,
.creawith-header .home-search-bar:focus-visible,
.creawith-header .search-inner:focus,
.creawith-header .search-inner:focus-visible,
.creawith-header .search-input:focus,
.creawith-header .search-input:focus-visible {
    outline: none !important;
}

.creawith-header .search-input:focus,
.creawith-header .search-input:focus-visible {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ⭐ 核心修复：展开状态下分配右侧预留空间，防止打字内容穿透 */
.home-search-bar:focus-within .search-input,
.home-search-bar.is-search-expanded .search-input,
body.search .home-search-bar .search-input {
    padding-right: 120px;
}

/* ============================================================
   定点精修：右侧资产容器与独立连体单轨滑道（画廊级规范版）
   ============================================================ */
.search-assets-wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* 连体式切换轨舱 */
.cw-search-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 34px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px;         /* 将内衬边距从 3px 提升至 4px，加大轨道纵深呼吸感 */
    border-radius: 999px;
    margin-right: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;

    /* 状态机常态控制线 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: 
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
        opacity 0.2s ease, 
        visibility 0.2s;
}

/* 聚焦或上下文锁定态唤醒整个轨道 */
.home-search-bar:focus-within .cw-search-switcher,
.home-search-bar.is-search-expanded .cw-search-switcher,
body.search .home-search-bar .cw-search-switcher {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 黄金分割动力滑块 */
.cw-search-switcher::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    
    /* 三态默认值：未选择状态下，滑块隐形 */
    opacity: 0;
    transform: scale(0.95) translateX(0);
    z-index: 0;
    
    /* 🌟 核心修复：异步离场动效线（彻底绝杀向左滑出穿帮 Bug） */
    /* 当反选没有按钮激活时，不盲目往左滑。让不透明度在 0.16s 内迅速原地蒸发； */
    /* transform 开启 0.16s 延迟。意味着在前 0.16s 内滑块死死冻结在原地，等完全隐形后，再用 0s 悄悄归位。 */
    transition: 
        opacity 0.16s ease,
        transform 0s 0.16s;
}

/*  状态互锁：只要轨道内【存在任意激活按钮】，立刻换上高定平滑平移动画 */
.cw-search-switcher:has(.switcher-btn.active)::before {
    transition: 
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease;
}

/*  借用现代 :has 机制精准驱动滑轨平移 */
.cw-search-switcher:has(.switcher-btn[data-type="work"].active)::before {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.cw-search-switcher:has(.switcher-btn[data-type="creator"].active)::before {
    opacity: 1;
    transform: scale(1) translateX(100%);
}

/* 切换键字指纹微调 */
.switcher-btn {
    border: none;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    height: 100%;
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    
    position: relative;
    z-index: 2; 
    transition: color 0.2s ease;
}

.switcher-btn:hover {
    color: #333333;
}

.switcher-btn.active {
    color: #111111;
    font-weight: 600;
}

/* ============================================================
 H-3-B：输入框提示字 Placeholder 横向流式错帧电影动画
   ============================================================ */
.search-input.placeholder-refresh::placeholder {
    /* ⭐ 将时长拉长至 0.38s，配合高级曲线让用户看清优雅的渐变流 */
    animation: cwPlaceholderRefresh 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cwPlaceholderRefresh {
    0% {
        opacity: 0;
        /* ⭐ 破局点：由“垂直掉落”改为“顺着文字阅读流向横向滑入” */
        transform: translateX(8px); 
        filter: blur(2px);          /* 镜头级微观光晕模糊 */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* 搜索按钮 */
.search-btn {
    position: static;
    margin-left: 8px;
    width: 28px;          /* 常态占位宽度 */
    height: 28px;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 允许容器宽度真正坍缩到 0，强行把内部 SVG 的物理占位抽干 */
    overflow: hidden; 
    
    /* 把宽度和外边距也加入过渡豪华午餐 */
    transition: 
        transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
        opacity 0.2s ease,
        width 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        margin-left 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity, width, margin-left;
}

/* 展开时：放大镜淡出、右移，并且瞬间“脱水”让出物理坑位 */
.home-search-bar:focus-within .search-btn,
.home-search-bar.is-search-expanded .search-btn,
body.search .home-search-bar .search-btn {
    opacity: 0;
    width: 0;             /* 将物理宽度抽干为 0 */
    min-width: 0;         /* 打破 Flexbox 的固有内容保护，允许宽度彻底归零 */
    padding: 0;           /* 清除浏览器原生的按钮左右内边距占位 */
    margin-left: 0;       /* 将外边距彻底抹平 */
    transform: translateX(12px) scale(0.7);
    pointer-events: none; /* 彻底切断误触 */
}

.search-btn:focus {
    outline: none;
}

.search-btn svg {
    width: 20px;
    height: 20px;
    stroke: #333;
    stroke-width: 1.75;
    display: block;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(.25,.6,.4,1.4), stroke 0.2s ease, opacity 0.2s ease;
    will-change: transform, opacity;
}

/* ===============================
   H‑3‑14：Creawith 搜索图标动画
=============================== */
.search-btn:hover svg {
    transform: scale(1.04);
    stroke: #1a1a1a;
    opacity: 0.92;
}

.search-btn:active svg {
    transform: scale(0.88);
    opacity: 0.85;
}

.search-btn.clicked svg {
    animation: cw-apple-bounce 0.26s cubic-bezier(.25,.6,.4,1.4);
}

@keyframes cw-apple-bounce {
    0%   { transform: scale(0.88); opacity: 0.85; }
    55%  { transform: scale(1.08); opacity: 1.0; }
    100% { transform: scale(1.0);  opacity: 0.95; }
}

/* ============================================================
   H‑3‑13：浮窗 & 建议面板宽度与布局基准
============================================================ */
.cw-search-popup,
.search-suggest-panel {
    width: var(--search-width);   /* ⭐ 完美跟随父级状态变量 */
    min-width: 0;
    max-width: none;
    left: 50%;
    transform: translateX(-50%) translateY(6px); 
    position: absolute;
    top: 58px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* ⭐ 宽度跟随平滑拉伸，透明度与位移交由 CSS 控制 */
    transition: opacity .22s ease, transform .22s ease, width 0.28s cubic-bezier(.25,.8,.25,1);
    will-change: transform, opacity, width;
    z-index: 20;
}

.home-search-bar.cw-error {
    animation: none !important;
}

/* ============================================================
   H-4-B：高级轻量级投稿作品微交互总线
   ============================================================ */
.cw-nav-publish-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}

/* ============================================================
   H-4-C：右侧复合资产总线（大厂高定全弹性跑道线）
============================================================ */
.header-right {
    position: absolute;
    right: 40px;          /* 完美对齐左侧 Logo 的 40px 呼吸安全舱 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 20px;            /* 收紧全盘符号间距，建立严密工整的纯 UI 资产同盟 */
}

/* 高频基础动作图标通用舱（信封、铃铛、解构秩序轴） */
.cw-icon-btn {
    position: relative;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #444444;       /* 标志性的内敛深灰常态衬线笔触 */
    outline: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* 薄雾照明响应：组件在几何层面上保持绝对静止，仅做极淡的空气感底色晕染 */
.cw-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.035);
    color: #111111;       /* 快门式快门式转换，瞬间跃迁为深炭黑 */
}

.cw-icon-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* 数智未读动态提示：极致克制的炭黑秩序微粒 */
.cw-icon-btn .cw-unread-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 5px;
    height: 5px;
    background: #111111;  /* 绝杀刺眼红警色，用纯黑点静静产生心理暗示 */
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #ffffff; /* 微观物理隔离保护环，防止与图标线粘连 */
}

/* ============================================================
   H-4-D：用户头像控制中枢（对称中轴微缩展厅舱）
============================================================ */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-avatar-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.user-avatar-btn img {
    width: 36px;            /* 常态页头紧凑精致尺寸 */
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05); /* 基础隔离边框 */
    display: block;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
    will-change: border-color, box-shadow, opacity;
}

.user-avatar-btn:hover img {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    opacity: 0.92;
}

/* 下拉控制中枢大盘总线（中轴对称重构） */
.user-dropdown {
    z-index: 300;
    position: absolute;
    right: -8px;          /* 微调挂靠偏移，完美匹配右侧跑道天平 */
    top: 50px;
    width: 260px;         /* 拓宽至 260px：舒展铺开三栏矩阵，充满画廊呼吸感 */
    padding: 0 0 12px 0;  /* 顶部放开给 Banner，底部预留 12px 空气留白 */
    background: #ffffff;
    border-radius: 16px;  /* 完美的灵动岛同血统高曲率圆角 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;     /* 物理切齐顶部 Banner 圆角溢出，拒绝直角刺破容器 */
    
    /* 大厂级微观多层漫散射阴影体系，消除生硬死黑脏投影 */
    box-shadow: 
        0 16px 38px rgba(0, 0, 0, 0.05), 
        0 2px 10px rgba(0, 0, 0, 0.02),
        0 0 0 1px rgba(0, 0, 0, 0.045); /* 像素级空气边界秩序隔离线 */
    
    /* 大厂级 0.28s 指数缓动曲线，顺着光标向外流式舒张 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    will-change: transform, opacity;
}

/* 状态机激活神经元 */
.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 画廊微缩封面舱 */
.dropdown-cover-banner {
    height: 100px;        /* 纵向从 70px 暴力拓宽至 100px，拉满封面仪式感 */
    width: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); /* 冷冽暖灰沙砾微渐变 */
}

/* 几何悬浮身份舱 */
.dropdown-identity-chamber {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;  /* 强行开启容器内全量组件中轴线绝对居中 */
    position: relative;
    box-sizing: border-box;
}

/* 头像外壳利用负边距在中轴线上强行提拉，形成浮雕错层 */
.identity-avatar-wrapper {
    margin-top: -26px;    /* 完美卡在中心交界线上，上下各占一半 */
    margin-bottom: 10px;
    width: 52px;          /* 尺寸中轴化升级至 52px */
    height: 52px;
    display: flex;
    margin-left: auto;    /* 阻断横向流，通过双向 auto 锁定绝对居中 */
    margin-right: auto;
}

.identity-avatar-wrapper img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    border: 2.5px solid #ffffff; /* 纯白防色彩粘连实体盾 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 身份文本中轴流总控制 */
.identity-meta-flow {
    display: flex;
    flex-direction: column;
    align-items: center;  /* 信息流全量向中心轴线靠拢 */
    gap: 3px;
    width: 100%;
    text-align: center;
}

.identity-meta-flow .meta-name-row {
    display: flex;
    align-items: center;
    justify-content: center; /* 确保昵称和称号作为一个整体在中轴向两边舒张 */
    gap: 6px;
    width: 100%;
}

.identity-meta-flow .user-display-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.01em;
    max-width: 140px;     /* 防截断边界秩序线，防止长名字挤碎标牌 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多态身份标牌基础骨架 */
.identity-meta-flow .user-premium-badge {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* 标牌状态机多态消隐色阶 */
.identity-meta-flow .badge-viewer {
    background: rgba(0, 0, 0, 0.03);
    color: #999999;
    opacity: 0.75;        /* 默认浏览者标签执行低饱和度消隐，拒绝抢戏 */
}

.identity-meta-flow .badge-creator {
    background: rgba(0, 0, 0, 0.05);
    color: #555555;       /* 创作者呈现利落紧凑的微饱炭灰色 */
}

.identity-meta-flow .badge-collector {
    background: rgba(0, 0, 0, 0.06);
    color: #333333;
}

.identity-meta-flow .badge-partner {
    background: rgba(17, 17, 17, 0.07);
    color: #111111;
    font-weight: 800;
}

/* 低饱和度退晕暖灰邮箱 */
.identity-meta-flow .user-email-text {
    font-size: 11px;
    color: #9a9a9a;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    word-break: break-all;
}

/* 三栏数据动力矩阵（完美承接居中到左对齐的过渡平衡垫） */
.dropdown-stats-matrix {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 12px 6px 12px;
    box-sizing: border-box;
    width: 100%;
}

.matrix-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    border-radius: 8px;
    padding: 6px 0;
    transition: background-color 0.15s ease;
}

.matrix-item:hover {
    background-color: rgba(0, 0, 0, 0.025);
}

.matrix-item .matrix-num {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.1;
}

.matrix-item .matrix-label {
    font-size: 11px;
    color: #999999;
}

/* 极简功能导航链（左对齐空气舱锁定，建立效率检索轴） */
.dropdown-links-chain {
    display: flex;
    flex-direction: column;
    padding: 0 16px;      /* 锁死 16px 隐形边界，让链接左沿垂直咬合上方数据第一栏 */
    box-sizing: border-box;
}

.user-dropdown a {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 检索功能链维持高效率的严谨左对齐 */
    height: 36px;
    padding: 0 10px;
    font-size: 13.5px;
    color: #444444;
    text-decoration: none;
    letter-spacing: 0.01em;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.user-dropdown a:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #111111;
}

/* 退出登录 */
.user-dropdown .menu-logout {
    margin: 0 16px;       /* 横向等齐，绝不顶死边缘 */
}

.user-dropdown .menu-logout:hover {
    background: rgba(0, 0, 0, 0.035);
    color: #222222;
    font-weight: 600;     /* 彻底洗白，仅依靠字重和微底色深度确认，告别刺眼红 */
}

/* 秩序隔离线 */
.dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.04);
    margin: 6px 16px;     /* 横向缩进 16px */
}

/* ============================================================
   H-4-D：Header 右侧控制舱（Creawith 画廊级几何控制系统）
============================================================ */

/* 右侧总控跑道：投稿、消息、通知、头像、宇宙入口进入同一条视觉轴线 */
.creawith-header .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    height: 56px;
    min-width: 0;
}

/* 投稿作品主按钮：H-4-B */
.creawith-header .header-right .cw-nav-publish-btn {
    height: 40px;                 /* ⚖️ 核心对齐：1:1 绝对配平右侧消息、通知、头像圆舱的 40px 物理总线 */
    padding: 0 22px;              /* 舒张横向空气感衬垫 */
    border: 1px solid #111111;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    
    /* 🎨 画廊级漫散射高级投影，替代原本生硬的死黑高对比度投影 */
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.08); 
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13.5px;            /* 优化字号，更显画廊风的精致与纤细 */
    line-height: 1;
    font-weight: 600;             /* 降级过度沉重的字重，提升中文字体在视网膜屏上的清冷质感 */
    letter-spacing: 0.03em;
    transition:
        background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.15s ease;
}

/* 完美咬合方案 A：移除 transform: translateY，焊死水平面，依靠纯粹的色阶传递触觉反馈 */
.creawith-header .header-right .cw-nav-publish-btn:hover {
    transform: none;              /* 刚性水平静止 */
    background: #262626;          /* 平滑过渡至内敛炭灰 */
    border-color: #262626;
    box-shadow: 0 6px 20px rgba(17, 17, 17, 0.14); /* 漫散射平铺晕染放大 */
}

/* 点击瞬间提供极为克制细微的就地微观机械回弹反馈 */
.creawith-header .header-right .cw-nav-publish-btn:active {
    transform: scale(0.975);      
    box-shadow: 0 2px 6px rgba(17, 17, 17, 0.1);
}

/* Header 图标按钮：仅处理消息、通知、宇宙触发按钮 */
.creawith-header .header-right .cw-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #444444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    cursor: pointer;
    transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.creawith-header .header-right .cw-icon-btn:hover {
    background: rgba(17, 17, 17, 0.045);
    color: #111111;
}

/* 消息与通知 SVG：统一笔触尺寸 */
.creawith-header .header-right .cw-msg-btn svg,
.creawith-header .header-right .cw-notch-btn svg {
    width: 23px;
    height: 23px;
    display: block;
}

/* 未读黑点：精密化状态信号 */
.creawith-header .header-right .cw-unread-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background: #111111;
}

/* 头像菜单容器：保持下拉锚点稳定 */
.creawith-header .header-right .user-menu {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Hover 打开区域严格等于 40px 头像按钮；跨越间距由 JS 离开延迟承接，避免命中区域向下偏移 */
.creawith-header .header-right .user-menu::after {
    content: none;
}

/* 头像按钮：冷白灰身份光标，不再像廉价占位块 */
.creawith-header .header-right .user-avatar-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(17, 17, 17, 0.04);
    border-radius: 999px;
    background: #f3f3f3;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.creawith-header .header-right .user-avatar-btn:hover {
    border-color: rgba(17, 17, 17, 0.08);
    background: rgba(17, 17, 17, 0.045);
}

.creawith-header .header-right .user-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   H-4-E：宇宙生态总线（2x2 饱满矩阵方块舱 · 带有高定开发注释版）
============================================================ */

/* 宇宙菜单根节点 */
.header-right #cw-universe-menu.cw-universe-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* 宇宙触发按钮：完美回归全透明正圆热区，对齐信封、铃铛物理主轨 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent; 
    border-radius: 50%;           
    background: transparent;       
    box-shadow: none;
    color: #444444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    cursor: pointer;
    transform: none;
    transition:
        background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 解除原本对 SVG 资产的强制隐藏，让 4 颗数智方块完美并网 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn svg {
    display: block;
    width: 23px;                  /* 由 20px 统一升级释放至 23px 大幅面 */
    height: 23px;
}

/* 触发器悬停响应：组件在几何层面上保持绝对静止，仅做极淡的空气感底色润染 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn:hover {
    transform: none;              
    background: rgba(17, 17, 17, 0.045); /* 不加 border-color 边缘线，完美对齐左侧消息通知的晕染质感 */
    color: #111111;               /* 线条过渡到绝对深炭黑 */
}

/* ============================================================
   📐 4个方块微观动力学核心（Windows Fluent 秩序流）
   ============================================================ */

/* 4个方块常态空心单线沉淀 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn .universe-sq {
    fill: transparent;
    transition: 
        fill 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        stroke 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 常态悬停 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn:hover .sq-tr {
    fill: rgba(17, 17, 17, 0.06);
}

/* ============================================================
   ⚡ 激活状态机：利用原生 aria-expanded="true" 触发变白点亮
   ============================================================ */

/* 触发器激活反转：平滑转换为深邃的画廊炭黑块固体舱 */
.header-right #cw-universe-menu.active > #cw-universe-btn.cw-universe-btn,
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn.active,
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn[aria-expanded="true"] {
    border-color: #111111;
    background: #111111;
    color: #ffffff;               /* 此时 currentColor 自动变为纯白 */
}

/* 💡 核心实现：右上方块内部完全填满纯白（currentColor），并向右上做微差位移，激活高维衍生隐喻 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn[aria-expanded="true"] .sq-tr {
    fill: currentColor;                  /* 内部完美变白点亮 */
    transform: translate(0.6px, -0.6px); /* 向外拉开空间张力 */
}

/* 激活时，其余三个方块保持空心线稿（随父级自动并网为白色线条），并朝四周静默拉开微小位移 */
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn[aria-expanded="true"] .sq-tl { transform: translate(-0.3px, -0.3px); }
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn[aria-expanded="true"] .sq-bl { transform: translate(-0.3px, 0.3px); }
.header-right #cw-universe-menu > #cw-universe-btn.cw-universe-btn[aria-expanded="true"] .sq-br { transform: translate(0.3px, 0.3px); }

/* ============================================================
    下拉多元生态资产大盘（流式紧包裹卡片舱）
   ============================================================ */

.header-right #cw-universe-menu > #cw-universe-dropdown.cw-universe-dropdown {
    position: absolute;
    z-index: 300;
    top: 50px;
    right: -8px;
    width: 300px;
    box-sizing: border-box;
    padding: 16px 12px 14px 12px; 
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.03);

    /* 面板展开动效控制线 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    will-change: transform, opacity;
    transition:
        opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.2s;
}

/* 面板激活状态并网 */
.header-right #cw-universe-menu > #cw-universe-dropdown.cw-universe-dropdown.active,
.header-right #cw-universe-menu > #cw-universe-dropdown.cw-universe-dropdown[aria-hidden="false"],
.header-right #cw-universe-menu > #cw-universe-btn[aria-expanded="true"] + #cw-universe-dropdown.cw-universe-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

/* 仿 Mono 极简 Editorial 杂志风大盘内衬样式 */
#cw-universe-dropdown .universe-editorial-header {
    padding: 0 2px 8px 2px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.045);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #aaaaaa;
}

/* 产品线网格：三列紧咬合矩阵 */
#cw-universe-dropdown .universe-index-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 应用卡片：靠内容自然释放高度 */
#cw-universe-dropdown .universe-index-list .index-row {
    min-height: 0;
    padding: 10px 4px 8px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#cw-universe-dropdown .universe-index-list .index-row:hover {
    background: rgba(17, 17, 17, 0.035);
}

/* 数字微退晕注释 */
#cw-universe-dropdown .universe-index-list .index-row .index-num {
    display: block;
    margin-bottom: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    color: #aaaaaa;
    transition: color 0.2s ease;
}

#cw-universe-dropdown .universe-index-list .index-row:hover .index-num {
    color: #111111;
}

/* 矩阵主产品标题 */
#cw-universe-dropdown .universe-index-list .index-row .index-title {
    margin: 0 0 4px 0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #111111;
    white-space: nowrap;
}

/* 矩阵副标题微缩注释 */
#cw-universe-dropdown .universe-index-list .index-row .index-meta {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 400;
    color: #999999;
    white-space: normal;
    word-break: break-all;
}

/* ============================================================
    Pixiv 级动态响应交互
============================================================ */
.index-row:hover {
    background-color: rgba(0, 0, 0, 0.02); 
    transform: translateY(-2px);           
}

.index-row:hover .index-num {
    background-color: #111111;  
    color: #ffffff;             
    transform: scale(1.04);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); 
}

.index-row:hover .index-title {
    color: #111111;
}

.index-row:hover .index-meta {
    color: #444444;             
}

/* ============================================================
   H‑3‑6‑2：提示淡入淡出动画
============================================================ */
.search-input::placeholder {
    opacity: 1;
    transition: opacity 0.25s ease;
}
.search-input.cw-warn::placeholder {
    opacity: 0.45;
}

/* ============================================================
   H‑3‑5：搜索建议面板
============================================================ */
.search-suggest-panel {
    border-radius: 10px;
    padding: 8px 0;
}
.search-suggest-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.suggest-item {
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.12s ease;
}
.suggest-item:hover {
    background: rgba(0,0,0,0.04);
}

/* ============================================================
   H‑3‑7：搜索浮窗布局
============================================================ */
.cw-search-popup {
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,0.04);
    z-index: 10;
}
.cw-search-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   H‑3‑8：搜索历史区（关键词标签）
============================================================ */
.search-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.search-history-title {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}
.search-history-clear {
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.12s ease;
}
.search-history-clear:hover {
    color: #666;
}

.search-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 6px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: visible;
    padding-top: 6px; 
    transition: max-height 0.2s ease;
}
.search-history-tags::-webkit-scrollbar { width: 4px; }
.search-history-tags::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
.search-history-tags.expanded { max-height: 220px; }

.search-tag {
    position: relative;
    padding: 6px 18px;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    line-height: 20px;
    transition: background 0.12s ease, transform 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-tag:hover {
    background: rgba(0,0,0,0.08);
}
.search-history-more {
    margin-top: 10px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: color 0.12s ease;
}
.search-history-more:hover {
    color: #555;
}

.tag-remove {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    background: rgba(0,0,0,0.08);
    color: #666;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.search-tag:hover .tag-remove {
    opacity: 1;
    pointer-events: auto;
}
.tag-remove:hover {
    background: rgba(0,0,0,0.15);
}

/* ============================================================
   H‑3‑9：空状态占位 + 推荐提示（状态流控制版）
============================================================ */
.search-empty-placeholder {
    height: 20px;
    opacity: 0.25;
    display: none; /* 留给后期历史记录清空时的空状态 JS 控制 */
}

.search-recommend-placeholder {
    margin-top: 16px;     /* 稍微拉大间距，与上方的历史标签拉开优雅的呼吸感 */
    text-align: center;
    font-size: 13px;
    color: #aaaaaa;
    opacity: 0.8;
    display: none; 
    animation: cwRecommendFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 小公仔 (=^･ω･^=) */
.search-recommend-placeholder .kaomoji {
    margin-left: 6px;
    font-size: 14px;
    opacity: 0.9;
    display: inline-block;
}

@keyframes cwRecommendFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 0.8; transform: translateY(0); }
}

/* ============================================================
   H‑3‑11：搜索建议优先级（安全熔断态）
============================================================ */
.cw-search-popup.hide-by-suggest {
    opacity: 0 !important;
    visibility: hidden !important; /* ⭐ 彻底切断无障碍焦点树，防止鬼影事件 */
    pointer-events: none !important;
}

/* ============================================================
   移动端特化组件（默认桌面端隐藏）
============================================================ */
.search-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #111;
}

.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 12px;
}

/* ============================================================
   响应式降级战壕（置于文件绝对末尾，捍卫最高覆盖权）
============================================================ */

/* 1. 平板端（缩减间距与灵动岛尺度） */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-center {
        --search-width: 300px;
    }
    .header-center:focus-within,
    .header-center:has(.home-search-bar.is-search-expanded),
    body.search .header-center {
        --search-width: 420px;
    }
    /* 强行压制子元素上限，防止超出视口 */
    .cw-search-popup,
    .search-suggest-panel {
        max-width: 420px;
    }
}

/* 2. 手机端（隐藏桌面复杂大盘，点亮纯粹移动沙盒入口） */
@media (max-width: 767px) {
    /* 缩小左右边距 */
    .header-left { left: 16px; }
    .header-right { right: 16px; gap: 12px; }

    /* 唤醒移动端汉堡菜单与搜索放大镜 */
    .mobile-menu-toggle { display: block; }
    .search-toggle { display: flex; align-items: center; justify-content: center; }

    /* 物理摧毁桌面版灵动岛组件 */
    .header-center { display: none !important; }
    
    /* 优化未登录按钮在窄屏下的间距 */
    .auth-guest-gate { gap: 12px; }
    .auth-guest-gate .cw-guest-btn-join { padding: 6px 14px; font-size: 12px; }
    .auth-guest-gate .cw-guest-link { font-size: 13px; }
}

/* ============================================================
   H-4-F：消息与通知下拉菜单样式（高安全隔离域版）
============================================================ */
.cw-msg-menu,
.cw-notch-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cw-msg-dropdown,
.cw-notch-dropdown {
    position: absolute;
    z-index: 300;
    top: 50px;
    right: -8px;
    width: 280px;
    box-sizing: border-box;
    padding: 16px 12px 14px 12px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.03);

    /* 下拉动画初始化 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition:
        opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.2s;
}

/* 状态激活：由 aria 属性驱动 */
.cw-msg-menu > #cw-msg-btn[aria-expanded="true"] + #cw-msg-dropdown,
.cw-notch-menu > #cw-notch-btn[aria-expanded="true"] + #cw-notch-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

/* 面板小标题（极简 Mono 风格） */
:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-header {
    padding: 0 4px 8px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.045);
    font-family: ui-monospace, monospace;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #aaaaaa;
}

/* 空状态约束 */
:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 0 20px 0;
    text-align: center;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-empty .empty-icon {
    font-size: 18px;
    margin-bottom: 6px;
    opacity: 0.4;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-empty .empty-text {
    font-size: 12.5px;
    font-weight: 500;
    color: #999999;
}

/* 列表与单项约束（阻止全局泄露） */
:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-list {
    max-height: 260px;
    overflow-y: auto;
    margin: 0 -4px;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color 0.18s ease;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-item:hover {
    background-color: rgba(17, 17, 17, 0.03);
}

/* 头像与图标盒子 */
:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* 内容与排版 */
:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-body {
    flex: 1;
    min-width: 0;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-title {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-time {
    font-size: 11px;
    color: #aaaaaa;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-text strong {
    color: #111111;
    font-weight: 600;
}

/* 未读提示点与底部跳转按钮 */
:is(.cw-msg-dropdown, .cw-notch-dropdown) .item-dot {
    position: absolute;
    top: 14px;
    right: 8px;
    width: 6px;
    height: 6px;
    background: #111111;
    border-radius: 50%;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-footer {
    display: block;
    padding: 10px 0 2px 0;
    margin-top: 6px;
    border-top: 1px solid rgba(17, 17, 17, 0.04);
    font-size: 12px;
    font-weight: 600;
    color: #555555;
    text-align: center;
    text-decoration: none !important;
    transition: color 0.18s ease;
}

:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-footer:hover {
    color: #111111;
}

.creawith-header .cw-icon-btn:focus-visible,
.creawith-header .user-avatar-btn:focus-visible,
:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-item:focus-visible,
:is(.cw-msg-dropdown, .cw-notch-dropdown) .dropdown-footer:focus-visible {
    outline: 2px solid rgba(17, 17, 17, 0.38);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cw-msg-dropdown,
    .cw-notch-dropdown {
        transform: none;
        transition: none;
    }
}