/* ============================================================
   全站浅色（白底）配色 —— 在 vod.css 之后加载，只覆盖变量和少数
   写死的深色，不改 vod.css 本身。要换回深色：把 layout.blade.php
   里 light.css 那一行删掉即可。
   ============================================================ */
:root {
    --bg: #ffffff;
    --bg2: #f5f7fa;
    --card: #ffffff;
    --card-hover: #f2f5f9;
    --line: #e4e8ef;
    --text: #171d27;
    --muted: #6c7787;
    --shadow: 0 6px 18px rgba(20, 30, 45, .08);

    /* 海报比例统一 2:3（跟参考站一致），宽度由 6 列网格自动算 */
}

body { background: #fff; color: var(--text); }
a:hover { color: var(--accent); }

/* 顶栏 */
header.site { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); }
header.site .logo { color: var(--text); }
nav.main a { color: #2a3441; }
nav.main a:hover { color: var(--accent); }
.search input { background: #f2f5f9; border-color: var(--line); color: var(--text); }
.search button { border-left-color: var(--line); }
.search button:hover { background: #eaeff6; color: var(--text); }

/* 文字块 */
.desc, .comment-item-body, .member-mail-body { color: #4a5462; }

/* 悬停时原本是白字的，浅色下改成主题色 */
.eps a:hover,
.lines a:hover,
.source-item a:hover { color: var(--accent); }

/* 幻灯片占位底色 */
.slide img { background: #e9edf3; }

/* 提示条 */
.flash.is-ok { background: #eaf7ef; border-color: #a5dcbc; color: #14683c; }
.flash.is-err { background: #fdecec; border-color: #f0b8b8; color: #a02020; }

/* 回到顶部 */
.site-gotop { background: #fff; border-color: var(--line); color: #39424f; }

/* ============================================================
   海报：所有页面（首页板块 / 最新 / 列表 / 搜索 / 专题 / 演员 /
   角色 / 会员收藏 / 详情页猜你喜欢）都用同一尺寸
   ============================================================ */
.grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 1280px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vod-card { min-width: 0; }
.vod-card-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    background: linear-gradient(160deg, #eef1f6 0%, #e6ebf2 100%);
}
.vod-card-meta { width: 100%; }
.vod-card-empty { color: #9aa4b2; }

/* 鼠标移到海报上：去掉播放按钮和变暗的遮罩，只保留上浮抖动 */
.vod-card-play { display: none !important; }
.vod-card:hover .vod-card-cover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(20, 30, 45, .12);
}

/* ============================================================
   登录 / 注册：vod.css 里输入框和左侧栏写死了深色，
   浅色主题下改成白底浅灰，和全站一致
   ============================================================ */
.auth-shell { box-shadow: 0 14px 40px rgba(20, 30, 45, .10); }
.auth-card { background: #fff; }
.auth-field input,
.auth-sms-row input,
.auth-captcha-row input {
    background: #f4f6fa;
    border-color: var(--line);
    color: var(--text);
}
.auth-field input:focus,
.auth-sms-row input:focus,
.auth-captcha-row input:focus {
    background: #fff;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.auth-field input::placeholder { color: #9aa4b2; }

.auth-aside {
    background:
        radial-gradient(500px 280px at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
        linear-gradient(165deg, #f3f6fb 0%, #eaf0f8 55%, #e6ecf5 100%);
    color: var(--text);
}
.auth-aside h2 { color: var(--text); }
.auth-aside .muted { color: var(--muted); }

.auth-alert { background: #fdecec; border-color: #f0b8b8; color: #a02020; }
.auth-alert.is-ok { background: #eaf7ef; border-color: #a5dcbc; color: #14683c; }

/* 注册页的算术验证码：图片 + 输入框并排 */
.auth-captcha-row { display: flex; gap: 10px; align-items: stretch; }
.auth-captcha-row input { flex: 1; min-width: 0; }
.auth-captcha-img {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.auth-captcha-img:hover { border-color: var(--accent); }
.auth-captcha-img img { display: block; width: 160px; height: 48px; border-radius: 9px; }

@media (max-width: 720px) {
    /* 平板 / 大屏手机:也收成一排三个,否则卡片太窄放不下评分角标(见下方 480 的说明) */
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
}
@media (max-width: 480px) {
    /* 手机端一排三个。原来是四个:vod.css 在 860/720/480 断点写了 3 列和 2 列,
       但本文件最后加载、选择器权重一样,把那些规则盖掉了,结果手机上还是 4 列
       (390 px 屏上海报只有 82 px 宽,评分角标挤成三行盖住大半张海报)。 */
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 10px;
    }
    .vod-card-meta { padding: 6px 1px 0; }
    .vod-card-meta h3 { font-size: 12px; line-height: 1.3; }
    .vod-card-meta .muted { font-size: 11px; margin-top: 3px; }
    .vod-card-badge { font-size: 10px; padding: 1px 5px; }
}