/* 主题色变量 */
:root {
    --color-export-bg: #f1f5f9;
    --color-export-bg-hover: #e2e8f0;
    --color-export-text: #475569;
    --color-export-border: #e2e8f0;

    /* ===== 登录页面颜色 ===== */
    /* 页面背景 */
    --login-body-bg: #0b1120;
    --login-container-bg: #0f172a;

    /* 左侧品牌区 */
    --brand-bg: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%);
    --brand-bg-solid: #020617;
    --brand-text: white;
    --brand-glow-blue: rgba(59,130,246,0.15);
    --brand-glow-cyan: rgba(6,182,212,0.1);
    --brand-grid: rgba(255,255,255,0.02);
    --brand-logo-bg: rgba(255,255,255,0.03);
    --brand-logo-border: rgba(59,130,246,0.3);
    --brand-logo-shadow: rgba(59,130,246,0.3);
    --brand-badge-bg: rgba(59,130,246,0.12);
    --brand-badge-border: rgba(59,130,246,0.25);
    --brand-badge-text: #7ab7ff;
    --brand-title-text: #fff;
    --brand-title-muted: #94a3b8;
    --brand-title-gradient-from: #60a5fa;
    --brand-title-gradient-to: #2dd4bf;
    --brand-desc-text: #94a3b8;
    --brand-feature-bg: rgba(255,255,255,0.03);
    --brand-feature-border: rgba(255,255,255,0.05);
    --brand-feature-hover-bg: rgba(59,130,246,0.08);
    --brand-feature-hover-border: rgba(59,130,246,0.3);
    --brand-feature-icon-bg: linear-gradient(145deg, #2563eb, #0891b2);
    --brand-feature-text: #e2e8f0;
    --brand-stats-bg: rgba(255,255,255,0.02);
    --brand-stats-border: rgba(255,255,255,0.06);
    --brand-stat-num-gradient-from: #fff;
    --brand-stat-num-gradient-to: #90e0ef;
    --brand-stat-label: #7c8fb0;

    /* 右侧表单区 */
    --form-side-bg: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --form-side-bg-mobile: linear-gradient(145deg, #f1f5f9 0%, #ffffff 100%);
    --form-card-bg: white;
    --form-card-shadow: rgba(0,0,0,0.15);
    --form-card-shadow-mobile: rgba(0,0,0,0.1);
    --form-header-title: #0f172a;
    --form-header-subtitle: #475569;
    --form-divider: #94a3b8;
    --form-divider-line: #e2e8f0;

    /* 第三方登录按钮 */
    --social-btn-bg: white;
    --social-btn-border: #e2e8f0;
    --social-btn-text: #1e293b;
    --social-btn-hover-bg: #f1f5f9;
    --social-btn-hover-border: #cbd5e1;
    --social-btn-hover-shadow: rgba(0,0,0,0.05);

    /* Tab 切换 */
    --tab-active: #0f172a;
    --tab-active-border: #3b82f6;
    --tab-inactive: #64748b;
    --tab-border: #e9edf2;

    /* 输入框 */
    --input-border: #e2e8f0;
    --input-bg: #ffffff;
    --input-focus-border: #3b82f6;
    --input-focus-shadow: rgba(59,130,246,0.15);
    --input-label: #334155;
    --input-placeholder: #b3c0cd;
    --input-error-border: #ef4444;
    --input-error-bg: #fff5f5;

    /* 密码相关 */
    --pwd-toggle: #94a3b8;

    /* 多选框 */
    --checkbox-border: #cbd5e1;
    --checkbox-checked-bg: #3b82f6;
    --checkbox-checked-border: #3b82f6;
    --checkbox-checkmark: white;

    /* 链接 */
    --link-primary: #3b82f6;
    --link-register: #2563eb;
    --link-policy: #3b82f6;

    /* 主按钮 */
    --btn-primary-bg: linear-gradient(105deg, #2563eb, #06b6d4);
    --btn-primary-text: white;
    --btn-primary-shadow: rgba(37,99,235,0.25);
    --btn-primary-hover-shadow: rgba(37,99,235,0.35);

    /* 辅助文字 */
    --text-muted: #475569;
    --text-hint: #6c86a3;
    --security-badge-border: #eef2ff;

    /* Toast */
    --toast-bg: #1e293b;
    --toast-bg-rgba: rgba(15,23,42,0.9);
    --toast-text: white;

    /* spinner */
    --spinner-border: rgba(255,255,255,0.3);
    --spinner-top: white;

    /* 注册页/忘记密码页 orb */
    --orb-1-bg: rgba(59,130,246,0.15);
    --orb-2-bg: rgba(6,182,212,0.1);
    --particle-bg: rgba(6,182,212,0.2);
    --form-bg-blur1: rgba(59,130,246,0.1);
    --form-bg-blur2: rgba(6,182,212,0.08);

    /* 注册/忘记密码表单 */
    --register-body-bg: #fff;
    --register-body-color: #0f172a;
    --register-form-bg: linear-gradient(135deg, #f8fafc, #ffffff, #eff6ff);
    --register-label: #334155;
    --register-input-border: #e2e8f0;
    --register-input-bg: #fff;
    --register-input-focus-border: #60a5fa;
    --register-input-focus-shadow: rgba(96,165,250,0.2);
    --register-error-border: #ef4444;
    --register-error-bg: #fef2f2;
    --register-error-text: #ef4444;
    --register-toggle-pwd: #94a3b8;
    --register-checkbox-border: #cbd5e1;
    --register-checkbox-checked: #2563eb;
    --register-btn-bg: linear-gradient(90deg, #2563eb, #3b82f6, #06b6d4);
    --register-btn-shadow: rgba(59,130,246,0.3);
    --register-btn-disabled: rgba(59,130,246,0.5);

    /* 步骤指示器 */
    --step-dot-bg: #f1f5f9;
    --step-dot-color: #94a3b8;
    --step-dot-border: #e2e8f0;
    --step-dot-active-bg: #dbeafe;
    --step-dot-active-color: #2563eb;
    --step-dot-active-border: #93c5fd;
    --step-label-color: #94a3b8;
    --step-label-active: #2563eb;
    --step-line-bg: #e2e8f0;

    /* Toast 注册版 */
    --toast-reg-bg: #3b82f6;
    --toast-reg-error-bg: #ef4444;

    /* 渐变按钮（已有，保留） */
    --gradient-btn: linear-gradient(to bottom right, #3b82f6, #22d3ee);
    --gradient-btn-hover: linear-gradient(180deg, #FF9243, #FFA433);

    /* 兼容 style_4 现有变量 */
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-rgb: 59, 130, 246;
    --text-gray: #666;
    --border-light: #eee;
    --text-strong: #1f2a3d;
    --text-muted-old: #6f7f92;
    --surface: #ffffff;
    --surface-soft: #f4f7fb;
    --stroke: rgba(31, 42, 61, 0.08);
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.06);
    --shadow-hover: 0 24px 48px rgba(255, 86, 5, 0.12);
    --radius-lg: 32px;
    --radius-md: 24px;
    --transition: all 0.24s ease;


    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: .5rem
}

/* 兜底：style_5 各页面的渐变 Hero 区块
   说明：手抄 Tailwind 的 index.css / article/index.css 在某些浏览器/构建配置下
        的 --tw-gradient-*-position 变量可能为无效值，导致 bg-gradient-to-br 只显示末色。
        这里用显式 background-image 强制覆盖，不依赖 Tailwind 变量链。 */
section.hero-section {
    background-color: #020617;
    background-image: linear-gradient(to bottom right, #020617 0%, #0f172a 50%, #172554 100%) !important;
}

section.hero-section--soft {
    background-color: #0f172a;
    background-image: linear-gradient(to bottom right, #0f172a 0%, #1e3a8a 50%, #164e63 100%) !important;
}

/* ========== style_5 主题：ThinkPHP $list->render() 输出重写 ==========
   原始输出结构：
     <ul class="pagination">
       <li class="disabled"><span>&laquo;</span></li>
       <li><a href="?page=1">1</a></li>
       <li class="active"><span>2</span></li>
       <li><a href="?page=3">3</a></li>
       <li class="disabled"><span>&raquo;</span></li>
     </ul>
     <div class="am-fr pagination-total am-margin-left-xs">
       <select class="form-control" onchange="changeListRows(this);">
         <option value="15" selected>15条/页</option>
         ...
       </select>
     </div>
   改写目标：圆角矩形按钮 + 主题色高亮 + 干净 select。 */

/* 容器：用 flex 居中 + 间距 */
ul.pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
}

ul.pagination li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    transition: all 0.2s ease;
}

ul.pagination li a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

ul.pagination li:hover:not(.active):not(.disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: #eff6ff;
    transform: translateY(-1px);
}

/* 当前页：主题色高亮（沿用 --color-primary: #3b82f6） */
ul.pagination li.active {
    background: var(--gradient-btn);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

ul.pagination li.active span {
    color: #ffffff;
    font-weight: 600;
}

/* 禁用（首页/末页边界） */
ul.pagination li.disabled {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #cbd5e1;
    cursor: not-allowed;
}

ul.pagination li.disabled span {
    color: #cbd5e1;
}

/* 省略号（…） */
ul.pagination li.disabled span:only-child {
    letter-spacing: 1px;
    font-weight: 600;
}

/* 整行容器：把 ul + select 包成一行，水平居中 */
.pagination,
.pagination-total {
    font-family: inherit;
}

/* select 主题色样式（每页多少条） */
.pagination-total {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    vertical-align: middle;
}

.pagination-total select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    color: #334155;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-total select.form-control:hover {
    border-color: var(--color-primary);
    color: #1e293b;
}

.pagination-total select.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 让整个分页条水平居中（article/index.html 里包了 flex justify-center） */
section .flex.justify-center.mt-10 > ul.pagination,
section .flex.justify-center.mt-10 > .pagination-total {
    margin: 0;
}

/* ========== style_5 主题：article 分类标签（不依赖 Tailwind JIT） ==========
   说明：style_5 的 article/index.css 是手抄 Tailwind 按需编译的产物，
        article 分类里用到的 bg-blue-600 / bg-slate-100 / hover:bg-slate-200 等
        不在该产物里（之前模板是空文件，没编译过），导致 active 高亮色失效。
        这里用自定义 .cat-pill 系列 class 兜底，颜色与色板保持一致。 */
.cat-pill-bar {
    position: sticky;
    top: 64px;
    z-index: 30;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9; /* border-slate-100 */
}

a.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
    background-color: #f1f5f9;       /* slate-100 */
    color: #475569;                  /* slate-600 */
    border: 1px solid transparent;
}

a.cat-pill:hover {
    background-color: #e2e8f0;       /* slate-200 */
    color: #1e293b;                  /* slate-800 */
}

a.cat-pill.cat-pill--active,
a.cat-pill.cat-pill--active:hover {
    background: var(--gradient-btn); /* blue-600 -> cyan-500 */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

/* ========== style_5 用户中心 tab_bar 公共高亮 ==========
   说明：public/tab_bar.html 会在多个用户中心页面复用，
        但部分页面未引入 user/index.css，导致 tab-active/tab-inactive
        类名已命中却没有视觉高亮。这里下沉到公共色板，保证所有页面一致。 */
.tab-active {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.28);
}

.tab-inactive {
    color: #475569;
}

.tab-inactive:hover {
    background: #f1f5f9;
    color: var(--color-primary);
}

.flex{
    display: flex;
}
.flex-jc{
    justify-content: center;
}
.flex-end{
    align-items: end;
}