/* =================================================================
   utils.css - 原子化工具类速查表
   
   使用方法：在 HTML 中组合使用这些类名
   例如：<div class="flex items-center gap-sm p-md rounded-sm bg-card">
   
   ═══════════════════════════════════════════════════════════════
   【圆角】 rounded-{size}
   ═══════════════════════════════════════════════════════════════
   .rounded-none    0        .rounded-xs    2px
   .rounded-sm      3px      .rounded-md    4px
   .rounded-lg      8px      .rounded-full  圆形
   
   ═══════════════════════════════════════════════════════════════
   【边距】 p/m-{size}  px/py/mx/my-{size}  pt/pb/pl/pr/mt/mb/ml/mr-{size}
   ═══════════════════════════════════════════════════════════════
   0     0px       xs    4px       sm    8px
   md    12px      lg    20px      xl    32px
   auto  auto(仅margin)
   
   ═══════════════════════════════════════════════════════════════
   【背景色】 bg-{name}
   ═══════════════════════════════════════════════════════════════
   .bg-primary      #121212     .bg-secondary   #1b1b1b
   .bg-tertiary     #222222     .bg-card        卡片背景
   .bg-transparent  透明        .bg-success/warning/error/info  状态色
   .bg-warning-light / bg-success-light / bg-danger-light  状态色浅色背景
   
   ═══════════════════════════════════════════════════════════════
   【文字颜色】 text-{name}
   ═══════════════════════════════════════════════════════════════
   .text-primary    #fff       .text-secondary   #ddd
   .text-tertiary   #aaa       .text-light       #2eff96(主题绿)
   .text-success/warning/error/info  状态色
   
   ═══════════════════════════════════════════════════════════════
   【文字大小】 text-{size}
   ═══════════════════════════════════════════════════════════════
   .text-xxs  0.75rem(12px)    .text-xs   0.80rem(12.8px)
   .text-sm   0.875rem(14px)   .text-md   1rem(16px)
   .text-lg   1.25rem(20px)    .text-xl   1.5rem(24px)
   
   ═══════════════════════════════════════════════════════════════
   【文字粗细】 font-{weight}
   ═══════════════════════════════════════════════════════════════
   .font-normal    400          .font-medium    500
   .font-semibold  600          .font-bold      700
   
   ═══════════════════════════════════════════════════════════════
   【行间距】 leading-{size}
   ═══════════════════════════════════════════════════════════════
   .leading-none    1.0          .leading-tight   1.2
   .leading-snug    1.4          .leading-normal  1.5
   .leading-relaxed 1.6          .leading-loose   1.8
   
   ═══════════════════════════════════════════════════════════════
   【文字对齐】 text-{align}
   ═══════════════════════════════════════════════════════════════
   .text-left       左对齐       .text-center     居中
   .text-right      右对齐
   
   ═══════════════════════════════════════════════════════════════
   【文字截断】
   ═══════════════════════════════════════════════════════════════
   .truncate        单行截断+省略号
   .line-clamp-2    2行截断      .line-clamp-3    3行截断
   
   ═══════════════════════════════════════════════════════════════
   【文字装饰/大小写/字母间距】
   ═══════════════════════════════════════════════════════════════
   .underline / .no-underline / .line-through   下划线/删除线
   .uppercase / .lowercase / .capitalize        大小写转换
   .tracking-tight / .tracking-wide             字母间距
   
   ═══════════════════════════════════════════════════════════════
   【Flex 布局】
   ═══════════════════════════════════════════════════════════════
   .flex / .inline-flex      开启 flex
   .flex-col / .flex-row     方向
   .flex-wrap / .flex-nowrap 换行
   .flex-1 / .flex-auto      弹性
   .shrink-0 / .grow-0       禁止缩放/扩展
   
   .justify-start/center/end/between/around  主轴对齐
   .items-start/center/end/stretch           交叉轴对齐
   
   .flex-center   完全居中(display:flex + 两个居中)
   .flex-between  两端对齐(display:flex + space-between)
   
   ═══════════════════════════════════════════════════════════════
   【Grid 布局】
   ═══════════════════════════════════════════════════════════════
   .grid                开启 grid
   .grid-cols-2/3/4     2/3/4列布局
   .gap-xs/sm/md/lg/xl  单元格间距
   
   ═══════════════════════════════════════════════════════════════
   【宽高】
   ═══════════════════════════════════════════════════════════════
   .w-full / .w-auto    宽度 100% / auto
   .h-full / .h-auto    高度 100% / auto
   .w-11 / w-12 / w-20  44px / 48px / 80px 宽度
   .h-11 / h-12 / h-20  44px / 48px / 80px 高度
   .min-w-0 / .min-h-0  最小宽高为0
   .max-w-200           最大宽度 800px
   
   ═══════════════════════════════════════════════════════════════
   【显示/定位/溢出】
   ═══════════════════════════════════════════════════════════════
   .block / .inline-block / .inline / .hidden  显示模式
   .relative / .absolute / .fixed / .sticky    定位
   .inset-0                                    四周贴边
   .overflow-hidden / .overflow-auto           溢出处理
   .overflow-x-auto / .overflow-y-auto         单轴滚动
   
   ═══════════════════════════════════════════════════════════════
   【其他常用】
   ═══════════════════════════════════════════════════════════════
   .border / .border-light / .border-0         边框
   .border-t / .border-b / .border-l / .border-r  单侧边框
   .cursor-pointer / .cursor-not-allowed       光标
   .transition / .transition-fast / .transition-slow  过渡
   .opacity-0 / .opacity-50 / .opacity-100     透明度
   .shadow-none / .shadow-sm / .shadow-md / .shadow-lg  阴影
   .select-none / .select-text                 选择
   .pointer-events-none / .pointer-events-auto 指针事件
   .sr-only                                    屏幕阅读器专用
   .z-0 / .z-10 / .z-50 / .z-100 / .z-1000     层级
   .align-top / .align-middle / .align-bottom  垂直对齐
   
   ═══════════════════════════════════════════════════════════════
   【动画】 @keyframes
   ═══════════════════════════════════════════════════════════════
   spin               旋转          fadeInUp          渐显上滑
   pulse              呼吸          generating-shimmer 生成中光波
   highlight-flash    高亮闪烁    slideDown/slideUp  上下滑动
   contextMenuFadeIn  右键菜单渐显  noticeSlideIn      通知滑入
   noticeFadeOut      通知淡出    skeleton-shimmer   骨架屏
   progress-shimmer   进度条呼吸  toast-in/toast-out Toast动画
   modalFadeIn        弹窗渐显    bounce             弹跳
   borderGradientFlow 边框渐变循环  colorCycle         边框纯色循环(focus)
   bgColorCycle       背景纯色循环  textColorCycle     文字纯色循环
   fadeIn             渐显        gradientFlow       渐变流动
   
   ================================================================= */

/* =================================================================
   Design Tokens - 设计变量
   基于 Portmaster 深色主题
   核心理念：极简 + 深色 + 精准信息密度
   ================================================================= */

/* 全局重置：防御浏览器扩展注入（如Monica AI）*/
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* 全局字体抗锯齿 + 滚动条样式 + 主题色过渡 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* 主题色过渡：使 theme-engine.js 动态变色在所有元素上柔和平滑
       优先级最低(0,0,0)，不影响已有 transition 的交互组件 */
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    /* 注意：不可设置 scrollbar-width / scrollbar-color，
       现代 Chrome/Edge 121+ 中标准属性优先于 ::-webkit-scrollbar，
       一旦启用标准模式，::-webkit-scrollbar-button 等伪元素将被忽略 */
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-thumb {
    background: var(--color-button-light);
    border-radius: var(--radius-xs);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* 隐藏滚动条两端箭头按钮 */
*::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===================
   参考 Portmaster 深色主题
   =================== */

/* 全局颜色  */
:root {
    /* ===== 背景色（深色基调） ===== */
    --color-bg-dark: #050505;
    --color-bg-primary: #121212;
    --color-bg-secondary: #1b1b1b;
    --color-bg-tertiary: #222222;
    --color-bg-quinary: #333333;
    --color-bg-quaternary: #aaaaaa25; 

    --color-bg-wechat-list: #242424;  /* 微信列表 BG */
    --color-bg-deepseek-chat: #151515;  /* deepseek chat BG */

    /* ===== 文字层级（三级系统） ===== */
    --color-text-primary: #ffffff;
    --color-text-secondary: #dddddd;
    --color-text-tertiary: #aaaaaa;
    --color-text-quaternary: #777777;

    /* ===== 卡片与容器 ===== */
    --color-card-primary: #222222;
    --color-card-secondary: #1b1b1b;
    --color-card-tertiary: #2c2c2c;

    /* ===== 按钮 ===== */
    --color-button-dark: #343434;
    --color-button-light: #525252;
    --color-button-icon: #ababab;

    /* ===== 边框与分隔 ===== */
    --color-border: #2f2f2f;
    --color-border-light: #3f3f3f;
    --color-border-secondary: #2f2f2f;

    /* ===== 主题色 ===== */
    --color-highlight: #A4FF02;
    --color-light: #2eff96;
    --color-primary: #08b374;  /* #00D588、 #08b374*/
    --color-secondary: #02915a; 
    --color-tertiary: #005335;
    --color-primary-200: #25bd6c30;

    /* ===== 自适应前景色（由 theme-engine.js 动态覆盖，此处仅为默认回退值） ===== */
    --color-on-primary: #ffffff;
    --color-on-highlight: #1a1a1a;
    --color-on-light: #1a1a1a;

    /* ===== 状态色：红色 ===== */
    --color-danger-primary: #ff0f0f;
    --color-danger-secondary: #851010;
    --color-danger-tertiary: #ff000020;
    --color-error: #ff0f0f;
    --color-error-tertiary: #ff000020;

    /* ===== 状态色：黄色 ===== */
    --color-warning: #e9d81d;
    --color-warning-primary: #e9d81d;
    --color-warning-secondary: #827918;
    --color-warning-tertiary: #3d3a14;

    /* ===== 状态色：绿色 ===== */
    --color-success: #08b374;
    --color-success-tertiary: #25bd6c30;

    /* ===== 状态色：蓝色 ===== */
    --color-info: #4d97ff;
    --color-info-tertiary: #0069fc40;

    /* ===== 渐变色 ===== */
    --color-gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --color-gradient-green: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --color-gradient-red: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --color-gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

    /* ===== 排版 ===== */
    --font-family-base: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-mono: ui-monospaced, "SF Mono", "Menlo", "Consolas", "Monaco", "Courier New", monospace;
    --font-family-code: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    
    --font-size-minimum: 0.65rem;
    --font-size-mini: 0.70rem;
    --font-size-xxs: 0.75rem;
    --font-size-xs: 0.80rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --line-height-base: 1.5;

    --font-weight-light: 100;
    --font-weight-normal: 300;
    --font-weight-base: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===== 圆角 ===== */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* ===== 阴影 ===== */
    --shadow-low: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-hover: none;

    /* ===== 动效 ===== */
    --motion-fast: 80ms;
    --motion-normal: 160ms;
    --motion-slow: 300ms;

    /* 缓动曲线 */
    --motion-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;

    /* ===== 间距 ===== */
    --space-6: 6px;
    --space-10: 10px;
    --space-12: 12px;

    /* ===== 控件高度 ===== */
    --control-height-md: 32px;
}

/* =================================================================
   Utility Classes - 原子化工具类
   用于组合使用，减少重复样式定义
   
   命名规则：
   - 圆角: rounded-{size}
   - 边距: p-{size}, m-{size}, px-{size}, py-{size}, mx-{size}, my-{size}
   - 背景: bg-{name}
   - 文字: text-{name}
   - 边框: border, border-{name}
   - Flex: flex, flex-{type}
   - 间距: gap-{size}
   
   尺寸: xs, sm, md, lg, xl
   ================================================================= */

/* ===================
   圆角 - Border Radius
   =================== */
.rounded-none { border-radius: 0; }
.rounded-xs   { border-radius: var(--radius-xs); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

/* ===================
   内边距 - Padding
   =================== */
/* 全方向 */
.p-0  { padding: 0; }
.p-xs { padding: 4px; }
.p-sm { padding: 8px; }
.p-md { padding: 12px; }
.p-lg { padding: 20px; }
.p-xl { padding: 32px; }

/* 水平方向 */
.px-0  { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: 4px; padding-right: 4px; }
.px-sm { padding-left: 8px; padding-right: 8px; }
.px-md { padding-left: 12px; padding-right: 12px; }
.px-lg { padding-left: 20px; padding-right: 20px; }
.px-xl { padding-left: 32px; padding-right: 32px; }

/* 垂直方向 */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: 4px; padding-bottom: 4px; }
.py-sm { padding-top: 8px; padding-bottom: 8px; }
.py-md { padding-top: 12px; padding-bottom: 12px; }
.py-lg { padding-top: 20px; padding-bottom: 20px; }
.py-xl { padding-top: 32px; padding-bottom: 32px; }

/* 单侧 */
.pt-sm { padding-top: 8px; }
.pt-md { padding-top: 12px; }
.pt-lg { padding-top: 20px; }
.pb-sm { padding-bottom: 8px; }
.pb-md { padding-bottom: 12px; }
.pb-lg { padding-bottom: 20px; }
.pl-sm { padding-left: 8px; }
.pl-md { padding-left: 12px; }
.pr-sm { padding-right: 8px; }
.pr-md { padding-right: 12px; }

/* ===================
   外边距 - Margin
   =================== */
/* 全方向 */
.m-0  { margin: 0; }
.m-xs { margin: 4px; }
.m-sm { margin: 8px; }
.m-md { margin: 12px; }
.m-lg { margin: 20px; }
.m-xl { margin: 32px; }
.m-auto { margin: auto; }

/* 水平方向 */
.mx-0    { margin-left: 0; margin-right: 0; }
.mx-xs   { margin-left: 4px; margin-right: 4px; }
.mx-sm   { margin-left: 8px; margin-right: 8px; }
.mx-md   { margin-left: 12px; margin-right: 12px; }
.mx-lg   { margin-left: 20px; margin-right: 20px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* 垂直方向 */
.my-0  { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: 4px; margin-bottom: 4px; }
.my-sm { margin-top: 8px; margin-bottom: 8px; }
.my-md { margin-top: 12px; margin-bottom: 12px; }
.my-lg { margin-top: 20px; margin-bottom: 20px; }

/* 单侧 */
.mt-0  { margin-top: 0; }
.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 20px; }
.mt-xl { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 12px; }
.mb-lg { margin-bottom: 20px; }
.mb-xl { margin-bottom: 32px; }
.ml-sm { margin-left: 8px; }
.ml-md { margin-left: 12px; }
.mr-sm { margin-right: 8px; }
.mr-md { margin-right: 12px; }

/* ===================
   背景色 - Background
   =================== */
.bg-primary   { background: var(--color-bg-primary); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-tertiary  { background: var(--color-bg-tertiary); }
.bg-card      { background: var(--color-card-secondary); }
.bg-card-hover { background: rgba(41, 41, 41, 0.688); }
.bg-card-primary { background: var(--color-card-primary); }
.bg-transparent { background: transparent; }

/* 主题色背景 */
.bg-accent  { background: var(--color-primary); }
.bg-success { background: var(--color-success-tertiary); }
.bg-warning { background: var(--color-warning-tertiary); }
.bg-error   { background: var(--color-error-tertiary); }
.bg-info    { background: var(--color-info-tertiary); }

/* ===================
   文字颜色 - Text Color
   =================== */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-light     { color: var(--color-light); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-error     { color: var(--color-error); }
.text-info      { color: var(--color-info); }

/* ===================
   文字大小 - Font Size
   =================== */
.text-xxs { font-size: var(--font-size-xxs); }
.text-xs  { font-size: var(--font-size-xs); }
.text-sm  { font-size: var(--font-size-sm); }
.text-md  { font-size: var(--font-size-md); }
.text-lg  { font-size: var(--font-size-lg); }
.text-xl  { font-size: var(--font-size-xl); }
.text-2xl { font-size: 1.875rem; }
.text-3xl { font-size: 30px; }
.text-4xl { font-size: 48px; }

/* ===================
   文字样式 - Font Style
   =================== */
.font-normal   { font-weight: var(--font-weight-base); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===================
   行间距 - Line Height
   =================== */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.2; }
.leading-snug    { line-height: 1.4; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.6; }
.leading-loose   { line-height: 1.8; }

/* ===================
   文字装饰 - Text Decoration
   =================== */
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

/* ===================
   大小写 - Text Transform
   =================== */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ===================
   字母间距 - Letter Spacing
   =================== */
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }

/* ===================
   垂直对齐 - Vertical Align
   =================== */
.align-top      { vertical-align: top; }
.align-middle   { vertical-align: middle; }
.align-bottom   { vertical-align: bottom; }
.align-baseline { vertical-align: baseline; }

/* ===================
   边框 - Border
   =================== */
.border       { border: 1px solid var(--color-border); }
.border-light { border: 1px solid var(--color-border-light); }
.border-0     { border: none; }
.border-t     { border-top: 1px solid var(--color-border); }
.border-b     { border-bottom: 1px solid var(--color-border); }
.border-l     { border-left: 1px solid var(--color-border); }
.border-r     { border-right: 1px solid var(--color-border); }

/* ===================
   Flex 布局
   =================== */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1      { flex: 1; }
.flex-auto   { flex: auto; }
.flex-none   { flex: none; }
.shrink-0    { flex-shrink: 0; }
.grow-0      { flex-grow: 0; }

/* 主轴对齐 */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* 交叉轴对齐 */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* 常用组合 */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ===================
   Grid 布局
   =================== */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ===================
   间距 - Gap
   =================== */
.gap-0  { gap: 0; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 20px; }
.gap-xl { gap: 32px; }

/* ===================
   宽高 - Size
   =================== */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-11    { width: 44px; }
.w-12    { width: 48px; }
.w-20    { width: 80px; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.h-11    { height: 44px; }
.h-12    { height: 48px; }
.h-20    { height: 80px; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.min-h-45 { min-height: 180px; }
.max-w-200 { max-width: 800px; }

/* ===================
   显示 - Display
   =================== */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }

/* ===================
   定位 - Position
   =================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* ===================
   溢出 - Overflow
   =================== */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ===================
   光标 - Cursor
   =================== */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ===================
   过渡 - Transition
   =================== */
.transition {
    transition: all var(--motion-normal) var(--motion-ease);
}
.transition-fast {
    transition: all var(--motion-fast) var(--motion-ease);
}
.transition-slow {
    transition: all var(--motion-slow) var(--motion-ease);
}

/* ===================
   透明度 - Opacity
   =================== */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ===================
   阴影 - Shadow
   =================== */
.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.shadow-md   { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }
.shadow-lg   { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); }

/* ===================
   用户选择 - User Select
   =================== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }

/* ===================
   指针事件 - Pointer Events
   =================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ===================
   辅助功能 - Accessibility
   =================== */
/* 屏幕阅读器专用（视觉隐藏） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================
   Z-Index 层级
   =================== */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-50   { z-index: 50; }
.z-100  { z-index: 100; }
.z-1000 { z-index: 1000; }

/* ===================
   对象适配 - Object Fit
   =================== */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }

/* ===================
   文本换行 - White Space
   =================== */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.break-words       { word-break: break-word; }
.break-all         { word-break: break-all; }

/* ===================
   分隔线 - Divider
   =================== */
.divider {
    height: 1px;
    background: var(--color-border);
    margin: 12px 0;
}

.divider-light {
    height: 1px;
    background: var(--color-border-light);
    margin: 8px 0;
}

/* ===================
   交互效果 - Hover/Active
   =================== */
.hover\:bg-card-primary:hover { background: var(--color-card-primary); }
.hover\:bg-tertiary:hover { background: var(--color-bg-tertiary); }
.hover\:border-accent:hover { border-color: var(--color-primary); }
.hover\:translate-y-0\.5:hover { transform: translateY(2px); }
.hover\:text-tertiary:hover { color: var(--color-tertiary); }
.hover\:text-light:hover { color: var(--color-light); }
.hover\:underline:hover { text-decoration: underline; }

/* ===================
   状态色背景（浅色）
   =================== */
.bg-warning-light { background: rgba(245, 158, 11, 0.2); }
.bg-success-light { background: rgba(16, 185, 129, 0.2); }
.bg-danger-light { background: rgba(239, 68, 68, 0.2); }
.bg-info-light { background: rgba(59, 130, 246, 0.2); }

/* ===================
   虚线边框
   =================== */
.border-dashed { border-style: dashed; }
.border-2 { border-width: 2px; }

/* ============================================
   动画类 - Animation
   ============================================ */

/* 旋转动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 渐显动画和加载更多指示器 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 呼吸动画（渐显渐灰） */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 生成中 shimmer 动效 */
@keyframes generating-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 高亮闪烁 */
@keyframes highlight-flash {
    0% {
        background: rgba(0, 255, 0, 0.3);
        box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.4);
    }
    30% {
        background: rgba(0, 255, 0, 0.15);
        box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.2);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* 下滑动画 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上滑淡出 */
@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* 右键菜单渐显 */
@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 通知滑入 */
@keyframes noticeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 通知淡出 */
@keyframes noticeFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 骨架屏加载动画 */
@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* 进度条呼吸 */
@keyframes progress-shimmer {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Toast 进入 */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast 退出 */
@keyframes toast-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

/* 模态框渐显 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 弹跳效果 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 基础渐显 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 渐变流动 */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    25% { background-position: 20% 50%; }
    50% { background-position: 80% 50%; }
    75% { background-position: 95% 50%; }
    100% { background-position: 0% 50%; }
}

/* 边框渐变循环（带 box-shadow 光晕） */
@keyframes borderGradientFlow {
    0%, 100% { border-color: #2aed8b; box-shadow: 0 0 0 5px rgba(42, 237, 139, 0.12); }
    25% { border-color: #00d4ff; box-shadow: 0 0 0 5px rgba(0, 212, 255, 0.12); }
    50% { border-color: #a855f7; box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.12); }
    75% { border-color: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.12); }
}

/* 边框纯色循环（输入框 focus 用） */
@keyframes colorCycle {
    0%, 100% { border-color: #2aed8b; box-shadow: 0 0 0 5px rgba(42, 237, 139, 0.12); }
    25% { border-color: #00d4ff; box-shadow: 0 0 0 5px rgba(0, 212, 255, 0.12); }
    50% { border-color: #a855f7; box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.12); }
    75% { border-color: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.12); }
}

/* 背景纯色循环（package-bonus 等元素用） */
@keyframes bgColorCycle {
    0%, 100% { background-color: rgba(42, 237, 139, 0.2); }
    25% { background-color: rgba(0, 212, 255, 0.2); }
    50% { background-color: rgba(168, 85, 247, 0.2); }
    75% { background-color: rgba(245, 158, 11, 0.2); }
}

/* 文字纯色循环（数值文本等元素用） */
@keyframes textColorCycle {
    0%, 100% { color: #2aed8b; }
    25% { color: #00d4ff; }
    50% { color: #a855f7; }
    75% { color: #f59e0b; }
}

/* =================================================================
   旋转加载器 - Spinner
   用法：<span class="spinner spinner-sm spinner-glow"></span>
   ================================================================= */

/* 基础旋转加载器 */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);  /* 加长线条：两边都着色 */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 尺寸变体 */
.spinner-xs { width: 8px; height: 8px; border-width: 2px; }
.spinner-sm { width: 8px; height: 8px; border-width: 2px; }  /* 紧凑粗壮 */
.spinner-md { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 20px; height: 20px; border-width: 2.5px; }

/* 发光效果（呼吸 + 旋转，无阴影） animation: spin 0.8s linear infinite, pulse 1.5s ease-in-out infinite;*/
/* 发光效果（旋转，无阴影） */
.spinner-glow {
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
}

/* 颜色变体 */
.spinner-primary { border-top-color: var(--color-primary); border-right-color: var(--color-primary); }
.spinner-white { border-top-color: #ffffff; border-right-color: #ffffff; }
.spinner-muted { border-top-color: var(--color-text-tertiary); border-right-color: var(--color-text-tertiary); }

/* =================================================================
   图标颜色 Filter 原子类
   用法：<img src="icon.svg" class="icon-white">
   ================================================================= */

/* 白色图标 */
.icon-white {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* 灰色图标 (#aaa) */
.icon-gray {
    filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

/* 绿色图标 (--color-primary) */
.icon-primary {
    filter: brightness(0) saturate(100%) invert(37%) sepia(62%) saturate(720%) hue-rotate(102deg) brightness(96%) contrast(94%);
}

/* 红色图标 (--color-danger) */
.icon-danger {
    filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(5663%) hue-rotate(346deg) brightness(103%) contrast(107%);
}

/* 粉红图标 */
.icon-pink {
    filter: brightness(0) saturate(100%) invert(39%) sepia(91%) saturate(1352%) hue-rotate(331deg) brightness(94%) contrast(97%);
}

/* 简单反色 */
.icon-invert {
    filter: brightness(0) invert(1);
}

/* 悬停变白 */
.icon-hover-white:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* 悬停变绿 */
.icon-hover-primary:hover {
    filter: brightness(0) saturate(100%) invert(37%) sepia(62%) saturate(720%) hue-rotate(102deg) brightness(96%) contrast(94%);
}

/* =================================================================
   RemixIcon 图标辅助类
   用法：<i class="ri-home-line ri-icon-20 ri-icon-muted"></i>
   ================================================================= */

/* 基础图标样式 - 默认灰色，hover/激活时高亮 */
[class^="ri-"], [class*=" ri-"] {
    color: var(--color-text-secondary);
    line-height: 1;
    transition: color var(--motion-normal) var(--motion-ease);
}

/* 父元素 hover 时图标高亮 */
a:hover [class^="ri-"], a:hover [class*=" ri-"],
button:hover [class^="ri-"], button:hover [class*=" ri-"],
.nav-item:hover [class^="ri-"], .nav-item:hover [class*=" ri-"],
.nav-item.active [class^="ri-"], .nav-item.active [class*=" ri-"] {
    color: var(--color-text-primary);
}

/* 图标尺寸 */
.ri-icon-12 { font-size: 12px; }
.ri-icon-14 { font-size: 14px; }
.ri-icon-16 { font-size: 16px; }
.ri-icon-18 { font-size: 18px; }
.ri-icon-20 { font-size: 20px; }
.ri-icon-24 { font-size: 24px; }
.ri-icon-32 { font-size: 32px; }

/* 图标颜色 */
.ri-icon-muted { color: var(--color-text-tertiary); }
.ri-icon-secondary { color: var(--color-text-secondary); }
.ri-icon-primary { color: var(--color-text-primary); }
.ri-icon-brand { color: var(--color-primary); }
.ri-icon-danger { color: var(--color-danger-primary); }
.ri-icon-success { color: var(--color-success-primary); }
.ri-icon-warning { color: var(--color-warning-primary); }

/* 按钮内图标 */
.btn-icon-ri {
    margin-right: 6px;
    vertical-align: middle;
}

/* =================================================================
   数据表格原子类
   用法：<div class="data-table"><table>...</table></div>
   ================================================================= */

.data-table {
    width: 100%;
    background: var(--color-card-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.data-table table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    background: var(--color-bg-tertiary);
    padding: 10px 12px;
    text-align: left;
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-base);
    color: var(--color-text-tertiary);
}

.data-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xxs);
    color: var(--color-text-tertiary);
}

.data-table tbody tr:hover {
    background: rgba(41, 41, 41, 0.5);
}

/* =================================================================
   行列表原子类
   用法：
   <div class="list-row-header" style="grid-template-columns: 40px 1fr 100px 80px;">
       <span>#</span><span>标题</span>...
   </div>
   <div class="list-row-item" style="grid-template-columns: 40px 1fr 100px 80px;">
       <span>1</span><span>内容</span>...
   </div>
   ================================================================= */

/* 表头 */
.list-row-header {
    display: grid;
    align-items: center;
    padding: 0 10px;
    height: 40px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* 行项 */
.list-row-item {
    display: grid;
    align-items: center;
    padding: 0 10px;
    height: 40px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    font-size: var(--font-size-xxs);
    color: var(--color-text-tertiary);
    transition: background var(--motion-fast) var(--motion-ease);
    cursor: pointer;
}

.list-row-item:hover {
    background: var(--color-bg-tertiary);
}

.list-row-item:last-child {
    margin-bottom: 0;
}

/* 序号列 */
.list-row-index {
    text-align: center;
    color: var(--color-text-quaternary);
}

/* 操作列右对齐 */
.list-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-right: 10px;
}

/* 文字链接 */
.list-row-link {
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row-link:hover {
    color: var(--color-primary);
}

/* 头像/图标列 */
.list-row-avatar {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* 名称列（主要文本） */
.list-row-name {
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-base);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 元信息文本 */
.list-row-meta {
    font-size: var(--font-size-xxs);
    color: var(--color-text-quaternary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 可点击的元信息 */
.list-row-meta-link {
    font-size: var(--font-size-xxs);
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.list-row-meta-link:hover {
    color: var(--color-primary);
}

/* 状态标签列（居中） */
.list-row-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 数字列（右对齐） */
.list-row-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 日期列（右对齐） */
.list-row-date {
    white-space: nowrap;
}

/* 列居中 */
.list-row-center {
    text-align: center;
}

/* 列右对齐 */
.list-row-right {
    text-align: right;
}