/* HaoNoteWeb main.bundle.css — 由 scripts/build-css.mjs 自动生成，请勿手动编辑 */
/* 主样式入口文件 */

/* 引入设计令牌系统 */
/* 设计令牌系统 - 统一的设计变量定义 */

:root {
    /* ========== 颜色系统 ========== */
    
    /* 主色调 - 蓝 blue（交互主色，AGENTS.md 规定） */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    
    /* 紫色辅助色 */
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-300: #d946ef;
    --color-purple-500: #a855f7;
    --color-purple-600: #8b5cf6;
    --color-purple-700: #7c3aed;
    
    /* 灰度色系 */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* 功能色系 */
    --color-success-50: #dcfce7;
    --color-success-100: #bbf7d0;
    --color-success-200: #86efac;
    --color-success-300: #4ade80;
    --color-success-400: #22c55e;
    --color-success-500: #16a34a;
    --color-success-600: #15803d;
    --color-success-700: #166534;
    --color-success-800: #14532d;
    --color-success-900: #0f172a;
    
    /* 绿宝石色系 - 用于随机按钮 */
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-200: #a7f3d0;
    --color-emerald-300: #6ee7b7;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;
    --color-emerald-900: #064e3b;
    
    --color-warning-50: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #92400e;
    
    --color-error-50: #fee2e2;
    --color-error-100: #fecaca;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;
    --color-error-700: #991b1b;
    
    --color-info-50: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1e40af;
    
    /* 背景色 */
    --color-background: #ffffff;
    --color-background-secondary: #f8fafc;
    --color-background-tertiary: #f1f5f9;
    
    /* 文本色 */
    --color-text-primary: var(--color-gray-800);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-inverse: #ffffff;
    
    /* ========== 间距系统 ========== */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    
    /* 响应式间距 */
    --space-responsive-sm: clamp(var(--space-2), 2vw, var(--space-4));
    --space-responsive-md: clamp(var(--space-4), 4vw, var(--space-8));
    --space-responsive-lg: clamp(var(--space-6), 6vw, var(--space-12));
    
    /* ========== 字体系统 ========== */
    /* 正文字体：西文用系统无衬线，显式补充中日韩字体族（避免 Windows 回退到宋体渲染西文混排） */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', Arial, sans-serif;
    /* 展示字体：品牌 wordmark / 登录标题（Fraunces 自托管，仅拉丁字符加载 webfont，CJK 自动回退） */
    --font-family-display: 'Fraunces', Georgia, 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif;
    /* 笔记标题衬线栈：系统宋体优先（零 webfont 下载；数字/中文同源齐线），Georgia 仅兜底西文 */
    --font-family-serif: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif CJK SC', Georgia, 'Times New Roman', serif;
    /* 阅读区正文衬线栈：系统宋体（macOS Songti SC / Windows 宋体），数字由宋体渲染保持齐线 */
    --font-family-reading: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif CJK SC', Georgia, serif;
    --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    
    /* 品牌色 - 朱砂印章红（品牌记忆点） */
    --color-seal: #c63d2f;
    
    /* 字体大小 */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    
    /* 响应式字体大小 */
    --text-responsive-sm: clamp(var(--text-xs), 2.5vw, var(--text-sm));
    --text-responsive-base: clamp(var(--text-sm), 3vw, var(--text-base));
    --text-responsive-lg: clamp(var(--text-base), 3.5vw, var(--text-lg));
    
    /* 字重 */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 行高 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ========== 边框和圆角 ========== */
    --border-width: 1px;
    --border-width-thick: 2px;
    
    --border-radius-none: 0;
    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.5rem;    /* 8px */
    --border-radius-lg: 0.75rem;   /* 12px */
    --border-radius-xl: 1rem;      /* 16px */
    --border-radius-2xl: 1.5rem;   /* 24px */
    --border-radius-full: 9999px;
    
    /* 响应式圆角 */
    --border-radius-responsive: clamp(var(--border-radius-md), 2vw, var(--border-radius-xl));
    
    /* ========== 阴影系统 ========== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* 彩色阴影 (蓝色系) */
    --shadow-primary: 0 4px 6px -1px rgba(59, 130, 246, 0.25), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
    --shadow-primary-lg: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.15);
    
    /* ========== 过渡和动画 ========== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.5s ease;
    
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== Z-index 层级 ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* ========== 组件特定变量 ========== */
    
    /* 标签组件 */
    --tag-height: 2rem;
    --tag-padding-x: var(--space-3);
    --tag-padding-y: var(--space-2);
    --tag-font-size: var(--text-xs);
    --tag-border-radius: var(--border-radius-lg);
    
    /* 按钮组件 */
    --button-height-sm: 2rem;
    --button-height-md: 2.5rem;
    --button-height-lg: 3rem;
    --button-padding-x: var(--space-4);
    --button-border-radius: var(--border-radius-xl);
    
    /* 悬浮按钮组件 */
    --fab-size: 3.5rem;           /* 56px */
    --fab-size-mobile: 3rem;      /* 48px */
    --fab-bottom: var(--space-8); /* 32px */
    --fab-side: var(--space-8);   /* 32px */
    --fab-bottom-mobile: var(--space-6); /* 24px */
    --fab-side-mobile: var(--space-6);   /* 24px */
    --fab-shadow: var(--shadow-lg);
    --fab-shadow-hover: var(--shadow-xl);
    --fab-transition: var(--transition-normal);
    --fab-z-index: var(--z-fixed);
    
    /* 模态框组件 */
    --modal-width: 90%;
--modal-max-width: min(95vw, 56rem);
--modal-min-width: 320px;
    --modal-max-height: 95vh; /* 增加5vh：从90vh到95vh，为更大的内容区域提供更多空间 */
    --modal-border-radius: var(--border-radius-2xl);

    /* 模态框内边距系统 - 响应式设计 */
    --modal-padding: var(--space-4);
    --modal-header-padding: var(--space-6) var(--space-6) var(--space-3) var(--space-6);
    --modal-content-padding: 0 var(--space-6) var(--space-6) var(--space-6);
    --modal-section-padding: var(--space-2) var(--space-6);
    
    /* 导航栏组件 */
    --navbar-height: 60px;
    --navbar-height-mobile: 50px;
    --navbar-padding: var(--space-8);
    --navbar-padding-mobile: var(--space-4);
    
    /* Markdown 渲染组件（暗色下在下方 media 查询中覆盖） */
    --md-heading-color: #1f2937;
    --md-strong-color: var(--color-gray-900);
    --md-code-bg: #f1f5f9;
    --md-code-color: #e11d48;
    --md-pre-bg: #f8fafc;
    --md-pre-border: #e2e8f0;
    --md-pre-code-color: #374151;
    --md-blockquote-border: #e5e7eb;
    --md-blockquote-color: #6b7280;
    --md-link-color: var(--color-primary-500);
    --md-link-hover-color: var(--color-primary-600);
    --md-table-border: #e5e7eb;
    --md-table-header-bg: #f8fafc;
    
    /* ========== 断点系统 ========== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 背景色 */
        --color-background: #0f172a;
        --color-background-secondary: #1e293b;
        --color-background-tertiary: #334155;

        /* 文本色 */
        --color-text-primary: #e2e8f0;
        --color-text-secondary: #94a3b8;
        --color-text-tertiary: #64748b;
        --color-text-inverse: #0f172a;

        /* 卡片、面板背景 */
        --color-surface: #1e293b;
        --color-surface-hover: #273548;
        --color-surface-active: #334155;

        /* 边框色 */
        --color-border: #334155;
        --color-border-light: #293548;
        --color-border-hover: #475569;

        /* 灰度色系（调暗用于暗色背景上的元素） */
        --color-gray-50: #1e293b;
        --color-gray-100: #1e293b;
        --color-gray-200: #334155;
        --color-gray-300: #475569;
        --color-gray-400: #64748b;
        --color-gray-500: #94a3b8;
        --color-gray-600: #cbd5e1;
        --color-gray-700: #e2e8f0;
        --color-gray-800: #f1f5f9;
        --color-gray-900: #f8fafc;

        /* 品牌色 - 朱砂印章红（暗色下调亮） */
        --color-seal: #e2604f;

        /* 主色调（暗色下略调亮，蓝色系） */
        --color-primary-50: rgba(59, 130, 246, 0.1);
        --color-primary-100: rgba(59, 130, 246, 0.15);
        --color-primary-200: rgba(59, 130, 246, 0.2);
        --color-primary-300: #93c5fd;
        --color-primary-400: #60a5fa;
        --color-primary-500: #60a5fa;
        --color-primary-600: #3b82f6;
        --color-primary-700: #2563eb;
        --color-primary-800: #1d4ed8;
        --color-primary-900: #1e40af;

        /* 紫色辅助色（调亮） */
        --color-purple-50: rgba(167, 139, 250, 0.1);
        --color-purple-100: rgba(167, 139, 250, 0.15);
        --color-purple-200: rgba(167, 139, 250, 0.2);
        --color-purple-300: #d946ef;
        --color-purple-500: #a78bfa;
        --color-purple-600: #8b5cf6;
        --color-purple-700: #7c3aed;

        /* 阴影（暗色下更淡） */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        --shadow-primary: 0 4px 6px -1px rgba(59, 130, 246, 0.15), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
        --shadow-primary-lg: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);

        /* Markdown 渲染（取代原 dark-mode.css 中的覆盖段） */
        --md-heading-color: #f1f5f9;
        --md-strong-color: #f1f5f9;
        --md-code-bg: #334155;
        --md-code-color: #f472b6;
        --md-pre-bg: #0f172a;
        --md-pre-border: #334155;
        --md-pre-code-color: #e2e8f0;
        --md-blockquote-border: #475569;
        --md-blockquote-color: #94a3b8;
        --md-link-color: #60a5fa;
        --md-link-hover-color: #93c5fd;
        --md-table-border: #475569;
        --md-table-header-bg: #334155;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    :root {
        --border-width: var(--border-width-thick);
        --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.25);
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition-normal: 0.01ms;
        --transition-slow: 0.01ms;
        --transition-slower: 0.01ms;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* 引入基础样式 */
/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll; /* 始终显示垂直滚动条，避免页面布局跳动 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background: #f8fafc;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: 16px;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 品牌视觉系统 - "纸墨文房" 设计语言
 * 墨色衬线 wordmark + 朱砂印章点，作为品牌记忆点
 */

/* ========== 自托管字体（Fraunces - 品牌展示字体，仅 latin 子集） ========== */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/fraunces-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+2013-2014, U+2018-201D, U+2022, U+20AC;
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/fraunces-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+2013-2014, U+2018-201D, U+2022, U+20AC;
}

/* ========== 品牌字体工具类 ========== */

/* 展示字体：品牌 wordmark、登录标题等需要个性的场景 */
.font-display {
    font-family: var(--font-family-display);
    letter-spacing: -0.01em;
}

/* 衬线标题：笔记正文标题，赋予文房书写感（中日韩使用系统宋体，无额外加载成本） */
.font-serif-note {
    font-family: var(--font-family-serif);
}

/* ========== 品牌组件 ========== */

/* 朱砂印章点 - 品牌记忆点，跟随 wordmark 出现 */
.brand-seal {
    display: inline-block;
    width: 0.32em;
    height: 0.32em;
    margin-left: 0.18em;
    border-radius: 0.08em;
    background-color: var(--color-seal);
    transform: translateY(-0.06em) rotate(6deg);
    box-shadow: 0 1px 2px rgba(198, 61, 47, 0.35);
    transition: transform var(--transition-normal);
}

/* wordmark hover 时印章轻轻"落印" */
.brand-wordmark:hover .brand-seal {
    transform: translateY(-0.06em) rotate(-4deg) scale(1.15);
}

/* 登录页纸张氛围背景 - 微妙的暖色渐晕 */
.login-paper-bg {
    background-color: #f3f4f6;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99, 102, 241, 0.07), transparent),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(198, 61, 47, 0.05), transparent);
}

/* 全站氛围层：极淡的纸面渐晕（与登录页同一设计语言，更克制） */
body {
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.05), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(198, 61, 47, 0.035), transparent);
    background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
    .login-paper-bg {
        background-color: #0f172a;
        background-image:
            radial-gradient(ellipse 80% 60% at 50% -10%, rgba(129, 140, 248, 0.08), transparent),
            radial-gradient(ellipse 60% 50% at 90% 100%, rgba(226, 96, 79, 0.06), transparent);
    }
}



/* 引入组件样式 */
/* 组件基础样式 - 使用设计令牌系统 */

/* 自定义 min-height 类 */
.min-h-250 {
    min-height: 320px; /* 增加70px：从250px到320px */
}

.min-h-300 {
    min-height: 380px; /* 增加80px：从300px到380px */
}

/* 响应式 min-height 类 */
@media (min-width: 768px) {
    .md\:min-h-250 {
        min-height: 320px; /* 增加70px：从250px到320px */
    }

    .md\:min-h-300 {
        min-height: 380px; /* 增加80px：从300px到380px */
    }
}

/* 文本截断工具类 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Markdown 内容样式（正文等宽化：与编辑器 font-mono 统一，书写与阅读视觉一致） */
.markdown-content {
    font-size: var(--text-responsive-base);
    font-family: var(--font-family-mono);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    /* 数字齐线：关闭 Georgia 旧式数字（onum），使数字与中文高度对齐 */
    font-variant-numeric: lining-nums;
}

/* 卡片 meta 数字（时间/复习次数/字数）：等宽数字，数字变化时宽度稳定不跳动 */
.post-time,
.post-random,
.word-count {
    font-variant-numeric: tabular-nums lining-nums;
}

/* 模态框组件样式 - 使用设计令牌系统 */

/* 模态框显示状态 */
.modal {
    display: none;
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--modal-padding);
    overscroll-behavior: contain;
    background-color: rgba(0, 0, 0, 0.45) !important; /* 降低背景遮罩浓度，让虚化更通透 */
    backdrop-filter: blur(10px); /* 强化虚化效果，达到主流 App 质感 */
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari 浏览器 */
    transition: all var(--transition-normal) var(--ease-out);
}

/* 禁止背景滚动 */
.modal-open,
.modal-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* 模态框动画 */
@keyframes fade-in {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modal-slide-in {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 动画类 */
.animate-fade-in {
    animation: fade-in var(--transition-slow) var(--ease-out);
}

.animate-slide-in {
    animation: slide-in 0.6s var(--ease-out);
}

.animate-modal-slide-in {
    animation: modal-slide-in var(--transition-slow) var(--ease-out);
}

/* 笔记列表错落入场：逐条延迟 45ms（由 JS 写入 animation-delay），backwards 避免延迟期闪烁 */
.posts-list > article {
    animation: slide-in 0.45s var(--ease-out) backwards;
}

/* 模态框容器样式 */
.modal-container {
    width: var(--modal-width);
    min-width: var(--modal-min-width);
    max-width: var(--modal-max-width);
    max-height: var(--modal-max-height);
    border-radius: var(--modal-border-radius);
}

/* 模态框头部 */
.modal-header {
    padding: var(--modal-header-padding);
}

/* 模态框时间设置区域 */
.modal-time-section {
    padding: var(--modal-section-padding);
}

/* 模态框内容区域 */
.modal-content {
    padding: var(--modal-content-padding);
    overscroll-behavior: contain;
}

/* 模态框关闭按钮样式 */
.modal .close-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal) var(--ease-out);
    font-weight: var(--font-weight-normal);
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
}

.modal .close-button:hover {
    transform: scale(1.1);
    background: var(--color-gray-200);
    color: var(--color-text-primary);
}

.modal .close-button:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* 模态框底部操作栏 */
.modal-footer {
    flex-shrink: 0;
}

/* 响应式模态框样式 */
/* 平板端优化 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    :root {
        --modal-width: 85%;
  --modal-max-width: 56rem;
        --modal-padding: var(--space-3);
        --modal-header-padding: var(--space-5) var(--space-5) var(--space-3) var(--space-5);
        --modal-content-padding: 0 var(--space-5) var(--space-5) var(--space-5);
        --modal-section-padding: var(--space-2) var(--space-5);
    }
}

/* 移动端优化 (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    :root {
        --modal-width: 95%;
        --modal-max-width: 95vw;
        --modal-min-width: 320px;
        --modal-max-height: 90vh; /* 增加5vh：从85vh到90vh */
        --modal-padding: var(--space-3);
        --modal-header-padding: var(--space-4) var(--space-4) var(--space-3) var(--space-4);
        --modal-content-padding: 0 var(--space-4) var(--space-4) var(--space-4);
        --modal-section-padding: var(--space-2) var(--space-4);
    }
}

/* 小屏幕移动端优化 (≤480px) */
@media (max-width: 480px) {
    :root {
        --modal-width: 98%;
        --modal-max-width: 98vw;
        --modal-min-width: 280px;
        --modal-max-height: 93vh; /* 增加3vh：从90vh到93vh */
        --modal-padding: var(--space-2);
        --modal-header-padding: var(--space-3) var(--space-3) var(--space-2) var(--space-3);
        --modal-content-padding: 0 var(--space-3) var(--space-3) var(--space-3);
        --modal-section-padding: var(--space-2) var(--space-3);
    }
}

/* 极小屏幕优化 (≤360px) */
@media (max-width: 360px) {
    :root {
        --modal-width: 100%;
        --modal-max-width: 100vw;
        --modal-min-width: 280px;
        --modal-max-height: 95vh;
        --modal-padding: var(--space-1);
        --modal-header-padding: var(--space-2) var(--space-2) var(--space-1) var(--space-2);
        --modal-content-padding: 0 var(--space-2) var(--space-2) var(--space-2);
        --modal-section-padding: var(--space-1) var(--space-2);
    }

    .modal-container {
        border-radius: var(--border-radius-lg);
    }
}

/* 模态框内部元素的响应式优化 */
/* 编辑器区域 */
.modal-content textarea {
    padding: var(--space-5);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
}

/* 标签输入区域 */
.modal-content .tags-input-wrapper {
    padding: var(--space-2);
    margin-top: var(--space-2);
}

.modal-content .tags-input-wrapper input {
    padding: var(--space-2);
    font-size: var(--text-base);
}

/* 移动端编辑器和标签优化 */
@media (max-width: 768px) {
    .modal-content textarea {
        padding: var(--space-4);
        font-size: max(16px, var(--text-base)); /* 防止iOS自动缩放 */
    }

    .modal-content .tags-input-wrapper {
        padding: var(--space-2);
    }

    .modal-content .tags-input-wrapper input {
        padding: var(--space-2);
        font-size: max(16px, var(--text-base)); /* 防止iOS自动缩放 */
    }

    /* 移动端工具栏紧凑布局 */
    .editor-toolbar {
        padding: 0.5rem 0.5rem !important;
        gap: 0.125rem !important;
    }

    .editor-toolbar .toolbar-btn {
        padding: 0.375rem !important;
    }

    .editor-toolbar .toolbar-btn svg {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }

    .editor-toolbar [class*="pr-2"] {
        padding-right: 0.375rem !important;
    }

    .editor-toolbar [class*="border-r"] {
        margin-right: 0.125rem !important;
    }
}

@media (max-width: 480px) {
    .editor-toolbar {
        padding: 0.375rem 0.375rem !important;
        gap: 0 !important;
    }

    .editor-toolbar .toolbar-btn {
        padding: 0.25rem !important;
    }

    .editor-toolbar .toolbar-btn svg {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }

    .editor-toolbar [class*="pr-2"] {
        padding-right: 0.25rem !important;
    }
}

@media (max-width: 480px) {
    .modal-content textarea {
        padding: var(--space-3);
    }

    .modal-content .tags-input-wrapper {
        padding: var(--space-1);
    }

    .modal-content .tags-input-wrapper input {
        padding: var(--space-1);
    }
}


/* 标签组件样式 - 使用设计令牌系统 */

/* 基础标签样式 */
.note-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tag-padding-x);
    height: var(--tag-height);
    font-size: var(--tag-font-size);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-tight);
    text-decoration: none;
    border-radius: var(--tag-border-radius);
    border: var(--border-width) solid transparent;
    transition: all var(--transition-normal) var(--ease-out);
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    /* 确保标签内容垂直居中 */
    min-width: 0;
    flex-shrink: 0;
}

/* 标签文本样式 */
.note-tag .tag-text {
    position: relative;
    z-index: 10;
}

/* 普通状态标签样式 */
.note-tag--normal {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-200);
    box-shadow: var(--shadow-sm);
}

/* 激活状态标签样式 */
.note-tag--active {
    background-color: var(--color-primary-600);
    color: var(--color-text-inverse);
    border-color: var(--color-primary-700);
    box-shadow: var(--shadow-primary);
    transform: scale(1.05);
}

/* 悬停状态标签样式 */
.note-tag--normal:hover {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
    border-color: var(--color-primary-300);
    transform: scale(1.05) translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 标签删除按钮样式 */
.note-tag .remove-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    margin-left: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-out);
    flex-shrink: 0;
}

.note-tag .remove-tag:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.note-tag .remove-tag:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 1px;
}

/* 激活状态标签的指示器（朱砂印章点 - 品牌记忆点的低剂量延展） */
.note-tag--active .tag-indicator {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-seal);
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 标签容器样式 */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: var(--tag-height);
}

/* 标签输入框样式 */
.tags-container input[type="text"],
#modalTagInput {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 100%;
    height: var(--tag-height);
    padding: 0 var(--space-3);
    font-size: var(--tag-font-size);
    font-family: var(--font-family-sans);
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--tag-border-radius);
    background: var(--color-background);
    color: var(--color-text-primary);
    transition: all var(--transition-normal) var(--ease-out);
    box-sizing: border-box;
}

.tags-container input[type="text"]:focus,
#modalTagInput:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 模态框中的标签输入区域样式 */
.tags-input-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--color-background-secondary);
    transition: all var(--transition-normal) var(--ease-out);
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
}

.tags-input-wrapper:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
    outline: none;
    background: var(--color-background);
}

/* 模态框标签容器样式 */
#modalTagsContainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

/* 流体布局优化 - 使用相对单位和clamp()函数替代媒体查询 */

/* 标签容器间隙 - 使用相对单位 */
.tags-container {
    gap: clamp(0.25rem, 1vw, 0.5rem);
}

/* 标签输入框流体宽度 */
.tags-container input[type="text"],
#modalTagInput {
    min-width: clamp(4rem, 20vw, 7.5rem);
    font-size: clamp(0.75rem, 3vw, 0.875rem);
}

/* 标签输入包装器流体内边距 */
.tags-input-wrapper {
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    gap: clamp(0.25rem, 0.75vw, 0.5rem);
}

/* 模态框标签容器间隙 */
#modalTagsContainer {
    gap: clamp(0.25rem, 1vw, 0.5rem);
}

/* 标签组件命名空间样式流体内边距 */
.tags-component .tags-input-wrapper {
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    gap: clamp(0.25rem, 0.75vw, 0.5rem);
}

/* 标签容器统一样式间隙 */
#tagsContainer,
#editTagsContainer {
    gap: clamp(0.25rem, 1vw, 0.5rem);
}

/* 确保组件布局稳定性 */
.note-tag .remove-tag,
#modalAddTagBtn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 模态框标签容器 */
#modalTagsContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--tag-height);
}

/* 标签组件命名空间样式 */
.tags-component .tags-input-wrapper {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--color-background-secondary);
    transition: all var(--transition-normal) var(--ease-out);
    box-shadow: var(--shadow-sm);
}

.tags-component .tags-input-wrapper:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
    outline: none;
    background: var(--color-background);
}

/* 标签反馈样式 */
.tag-feedback {
    position: absolute;
    bottom: calc(-1 * var(--space-6));
    left: 0;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-md);
    z-index: var(--z-tooltip);
    transition: all var(--transition-normal) var(--ease-out);
    font-weight: var(--font-weight-medium);
}

.tag-feedback--success {
    background: var(--color-success-50);
    color: var(--color-success-700);
    border: var(--border-width) solid var(--color-success-200);
}

.tag-feedback--warning {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border: var(--border-width) solid var(--color-warning-200);
}

.tag-feedback--error {
    background: var(--color-error-50);
    color: var(--color-error-700);
    border: var(--border-width) solid var(--color-error-100);
}

.tag-feedback--info {
    background: var(--color-info-50);
    color: var(--color-info-700);
    border: var(--border-width) solid var(--color-info-200);
}

/* 标签容器统一样式 */
#tagsContainer,
#editTagsContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--tag-height);
}

/* 焦点和可访问性优化 */
.note-tag:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    z-index: 1;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .note-tag {
        min-height: 44px; /* 确保触摸目标足够大 */
    }
    
    .note-tag .remove-tag {
        min-width: 44px;
        min-height: 44px;
    }
}


/* Markdown内容样式（颜色均走 design-tokens 的 --md-* 令牌，暗色自动适配） */

/* 标题样式 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin: 16px 0 8px 0;
    font-weight: 600;
    font-family: var(--font-family-mono);
    color: var(--md-heading-color);
}

.markdown-content h1 { font-size: 1.5em; }
.markdown-content h2 { font-size: 1.3em; }
.markdown-content h3 { font-size: 1.1em; }

/* 段落样式（衬线正文行高稍宽松，提升阅读舒适度） */
.markdown-content p {
    margin: 8px 0;
    line-height: 1.65;
}

/* 粗体样式 */
.markdown-content strong {
    font-weight: var(--font-weight-bold);
    color: var(--md-strong-color);
}

/* 斜体样式 */
.markdown-content em {
    font-style: italic;
}

/* 行内代码样式 */
.markdown-content code {
    background: var(--md-code-bg);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: var(--md-code-color);
}

/* 代码块样式 */
.markdown-content pre {
    background: var(--md-pre-bg);
    padding: 12px;
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid var(--md-pre-border);
    /* 优化滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* 代码块滚动条样式 */
.markdown-content pre::-webkit-scrollbar {
    height: 4px; /* 减小滚动条高度 */
}

.markdown-content pre::-webkit-scrollbar-track {
    background: transparent; /* 透明轨道 */
    border-radius: 2px;
}

.markdown-content pre::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5); /* 灰色滑块，半透明 */
    border-radius: 2px; /* 圆角 */
}

.markdown-content pre::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7); /* 悬停时颜色加深 */
}

.markdown-content pre code {
    background: none;
    padding: 0;
    color: var(--md-pre-code-color);
}

/* 列表样式 */
.markdown-content ul,
.markdown-content ol {
    margin: 8px 0;
    padding-left: var(--space-4); /* 16px (1rem) 桌面端与移动端统一 */
}

.markdown-content ul {
    list-style-type: disc;
}

/* 有序列表：正文为等宽字体时数字约 0.6em/位（"99." ≈ 1.8em），
   编号标记以列表内容边缘为锚点向左伸展，16px 内边距放不下会导致编号
   左端超出段落对齐线；改用 2em 随字号缩放，容纳两位编号（"99." 级别） */
.markdown-content ol {
    list-style-type: decimal;
    padding-left: 2em;
}

.markdown-content li {
    margin: 4px 0;
}

/* 待办事项列表样式（pymdownx.tasklist） */
/* 使用 :has() 精准定位包含复选框的列表项，不依赖特定类名 */
.markdown-content li:has(> input[type="checkbox"]) {
    list-style: none;          /* 去掉圆点，让复选框成为列表标记 */
    margin-left: calc(-1 * var(--space-4));  /* 抵消 ul 的左内边距，与段落左对齐 */
}

/* ol 待办列表（如 "1. [ ]"）的偏移需与 ol 的 2em 左内边距保持一致 */
.markdown-content ol li:has(> input[type="checkbox"]) {
    margin-left: -2em;
}

.markdown-content li:has(> input[type="checkbox"]) input[type="checkbox"] {
    margin: 0 8px 0 0;
    vertical-align: middle;
    transform: translateY(-1px);
    cursor: default;           /* 只读模式，不显示手型 */
}

/* 链接样式 */
.markdown-content a {
    color: var(--md-link-color);
    text-decoration: underline;
}

.markdown-content a:hover {
    color: var(--md-link-hover-color);
}

/* 引用块样式 */
.markdown-content blockquote {
    border-left: 4px solid var(--md-blockquote-border);
    padding-left: 16px;
    margin: 12px 0;
    color: var(--md-blockquote-color);
}

/* 表格样式 */
.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--md-table-border);
    padding: 8px 12px;
    text-align: left;
}

.markdown-content th {
    background: var(--md-table-header-bg);
    font-weight: 600;
}

/* 悬浮按钮和菜单组件样式 - 使用设计令牌系统 */

/* 悬浮按钮基础样式 */
.floating-action-button {
    position: fixed;
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: var(--border-radius-full);
    border: none;
    box-shadow: var(--fab-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fab-transition) var(--ease-out);
    z-index: var(--fab-z-index);
    color: var(--color-text-inverse);
}

.floating-action-button:hover {
    box-shadow: var(--fab-shadow-hover);
    transform: translateY(-2px);
}

.floating-action-button:active {
    transform: translateY(0);
}

/* 悬浮按钮位置 */
.floating-action-button--bottom-right {
    bottom: var(--fab-bottom);
    right: var(--fab-side);
}

.floating-action-button--bottom-right-upper {
    bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--space-4));
    right: var(--fab-side);
}

/* 悬浮按钮主题颜色 */
.floating-action-button--primary {
    background-color: var(--color-primary-600);
}

.floating-action-button--primary:hover {
    background-color: var(--color-primary-700);
}

.floating-action-button--success {
    background-color: var(--color-emerald-600);
}

.floating-action-button--success:hover {
    background-color: var(--color-emerald-700);
}

/* 悬浮按钮动画 */
.floating-action-button--animate-in {
    animation: fabSlideIn 0.3s var(--ease-out) forwards;
}

@keyframes fabSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 三点菜单按钮样式 */
.menu-button {
    color: var(--color-gray-500);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-normal) var(--ease-out);
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-button:hover {
    color: var(--color-gray-700);
    background: var(--color-gray-100);
}

.menu-button:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* 下拉菜单样式 */
.menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-1);
    width: 128px;
    background: var(--color-background);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    border: var(--border-width) solid var(--color-gray-200);
    padding: var(--space-2) 0;
    z-index: var(--z-dropdown);
    animation: fadeInDown 0.2s var(--ease-out);
}

/* 下拉菜单项样式 */
.menu-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.menu-dropdown button:hover {
    background: var(--color-gray-100);
}

.menu-dropdown button.delete-post {
    color: var(--color-error-600);
}

.menu-dropdown button.delete-post:hover {
    background: var(--color-error-50);
}

/* 显示/隐藏动画 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 隐藏状态 */
.menu-dropdown.hidden {
    display: none;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .menu-dropdown {
        width: 120px;
        margin-top: var(--space-1);
        padding: var(--space-1) 0;
    }
    
    .menu-dropdown button {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
}

/**
 * 加密内容样式
 * Encrypted content styles
 */

/* 加密块容器 */
.encrypted-block {
    display: inline-flex;
    align-items: center;
    border: 1px dashed var(--color-primary-500);
    border-radius: var(--border-radius-sm);
    padding: 0 8px;
    margin: 0 4px;
    background: rgba(99, 102, 241, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-primary-600);
}

/* 锁定状态的加密块 */
.encrypted-block.locked:hover {
    background: rgba(99, 102, 241, 0.1);
    border-style: solid;
    transform: translateY(-1px);
}

.encrypted-block.locked:active {
    transform: translateY(0);
}

/* 隐藏的加密内容 */
.encrypted-content {
    display: none;
}

/* 解密后的内容块 */
.decrypted-block {
    margin: 20px 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: #ffffff;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.decrypted-block pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
}

/* 解密块中的代码块样式 */
.decrypted-block pre code {
    background: transparent !important;
}

/* 解密块顶部工具栏（重新锁定入口） */
.decrypted-block-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 6px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(99, 102, 241, 0.04);
}

.decrypted-block-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-primary-600);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    padding: 2px 8px;
    background: transparent;
    transition: all 0.2s ease;
}

.decrypted-block-lock-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--color-primary-500);
}

.decrypted-block-lock-btn:active {
    transform: scale(0.95);
}

/* 加密按钮样式 */
#encryptBtn {
    position: relative;
    transition: all 0.2s ease;
}

#encryptBtn:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--color-primary-500) !important;
}

#encryptBtn:active {
    transform: scale(0.95);
}

/* 加载动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

/* 错误状态 */
.encrypted-block.error {
    border-color: #ef4444;
    background: #fef2f2;
    color: #dc2626;
}

/* 成功状态 */
.encrypted-block.success {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #16a34a;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .encrypted-block {
        background: rgba(99, 102, 241, 0.1);
        border-color: #60a5fa;
        color: #93c5fd;
    }
    
    .encrypted-block.locked:hover {
        background: rgba(99, 102, 241, 0.2);
        border-color: var(--color-primary-500);
    }
    
    .decrypted-block {
        background: #1f2937;
        border-color: #374151;
    }
    
    .decrypted-block-toolbar {
        border-bottom-color: #374151;
        background: rgba(99, 102, 241, 0.08);
    }
    
    .decrypted-block pre {
        background: #111827 !important;
    }
}

/* 动画优化 */
@media (prefers-reduced-motion: reduce) {
    .encrypted-block,
    .encrypted-block.locked:hover {
        transition: none;
        transform: none;
    }
    
    .decrypted-block {
        animation: none;
    }
}

/* 无障碍支持 */
.encrypted-block:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* 工具提示 */
.encrypted-block[title] {
    position: relative;
}

.encrypted-block[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #374151;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: var(--border-radius-md);
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 8px;
    opacity: 0;
    animation: fadeIn 0.2s ease-out forwards;
}

/* 密码输入模态框样式 */
#passwordModal .bg-white,
#decryptModal .bg-white {
    max-width: 28rem;
}

#passwordModal input,
#decryptModal input {
    transition: all 0.2s ease;
}

#passwordModal input:focus,
#decryptModal input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#passwordModal label,
#decryptModal label {
    font-weight: 500;
}

#passwordModal label .required,
#decryptModal label .required {
    color: #ef4444;
}

#passwordModal .text-xs,
#decryptModal .text-xs {
    line-height: 1.4;
}


/* 暗色模式 - 配合系统主题自动切换（Tailwind dark: 变体为主） */
/* 本文件只保留工具类无法表达的覆盖：自定义组件内部样式、原生控件、滚动条 */

@media (prefers-color-scheme: dark) {
    /* ========== 页面背景 ========== */
    body {
        background-color: #0f172a !important;
        /* 暗色氛围层：覆盖 brand.css 的浅色渐晕 */
        background-image:
            radial-gradient(ellipse 80% 50% at 50% -10%, rgba(129, 140, 248, 0.06), transparent),
            radial-gradient(ellipse 60% 40% at 100% 100%, rgba(226, 96, 79, 0.04), transparent) !important;
    }

    /* ========== 原生下拉选项（工具类无法覆盖） ========== */
    select option {
        background-color: #1e293b;
        color: #e2e8f0;
    }

    /* ========== 复选框强调色 ========== */
    input[type="checkbox"] {
        accent-color: #8b5cf6;
    }

    /* ========== 深色滚动条 ========== */
    html {
        scrollbar-color: #475569 #0f172a;
    }

    ::-webkit-scrollbar-track {
        background: #0f172a !important;
    }
}



/* 引入工具类样式 */
/* 工具类样式 */

/* 高亮搜索结果 */
.highlight {
    background: rgba(255, 193, 7, 0.35);
    padding: 2px 4px;
    border-radius: var(--border-radius-sm);
    border-bottom: 2px solid rgba(255, 152, 0, 0.6);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* 加载动画 */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}


/* 标签输入框边框移除 */
#modalTagInput {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}