/* ============================================================
   清染导航 · 主页专属版式
   ------------------------------------------------------------
   · 配色令牌统一在 css/theme.css，通用组件在 css/ui.css
   · 本文件只负责首页版式：浮动顶栏 / 指挥台 / 今日课程 /
     统计区 / 左侧分类栏 / Bento 卡片 / 站点动态 / 进度条
   · 引入顺序：style.css → theme.css → ui.css → home.css
   ============================================================ */

/* ============================================================
   页面底色与背景光晕
   底色 / 光晕 / 网格纹理统一由 css/theme.css 提供，这里只补首页特有的留白
   ============================================================ */
body {
    padding-top: 90px;
}

.container {
    max-width: 1320px;
}

/* ============================================================
   6. 浮动顶栏
   ============================================================ */
.navbar {
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(1320px, calc(100% - 28px));
    height: 58px;
    padding: 0 12px 0 16px;
    border-radius: var(--h-radius);
    border: 1px solid var(--h-border);
    background: var(--h-glass);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow:
        0 20px 44px -34px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 var(--h-sheen);
}

.nav-brand a {
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    box-shadow: 0 8px 18px -10px var(--h-accent);
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.nav-item {
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--h-dim);
    border: 1px solid transparent;
}

.nav-item i {
    font-size: 0.82rem;
    opacity: 0.9;
}

.nav-item:hover {
    color: var(--h-text);
    background: var(--h-surface-2);
    border-color: var(--h-border);
    transform: none;
}

.nav-item-admin {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
}

.nav-item-admin:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    opacity: 0.9;
}

.nav-palette-btn {
    width: 34px;
    height: 34px;
    margin-left: 4px;
    border-radius: 11px;
    font-size: 1rem;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
}

.nav-palette-btn:hover {
    color: #fff;
    background: var(--h-accent);
    transform: rotate(18deg);
}

.hamburger span {
    background: var(--h-text);
}

/* ============================================================
   7. 指挥台 Hero
   ============================================================ */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'main side'
        'search search';
    align-items: center;
    gap: 22px 26px;

    position: relative;
    overflow: hidden;
    margin-bottom: var(--h-gap);
    padding: 30px 32px 28px;
    border-radius: var(--h-radius-lg);
    text-align: left;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 30px 60px -46px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 var(--h-sheen);
}

/* 左上角一团强调色光晕 */
.hero::before {
    content: '';
    position: absolute;
    top: -140px;
    left: -80px;
    width: 460px;
    height: 320px;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--h-accent-soft) 0%, transparent 70%);
}

.hero-main {
    grid-area: main;
    position: relative;
}

.hero-hi {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
}

.hero h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 8px;
    background: linear-gradient(120deg, var(--h-text) 20%, var(--h-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 0.92rem;
    color: var(--h-dim);
    margin: 0;
    letter-spacing: 0.2px;
}

.hero-side {
    grid-area: side;
    position: relative;
    text-align: right;
}

.hero-date {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--h-dim);
    margin-bottom: 10px;
}

.hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
}

.hero-stats strong {
    font-size: 0.95rem;
    color: var(--h-accent);
}

.hero-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--h-border-strong);
}

/* 搜索框 */
.search-box {
    grid-area: search;
    position: relative;
    max-width: none;
    margin: 0;
}

.search-box > i {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--h-dim);
    pointer-events: none;
    transition: color 0.25s ease;
}

.search-box input {
    width: 100%;
    padding: 15px 20px 15px 48px;
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.search-box input::placeholder {
    color: var(--h-dim);
}

.search-box input:focus {
    outline: none;
    background: var(--h-surface);
    border-color: var(--h-accent);
    box-shadow: 0 0 0 4px var(--h-accent-soft);
}

.search-box:focus-within > i {
    color: var(--h-accent);
}

/* ============================================================
   8. 统计区
   ============================================================ */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--h-gap);
    margin-bottom: 26px;
}

.weather-calendar-widget {
    gap: var(--h-gap);
    margin-bottom: 0;
    min-height: 168px;
}

.wc-weather,
.wc-calendar,
.visitor-counter,
.preview-section {
    position: relative;
    border-radius: var(--h-radius);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 var(--h-sheen);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.wc-weather,
.wc-calendar {
    padding: 22px 24px;
}

.wc-weather:hover,
.wc-calendar:hover {
    transform: none;
    border-color: var(--h-border-strong);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.wc-weather-icon {
    font-size: 3.2rem;
    filter: none;
}

.wc-temp {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--h-text);
}

.wc-desc {
    font-size: 0.9rem;
    color: var(--h-dim);
}

.wc-meta {
    gap: 8px;
    font-size: 0.78rem;
    color: var(--h-dim);
}

.wc-meta span {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
}

.wc-cal-header {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--h-text);
    margin-bottom: 12px;
}

.wc-cal-table th {
    font-size: 0.68rem;
    color: var(--h-dim);
    padding: 4px 0;
}

.wc-cal-table td {
    font-size: 0.76rem;
    color: var(--h-dim);
    border-radius: 8px;
}

.wc-day:hover {
    background: var(--h-surface-2);
}

.wc-today {
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2)) !important;
    color: #fff !important;
    border-radius: 10px;
    box-shadow: 0 8px 18px -10px var(--h-accent);
}

/* 今日访客：统计卡 */
.visitor-counter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 20px 22px;
    text-align: left;
    font-size: 0.8rem;
}

.vc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vc-label {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--h-dim);
}

.vc-icon {
    font-size: 1rem;
    opacity: 0.85;
}

.vc-num {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.vc-num strong {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--h-accent);
}

.vc-num span {
    font-size: 0.8rem;
    color: var(--h-dim);
}

.vc-sub {
    padding-top: 10px;
    border-top: 1px solid var(--h-border);
    font-size: 0.76rem;
    color: var(--h-dim);
}

.vc-sub strong {
    font-size: 0.9rem;
    color: var(--h-text);
}

/* ============================================================
   9. 版式：左侧分类栏 + 内容流
   ============================================================ */
.layout {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.feed {
    min-width: 0;
}

/* —— 分类栏 + 待办：整列一起吸顶 —— */
.side-col {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: var(--h-gap);
    align-self: start;
}

.cat-rail {
    position: static;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    border-radius: var(--h-radius);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.rail-head {
    padding: 2px 8px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--h-dim);
}

.rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--h-radius-sm);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--h-dim);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rail-item i {
    width: 16px;
    font-size: 0.82rem;
    text-align: center;
}

.rail-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rail-count {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
}

.rail-item:hover {
    color: var(--h-text);
    background: var(--h-surface-2);
    border-color: var(--h-border);
}

.rail-item:hover .rail-count {
    color: var(--h-accent);
}

.rail-sub {
    color: var(--h-dim);
    opacity: 0.85;
}

.rail-top {
    margin-top: 10px;
    padding: 9px 10px;
    border-top: 1px solid var(--h-border);
    font-size: 0.78rem;
    color: var(--h-dim);
    text-decoration: none;
}

.rail-top:hover {
    color: var(--h-accent);
}

/* ============================================================
   10. 分类标题
   ============================================================ */
.cat-block {
    position: relative;
}

.section-title {
    position: sticky;
    top: 82px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--h-border);
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--h-text);
    /* 吸顶时卡片会从底下滚过，必须有实底 */
    background: var(--h-glass);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--h-sheen);
    scroll-margin-top: 100px;
}

.st-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
}

.st-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.st-count {
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
}

/* ============================================================
   11. 卡片瓷砖（Bento）
   ============================================================ */
.card-grid {
    display: grid;
    /* 每行卡片数 / 行高 / 间距都可以在后台「布局管理」里调（内联 :root 变量） */
    grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--bento-row-h, 118px), auto);
    grid-auto-flow: dense;
    gap: var(--bento-gap, var(--h-gap));
    margin-bottom: 34px;
}

/* 卡片少的分区（≤3 张）：让卡片铺满整行，右侧不留空 */
.card-grid-few {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* 后台选了「每行 2 列」时，少卡片的分区也保持两列 */
body.cols-2 .card-grid-few {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 卡片够多：首卡升级 2×2 主卡（类名由 views/partials/category.php 给出） */
.card-feature {
    grid-column: span 2;
    grid-row: span 2;
}

/* 「两大板块并排」：内容流本身变成两列 */
.section-duo .feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.section-duo .feed > .activity,
.section-duo .feed > .preview-section {
    grid-column: 1 / -1;
}

/* 关掉左侧栏时内容流占满宽度 */
body.no-side .layout {
    grid-template-columns: minmax(0, 1fr);
}

/* 统计区缺模块时的排布 */
.dash-grid.no-weather,
.dash-grid.no-visitor {
    grid-template-columns: minmax(0, 1fr);
}

.card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: var(--bento-pad, 18px);
    border-radius: var(--h-radius);
    text-decoration: none;
    color: inherit;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    box-shadow: inset 0 1px 0 var(--h-sheen);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        background 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    background: var(--h-surface-2);
    border-color: var(--h-border-strong);
    box-shadow:
        0 22px 40px -30px var(--h-accent),
        0 0 0 1px var(--h-accent-soft),
        inset 0 1px 0 var(--h-sheen);
}

/* 图标块 */
.card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: var(--h-radius-sm);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
    /* 复位 style.css 的文字裁切，否则底色会被裁成字形 */
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    transition: background 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-icon i {
    font-size: 1.1rem;
    color: var(--h-accent);
    background: none;
    -webkit-text-fill-color: currentColor;
    transition: color 0.25s ease;
}

.card:hover .card-icon {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
}

.card:hover .card-icon i {
    color: #fff;
}

.card h3 {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 5px;
    color: var(--h-text);
}

.card p {
    font-size: 0.79rem;
    line-height: 1.6;
    color: var(--h-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--h-dim);
    background: var(--h-tag-bg);
    border: 1px solid var(--h-border);
}

.card:hover .card-tag {
    color: var(--h-accent);
    border-color: var(--h-accent-soft);
}

/* —— 2×2 主卡 —— */
.card-feature {
    padding: 24px;
    justify-content: flex-end;
}

/* 右下角的巨型淡图标，填住大卡的空白 */
.card-watermark {
    position: absolute;
    right: 18px;
    bottom: 6px;
    font-size: 6.5rem;
    line-height: 1;
    color: var(--h-accent);
    opacity: 0.08;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-feature:hover .card-watermark {
    opacity: 0.14;
    transform: translateY(-6px) scale(1.04);
}

.card-feature .card-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.card-feature .card-icon i {
    font-size: 1.5rem;
}

.card-feature h3 {
    font-size: 1.32rem;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}

.card-feature p {
    font-size: 0.88rem;
    -webkit-line-clamp: 3;
}

.card-feature .card-tag {
    margin-top: 16px;
}

/* 空状态 */
.empty-state {
    padding: 44px 32px;
    border-radius: var(--h-radius);
    border: 1px dashed var(--h-border-strong);
    color: var(--h-dim);
}

/* ============================================================
   12. 留言 / 页脚 / 悬浮入口
   ============================================================ */
.preview-section {
    margin-top: 6px;
    padding: 22px 24px;
}

.preview-header {
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--h-border);
}

.preview-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
}

.preview-header a {
    font-size: 0.82rem;
    color: var(--h-accent);
}

.comment-preview {
    border-bottom: 1px solid var(--h-border);
}

.comment-preview:last-child {
    border-bottom: none;
}

.comment-avatar {
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-radius: 12px;
    font-weight: 600;
}

.comment-name {
    color: var(--h-text);
}

.comment-text {
    color: var(--h-dim);
}

.comment-time {
    color: var(--h-dim);
    opacity: 0.75;
}

footer {
    margin-top: 34px;
    padding: 26px 24px;
    border-radius: var(--h-radius);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-dim);
    font-size: 0.8rem;
    text-shadow: none;
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

footer p {
    margin-bottom: 5px;
}

.beian-info a {
    color: var(--h-dim);
    font-size: 0.74rem;
}

.beian-info a:hover {
    color: var(--h-accent);
}

.admin-entry {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.05rem;
    color: var(--h-dim);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.7);
}

.admin-entry:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    transform: translateY(-3px) scale(1.04);
}

/* ============================================================
   13. 细节：移动端抽屉 / 主题面板 / 滚动条
   ============================================================ */
.nav-drawer {
    border-radius: 0 22px 22px 0;
}

.nav-drawer-header {
    font-weight: 700;
    color: var(--h-text);
}

.nav-drawer-item {
    border-radius: var(--h-radius-sm);
    color: var(--h-dim);
}

.nav-drawer-item:hover {
    color: var(--h-text);
    background: var(--h-surface-2);
}

.nav-drawer-item-admin {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
}

.theme-palette-panel {
    border-radius: var(--h-radius-lg);
    border: 1px solid var(--h-border);
}

.theme-palette-title,
.theme-palette-label {
    color: var(--h-text);
}

.theme-palette-item {
    border-radius: var(--h-radius-sm);
    border: 1px solid transparent;
}

.theme-palette-item.active,
.theme-palette-item:hover {
    border-color: var(--h-accent-soft);
    background: var(--h-surface-2);
}

/* 抽屉 / 面板里的色块用新配色的渐变（JS 写的是内联样式，必须 !important） */
.drawer-theme-swatch[data-theme-id='glass'],
.theme-palette-item[data-theme-id='glass'] .theme-palette-swatch {
    background: linear-gradient(135deg, #ec4899, #a855f7) !important;
}
.drawer-theme-swatch[data-theme-id='sky'],
.theme-palette-item[data-theme-id='sky'] .theme-palette-swatch {
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}
.drawer-theme-swatch[data-theme-id='light'],
.theme-palette-item[data-theme-id='light'] .theme-palette-swatch {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8) !important;
}
.drawer-theme-swatch[data-theme-id='dark'],
.theme-palette-item[data-theme-id='dark'] .theme-palette-swatch {
    background: linear-gradient(135deg, #141a26, #c084fc) !important;
}
.drawer-theme-swatch[data-theme-id='purple'],
.theme-palette-item[data-theme-id='purple'] .theme-palette-swatch {
    background: linear-gradient(135deg, #7c3aed, #d946ef) !important;
}
.drawer-theme-swatch[data-theme-id='cyber'],
.theme-palette-item[data-theme-id='cyber'] .theme-palette-swatch {
    background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
}
.drawer-theme-swatch[data-theme-id='ocean'],
.theme-palette-item[data-theme-id='ocean'] .theme-palette-swatch {
    background: linear-gradient(135deg, #2dd4bf, #38bdf8) !important;
}
.drawer-theme-swatch[data-theme-id='sunset'],
.theme-palette-item[data-theme-id='sunset'] .theme-palette-swatch {
    background: linear-gradient(135deg, #ea580c, #db2777) !important;
}
.drawer-theme-swatch[data-theme-id='forest'],
.theme-palette-item[data-theme-id='forest'] .theme-palette-swatch {
    background: linear-gradient(135deg, #059669, #65a30d) !important;
}
.drawer-theme-swatch[data-theme-id='neon'],
.theme-palette-item[data-theme-id='neon'] .theme-palette-swatch {
    background: linear-gradient(135deg, #f0abfc, #22d3ee) !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--h-border-strong);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--h-dim);
}

/* ============================================================
   13.5 新增模块：进度条 / 回到顶部 / 亮暗切换 / 今日课程 /
        访客趋势 / 站点动态 / 页脚统计
   ============================================================ */

/* —— 阅读进度条 —— */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 0;
    height: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--h-accent), var(--h-accent-2));
    box-shadow: 0 0 12px var(--h-halo);
    pointer-events: none;
}

/* —— 回到顶部 —— */
.back-top {
    position: fixed;
    right: 20px;
    bottom: 78px;
    z-index: 1000;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--h-dim);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-top:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
}

/* —— 顶栏亮暗切换 —— */
.nav-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 4px;
    border-radius: 11px;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-theme-toggle:hover {
    color: #fff;
    background: var(--h-accent);
    transform: rotate(-15deg);
}

/* —— 搜索结果计数 —— */
.search-box input {
    padding-right: 112px;
}

.search-count {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) scale(0.9);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-count.show {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.search-count.empty {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

/* —— 今日课程 —— */
.today-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: var(--h-gap);
    padding: 14px 18px;
    border-radius: var(--h-radius);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.tb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tb-tag {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
}

.tb-week {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--h-text);
}

.tb-day {
    font-size: 0.8rem;
    color: var(--h-dim);
}

.tb-class {
    padding-left: 8px;
    border-left: 1px solid var(--h-border);
    font-size: 0.78rem;
    color: var(--h-dim);
}

.tb-list {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tb-list::-webkit-scrollbar {
    display: none;
}

.tb-course {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    text-decoration: none;
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* 上课时间（新） */
.tb-time {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--h-dim);
    padding-right: 8px;
    border-right: 1px solid var(--h-border);
}

/* 正在上的课 / 下一节课 */
.tb-course.ongoing {
    background: var(--h-accent-soft);
    border-color: var(--h-accent);
    box-shadow: 0 0 0 1px var(--h-accent-soft), 0 10px 24px -16px var(--h-accent);
}

.tb-course.ongoing .tb-name {
    color: var(--h-accent);
}

.tb-course.next {
    border-color: var(--h-border-strong);
}

/* 今日课程运行状态条 */
.tb-status {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
}

.tb-status i {
    font-size: 0.7rem;
}

.tb-status.is-ongoing {
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border-color: var(--h-accent);
}

.tb-status.is-ongoing i {
    animation: tbPulse 1.6s ease-in-out infinite;
}

.tb-status.is-done {
    opacity: 0.75;
}

@keyframes tbPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* 导出日历按钮 */
.tb-ics {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--h-accent);
    border-color: var(--h-accent-soft);
}

.tb-ics:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
}

.tb-course:hover {
    transform: translateY(-2px);
    background: var(--h-accent-soft);
    border-color: var(--h-accent-soft);
}

.tb-sec {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--h-accent);
    white-space: nowrap;
}

.tb-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--h-text);
    white-space: nowrap;
}

.tb-meta {
    font-size: 0.72rem;
    color: var(--h-dim);
    white-space: nowrap;
}

.tb-empty {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--h-text);
}

.tb-next {
    font-size: 0.78rem;
    color: var(--h-dim);
}

.tb-next strong {
    color: var(--h-accent);
}

.tb-picker {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.tb-pick {
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 0.74rem;
    color: var(--h-dim);
    text-decoration: none;
    white-space: nowrap;
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tb-pick:hover {
    color: var(--h-text);
    border-color: var(--h-border-strong);
}

.tb-pick.active {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
}

/* —— 近 7 天访问趋势 —— */
.vc-trend {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 48px;
    margin: 10px 0 2px;
    padding-bottom: 14px;
}

.vc-bar {
    flex: 1;
    height: var(--h, 8%);
    min-height: 4px;
    border-radius: 4px 4px 2px 2px;
    background: var(--h-border-strong);
    transition: background 0.2s ease;
}

.vc-bar.is-today {
    background: linear-gradient(180deg, var(--h-accent), var(--h-accent-2));
}

.vc-trend-label {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 0.62rem;
    color: var(--h-dim);
    opacity: 0.75;
}

.vc-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px;
    border-radius: 50%;
    background: var(--h-border-strong);
    vertical-align: middle;
}

/* —— 站点动态 —— */
.activity {
    margin-top: 6px;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--h-gap);
    margin-bottom: 34px;
}

.act-card {
    padding: 20px;
    border-radius: var(--h-radius);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.act-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--h-border);
}

.act-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--h-text);
}

.act-more {
    font-size: 0.74rem;
    color: var(--h-accent);
    text-decoration: none;
    white-space: nowrap;
}

.act-more.act-static {
    color: var(--h-dim);
}

.act-list {
    display: flex;
    flex-direction: column;
}

.act-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -8px;
    padding: 9px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}

.act-file:hover {
    background: var(--h-surface-2);
}

.act-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.act-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.act-name {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--h-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.act-meta {
    font-size: 0.7rem;
    color: var(--h-dim);
}

.act-dl {
    font-size: 0.72rem;
    color: var(--h-dim);
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.act-file:hover .act-dl {
    opacity: 1;
    color: var(--h-accent);
}

.act-log {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.act-log li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--h-border);
}

.act-log li:last-child {
    border-bottom: none;
}

.act-ver {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--h-accent);
    background: var(--h-accent-soft);
}

.act-note {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--h-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.act-date {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--h-dim);
}

.act-empty {
    padding: 18px 0;
    font-size: 0.8rem;
    color: var(--h-dim);
}

/* 搜索时收起站点动态，只留匹配结果 */
body.is-searching .activity {
    display: none;
}

/* —— 页脚统计 —— */
.footer-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 14px 0 12px;
    padding: 10px 0;
    font-size: 0.76rem;
    color: var(--h-dim);
    border-top: 1px solid var(--h-border);
    border-bottom: 1px solid var(--h-border);
}

.footer-stats strong {
    font-size: 0.84rem;
    color: var(--h-accent);
}

/* —— 分类栏跟随高亮 —— */
.rail-item.active {
    color: var(--h-text);
    background: var(--h-surface-2);
    border-color: var(--h-border);
}

.rail-item.active .rail-count {
    color: var(--h-accent);
}

/* ============================================================
   13.6 公告条 / 待办清单 / 卡片收藏
   ============================================================ */

/* —— 站点公告 —— */
.announce-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--h-gap);
}

.announce-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 44px 12px 16px;
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-left: 3px solid var(--h-accent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.announce-item.level-success { border-left-color: #34d399; }
.announce-item.level-warning { border-left-color: #fbbf24; }
.announce-item.level-danger  { border-left-color: #f87171; }

.announce-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    font-size: 0.8rem;
    color: var(--h-accent);
    background: var(--h-accent-soft);
}

.announce-item.level-success .announce-icon { color: #34d399; background: rgba(52, 211, 153, 0.14); }
.announce-item.level-warning .announce-icon { color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
.announce-item.level-danger  .announce-icon { color: #f87171; background: rgba(248, 113, 113, 0.14); }

.announce-body {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--h-text);
}

.announce-title {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
    color: var(--h-accent);
}

.announce-item.level-success .announce-title { color: #34d399; }
.announce-item.level-warning .announce-title { color: #fbbf24; }
.announce-item.level-danger  .announce-title { color: #f87171; }

.announce-title i {
    margin-right: 4px;
    font-size: 0.75rem;
}

.announce-text {
    color: var(--h-dim);
}

.announce-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    color: var(--h-dim);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.announce-close:hover {
    color: var(--h-text);
    background: var(--h-surface-2);
    border-color: var(--h-border);
    transform: none;
}

/* —— 待办清单 —— */
.todo-panel {
    padding: 14px;
    border-radius: var(--h-radius);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.todo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 10px;
}

.todo-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--h-text);
}

.todo-title i {
    margin-right: 4px;
    color: var(--h-accent);
}

.todo-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--h-accent);
    background: var(--h-accent-soft);
}

.todo-form {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.todo-form input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.8rem;
    border-radius: 10px;
}

.todo-form button {
    flex: 0 0 auto;
    width: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
    font-size: 0.8rem;
}

.todo-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    border-radius: 9px;
    transition: background 0.2s ease;
}

.todo-item:hover {
    background: var(--h-surface-2);
}

.todo-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.todo-item input[type='checkbox'] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 4px;
}

.todo-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--h-text);
    word-break: break-word;
}

.todo-item.done .todo-text {
    color: var(--h-dim);
    text-decoration: line-through;
}

.todo-del {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--h-dim);
    background: transparent;
    border-color: transparent;
    opacity: 0;
}

.todo-item:hover .todo-del {
    opacity: 1;
}

.todo-del:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    transform: none;
}

.todo-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--h-border);
}

.todo-empty {
    font-size: 0.72rem;
    color: var(--h-dim);
}

.todo-clear {
    padding: 4px 8px;
    font-size: 0.7rem;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border-color: var(--h-border);
}

.todo-clear:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
    transform: none;
}

/* —— 卡片收藏星标 / 常用专区 —— */
.card-star {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 9px;
    font-size: 0.72rem;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.card:hover .card-star,
.card-star.on {
    opacity: 1;
}

.card-star:hover {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    transform: scale(1.08);
}

.card-star.on {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.4);
}

.pinned-block .section-title {
    border-color: var(--h-accent-soft);
}

.pinned-block .st-icon {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
}

/* ============================================================
   13.7 用户系统（可选登录）
   ============================================================ */

/* —— 顶栏用户按钮 —— */
.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    margin-left: 8px;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-user-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
    transform: translateY(-1px);
}

.nav-user-btn i {
    font-size: 0.8rem;
    opacity: 0.9;
}

.nav-user-btn.logged-in {
    color: var(--h-text);
    background: var(--h-surface-2);
    border-color: var(--h-border-strong);
}

.nav-user-btn.logged-in:hover {
    color: var(--h-text);
    background: var(--h-accent-soft);
    border-color: var(--h-accent);
}

.nu-avatar {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #fff;
    flex: 0 0 auto;
}

/* —— 登录弹窗 —— */
.qr-user-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 6, 14, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.qr-user-modal.show {
    display: flex;
}

/* ⚠️ 必须显式压掉：下面给 label 设了 display:block，会盖过 [hidden] 的浏览器默认样式，
   导致「登录」标签页里仍然显示昵称/验证码输入框 */
.qr-user-modal [hidden] {
    display: none !important;
}

.qr-user-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px 26px 20px;
    border-radius: var(--h-radius-lg);
    background: var(--h-glass);
    border: 1px solid var(--h-border);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 34px 80px -44px rgba(0, 0, 0, 0.95), inset 0 1px 0 var(--h-sheen);
    animation: qrUserIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes qrUserIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.qr-user-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--h-dim);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.qr-user-close:hover {
    color: var(--h-text);
    background: var(--h-surface-2);
    border-color: var(--h-border);
    transform: none;
}

.qr-user-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.qr-user-tabs button {
    flex: 1;
    padding: 9px 0;
    border-radius: 11px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    cursor: pointer;
}

.qr-user-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
}

.qr-user-tip {
    margin: 0 0 16px;
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--h-dim);
}

.qr-user-form label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.78rem;
    color: var(--h-dim);
}

.qr-user-form input {
    width: 100%;
    margin-top: 5px;
    padding: 11px 13px;
    border-radius: var(--h-radius-sm);
    font-size: 0.9rem;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    outline: none;
}

.qr-user-form input:focus {
    border-color: var(--h-accent);
    box-shadow: 0 0 0 4px var(--h-accent-soft);
}

.qr-code-row {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.qr-code-row input {
    margin-top: 0;
}

.qr-send-code {
    flex: 0 0 auto;
    padding: 0 14px;
    border-radius: var(--h-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
    cursor: pointer;
    white-space: nowrap;
}

.qr-send-code:disabled {
    opacity: 0.55;
    cursor: default;
}

.qr-user-submit {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border-radius: var(--h-radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border: none;
    cursor: pointer;
    box-shadow: 0 14px 34px -20px var(--h-accent);
}

.qr-user-submit:hover {
    filter: brightness(1.08);
}

.qr-user-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.qr-user-msg {
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: var(--h-radius-sm);
    font-size: 0.8rem;
    line-height: 1.5;
}

.qr-user-msg.err {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.14);
    border-left: 3px solid #f43f5e;
}

.qr-user-msg.ok {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
    border-left: 3px solid #34d399;
}

.qr-user-foot {
    margin-top: 12px;
    text-align: center;
}

.qr-user-foot a {
    font-size: 0.78rem;
    color: var(--h-dim);
}

.qr-user-foot a:hover {
    color: var(--h-accent);
}

/* 已登录时的账号面板 */
.qr-user-account {
    text-align: center;
    padding-top: 6px;
}

.qr-acc-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--h-text);
}

.qr-acc-mail {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--h-dim);
    word-break: break-all;
}

.qr-acc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    justify-content: center;
}

.qr-acc-actions button {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    cursor: pointer;
}

.qr-acc-actions button:hover {
    color: var(--h-accent);
    border-color: var(--h-accent-soft);
}

.qr-acc-logout:hover {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

.qr-acc-note {
    margin-top: 14px;
    font-size: 0.72rem;
    color: var(--h-dim);
    opacity: 0.8;
}

/* 手机端：按钮收窄，名字过长省略 */
@media (max-width: 768px) {
    .nav-user-btn {
        height: 32px;
        padding: 0 10px;
        margin-left: 6px;
        font-size: 0.8rem;
    }

    .nav-user-btn .nu-name {
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .qr-user-panel {
        padding: 22px 20px 16px;
        border-radius: var(--h-radius);
    }
}

/* ============================================================
   14. 响应式
   ============================================================ */
@media (max-width: 1180px) {
    .layout {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 20px;
    }

    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 后台选的「每行 2 列」在窄屏也保持两列 */
    body.cols-2 .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    /* 分类栏改成横向滑动条 */
    .layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .side-col {
        position: static;
        top: auto;
    }

    .cat-rail {
        position: sticky;
        top: 76px;
        z-index: 7;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cat-rail::-webkit-scrollbar {
        display: none;
    }

    .rail-head,
    .rail-top {
        display: none;
    }

    .rail-item {
        flex: 0 0 auto;
        padding: 7px 12px;
        font-size: 0.82rem;
        background: var(--h-surface-2);
        border-color: var(--h-border);
    }

    .rail-sub {
        display: none;
    }

    .dash-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .section-title {
        position: static;
        top: auto;
    }

    /* 今日课程：课程列表换到第二行 */
    .today-bar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .tb-list {
        order: 3;
        flex: 1 0 100%;
    }

    .tb-picker {
        margin-left: auto;
    }

    .activity-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 两大板块并排在窄屏收回单列 */
    .section-duo .feed {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-feature {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 80px;
    }

    .navbar {
        top: 8px;
        width: calc(100% - 16px);
        height: 52px;
        padding: 0 10px 0 14px;
        border-radius: 16px;
    }

    .brand-name {
        display: none;
    }

    /* 手机端关闭毛玻璃，减轻滚动负担 */
    .navbar,
    .hero,
    .card,
    .cat-rail,
    .wc-weather,
    .wc-calendar,
    .visitor-counter,
    .preview-section,
    .admin-entry {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'main'
            'search';
        gap: 18px;
        padding: 22px 20px;
        border-radius: var(--h-radius);
    }

    .hero-side {
        display: none;
    }

    .hero h1 {
        font-size: 1.7rem;
    }

    .search-box input {
        padding: 13px 92px 13px 42px;
        font-size: 0.9rem;
    }

    .search-box > i {
        left: 16px;
    }

    .search-count {
        right: 12px;
        font-size: 0.68rem;
    }

    /* 新增模块的手机端微调 */
    .today-bar {
        padding: 12px 14px;
    }

    .tb-class {
        display: none;
    }

    .tb-tag {
        font-size: 0.68rem;
    }

    /* 班级切换按钮自己占一行并可横向滑动，避免把页面撑宽 */
    .tb-picker {
        flex: 1 1 100%;
        margin-left: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tb-picker::-webkit-scrollbar {
        display: none;
    }

    .vc-trend {
        height: 40px;
    }

    .act-card {
        padding: 16px;
    }

    .back-top {
        right: 16px;
        bottom: 66px;
        width: 40px;
        height: 40px;
    }

    .footer-stats {
        gap: 6px 12px;
        font-size: 0.72rem;
    }

    /* 公告 / 待办 / 星标 */
    .announce-item {
        padding: 10px 40px 10px 12px;
    }

    .announce-body {
        font-size: 0.8rem;
    }

    .announce-icon {
        width: 26px;
        height: 26px;
    }

    .todo-list {
        max-height: 190px;
    }

    .card-star {
        opacity: 1;
    }

    .cat-rail {
        top: 68px;
    }

    .card-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 12px;
        margin-bottom: 26px;
    }

    /* 单列时复位跨度，避免出现隐式列 */
    .card-feature {
        grid-column: auto;
        grid-row: auto;
        padding: 20px;
    }

    .card-feature h3 {
        font-size: 1.1rem;
    }

    .card-watermark {
        font-size: 4.5rem;
        opacity: 0.07;
    }

    .wc-weather,
    .wc-calendar {
        padding: 18px 20px;
    }

    .visitor-counter {
        padding: 18px 20px;
    }

    .vc-num strong {
        font-size: 2rem;
    }

    .preview-section,
    footer {
        padding: 20px;
    }

    /* 管理入口移回右侧下方，避开左侧抽屉 */
    .admin-entry {
        right: 16px;
        left: auto;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   15. 动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .card,
    .card-icon,
    .card:hover,
    .card:hover .card-icon,
    .wc-weather,
    .wc-calendar,
    .admin-entry {
        transition: none;
        transform: none;
    }
}