/* ==========================================================================
   设计 token + 共享组件样式
   - 配色：1 个品牌色 + 3 个语义色 + 灰阶；其余颜色（amber/pink/violet 等）
     仅在装饰场景出现，不作主交互色
   - 字体层级：5 档字号 + 3 档权重；不再 text-[Npx] 自由发挥
   - 间距、圆角、阴影统一通过 CSS 变量
   ========================================================================== */

:root {
    /* 品牌色：纯蓝主题 */
    --im-brand: #0b5cff;          /* 纯蓝，主 CTA / 链接 */
    --im-brand-rgb: 11, 92, 255;  /* 品牌蓝 RGB 分量：需要半透明时用 rgba(var(--im-brand-rgb), a)，勿再写死 */
    --im-brand-hover: #0a4fe0;
    --im-brand-soft: #eaf1ff;     /* 纯蓝 50，背景 */
    --im-brand-border: #cfe0ff;   /* 纯蓝 100，描边 */

    /* 语义色（仅 3 种） */
    --im-success: #0FCC7A;        /* 明亮纯净草绿 */
    --im-success-soft: #e6faf0;
    --im-success-border: #9ceec9;

    --im-warning: #FFB224;        /* 明亮金橙 */
    --im-warning-soft: #fff6e1;
    --im-warning-border: #ffde99;

    --im-danger: #FF4D4F;         /* 通透纯红 */
    --im-danger-soft: #ffecec;
    --im-danger-border: #ffb8b8;

    /* 灰阶（Gemini / Material 3：中性带一丝冷色温，比纯灰更"活"）*/
    --im-text: #1b1b1f;           /* M3 on-surface */
    --im-text-2: #44464f;         /* on-surface-variant */
    --im-text-3: #74777f;         /* outline 文字 */
    --im-text-4: #a3a6ad;         /* 占位/禁用 */
    --im-line: #e3e2ea;           /* outline-variant（冷调分割）*/
    --im-line-2: #f1f0f7;         /* 浅分割 */
    --im-surface: #ffffff;
    --im-surface-2: #f3f3fa;      /* M3 surface-container（带色温的卡片底）*/

    /* AI 点睛渐变：纯蓝主题——蓝 → 天蓝 → 青，不含紫/粉 */
    --im-ai-gradient: linear-gradient(135deg, #0b5cff 0%, #3b82f6 50%, #22d3ee 100%);
    --im-ai-gradient-soft: linear-gradient(135deg, #e8f0ff 0%, #eaf4ff 50%, #e6fbff 100%);
    --im-ai-blue: #0b5cff;
    --im-ai-purple: #0b5cff;   /* 名称保留兼容，取值为品牌蓝 */

    /* Material state layer（hover/pressed 用主色叠加，取代变色描边）*/
    --im-state-hover: rgba(11, 92, 255, 0.08);
    --im-state-press: rgba(11, 92, 255, 0.12);

    /* 胶囊圆角（Gemini 交互元件签名）*/
    --im-r-pill: 999px;

    /* 字号（5 档） */
    --im-fs-hint: 11px;
    --im-fs-body: 13px;
    --im-fs-default: 14px;
    --im-fs-section: 15px;
    --im-fs-page: 20px;

    /* 圆角 */
    --im-r-sm: 6px;
    --im-r-md: 10px;
    --im-r-lg: 14px;

    /* 阴影 3 级（Material 风格）：
       0 = 列表项 / 表格行（仅 border 分隔，无阴影）
       1 = 卡片（细微提起）
       2 = 浮起卡片（hover 强调）
       3 = 浮层（popover / drawer）
       4 = 模态（最高层级） */
    --im-sh-0: none;
    --im-sh-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
    --im-sh-2: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.05);
    --im-sh-3: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
    --im-sh-4: 0 20px 60px rgba(0,0,0,0.16);
    /* 浮层/抽屉遮罩（移动端 off-canvas 抽屉 backdrop 等） */
    --im-scrim: rgba(15, 23, 42, 0.45);
    /* 兼容旧别名 */
    --im-sh-card: var(--im-sh-1);
    --im-sh-modal: var(--im-sh-4);

    /* 动画（Material 3 emphasized：进场有力、收尾轻柔）*/
    --im-ease: cubic-bezier(0.2, 0, 0, 1);
    --im-ease-emphasized: cubic-bezier(0.3, 0, 0.8, 0.15);
    --im-dur: 260ms;
}

/* Elevation utility classes（≥0 = 列表行；1-4 = 提起层级） */
.im-elev-0 { box-shadow: var(--im-sh-0); }
.im-elev-1 { box-shadow: var(--im-sh-1); }
.im-elev-2 { box-shadow: var(--im-sh-2); }
.im-elev-3 { box-shadow: var(--im-sh-3); }
.im-elev-4 { box-shadow: var(--im-sh-4); }
/* 卡片 hover 上浮：1 → 2 */
.im-elev-hover:hover { box-shadow: var(--im-sh-2); transform: translateY(-1px); transition: box-shadow var(--im-dur) var(--im-ease), transform var(--im-dur) var(--im-ease); }

/* 异步进行中：配合 window.withBusy，禁止再次触发并给出 busy 视觉 */
.im-busy { opacity: 0.6; pointer-events: none; cursor: progress; }

/* ──────────────────────────────────────────────────────────────────────────
   Typography utility classes（5 档字号 + 3 档权重）
   ────────────────────────────────────────────────────────────────────────── */
.im-text-hint    { font-size: var(--im-fs-hint);    color: var(--im-text-4); }
.im-text-body    { font-size: var(--im-fs-body);    color: var(--im-text-2); }
.im-text-default { font-size: var(--im-fs-default); color: var(--im-text-2); }
.im-title-section { font-size: var(--im-fs-section); color: var(--im-text); font-weight: 600; }
.im-title-page    { font-size: var(--im-fs-page);    color: var(--im-text); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────────
   响应式抽屉：详情页评论抽屉在窄屏时浮在主内容上方而非挤占空间
   detail.html 的 #rcPanel 在 < 1280px 触发
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    #rcPanel:not(.hidden) {
        position: fixed !important;
        top: 56px;
        right: 0;
        bottom: 0;
        width: min(380px, 92vw) !important;
        z-index: 70;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
        animation: im-drawer-in 240ms var(--im-ease);
    }
}
@keyframes im-drawer-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ⌘K 命令面板 */
.im-cmdk-mask {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 1200;
    display: none;
    padding-top: 12vh;
    justify-content: center;
}
.im-cmdk-mask.open { display: flex; }
.im-cmdk-panel {
    background: var(--im-surface);
    border-radius: var(--im-r-lg);
    box-shadow: var(--im-sh-modal);
    width: 100%; max-width: 580px;
    height: fit-content; max-height: 60vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.im-cmdk-input {
    border: 0; border-bottom: 1px solid var(--im-line-2);
    padding: 18px 20px;
    font-size: 16px;
    color: var(--im-text);
    outline: none;
}
.im-cmdk-list { flex: 1; overflow-y: auto; padding: 6px; }
.im-cmdk-group {
    font-size: var(--im-fs-hint); font-weight: 600;
    color: var(--im-text-4); text-transform: uppercase;
    padding: 8px 12px 4px;
}
.im-cmdk-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--im-r-sm);
    cursor: pointer;
    font-size: var(--im-fs-default);
    color: var(--im-text-2);
}
.im-cmdk-item.active { background: var(--im-brand-soft); color: var(--im-brand); }
.im-cmdk-item-hint { font-size: var(--im-fs-hint); color: var(--im-text-4); }
.im-cmdk-empty { padding: 32px; text-align: center; color: var(--im-text-4); font-size: var(--im-fs-body); }
.im-cmdk-foot {
    border-top: 1px solid var(--im-line-2);
    padding: 8px 14px;
    display: flex; gap: 14px;
    font-size: var(--im-fs-hint); color: var(--im-text-4);
}
.im-cmdk-foot kbd {
    background: var(--im-line-2);
    border: 1px solid var(--im-line);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    font-family: ui-monospace, SF Mono, monospace;
}

/* 列表 j/k 键盘聚焦 */
.im-kb-focus {
    outline: 2px solid var(--im-brand);
    outline-offset: -1px;
    border-radius: var(--im-r-sm);
}

/* Skeleton 加载占位（列表骨架屏） */
@keyframes im-skeleton-pulse {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.im-skel {
    display: block;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: im-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: var(--im-r-sm);
}
.im-skel-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--im-line-2);
}
.im-skel-circle { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.im-skel-line { height: 12px; }

/* 空态：图标 + 主标题 + 描述 + 一个 CTA */
.im-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--im-text-3);
}
.im-empty-icon { font-size: 36px; opacity: 0.5; margin-bottom: 8px; }
.im-empty-title { font-size: var(--im-fs-section); color: var(--im-text-2); margin-bottom: 4px; font-weight: 500; }
.im-empty-desc  { font-size: var(--im-fs-body); color: var(--im-text-4); margin-bottom: 16px; max-width: 360px; }
.im-empty-cta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 16px;
    background: var(--im-brand);
    color: #fff;
    border-radius: var(--im-r-sm);
    font-size: var(--im-fs-default);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--im-dur);
    border: none;
}
.im-empty-cta:hover { background: var(--im-brand-hover); }
.im-empty-cta.ghost {
    background: transparent;
    color: var(--im-brand);
    border: 1px solid var(--im-brand-border);
}
.im-empty-cta.ghost:hover { background: var(--im-brand-soft); }

/* 状态合并徽章：「⚠ +N 项」hover 展开 */
.im-more-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--im-fs-hint);
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--im-warning-soft);
    color: var(--im-warning);
    border: 1px solid var(--im-warning-border);
    cursor: help;
    position: relative;
    user-select: none;
}
.im-more-badge:hover .im-more-pop { display: block; }
.im-more-pop {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: var(--im-r-sm);
    box-shadow: var(--im-sh-modal);
    padding: 6px 8px;
    z-index: 80;
    min-width: 160px;
    white-space: normal;
    font-size: var(--im-fs-body);
    color: var(--im-text-2);
}
.im-more-pop > div { padding: 3px 0; }
.im-more-pop > div + div { border-top: 1px dashed var(--im-line-2); }

/* ──────────────────────────────────────────────────────────────────────────
   共享 Modal（imAlert / imConfirm / imModal）
   ────────────────────────────────────────────────────────────────────────── */
.im-modal-mask {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0;
    animation: im-fade-in var(--im-dur) var(--im-ease) forwards;
}
@keyframes im-fade-in { to { opacity: 1; } }
.im-modal {
    background: var(--im-surface);
    border-radius: var(--im-r-lg);
    box-shadow: var(--im-sh-modal);
    max-width: 480px; width: 100%;
    overflow: hidden;
    transform: translateY(8px);
    animation: im-rise var(--im-dur) var(--im-ease) forwards;
}
@keyframes im-rise { to { transform: translateY(0); } }
.im-modal.im-modal-lg { max-width: 640px; }
.im-modal-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 20px 6px;
}
.im-modal-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.im-modal-icon.danger { background: var(--im-danger-soft); color: var(--im-danger); }
.im-modal-icon.warning { background: var(--im-warning-soft); color: var(--im-warning); }
.im-modal-icon.success { background: var(--im-success-soft); color: var(--im-success); }
.im-modal-icon.info { background: var(--im-brand-soft); color: var(--im-brand); }
.im-modal-title-wrap { flex: 1; min-width: 0; padding-top: 2px; }
.im-modal-title {
    font-size: var(--im-fs-section);
    font-weight: 600;
    color: var(--im-text);
    margin: 0;
}
.im-modal-body {
    padding: 8px 20px 20px;
    font-size: var(--im-fs-default);
    color: var(--im-text-2);
    line-height: 1.6;
    word-break: break-word;
}
.im-modal-body p { margin: 0 0 8px; }
.im-modal-body p:last-child { margin-bottom: 0; }
.im-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px;
    background: var(--im-surface-2);
    border-top: 1px solid var(--im-line-2);
}
.im-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px;
    min-height: 36px;            /* 触达尺寸保底：标签换行也不塌陷 */
    padding: 0 18px;                 /* Gemini 胶囊更宽的左右内边距 */
    border-radius: var(--im-r-pill); /* 胶囊形（Material 3 / Gemini 签名）*/
    font-size: var(--im-fs-default);
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease);
    line-height: 1;
}
.im-btn:focus-visible { outline: 2px solid var(--im-brand); outline-offset: 2px; }
.im-btn-ghost {
    background: var(--im-surface);
    color: var(--im-text-2);
    border-color: var(--im-line);
}
.im-btn-ghost:hover { background: var(--im-line-2); }
.im-btn-primary {
    background: var(--im-brand);
    color: #fff;
}
.im-btn-primary:hover { background: var(--im-brand-hover); }
.im-btn-danger {
    background: var(--im-danger);
    color: #fff;
}
.im-btn-danger:hover { background: #b91c1c; }
/* 次级破坏性操作：红字幽灵按钮（Apple 风格——破坏性动作用红色文字而非满底红）*/
.im-btn-danger-ghost {
    background: var(--im-surface);
    color: var(--im-danger);
    border-color: var(--im-danger-border);
}
.im-btn-danger-ghost:hover { background: var(--im-danger-soft); }
/* 强调型幽灵：中性底 + 品牌字（用于人才库等次要正向操作）*/
.im-btn-soft {
    background: var(--im-brand-soft);
    color: var(--im-brand);
    border-color: var(--im-brand-border);
}
.im-btn-soft:hover { background: #e0ecff; }
.im-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* 修复 .hidden 失效：.im-btn 的 display 在 Tailwind .hidden 之后定义，会覆盖之；
   用复合选择器（更高特异性）保证 .hidden 始终能隐藏 im-btn */
.im-btn.hidden { display: none; }
/* 紧凑变体：用于表格行内等密集场景，仍保 28px 最小触达高度（Apple HIG 触达友好）*/
.im-btn-sm { height: 28px; min-height: 28px; padding: 0 14px; font-size: var(--im-fs-body); border-radius: var(--im-r-pill); }

/* ──────────────────────────────────────────────────────────────────────────
   Toast（top-center 浮条）
   ────────────────────────────────────────────────────────────────────────── */
.im-toast-stack {
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.im-toast {
    pointer-events: auto;
    background: var(--im-text); color: #fff;
    padding: 10px 14px;
    border-radius: var(--im-r-sm);
    font-size: var(--im-fs-body);
    box-shadow: var(--im-sh-modal);
    display: flex; align-items: center; gap: 8px;
    min-width: 200px; max-width: 480px;
    opacity: 0; transform: translateY(-6px);
    animation: im-toast-in var(--im-dur) var(--im-ease) forwards;
}
.im-toast.success { background: var(--im-success); }
.im-toast.warning { background: var(--im-warning); }
.im-toast.danger { background: var(--im-danger); }
.im-toast.out { animation: im-toast-out 160ms ease-out forwards; }
@keyframes im-toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes im-toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* ──────────────────────────────────────────────────────────────────────────
   Tooltip（hover 显示 title 的替代品）
   实际上仍用 title 属性，但对带 [data-tip] 的元素显示 styled tooltip
   ────────────────────────────────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--im-text); color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--im-fs-hint);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--im-dur), transform var(--im-dur);
    z-index: 50;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
/* 向下显示的 tooltip（用于贴顶元素，避免被视口/头部顶边裁切）*/
[data-tip][data-tip-pos="bottom"]::after {
    bottom: auto; top: calc(100% + 6px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tip][data-tip-pos="bottom"]:hover::after,
[data-tip][data-tip-pos="bottom"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   丝滑层（motion polish）— 性能优先：只用 transform/opacity，避免布局抖动
   全部尊重 prefers-reduced-motion
   ========================================================================== */

/* 1) 细滚动条：默认极淡，hover 容器时变明显（Linear / Figma 风格） */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*:hover {
    scrollbar-color: rgba(100,116,139,0.28) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 9px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color var(--im-dur) var(--im-ease);
}
*:hover::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.28); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); background-clip: content-box; }

/* 2) 按钮按压反馈：所有 button / [role=button] / .im-btn 统一微缩放 */
button:not(:disabled):active,
.im-btn:not([disabled]):active,
[role="button"]:active {
    transform: scale(0.97);
}
button, .im-btn, [role="button"] {
    transition: transform 120ms var(--im-ease), background-color var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease);
}

/* 3) 链接 / 可点击图标的颜色过渡 */
a, svg { transition: color var(--im-dur) var(--im-ease), opacity var(--im-dur) var(--im-ease); }

/* 4) 卡片提起：给加了 .im-lift 的卡片 hover 上浮（GPU 加速） */
.im-lift {
    transition: transform var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease);
    will-change: transform;
}
.im-lift:hover { transform: translateY(-2px); box-shadow: var(--im-sh-2); }

/* 5) 内容淡入（列表/面板首次出现）— 用 transform+opacity */
@keyframes im-content-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.im-in { animation: im-content-in 280ms var(--im-ease) both; }
/* 列表逐行错峰（最多前 12 行有 stagger，避免长列表性能问题） */
.im-stagger > *:nth-child(1) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 0ms; }
.im-stagger > *:nth-child(2) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 24ms; }
.im-stagger > *:nth-child(3) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 48ms; }
.im-stagger > *:nth-child(4) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 72ms; }
.im-stagger > *:nth-child(5) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 96ms; }
.im-stagger > *:nth-child(6) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 120ms; }
.im-stagger > *:nth-child(7) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 144ms; }
.im-stagger > *:nth-child(8) { animation: im-content-in 260ms var(--im-ease) both; animation-delay: 168ms; }

/* 6) 输入框聚焦：柔和外发光，而非生硬 ring */
input:focus, textarea:focus, select:focus {
    transition: box-shadow var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}

/* 7) Tab 切换淡入 */
.im-tab-enter { animation: im-content-in 240ms var(--im-ease) both; }

/* ── 尊重"减少动效"系统设置：全部动效 / 过渡降到最低 ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .im-lift:hover { transform: none; }
    button:active, .im-btn:active { transform: none; }
}

/* ==========================================================================
   Apple 精修层（蒸馏 HIG: Clarity / Deference / Depth + visionOS 材质）
   全部全局 / 不动 HTML 结构。原则：UI 让位内容、用深度而非边框做层级。
   ========================================================================== */

/* —— 1. 字体排印：SF 优先 + 抗锯齿 + 数字等宽对齐（Clarity）—— */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
/* 标题略收紧字距，更精致 */
h1, h2, h3, .im-title-page, .im-title-section { letter-spacing: -0.01em; }
/* 评分 / 统计数字等宽对齐，避免跳动 */
.im-tnum, [class*="text-2xl"], [class*="font-bold"] { font-variant-numeric: tabular-nums; }

/* —— 2. 圆角阶梯（Gemini / Material 3：更大更圆，交互件走胶囊）—— */
:root {
    --im-r-sm: 10px;
    --im-r-md: 16px;
    --im-r-lg: 20px;
    --im-r-xl: 28px;
    /* 3. 阴影更柔、多层、低透明（Depth，像物体真实浮起而非生硬投影）*/
    --im-sh-1: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
    --im-sh-2: 0 2px 8px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
    --im-sh-3: 0 4px 12px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.08);
    --im-sh-4: 0 8px 24px rgba(0,0,0,0.08), 0 32px 72px rgba(0,0,0,0.14);
    /* Apple 偏深灰而非纯黑 */
    --im-text: #1d1d1f;
}

/* —— 4. 浮层：克制的背景模糊（简洁优先，不过度玻璃化）—— */
.im-modal-mask, .im-cmdk-mask, #notifDrawer > #notifMask {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(17, 24, 39, 0.28);
}
/* 命令面板本体：近乎纯白 + 轻模糊 */
.im-cmdk-panel {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 0.5px solid rgba(0,0,0,0.06);
}
/* Modal 本体保持高不透明（内容清晰优先），仅描边更细 */
.im-modal { border: 0.5px solid rgba(0,0,0,0.05); }

/* —— 5. 克制边框：1px 灰边 → 0.5px 更轻，hairline 质感 —— */
.im-modal-actions, .im-cmdk-foot, .im-cmdk-input { border-color: rgba(0,0,0,0.06); }

/* —— 6. 柔光 focus（取代生硬的 2px ring）—— */
.im-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.18);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.14);
    border-color: var(--im-brand) !important;
}

/* —— 7. Toast：深色、克制模糊 —— */
.im-toast {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(29, 29, 31, 0.9);
    border: 0.5px solid rgba(255,255,255,0.08);
}

/* —— 8. 全局卡片 hover 更柔（用阴影抬升而非边框变色），仅 .im-lift 元素 —— */
.im-lift:hover { box-shadow: var(--im-sh-3); }

/* ==========================================================================
   待审核页阶段 tab（Apple 分段控件质感：默认一个、点击切换）
   ========================================================================== */
.im-pending-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--im-line-2);
}
.im-pending-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--im-fs-body);
    font-weight: 500;
    color: var(--im-text-3);
    background: var(--im-surface-2);
    border: 0.5px solid transparent;
    cursor: pointer;
    transition: background var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease);
}
.im-pending-tab:hover { background: var(--im-line-2); color: var(--im-text-2); }
.im-pending-tab.is-active {
    background: var(--im-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(11, 92, 255, 0.25);
}
.im-pending-tab-num {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    color: inherit;
    opacity: 0.85;
}
.im-pending-tab.is-active .im-pending-tab-num { background: rgba(255,255,255,0.22); }

/* ==========================================================================
   Gemini 层（Material 3 Expressive 在 AI 产品的落地）
   - sparkle 渐变只标记 AI 能力；交互件胶囊化；加载用渐变扫光
   ========================================================================== */

/* —— AI 点睛：渐变文字 / 渐变描边 / 渐变实底 —— */
.im-ai-text {
    background: var(--im-ai-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.im-ai-fill { background: var(--im-ai-gradient); color: #fff; border: none; }
.im-ai-fill:hover { filter: brightness(1.05); }
/* 渐变描边胶囊（AI 次级操作，如「重新分析」）：内白底 + 渐变边 */
.im-ai-chip {
    position: relative; color: var(--im-ai-purple); background: var(--im-surface);
    border-radius: var(--im-r-pill);
    border: 1.5px solid transparent;
    background-image: linear-gradient(var(--im-surface), var(--im-surface)), var(--im-ai-gradient);
    background-origin: border-box; background-clip: padding-box, border-box;
}
/* AI 表面：极淡渐变底（用于助手面板 / AI 分析卡）*/
.im-ai-surface { background: var(--im-ai-gradient-soft); }

/* —— sparkle 图标（小三角四角星）——可用 ::before 注入 ✦ —— */
.im-sparkle::before { content: "✦"; background: var(--im-ai-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-right: 4px; }

/* —— 渐变 shimmer 加载（替代灰色 skeleton 的"思考"态）—— */
@keyframes im-ai-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.im-ai-loading {
    background: linear-gradient(90deg, #e8f0ff 0%, #eaf4ff 25%, #e6fbff 50%, #eaf4ff 75%, #e8f0ff 100%);
    background-size: 200% 100%;
    animation: im-ai-shimmer 1.6s linear infinite;
    border-radius: var(--im-r-md);
}

/* —— 胶囊输入（Gemini 搜索签名）：给单行搜索框加 .im-input-pill —— */
.im-input-pill {
    border-radius: var(--im-r-pill) !important;
    padding-left: 16px !important; padding-right: 16px !important;
}
input.im-input-pill[type="text"] { padding-left: 38px !important; } /* 留出搜索图标位 */

/* —— Material state layer：所有 im-btn-ghost hover 用主色叠加而非纯灰 —— */
.im-btn-ghost:hover { background: var(--im-state-hover); border-color: var(--im-line); }
.im-btn-ghost:active { background: var(--im-state-press); }

/* —— 大圆角应用到通用容器别名（不影响数据表行）—— */
.im-card { border-radius: var(--im-r-lg); }

/* 纯胶囊圆角（用于无左图标的输入/选择，不改内边距）*/
.im-pill { border-radius: var(--im-r-pill) !important; }

/* ==========================================================================
   前沿 UI 精修层：玻璃外壳 + 渐变画布 + 卡片更柔深度
   （与登录页磨玻璃质感呼应；只动 token/外壳，不碰数据可读性）
   ========================================================================== */

/* 1) App 画布：极淡冷调渐变取代纯灰，整页更有深度（固定不随滚动）*/
body {
    background-image:
        radial-gradient(1100px 680px at 100% -6%, rgba(11,92,255,0.055), transparent 58%),
        radial-gradient(820px 560px at -6% 108%, rgba(34,211,238,0.05), transparent 55%);
    background-attachment: fixed;
}

/* 2) 左侧导航：磨玻璃（半透明 + 背景模糊），呼应登录页玻璃质感 */
#sidebar {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-right: 1px solid rgba(15,23,41,0.06);
}

/* 3) 主内容卡：更柔的多层阴影 + 发丝边框，悬浮感更现代 */
.card-shadow {
    box-shadow: 0 1px 2px rgba(15,23,41,0.04), 0 14px 38px rgba(15,23,41,0.06) !important;
    border: 1px solid rgba(15,23,41,0.045);
}

/* 4) 顶层浮层（弹窗/命令面板/抽屉遮罩）统一更克制的玻璃模糊已在前文，
      这里给 popover/菜单也补一点通透描边 */
.im-cmdk-panel, #acctMenu, #chatHistMenu, #allMoreMenu, #moreFiltersPanel {
    border-color: rgba(15,23,41,0.07);
    box-shadow: 0 8px 24px rgba(15,23,41,0.10), 0 2px 6px rgba(15,23,41,0.05);
}