/* =========================================================
   ROZ 前台「现代蓝白」全站统一观感层
   ---------------------------------------------------------
   v1 观感精修：字体 / 阴影 / 圆角 / hover / focus 光晕 / 滚动条
   v2 深度美化：光感层次 / 卡片描边 / 行间分隔 / 分页与页脚质感 /
                轻入场动效（fill:backwards，不锁死 hover transform）
   原则：不改布局语义、不用 backdrop-filter。
   回滚方式：清空本文件，并移除各页 <link css/site.css> 即可。
   豁免页：dashboard.html / dashboard-react.html（React 构建页）。
   ========================================================= */

/* ---- 基础字体与细节 ---- */
body {
    font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(0, 123, 255, 0.22); }

::placeholder { color: #aab7c8; opacity: 1; }

/* ---- 滚动条（webkit + firefox）---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #b6c8e4; border-radius: 6px; border: 2px solid #f1f4f9; }
::-webkit-scrollbar-thumb:hover { background: #94add4; }
::-webkit-scrollbar-track { background: transparent; }
html { scrollbar-color: #b6c8e4 #f1f4f9; }

/* ---- 输入框聚焦光晕（柔和蓝圈，不破坏布局）---- */
input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="number"], input[type="search"], textarea, select {
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.16);
}

/* =========================================================
   v1 观感精修
   ========================================================= */

/* ---- 顶栏：蓝渐变统一（门户幂等）---- */
.header { background: linear-gradient(135deg, #0056b3 0%, #007bff 100%); }

/* ---- 主导航胶囊 hover/active（门户幂等）---- */
.header-nav a {
    padding: 8px 16px;
    border-radius: 999px;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.header-nav a:hover,
.header-nav a.active {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* ---- 头部搜索按钮：蓝渐变圆钮 ---- */
.search-box button {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 86, 179, 0.35);
}
.search-box button:hover { box-shadow: 0 3px 10px rgba(0, 86, 179, 0.5); }

/* ---- 白卡片容器：统一 12px 大圆角 + 柔和双层蓝影 ----
   仅命中「命名即卡片容器」的类，避免触碰 .news-list/.card/.btn 等
   同名异义的重灾类。index 样板已同值，幂等。 */
.news-section,
.search-section,
.side-card,
.sidebar-card,
.topic-card,
.service-card,
.category-block,
.result-card,
.info-card,
.detail-card,
.movie-card,
.music-card,
.post-card {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(17, 40, 84, 0.05), 0 12px 28px -18px rgba(17, 40, 84, 0.22);
}

/* ---- 可悬停卡片：轻微上浮反馈（样板同款）---- */
.topic-card, .service-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.topic-card:hover,
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 8px rgba(17, 40, 84, 0.06), 0 20px 36px -20px rgba(17, 40, 84, 0.28);
}

/* ---- 行级 hover：统一淡蓝反馈 ---- */
.news-item:hover,
.news-list-item:hover,
.side-list-item:hover,
.post-item:hover,
.topic-row:hover {
    background: #f2f8ff;
}

/* ---- 分页按钮：圆角 + hover 描边 ---- */
.pagination .page-btn,
.page-btn {
    border-radius: 8px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pagination .page-btn:hover,
.page-btn:hover:not(.active) {
    border-color: #007bff;
    color: #007bff;
}

/* ---- 页脚上缘细高光，略增质感 ---- */
.footer { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* =========================================================
   v2 深度美化（蓝白基调）
   ========================================================= */

/* ---- 顶栏：多层渐变 + 右上柔光 / 左下暗角，增加立体层次 ---- */
.header {
    background:
        radial-gradient(1100px 320px at 88% -40%, rgba(255, 255, 255, 0.16), transparent 60%),
        radial-gradient(900px 260px at -5% 130%, rgba(0, 40, 90, 0.18), transparent 55%),
        linear-gradient(135deg, #0056b3 0%, #007bff 100%);
}

/* ---- 普通卡片 hover：淡蓝描边（inset 不产生位移）+ 投影加深 ---- */
.news-section:hover,
.search-section:hover,
.side-card:hover,
.sidebar-card:hover,
.result-card:hover,
.info-card:hover,
.detail-card:hover,
.movie-card:hover,
.music-card:hover,
.post-card:hover {
    box-shadow:
        0 1px 3px rgba(17, 40, 84, 0.06),
        0 16px 34px -18px rgba(17, 40, 84, 0.3),
        inset 0 0 0 1px rgba(0, 123, 255, 0.35);
}

/* ---- 卡内行分隔线统一为淡蓝灰（仅改颜色）---- */
.news-item,
.news-list-item,
.side-list-item,
.post-item,
.list-row,
.topic-row {
    border-bottom-color: #edf2f8;
}

/* ---- 表格行 hover 淡蓝反馈 ---- */
table tbody tr:hover { background: #eef5ff; }

/* ---- 分页当前页：蓝渐变白字 ---- */
.pagination .page-btn.active {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-color: #0056b3;
}

/* ---- 页脚：深藏蓝渐变 + 顶部细亮线 ---- */
.footer {
    background: linear-gradient(160deg, #17263c 0%, #1f3352 62%, #263a58 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- 区块标题字距微开、section 竖条标题统一字色 ---- */
.section-title { letter-spacing: 0.04em; }
.page-title h1,
.section-header h2 { letter-spacing: 0.02em; }

/* ---- 轻入场动效 ----
   仅首帧轻微下移+淡入，fill:backwards 结束即释放，
   不锁定 hover transform，无透明度残留闪烁。 */
.news-section,
.search-section,
.side-card,
.sidebar-card,
.topic-card,
.service-card,
.category-block,
.content-layout,
.section-block,
.page-title,
.detail-card {
    animation: rozUp .45s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes rozUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* 尊重用户的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .news-section, .search-section, .side-card, .sidebar-card,
    .topic-card, .service-card, .category-block, .content-layout,
    .section-block, .page-title, .detail-card {
        animation: none;
    }
}

/* =========================================================
   v3 skill 美学层：排版层级 / 氛围背景 / 交互记忆点
   原则：仍然零布局改动。氛围背景用 :has() 守卫——
   只命中门户页（含 .header），登录页与主题页（.topbar）不命中；
   老浏览器不支持 :has 时整条规则失效，安全回退原背景。
   ========================================================= */

/* ---- 门户页淡蓝氛围光（卡片间隙见光，白卡仍清晰）---- */
body:has(.header) {
    background-color: #eef2f9;
    background-image:
        radial-gradient(900px 520px at 88% -12%, rgba(0, 123, 255, 0.12), transparent 60%),
        radial-gradient(760px 480px at -8% 8%, rgba(0, 86, 179, 0.07), transparent 55%),
        radial-gradient(700px 500px at 55% 115%, rgba(0, 123, 255, 0.06), transparent 60%);
    background-attachment: fixed;
}

/* ---- 标题层级：藏蓝重字 + 微字距（区分主次，仍蓝白系）
   注意：不锁 .page-title h1 颜色（页面间白底/渐变底不一），只加字重；
   确定处于白底区块的节标题才统一上藏蓝。---- */
.page-title h1 { font-weight: 700; }
.section-header h2,
.section-title,
.group-title {
    color: #16355f;
    font-weight: 700;
}

/* ---- 行级 hover：左侧 3px 品牌蓝竖条（inset，零位移）---- */
.news-item:hover,
.news-list-item:hover,
.side-list-item:hover,
.post-item:hover {
    box-shadow: inset 3px 0 0 #007bff;
}

/* ---- 交互过渡统一为柔顺曲线（显式受控属性，避免 all 动画）---- */
.news-item,
.side-list-item,
.news-list-item,
.post-item {
    transition: background-color .24s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow .24s cubic-bezier(0.22, 0.61, 0.36, 1),
                color .2s ease;
}
.topic-card,
.service-card {
    transition: transform .24s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow .24s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color .24s ease;
}
.news-section,
.search-section,
.side-card,
.sidebar-card,
.detail-card {
    transition: box-shadow .24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- 卡片 hover 顶部浮现一道品牌蓝光（合成层，不位移）---- */
.news-section::after,
.search-section::after,
.side-card::after,
.sidebar-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0056b3, #007bff 55%, #69b7ff);
    opacity: 0;
    transition: opacity .24s ease;
}
.news-section:hover::after,
.search-section:hover::after,
.side-card:hover::after,
.sidebar-card:hover::after { opacity: 1; }
.news-section,
.search-section,
.side-card,
.sidebar-card { position: relative; overflow: hidden; }