/* app.css */
/* ============================================================
 * MovieCMS V4 - Design System Entry
 * 统一入口：按 base → layout → components → utilities 加载
 * 所有页面只需引入这一个文件
 * 
 * CSS 架构：
 *   base/        设计令牌 + 重置 + 排版（不产生视觉样式）
 *   layout/      布局系统 + 容器 + 网格 + 头部 + 底部 + 侧栏
 *   components/  可复用组件：按钮/卡片/标签/徽章/面包屑等
 *   utilities/   工具类：间距/显示/弹性/响应式断点
 * 
 * 禁止规则：
 *   ✗ 每个页面单独写CSS文件
 *   ✗ 硬编码颜色值（必须用变量）
 *   ✗ 复制粘贴CSS
 *   ✓ 所有页面共用组件
 * ============================================================ */

/* ====== 第一层：Base（基础） ====== */
/* base/variables.css */
/* ============================================================
 * MovieCMS V4 - Design Tokens
 * 统一设计令牌：颜色 / 字体 / 间距 / 圆角 / 阴影 / 动画
 * 所有页面组件必须引用这些变量，禁止硬编码颜色值
 * ============================================================ */

:root {
    /* ====== 主色调 ====== */
    --color-primary:       #e94560;
    --color-primary-hover: #d63851;
    --color-primary-light: #fce4ec;
    --color-primary-dark:  #b71c3c;

    /* ====== 辅助色 ====== */
    --color-secondary:       #0f3460;
    --color-secondary-hover: #16213e;
    --color-secondary-light: #e8eaf6;

    /* ====== 功能色 ====== */
    --color-success:       #10b981;
    --color-success-light: #d1fae5;
    --color-warning:       #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger:        #ef4444;
    --color-danger-light:  #fee2e2;
    --color-info:          #3b82f6;
    --color-info-light:    #dbeafe;

    /* ====== 中性色 ====== */
    --color-bg:            #f8f9fb;
    --color-bg-alt:        #f1f3f5;
    --color-surface:       #ffffff;
    --color-surface-hover: #f8f9fb;
    --color-border:        #e5e7eb;
    --color-border-light:  #f0f0f0;
    --color-divider:       #eaeaea;

    /* ====== 文字色 ====== */
    --color-text:           #1a1a2e;
    --color-text-secondary: #6b7280;
    --color-text-tertiary:  #9ca3af;
    --color-text-inverse:   #ffffff;
    --color-text-link:      #0f3460;

    /* ====== 暗色模式覆盖（通过 data-theme="dark" 激活） ====== */
    /* 基础暗色变量在 responsive.css 的 @media 中定义 */

    /* ====== 字体系统 ====== */
    --font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-family-mono:   'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

    /* 字号 */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.8125rem; /* 13px */
    --text-base: 0.875rem;  /* 14px */  
    --text-md:   0.9375rem; /* 15px */
    --text-lg:   1.0625rem; /* 17px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  2rem;      /* 32px */
    --text-4xl:  2.5rem;    /* 40px */

    /* 行高 */
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    /* 字重 */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* 标题字号 */
    --h1-size: 2rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem;
    --h4-size: 1rem;
    --h5-size: 0.875rem;
    --h6-size: 0.8125rem;

    /* ====== 间距系统 (4px基准) ====== */
    --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 */

    /* ====== 圆角 ====== */
    --radius-none: 0;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ====== 阴影 ====== */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-lg:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-xl:   0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-2xl:  0 20px 25px rgba(0, 0, 0, 0.12);
    --shadow-card: var(--shadow-md);
    --shadow-popup: var(--shadow-xl);
    --shadow-dropdown: var(--shadow-lg);

    /* ====== 动画 ====== */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;
    --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);

    /* ====== 布局 ====== */
    --container-max: 1280px;
    --container-padding: var(--space-4);
    --header-height: 60px;
    --sidebar-width: 220px;

    /* ====== Z-Index 层级 ====== */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-modal:    400;
    --z-toast:    500;
}


/* base/reset.css */
/* ============================================================
 * MovieCMS V4 - CSS Reset
 * 基于 modern-normalize，统一浏览器默认样式
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

img[loading="lazy"] { background: var(--color-bg-alt); }

a {
    color: inherit;
    text-decoration: none;
}

ul, ol { list-style: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    border: none;
    background: none;
    outline: none;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

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

hr {
    border: none;
    border-top: 1px solid var(--color-divider);
    margin: var(--space-4) 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p { margin-bottom: var(--space-3); }

small { font-size: var(--text-sm); color: var(--color-text-secondary); }

strong, b { font-weight: var(--font-semibold); }

/* 隐藏但可被屏幕阅读器访问 */
.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;
}


/* base/typography.css */
/* ============================================================
 * MovieCMS V4 - Typography
 * 统一字体排版：标题 / 正文 / 链接 / 列表
 * ============================================================ */

/* 文章/详情页正文 */
.prose {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}
.prose p { margin-bottom: var(--space-4); }
.prose a { color: var(--color-text-link); text-decoration: underline; }
.prose a:hover { color: var(--color-primary); }
.prose blockquote {
    border-left: 3px solid var(--color-primary);
    padding: var(--space-2) var(--space-4);
    margin: var(--space-4) 0;
    background: var(--color-bg-alt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 截断 */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 对齐 */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* 文字色 */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-muted     { color: var(--color-text-tertiary); }

/* 字号工具 */
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }

/* 字重 */
.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

/* 链接 */
.link {
    color: var(--color-text-link);
    transition: color var(--transition-fast);
}
.link:hover { color: var(--color-primary); }



/* ====== 第二层：Layout（布局） ====== */
/* layout/container.css */
/* ============================================================
 * MovieCMS V4 - Container
 * 统一容器：控制内容区最大宽度和水平居中
 * ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container-sm { max-width: 960px; }
.container-lg { max-width: 1440px; }
.container-full { max-width: none; }

/* 窄内容区（详情页正文等） */
.container-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}


/* layout/grid.css */
/* ============================================================
 * MovieCMS V4 - Grid System
 * 12列响应式网格，支持自动填充
 * ============================================================ */

.grid {
    display: grid;
    gap: var(--space-4);
}

/* 固定列数 */
.grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.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); }
.grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6  { grid-template-columns: repeat(6, 1fr); }

/* 自适应填充（卡片列表推荐） */
.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.grid-auto-fill-sm {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.grid-auto-fill-lg {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* 首页主体布局：主内容 + 侧边栏 */
.grid-main-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-6);
    align-items: start;
}

/* 两栏布局（详情页） */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

/* 超小网格（声优/演员紧凑列表） */
.grid-auto-fill-xs {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* 间距变体 */
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }


/* layout/header.css */
/* ============================================================
 * MovieCMS V4 - Header
 * 统一头部：Logo / 导航 / 搜索 / 暗色模式切换 / 移动菜单
 * ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: var(--header-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Logo */
.header-logo {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.header-logo:hover { opacity: 0.85; }

/* 导航 */
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.header-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.header-nav a:hover,
.header-nav a.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* 搜索 */
.header-search {
    flex: 1;
    max-width: 400px;
    margin-left: auto;
    position: relative;
}

.header-search input {
    width: 100%;
    height: 38px;
    padding: 0 var(--space-10) 0 var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}
.header-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.header-search button {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.header-search button:hover { color: var(--color-primary); }

/* 暗色模式切换 */
.theme-toggle {
    width: 38px; height: 38px;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--color-bg); color: var(--color-primary); }

/* 移动菜单按钮 */
.mobile-menu-btn {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-text);
    flex-shrink: 0;
}
.mobile-menu-btn span {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* 移动端导航面板 */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    bottom: 0;
    background: var(--color-surface);
    padding: var(--space-4);
    overflow-y: auto;
    z-index: var(--z-fixed);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
}
.mobile-nav a:hover { background: var(--color-primary-light); color: var(--color-primary); }


/* layout/footer.css */
/* ============================================================
 * MovieCMS V4 - Footer
 * 统一底部：友情链接 / 热门专题 / 版权 / SEO介绍
 * ============================================================ */

.site-footer {
    margin-top: var(--space-16);
    padding: var(--space-12) 0 var(--space-6);
    background: var(--color-secondary);
    color: rgba(255, 255, 255, 0.7);
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-col h4 {
    color: #fff;
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
    font-weight: var(--font-semibold);
}

.footer-col a {
    display: block;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--color-primary); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom a { color: rgba(255, 255, 255, 0.4); }
.footer-bottom a:hover { color: var(--color-primary); }

/* SEO 描述 */
.footer-seo {
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.5);
    max-width: 800px;
}


/* layout/sidebar.css */
/* ============================================================
 * MovieCMS V4 - Sidebar
 * 侧边栏：推荐 / 标签云 / 排名
 * ============================================================ */

.sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

.sidebar-widget {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.sidebar-widget h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.sidebar-widget ul li a {
    display: block;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.sidebar-widget ul li a:hover { color: var(--color-primary); }
.sidebar-widget ul li a .count { float: right; color: var(--color-text-tertiary); font-size: var(--text-xs); }

/* 标签云 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.tag-cloud a {
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.tag-cloud a:hover {
    background: var(--color-primary);
    color: #fff;
}

/* 排行 */
.ranking-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}
.ranking-list li:last-child { border-bottom: none; }
.ranking-num {
    width: 22px; height: 22px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    flex-shrink: 0;
}
.ranking-list li:nth-child(1) .ranking-num,
.ranking-list li:nth-child(2) .ranking-num,
.ranking-list li:nth-child(3) .ranking-num {
    background: var(--color-primary);
    color: #fff;
}



/* ====== 第三层：Components（组件） ====== */
/* components/button.css */
/* ============================================================
 * MovieCMS V4 - Button
 * 统一按钮：Primary / Secondary / Danger / Ghost / Outline
 * ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

/* 尺寸 */
.btn-sm { height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { height: 46px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-block { width: 100%; }

/* 主按钮 */
.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.3);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}

/* 次要按钮 */
.btn-secondary {
    background: var(--color-secondary);
    color: #fff;
}
.btn-secondary:hover {
    background: var(--color-secondary-hover);
    transform: translateY(-1px);
}

/* 危险按钮 */
.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover { opacity: 0.9; }

/* 幽灵按钮 */
.btn-ghost {
    background: transparent;
    color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-bg-alt); }

/* 轮廓按钮 */
.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* 图标按钮 */
.btn-icon {
    width: 38px;
    padding: 0;
}
.btn-icon.btn-sm { width: 30px; }
.btn-icon.btn-lg { width: 46px; }


/* components/card.css */
/* ============================================================
 * MovieCMS V4 - Unified Card System
 * 统一卡片：Movie / Actor / Topic / News 共用同一套设计
 * 禁止每种实体单独写卡片样式
 * ============================================================ */

/* ---- 基础卡片（所有类型共用） ---- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
    position: relative;
}
.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

/* 卡片封面图 */
.card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-secondary);
}

.card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.card:hover .card-cover img {
    transform: scale(1.08);
}

/* 封面占位（无图片时的渐变背景） */
.card-cover-placeholder {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
}

/* 封面遮罩（hover时显示） */
.card-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    display: flex;
    align-items: flex-end;
    padding: var(--space-3);
}
.card:hover .card-cover-overlay { opacity: 1; }
.card-cover-overlay .btn { font-size: var(--text-xs); height: 28px; padding: 0 var(--space-3); }

/* 角标（评分/年份/NEW/HOT） */
.card-cover-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}

/* 卡片信息区 */
.card-body {
    padding: var(--space-3);
}

.card-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.card-meta .rating {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}
.card-meta .rating-high {
    color: var(--color-warning);
}

/* ---- 电影卡片 ---- */
.movie-card .card-cover { aspect-ratio: 3 / 4; }

/* ---- 演员卡片（圆形头像） ---- */
.actor-card .card-cover {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: 80%;
    margin: var(--space-3) auto 0;
}
.actor-card .card-body { text-align: center; }

/* ---- 专题/合集卡片（宽图） ---- */
.topic-card .card-cover { aspect-ratio: 16 / 9; }

/* ---- 新闻卡片（横版） ---- */
.news-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    flex-direction: row;
}
.news-card .card-cover {
    aspect-ratio: 16 / 10;
    width: 200px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.news-card .card-body {
    flex: 1;
    padding: 0;
}
.news-card .card-title {
    font-size: var(--text-base);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-card .card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 小卡片（声优/演员列表等紧凑型） ---- */
.card-sm .card-title { font-size: var(--text-xs); }
.card-sm .card-subtitle { font-size: 11px; color: var(--color-text-secondary); }

/* ---- 卡片作为整块链接（文章/新闻列表） ---- */
.card-link {
    display: block;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.card-link-title {
    font-size: var(--text-base);
    margin: 0 0 var(--space-1);
}
.card-link-meta {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

/* ---- 紧凑版新闻链接卡片 ---- */
.card-link-sm {
    display: block;
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}
.card-link-sm .link-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.card-link-sm .link-date {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    float: right;
}

/* ---- 快速入口卡片（首页） ---- */
.quick-entry {
    padding: var(--space-6);
    text-align: center;
}
.quick-entry .quick-entry-icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

/* ---- 剧集项 ---- */
.episode-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}

/* ---- 详情页实体卡片（大卡片） ---- */
.entity-card {
    display: flex;
    gap: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.entity-card-cover {
    width: 260px;
    flex-shrink: 0;
}
.entity-card-cover img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.entity-card-body {
    flex: 1;
    padding: var(--space-6);
}
.entity-card-body h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}
.entity-card-body .meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}


/* components/badge.css */
/* ============================================================
 * MovieCMS V4 - Tag & Badge
 * 标签云 / 标记徽章
 * ============================================================ */

/* 标签 */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.tag-primary {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 徽章 */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.badge-primary   { background: var(--color-primary-light); color: var(--color-primary); }
.badge-success   { background: var(--color-success-light); color: var(--color-success); }
.badge-warning   { background: var(--color-warning-light); color: var(--color-warning); }
.badge-danger    { background: var(--color-danger-light);  color: var(--color-danger); }
.badge-info      { background: var(--color-info-light);    color: var(--color-info); }
.badge-new       { background: var(--color-primary);       color: #fff; }
.badge-hot       { background: var(--color-danger);        color: #fff; }
.badge-outline   { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }


/* components/breadcrumb.css */
/* ============================================================
 * MovieCMS V4 - Breadcrumb
 * 面包屑导航：层级清晰 / Schema标记
 * ============================================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    color: var(--color-text-tertiary);
    margin-left: var(--space-2);
}

.breadcrumb-item a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item span {
    color: var(--color-text);
    font-weight: var(--font-medium);
}


/* components/pagination.css */
/* ============================================================
 * MovieCMS V4 - Pagination
 * 分页器：上一页 / 页码 / 下一页
 * ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin: var(--space-8) 0;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.pagination a {
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination .active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination .ellipsis {
    border: none;
    color: var(--color-text-tertiary);
}


/* components/search.css */
/* ============================================================
 * MovieCMS V4 - Search
 * 搜索页：搜索框 + 搜索结果 + 建议 + 热词
 * ============================================================ */

.search-section {
    max-width: 800px;
    margin: var(--space-8) auto;
    padding: 0 var(--container-padding);
}

.search-box {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.search-box input {
    flex: 1;
    height: 48px;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
    transition: border-color var(--transition-fast);
}
.search-box input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.search-results-count {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.search-results-count strong {
    color: var(--color-primary);
}

/* 搜索建议 */
.search-suggests {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.search-suggests span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-right: var(--space-2);
}
.search-suggests a {
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.search-suggests a:hover {
    background: var(--color-primary);
    color: #fff;
}

/* 无结果 */
.search-empty {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-text-secondary);
}
.search-empty .icon { font-size: 3rem; margin-bottom: var(--space-4); }


/* components/hero.css */
/* ============================================================
 * MovieCMS V4 - Hero Section
 * 首页英雄区：渐变背景 + 标题 + 描述
 * ============================================================ */

.hero {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--color-secondary) 0%, #16213e 50%, var(--color-primary-dark) 100%);
    text-align: center;
    margin-bottom: var(--space-8);
}

.hero-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.hero h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: #fff;
    margin-bottom: var(--space-4);
    letter-spacing: -0.5px;
}

.hero p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}


/* components/section.css */
/* ============================================================
 * MovieCMS V4 - Section (通用区块)
 * 统一区块：标题 + 内容 + "更多"链接
 * ============================================================ */

.section {
    margin-bottom: var(--space-10);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    position: relative;
    padding-left: var(--space-3);
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.section-title a {
    color: inherit;
}
.section-title a:hover { color: var(--color-primary); }

.section-more {
    text-align: center;
    margin-top: var(--space-5);
}
.section-more a {
    display: inline-block;
    padding: var(--space-2) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.section-more a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* 详情页元信息栏（统一替代各页面内联 meta bar） */
.meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.meta-bar .rating-highlight {
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

/* 剧情简介/补充信息框 */
.synopsis-box {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

/* 文本链接列表 */
.text-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.text-links a {
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.text-links a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* components/faq.css */
/* ============================================================
 * MovieCMS V4 - FAQ
 * 问答区块：折叠式 / 列表式
 * ============================================================ */

.faq-section {
    margin-bottom: var(--space-10);
}

.faq-section h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    transition: box-shadow var(--transition-fast);
}
.faq-item:hover { box-shadow: var(--shadow-md); }

.faq-item h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.faq-item h3 a {
    color: var(--color-text);
    transition: color var(--transition-fast);
}
.faq-item h3 a:hover {
    color: var(--color-primary);
}
.faq-item h3::before {
    content: 'Q';
    width: 24px; height: 24px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.faq-item p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    padding-left: var(--space-8);
    margin-bottom: 0;
}

/* details/summary 折叠FAQ（替代内联style） */
.faq-details {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}
.faq-details summary {
    cursor: pointer;
    font-weight: var(--font-semibold);
}
.faq-details > p {
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

/* FAQ Schema JSON-LD 标记（不可见） */
.faq-schema { display: none; }


/* components/form.css */
/* ============================================================
 * MovieCMS V4 - Form
 * 统一表单：Input / Select / Textarea / Checkbox / Radio
 * ============================================================ */

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input { height: 38px; }
.form-select { height: 38px; cursor: pointer; }
.form-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: var(--leading-normal);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* 帮助文字 */
.form-help {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* 行内表单 */
.form-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}



/* ====== 第四层：Utilities（工具） ====== */
/* utilities/display.css */
/* ============================================================
 * MovieCMS V4 - Display & Visibility Utilities
 * ============================================================ */

.d-none         { display: none; }
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-grid         { display: grid; }

.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: var(--header-height); }

.w-full { width: 100%; }
.h-full { height: 100%; }


/* utilities/spacing.css */
/* ============================================================
 * MovieCMS V4 - Spacing Utilities
 * 基于4px基准的间距工具类
 * ============================================================ */

.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0  { padding: var(--space-0); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.float-left  { float: left; }
.float-right { float: right; }
.clearfix::after { content: ''; display: table; clear: both; }


/* utilities/responsive.css */
/* ============================================================
 * MovieCMS V4 - Responsive Design
 * Mobile First 设计：基础为移动端，PC端用 min-width 增强
 * ============================================================ */

/* ====== 手机 (< 576px) - 默认样式 ====== */

/* ====== 平板 (≥ 576px) ====== */
@media (min-width: 576px) {
    .container { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* ====== 小屏 (≥ 768px) ====== */
@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-6);
    }

    .grid-main-sidebar {
        grid-template-columns: 1fr 280px;
    }

    /* 显示导航 */
    .header-nav { display: flex; }

    /* 新闻卡片恢复横版 */
    .news-card { flex-direction: row; }
    .news-card .card-cover { width: 180px; }

    /* 详情页实体卡片 */
    .entity-card { flex-direction: row; }
}

/* ====== 中等 (≥ 1024px) ====== */
@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-8);
    }

    .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .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); }

    .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

    .header-search { max-width: 360px; }

    .entity-card-cover { width: 300px; }
}

/* ====== 大屏 (≥ 1280px) ====== */
@media (min-width: 1280px) {
    :root {
        --container-max: 1280px;
    }

    .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .grid-main-sidebar { grid-template-columns: 1fr 300px; }
}

/* ====== 超大屏 (≥ 1440px) ====== */
@media (min-width: 1440px) {
    :root { --container-max: 1320px; }
}

/* ====== 暗色模式 ====== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:            #0d1117;
        --color-bg-alt:        #161b22;
        --color-surface:       #1c2128;
        --color-surface-hover: #22272e;
        --color-border:        #30363d;
        --color-border-light:  #21262d;
        --color-divider:       #21262d;

        --color-text:           #e6edf3;
        --color-text-secondary: #8b949e;
        --color-text-tertiary:  #6e7681;
        --color-text-link:      #58a6ff;

        --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-lg:  0 4px 6px rgba(0, 0, 0, 0.5);
        --shadow-xl:  0 10px 15px rgba(0, 0, 0, 0.6);
        --shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.7);
    }

    .site-header {
        background: rgba(28, 33, 40, 0.85);
        backdrop-filter: blur(12px);
        border-bottom-color: var(--color-border);
    }

    .site-footer { background: #0d1117; }

    img { opacity: 0.9; }
    img:hover { opacity: 1; }
}

/* ====== 移动端适配 ====== */
@media (max-width: 767px) {
    :root {
        --header-height: 52px;
        --h1-size: 1.5rem;
        --h2-size: 1.25rem;
        --text-base: 0.8125rem;
    }

    .header-search { display: none; }
    .header-nav { display: none; }
    .mobile-menu-btn { display: flex; }

    .grid-auto-fill {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .grid-main-sidebar {
        grid-template-columns: 1fr;
    }
    .sidebar { display: none; }

    .hero { padding: var(--space-8) 0; }
    .hero h1 { font-size: var(--text-2xl); }
    .hero p { font-size: var(--text-sm); }

    .entity-card { flex-direction: column; }
    .entity-card-cover { width: 100%; }
    .entity-card-body { padding: var(--space-4); }

    .news-card { flex-direction: column; }
    .news-card .card-cover { width: 100%; aspect-ratio: 16 / 9; }

    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}