/*
  Responsive Base CSS – 公共样式基座（定制主题色版）
*/

/* =====================
   1) CSS Reset + 基础可访问性
   ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: clamp(14px, 0.95vw + 10px, 18px);
}

ul {
    margin: 0;
    padding: 0;
}

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

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

:where(a) {
    color: var(--primary);
    text-decoration: none;
}

:where(a:hover) {
    text-decoration: underline;
}

:where(:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================
   2) 设计令牌（CSS 变量）
   ===================== */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Noto Sans SC", "PingFang SC",
        "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", sans-serif;

    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;


    /* 色彩（浅色模式） */
    --white: #ffffff;
    --black: #000000;
    --bg: #f4f4f4;
    --fg: #141414;
    --muted: #475569;
    --border: #e2e8f0;
    --elev: #f8fafc;
    --primary: #8fc31f;
    --primary-deep: #71bb11;
    --primary-light: #e5edd4;
    --danger: #ff3737;
    /* 定制主题色 */
    --primary-contrast: #f39800;
    --highlight: #fff100;
    /* 高亮色 */
    --link: var(--primary);
    /* 灰色 */
    --grey: #d2d2d2;
    --light-grey: #e6e7e5;

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 4rem;
    --space-lg: 5rem;
    --space-xl: 6.25rem;
    --space-xxl: 7.5rem;
    --radius: 0.75rem;
    --radius-s: 0.25rem;
    --radius-lg: 1.5rem;
    --round: 50%;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, .6);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, .9);
    --shadow-spread: 0 4px 12px 8px rgba(0, 0, 0, .1);

    --bp-sm: 40rem;
    --bp-md: 48rem;
    --bp-lg: 64rem;
    --bp-xl: 80rem;

    --container-xs: 95%;
    --container: 73%;

    --gutter-sm: 1rem;
    --gutter-md: 2rem;
    --gutter-lg: 4rem;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1220;
        --fg: #e5e7eb;
        --muted: #94a3b8;
        --border: #1f2a44;
        --elev: #0f172a;
        --primary: #8fc31f;
        --primary-contrast: #0b1220;
        --highlight: #fff100;
    }
} */

/* 其余部分保持不变... */

/* =====================
   3) 字体与排版
   ===================== */
:where(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 var(--space-2);
    line-height: 1.25;
    font-weight: 700;
}

:where(p, ul, ol, table, pre, blockquote) {
    margin: 0 0 var(--space-4);
}

h1 {
    font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
}

h2 {
    font-size: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
}

h3 {
    font-size: clamp(1.1rem, 0.8rem + 1.4vw, 1.6rem);
}

h4 {
    font-size: clamp(1rem, 0.75rem + 1.2vw, 1.3rem);
}

h5 {
    font-size: clamp(0.95rem, 0.7rem + 1vw, 1.1rem);
}

h6 {
    font-size: clamp(0.9rem, 0.6rem + 0.8vw, 1rem);
}


small,
.text-sm {
    font-size: 0.875em;
    color: var(--muted);
}

.mono {
    font-family: var(--font-mono);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-8) 0;
}

a {
    text-decoration: none;
}


.text-center {
    text-align: center;
}

/* =====================
   4) 容器与布局辅助
   ===================== */
.app-container {
    width: min(100% - var(--gutter-md), var(--container));
    margin-inline: auto;
}

/* Tablet */
@media (max-width: 1440px) {
    .app-container {
        width: min(100% - var(--gutter-lg), var(--container-xs));
    }
}

@media (max-width: 768px) {
    .app-container {
        width: 95%;
    }
}

/* Flex 与 Grid 小工具 */
.flex {
    display: flex;
}

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

.flex-1 {
    flex: 1;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-2 {
    gap: var(--space-2);
}

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

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-10 {
    gap: var(--space-10);
}

.gap-12 {
    gap: var(--space-12);
}

/* 自适应栅格：自动填充列 */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-6);
}

/* 固定列数（小到大逐渐增强） */
.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

@media (max-width: calc(var(--bp-md) - 0.01px)) {
    .cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: calc(var(--bp-sm) - 0.01px)) {

    .cols-4,
    .cols-3,
    .cols-2 {
        grid-template-columns: 1fr;
    }
}

/* 垂直堆叠与间距（Stack 模式） */
.stack>*+* {
    margin-top: var(--space-4);
}

.stack-lg>*+* {
    margin-top: var(--space-6);
}

/* 容器化卡片 */
.card {
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* 辅助间距工具（只列常用，其他可在项目中扩展） */
.mt-4 {
    margin-top: var(--space-4);
}

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

.mt-6 {
    margin-top: var(--space-6);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.p-4 {
    padding: var(--space-4);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.py-4 {
    padding-block: var(--space-4);
}

.py-6 {
    padding-block: var(--space-6);
}

.py-8 {
    padding-block: var(--space-8);
}

.px-4 {
    padding-inline: var(--space-4);
}

.px-6 {
    padding-inline: var(--space-6);
}

.px-8 {
    padding-inline: var(--space-8);
}

/* 文本对齐与截断 */
.text-center {
    text-align: center;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式显示控制 */
.hidden {
    display: none !important;
}

@media (min-width: var(--bp-sm)) {
    .sm\:hidden {
        display: none !important;
    }

    .sm\:flex {
        display: flex !important;
    }

    .sm\:grid {
        display: grid !important;
    }
}

@media (min-width: var(--bp-md)) {
    .md\:hidden {
        display: none !important;
    }

    .md\:flex {
        display: flex !important;
    }

    .md\:grid {
        display: grid !important;
    }
}

@media (min-width: var(--bp-lg)) {
    .lg\:hidden {
        display: none !important;
    }

    .lg\:flex {
        display: flex !important;
    }

    .lg\:grid {
        display: grid !important;
    }
}

/* =====================
   5) 表单与按钮基线
   ===================== */
label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    padding: 0.625rem 0.75rem;
    background: transparent;
    outline: none;
    -webkit-border-radius: calc(var(--radius) - 4px);
    -moz-border-radius: calc(var(--radius) - 4px);
    -ms-border-radius: calc(var(--radius) - 4px);
    -o-border-radius: calc(var(--radius) - 4px);
}

.input:focus,
textarea:focus,
select:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.btn {
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-weight: 600;
    line-height: 2.5rem;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.btn-contrast {
    background: var(--primary-contrast);
    color: var(--black);
    border-color: var(--primary-contrast);
}

.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--fg);
}

.btn:hover {
    filter: brightness(1.02);
}

.btn:active {
    transform: translateY(1px);
}

/* =====================
   6) 辅助组件模式（可选）
   ===================== */
/* 媒体对象（Media Object）*/
.media {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

.media .media-figure {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    overflow: hidden;
}

.media .media-body>*+* {
    margin-top: .25rem;
}

/* 通知条 */
.notice {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--elev) 85%, transparent), var(--elev));
}

/* =====================
   7) 容器查询（现代浏览器）
   ===================== */
/* 在可用时，为组件内局部响应式提供支持 */
.cq {
    container-type: inline-size;
}

.card.cq {
    container-name: card;
}

@container card (min-width: 28rem) {
    .card .cluster {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* =====================
   8) 遮罩层
   ===================== */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* =====================
   8) 栏目海报
   ===================== */
.column-poster {
    width: 100%;
    height: 21vw;
}

.column-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .column-poster {
        height: 30vw;
    }
}

@media (max-width: 480px) {
    .column-poster {
        height: 40vw;
    }
}

/* =====================
   10) 分页样式
   ===================== */
#pagination {
    display: none;
}


#pagination.show {
    display: block;
}


.paginationjs {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.paginationjs-pages ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: var(--space-4);
}

.paginationjs-pages ul li {
    user-select: none;
}

.paginationjs-pages ul li a {
    color: #acacac;
}

.paginationjs-pages ul li.active>a {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

.paginationjs-pages ul li a:hover {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

.paginationjs-pages a,
.paginationjs-pages span {
    padding: 0.25rem 0.75rem;
    text-align: center;
    border: 1px solid #bcbcbc;
    transition: ease 0.3s;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: var(--radius-s);
    -webkit-border-radius: var(--radius-s);
    -moz-border-radius: var(--radius-s);
    -ms-border-radius: var(--radius-s);
    -o-border-radius: var(--radius-s);
}

.paginationjs-go-input {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: #acacac;
}

.paginationjs-go-input input[type="text"] {
    width: 5rem;
    border: 1px solid #bcbcbc;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    outline: none;
    transition: border-color 0.3s;
}

.paginationjs-go-input input[type="text"]:focus {
    border-color: var(--primary);
}



.paginationjs-go-button input {
    padding: 0.25rem 0.5rem;
    border: 1px solid #bcbcbc;
    border-radius: 0.25rem;
    background: var(--primary);
    color: var(--white);
    cursor: pointer;
    transition: background 0.3s;
}

/* =====================
   H5 适配 (≤768px)
   ===================== */
@media screen and (max-width: 768px) {
    .paginationjs {
        flex-direction: column;
        font-size: 0.9rem;
        gap: var(--space-2);
    }

    /* 页码组允许横向滚动（解决挤压问题） */
    .paginationjs-pages ul {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: var(--space-2);
        scrollbar-width: none;
        padding: var(--space-2);
    }

    .paginationjs-pages ul::-webkit-scrollbar {
        display: none;
    }

    /* 每个页码更紧凑 */
    .paginationjs-pages ul li a,
    .paginationjs-pages ul li span {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

    /* 上一页 / 下一页 放大触控区域 */
    .paginationjs-pages ul li:first-child a,
    .paginationjs-pages ul li:last-child a {
        padding: 0.35rem 0.75rem;
    }

    /* 跳转区域下移一行，居中 */
    .paginationjs-go-input,
    .paginationjs-go-button {
        margin-top: var(--space-2);
        justify-content: center;
    }

    .paginationjs-go-input {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        font-size: 0.85rem;
    }

    .paginationjs-go-input input[type="text"] {
        width: 3.5rem;
        padding: 0.2rem 0.3rem;
        font-size: 0.85rem;
    }

    .paginationjs-go-button input {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
        border-radius: var(--radius);
    }
}

/* =====================
   11) 验证遮罩层
   ===================== */
#captcha-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
}