/*!
 * app.css — 新站点的补充样式
 * 复用了原来 static/css/{base,home,rate}.css 的全部类名，这里只补：
 *   背景图（自定义）、公告、榜单 tabs、页头品牌、课程评分表、评论块、管理页、
 *   以及桌面端的居中适配。
 */

/* ---------------------------------------------------------------- 背景图 */
html {
    background-color: var(--cls-bg-color, #fcfcfc);
}
body {
    background-color: var(--cls-bg-color, #fcfcfc);
}
body.cls-bg {
    background-color: transparent;
}
body.cls-bg::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    /* 底色蒙版 + 图片。蒙版默认**完全透明**（--cls-bg-overlay: 0），
       可读性交给下面的 filter: blur()，这样背景图不会被一层底色盖住。
       需要额外压暗时再把 background.overlay 调大（0.3 已经足够）。 */
    background-image:
        linear-gradient(
            rgba(var(--cls-bg-overlay-color, 252, 252, 252), var(--cls-bg-overlay, 0)),
            rgba(var(--cls-bg-overlay-color, 252, 252, 252), var(--cls-bg-overlay, 0))
        ),
        var(--cls-bg-image, none);
    background-size: cover;
    background-position: var(--cls-bg-position, center);
    background-repeat: no-repeat;
    /* 图层本身已是 position:fixed，再叠 background-attachment:fixed 在移动端更耗性能 */
    background-attachment: var(--cls-bg-attachment, scroll);
    filter: blur(var(--cls-bg-blur, 0px));
    /* 略微放大，盖住模糊产生的边缘透光 */
    transform: scale(1.04);
    pointer-events: none;
}

/* 小屏 GPU 较弱：用更小的模糊半径，避免全屏模糊掉帧（--cls-bg-blur-sm 由构建期注入） */
@media (max-width: 720px) {
    body.cls-bg::before {
        filter: blur(var(--cls-bg-blur-sm, var(--cls-bg-blur, 0px)));
    }
}

/* 内容页在背景图之上加一层半透明白底，保证正文可读。
   首页（index.html）**故意不带 page-panel**：进入网站时让模糊背景直接透出来更好看。
   只在真的配了背景图时才生效（body.cls-bg 由 app.js 按配置添加），
   所以没有背景图时视觉与以前完全一致。 */
body.cls-bg.page-panel .main {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
body.cls-bg.page-panel .copyright,
body.cls-bg.page-panel .footer {
    background: rgba(255, 255, 255, 0.88);
}

/* ---------------------------------------------------------------- 搜索栏 */
/* 继承自 home.css 的写法有两个问题，这里一并修掉：
   ① 栏高固定 45px，而输入框是 34px 内容高 + padding 5px×2（+ 本文件给的 1px 边框）= 46px，
      既没有垂直居中、也没有溢出处理 → 输入框贴着栏顶，看起来"偏高"且下沿被切。
   ② 搜索图标的绝对定位找不到已定位的祖先（.searchBar/.search-wrap 都是 static），
      于是参照视口定位，图标跑到页面右上角而不是搜索框里。
   配色也统一成站点的"白 + 极浅灰"（原来是 #f8f8f8 栏 + #e3e4e6 框，两种灰）。 */
.searchBar {
    position: relative; /* 让图标有正确的定位参照 */
    height: auto;
    padding: 9px 0; /* 上下对称：40px 的输入框在 58px 的栏里正好居中 */
    display: flex;
    align-items: center; /* 输入框在栏内垂直居中 */
    background-color: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #e8e8e8;
}
.searchBar .search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 95%;
    margin: 0 auto;
}
.searchBar form {
    flex: 1 1 auto;
    min-width: 0;
}
.searchBar .search-wrap input {
    box-sizing: border-box; /* 让 padding/border 算进高度，避免比栏还高 */
    width: 100%;
    height: 40px;
    padding: 0 38px 0 12px; /* 右侧给图标留位置 */
    line-height: 40px; /* 文字在框内垂直居中 */
    font-size: 16px;
    color: #333;
    background-color: #f2f4f6;
    border: 1px solid #e6e9ec;
    border-radius: 8px;
}
.searchBar .search-wrap input::placeholder {
    color: #9aa0a6;
}
.searchBar .search-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

/* ---------------------------------------------------------------- 搜索结果项 */
/* 原样式把 .left/.right 都绝对定位、item 固定 80px 高，
   评论条数会贴到下面的分划线（hr）上。改成 flex 两列 + 自适应高度。 */
.result-list .item {
    height: auto;
    min-height: 84px;
    padding: 14px 12px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.result-list .item .left,
.result-list .item .right {
    position: static;
}
.result-list .item .right {
    text-align: right;
    flex: 0 0 auto;
}
.result-list .item .left {
    min-width: 0;
}
.result-list .item h2,
.result-list .item h3 {
    margin-top: 0;
    margin-bottom: 4px;
}
.result-list .item p {
    margin: 0;
    line-height: 1.5;
}
.result-list .item .comment-count {
    margin-top: 6px;
}
.result-list hr {
    margin: 0;
}

/* ---------------------------------------------------------------- 页头 */
.site-header {
    padding: 14px 5% 6px;
    text-align: center;
}
.site-header .brand {
    font-size: 1.5em;
    color: #007aff;
    font-weight: 300;
}
.site-header .brand-sub {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    color: #9a9a9a;
}

/* 主体直接可见：base.css 里 .main{display:none} 是为原来的 JS 淡入准备的，
   但 swipe.js 需要在初始化时就能量到宽度，所以这里覆盖掉。 */
.main {
    display: block;
    min-height: 300px;
}

/* ---------------------------------------------------------------- 布局修正
   继承来的 home.css 把 .main 写死 `height: 400px`（那是"固定视口 + 轮播"时代的设计），
   还把 .teacher 写死 `height: 165px`、.commit 写死 `height: 74px`。
   静态站的内容会比这些固定高度长，超出的部分会**溢出绘制**，
   于是紧跟其后的 .copyright（"在这里，一切都是匿名的"）和 .footer 被压在列表上
   —— 表现为"页面元素重叠"。
   这里全部改回按内容自适应。app.css 在 home.css 之后加载，同优先级下覆盖生效。 */
.main {
    height: auto;
    overflow: visible;
}
.teacher,
.commit {
    height: auto;
}
.teacher {
    min-height: 165px;
}
.commit {
    min-height: 74px;
}

/* 底部有固定操作条（home.css 的 .rating{position:fixed;bottom:0}）时，
   给正文留出空间，否则最后一条内容会被盖住。home.css 里是 padding-bottom:0，
   本文件后加载所以这里生效。 */
body {
    padding-bottom: 64px;
}

/* ---------------------------------------------------------------- 公告 */
.announcement {
    margin: 10px 3% 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(0, 122, 255, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.announcement-badge {
    display: inline-block;
    padding: 1px 7px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: #007aff;
    color: #fff;
    font-size: 0.75em;
}
.announcement-title {
    font-weight: 500;
    font-size: 1.15em;
    color: #373737;
    margin: 2px 0 6px;
}
.announcement-body {
    color: #5b5b5b;
    line-height: 1.6;
    word-break: break-word;
}
.announcement-time {
    margin-top: 8px;
    color: #a5a5a5;
    font-size: 0.8em;
}

/* ---------------------------------------------------------------- 榜单 */
.rank-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 6px 0 12px;
}
.rank-tab {
    padding: 5px 14px;
    border-radius: 14px;
    background: rgba(227, 228, 230, 0.85);
    color: #666;
    font-size: 0.95em;
}
.rank-tab.active {
    background: #007aff;
    color: #fff;
}
.hot-list {
    min-height: 240px;
}
.hot .hot-item.empty-item {
    color: #a5a5a5;
    font-size: 1em;
}
.rank-note {
    margin: 12px 5%;
    color: #a5a5a5;
    font-size: 0.8em;
    text-align: center;
    line-height: 1.5;
}
h2.na {
    color: #b4b4b4 !important;
}

/* ---------------------------------------------------------------- 评论 */
.comment-page.reported {
    opacity: 0.45;
}
.comment .right p.vote-count {
    min-width: 34px;
    padding: 0 4px;
}
.comment .left p {
    line-height: 1.55;
    word-break: break-word;
    white-space: normal;
}
#tip section header {
    /* 提示语可能是多行的（例如"接口不可用"的排查提示），保留换行 */
    white-space: pre-line;
    word-break: break-word;
    text-align: left;
    padding: 24px 18px;
}

#comment-none.hidden,
#comment-empty.hidden,
.box-loading.hidden,
p.empty.hidden {
    display: none;
}

/* ---------------------------------------------------------------- 课程评分 */
.course-scores {
    margin: 0 10px 10px;
}
.course-scores .scores summary {
    cursor: pointer;
    color: #007aff;
    font-size: 1em;
    padding: 6px 10px;
}
.course-scores table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.course-scores th,
.course-scores td {
    padding: 6px 8px;
    border-bottom: 1px solid #ededed;
    text-align: left;
}
.course-scores th {
    color: #9a9a9a;
    font-weight: 400;
}
.course-scores td.score {
    color: #007aff;
    font-weight: 500;
    white-space: nowrap;
}
.course-scores td.count {
    color: #9a9a9a;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 表单页 */
.rate .submit.disabled,
.comment .submit.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.rate-hint,
.comment-hint {
    margin: 14px 20px;
    color: #9a9a9a;
    font-size: 0.85em;
    text-align: center;
}
.feedback,
.admin {
    padding: 10px 5% 30px;
}
.feedback h3,
.admin h3 {
    color: #373737;
    font-weight: 400;
}
.feedback-note,
.admin-note {
    color: #818181;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 14px;
}
.feedback .field {
    display: block;
    margin-bottom: 14px;
}
.feedback .field span {
    display: block;
    margin-bottom: 6px;
    color: #5b5b5b;
}
.feedback input[type="text"],
.feedback textarea,
.admin input,
.admin select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #dbdbdb;
    border-radius: 6px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.9);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.feedback button.submit {
    display: block;
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: #007aff;
    color: #fff;
    font-size: 1.05em;
}
.hidden-field {
    display: none;
}

/* ---------------------------------------------------------------- 管理页 */
.admin-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.admin-bar input {
    flex: 1 1 160px;
}
.admin-bar select {
    flex: 1 1 130px;
}
.admin-bar button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: #007aff;
    color: #fff;
}
.admin-count {
    color: #818181;
    font-size: 0.9em;
    margin-bottom: 8px;
}
.admin-item {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ededed;
}
.admin-meta {
    color: #9a9a9a;
    font-size: 0.8em;
    margin-bottom: 6px;
}
.admin-content {
    color: #373737;
    line-height: 1.5;
    word-break: break-word;
}
.admin-actions a {
    display: inline-block;
    margin-right: 14px;
    color: #007aff;
    font-size: 0.9em;
}
.admin-actions a.danger {
    color: #ff3b30;
}
code {
    background: #f0f0f0;
    padding: 1px 4px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------- 页脚 */
.footer .sep {
    margin: 0 6px;
    color: #c9c9c9;
}
.footer-note {
    color: #b4b4b4;
    font-size: 0.9em;
}
#share-bg {
    display: none;
}

/* ---------------------------------------------------------------- 桌面端 */
@media screen and (min-width: 720px) {
    .site-header,
    .searchBar,
    .main,
    .footer,
    .copyright {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    .main {
        border-radius: 10px;
    }
    .rating {
        left: 50%;
        transform: translateX(-50%);
        width: 640px;
        border-radius: 8px 8px 0 0;
    }
    .share-button {
        right: auto;
        left: 50%;
        margin-left: 250px;
    }
    .result-list {
        left: 50%;
        transform: translateX(-50%);
        width: 640px;
    }
    .spinner {
        /* 原来的 spinner 用 left:50% 定位在窄屏，宽屏下对齐内容列 */
        left: 50%;
        margin-left: -30px;
    }
}