/* 
 * 沸点助手 V2.0 设计系统
 * 基于 UI-UX-PRO-MAX 资源库
 */

:root {
    /* === 颜色系统 === */
    /* 主色 - SaaS专业蓝 */
    --primary-50: #EFF6FF;
    --primary-100: #DBEAFE;
    --primary-200: #BFDBFE;
    --primary-300: #93C5FD;
    --primary-400: #60A5FA;
    --primary-500: #3B82F6;
    --primary-600: #2563EB;
    --primary-700: #1D4ED8;
    --primary-800: #1E40AF;
    --primary-900: #1E3A8A;
    
    /* 中性色 */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;
    
    /* 功能色 */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    
    /* === 字体系统 === */
    --font-heading: 'Poppins', -apple-system, sans-serif;
    --font-body: 'Open Sans', -apple-system, sans-serif;
    --font-mono: 'Fira Code', 'Monaco', monospace;
    
    /* 字体大小 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    /* === 间距系统 === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    
    /* === 圆角系统 === */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* === 阴影系统 === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* === 动画 === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === 层级刻度 ===
     *
     * 全站只有这一把尺子。**新加浮层一律从这里取值，不要再写字面数字** ——
     * 统一导航栏与 AI 悬浮按钮当初各自拍了 1000 和 9999 塞进各页面的内联
     * <style>，于是它们压在所有浮层上面：成品详情抽屉（z-index 100）打开后，
     * 导航栏那条 60px 的带子正好盖住关闭按钮，鼠标点不动，只有 Escape 能关
     * （task-48）。同一个坑还埋着图片查看器与跳浏览器引导。
     *
     * 分层的原则：**常驻外壳永远在浮层下面**。导航栏和悬浮按钮是页面的一部分，
     * 浮层出现时它们本来就该被盖住。
     */
    --z-chrome: 40;        /* 顶部导航、悬浮按钮这类常驻外壳 */
    --z-chrome-pop: 45;    /* 外壳自己展开的东西（移动端导航菜单） */
    --z-overlay: 1000;     /* 盖住整页的浮层：详情抽屉、刷片、遮罩 */
    --z-overlay-top: 1100; /* 浮层之上的浮层：版本选择、分享准备 */
    --z-lightbox: 1200;    /* 图片查看器、跳浏览器引导 */
    --z-toast: 1300;       /* 提示条，必须压过一切 */
}

/* === 统一导航栏的触控目标 ===
 *
 * 导航栏的样式在 10 个页面的内联 <style> 里各写一份（历史遗留），改不过来也
 * 不该改十遍。这里用「多一层选择器」的方式压过去：`.unified-navbar .nav-link`
 * 的特异度高于内联块里的 `.nav-link`，与先后顺序无关。
 *
 * 44×44 是 WCAG 2.5.5 / 苹果与安卓人机指南共同的下限。实测窄屏下这几个是
 * 41×43 和 36×36 —— 差的那几像素在手机上就是「点了没反应，再点一次」。
 */
.unified-navbar .nav-link,
.unified-navbar .nav-btn,
.unified-navbar .nav-menu-toggle,
.unified-navbar .nav-user {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
}
.unified-navbar .nav-btn {
    width: auto;
    height: auto;
    padding: 0 10px;
}

/* 窄屏下右侧那组动作会顶出视口（实测 412px 宽时整页横向溢出 43px，差的正好
 * 是它探出去的那一截）。收紧内边距、藏掉用户名，别让常驻外壳把页面撑破。 */
@media (max-width: 680px) {
    .unified-navbar .navbar-container {
        padding: 0 10px;
        gap: 6px;
    }
    .unified-navbar .navbar-actions { gap: 4px; flex: none; }
    .unified-navbar .user-name { display: none; }
    /* flex 子项默认 min-width:auto 不肯缩，于是品牌名把右侧那组顶出视口。
     * 让品牌让步并截断 —— 挤掉几个字，好过整页能横向拖动。 */
    .unified-navbar .navbar-brand {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
    }
}

/* === 全局重置 === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--gray-900);
    background: var(--gray-50);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
}

/* === 按钮组件 === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

/* === 卡片组件 === */
.card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* === 响应式工具 === */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container { padding: 0 var(--space-6); }
}

@media (min-width: 1024px) {
    .container { padding: 0 var(--space-8); }
}