/* ============================================================================
   滕州市第一中学 · 招生服务门户  样式表
   ----------------------------------------------------------------------------
   设计目标：清爽 / 积极向上 / 跨平台一致 / 零外部依赖
   配色来源：校徽实拍取色
     · 主色「中国红」 —— 校徽圆 #FF0101 的 UI 可用化（#C8231E）
     · 辅色「金橙」   —— 金榜题名，暖亮积极
     · 辅色「麦穗绿」 —— 校徽麦穗 #068A4A
     · 中性色全部为暖灰米白，彻底移除原蓝灰冷调
   全部文字/背景组合通过 WCAG 2.1 AA（正文 ≥4.5:1，大字 ≥3:1）。
   层级：令牌 → 基础 → 布局 → 组件 → 响应式 → 打印 → 偏好
   ============================================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
    /* —— 中性 · 暖灰米白 —— */
    --c-bg:          #fff8f2;   /* 页面底：暖白 */
    --c-bg-deep:     #fdf1e6;   /* 次级暖底：状态条/表单区 */
    --c-surface:     #ffffff;
    --c-surface-2:   #fffbf7;
    --c-border:      #f1dfd0;
    --c-border-2:    #e6cfbb;
    --c-text:        #2f2723;   /* 14.63:1 于白底 */
    --c-text-2:      #6e5c50;   /*  6.34:1 */
    --c-text-3:      #7f6a58;   /*  5.12:1 */
    --c-text-4:      #96806e;   /* 3.5:1 — 仅装饰性图标，禁用于正文 */

    /* —— 主色 · 中国红 —— */
    --c-primary:     #c8231e;   /* 5.65:1 于白底 */
    --c-primary-700: #a61b17;   /* 7.53:1 — hover / 深底 */
    --c-primary-900: #8c1f15;   /* 浅红底上 7.91:1 */
    --c-primary-050: #fdecea;

    /* —— 辅色 · 金橙（积极向上）—— */
    --c-accent:      #e08a00;   /* 仅装饰（2.69:1，不做正文） */
    --c-accent-700:  #a86400;   /* 4.68:1 — 正文可用 */
    --c-accent-050:  #fff4e0;
    --c-accent-100:  #ffe9c2;

    /* —— 辅色 · 麦穗绿 —— */
    --c-green:       #1e8e4e;
    --c-green-700:   #146b3a;   /* 6.57:1 — 正文可用 */
    --c-green-050:   #e7f5ec;

    /* —— 语义色 —— */
    --c-info:        #1c6b9e;
    --c-info-050:    #e8f2f9;
    --c-warn:        #a86400;
    --c-warn-050:    #fff4e0;
    --c-danger:      #b3261e;
    --c-danger-050:  #fdecea;

    /* —— 品牌渐变（白字对比 7.41 / 5.44 / 4.74，全程 AA）—— */
    --grad-brand:  linear-gradient(135deg, #a81b16 0%, #c03a18 52%, #d0401c 100%);
    --grad-gold:   linear-gradient(135deg, #e08a00 0%, #d95a16 100%);
    --grad-warm:   linear-gradient(180deg, #fffdfa 0%, #fff8f2 100%);

    /* —— 主题化补充令牌（2026-09-12）：原先写死的暖色投影/焦点环/公告卡
          色值收敛为令牌，供 html[data-theme] 覆盖，见文件末尾主题块 —— */
    --glow-primary: rgba(200, 35, 30, .26);   /* 主色按钮/CTA 投影 */
    --ring-primary: rgba(200, 35, 30, .14);   /* 输入框焦点环 */
    --tint-code:    rgba(120, 62, 32, .08);   /* 行内 code 底色 */
    --grad-notice:  linear-gradient(90deg, #e08a00, #d95a16 62%, #c8231e);
    --notice-bg:    #fffdf5;
    --notice-border:#f0dfae;
    --notice-line:  #edd9a8;

    /* —— 卡片顶彩条（红 / 金 / 绿 / 橙 / 玫红）—— */
    --bar-0: linear-gradient(90deg, #c8231e, #e8503a);
    --bar-1: linear-gradient(90deg, #e08a00, #f2b24a);
    --bar-2: linear-gradient(90deg, #1e8e4e, #46b471);
    --bar-3: linear-gradient(90deg, #dd6b20, #ee7b3c);
    --bar-4: linear-gradient(90deg, #c2185b, #e04a86);

    /* —— 圆角 / 阴影 / 动效 —— */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;
    --sh-1: 0 1px 2px rgba(120, 62, 32, .05), 0 4px 14px rgba(120, 62, 32, .06);
    --sh-2: 0 4px 10px rgba(120, 62, 32, .08), 0 14px 34px rgba(120, 62, 32, .12);
    --t: cubic-bezier(.4, 0, .2, 1);

    /* —— 版面 —— */
    --w: 1000px;
    --sp: 20px;

    /* —— 字体：system stack，Win/macOS/iOS/Android 均有合理渲染 —— */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
            Helvetica, Arial, "Noto Sans CJK SC", "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
}

/* ============================================================
   2. 基础
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 52px;      /* 锚点跳转避开吸顶提示条 */
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-700); text-decoration: underline; }

img { max-width: 100%; height: auto; border: 0; }

h1, h2, h3 { color: var(--c-text); line-height: 1.3; }

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    padding: 10px 18px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 0 0 var(--r-sm) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }

/* ============================================================
   3. 版面容器
   ============================================================ */
.wrap {
    width: 100%;
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 var(--sp);
}

/* ============================================================
   4. 顶部滚动提示条
   ============================================================ */
.topbar {
    /* 2026-09-11：顶替已移除的深色页头，成为全站唯一吸顶元素 */
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--c-accent-050);
    border-bottom: 1px solid var(--c-accent-100);
    color: var(--c-accent-700);
    font-size: 13.5px;
}
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.topbar-icon { flex: 0 0 auto; font-size: 14px; line-height: 1; }

.topbar-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.topbar-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee 22s linear infinite;
}
.topbar-seg { padding-right: 64px; }
.topbar-btn {
    flex: 0 0 auto;
    border: 1px solid var(--c-accent-100);
    background: #fff;
    color: var(--c-accent-700);
    border-radius: var(--r-pill);
    padding: 3px 12px;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s var(--t), color .15s var(--t), border-color .15s var(--t);
}
.topbar-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* 右上角学士帽徽标（2026-09-11 第二轮）：
   原「管理」入口移除后，该位置改为纯装饰的 U+1F393。
   刻意沿用 .topbar-btn —— 上面的底色、边框、悬停与按下变色全部继续生效；
   这里只补三件事：去掉指针光标、禁止文字选中、放大到与提示文字协调的字号。
   它已不是链接，也不该被点成「可跳转」的样子。 */
.topbar-btn--mark {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    font-size: 15px;
    line-height: 1;
}
.topbar-btn--mark:active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.topbar:hover .topbar-track { animation-play-state: paused; }
/* 内容不足以铺满视口时由 JS 加上：停止动画并左对齐，避免循环处出现空白 */
.topbar-track--static { animation: none; transform: none; }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* 内容复制两段，位移一半即无缝 */
}

/* ============================================================
   5. （原「页头：品牌 + 导航」样式 · 2026-09-11 已移除）
   ------------------------------------------------------------
   深红渐变页头 .head 与胶囊导航 .nav/.brand 已按需求整条删除：
     · 品牌改由 hero 的完整 logo 与页脚徽章承担；
     · 导航改由「服务入口」卡片承担；
     · 「管理」入口保留在吸顶提示条与页脚两处。
   恢复办法见 .workbuddy/backup/portal-header-<时间戳>/ 目录
   ============================================================ */

/* ============================================================
   6. 主体
   ============================================================ */
.main {
    flex: 1 1 auto;
    padding: 26px 0 56px;
}

/* ---- Flash ---- */
.flash {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 11px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}
.flash-ok    { background: var(--c-green-050);  border-color: #a8dcc0; color: var(--c-green-700); }
.flash-info  { background: var(--c-info-050);   border-color: #a9cfe6; color: var(--c-info); }
.flash-warn  { background: var(--c-warn-050);   border-color: #f0cf8e; color: var(--c-warn); }
.flash-error { background: var(--c-danger-050); border-color: #f0b4ae; color: var(--c-danger); }
.flash code {
    font-family: var(--font-mono);
    font-size: .92em;
    background: var(--tint-code);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ---- Hero：品牌形象区（完整 logo 的主位）---- */
.hero {
    /* 2026-09-15：id="top" 与配色圆点都挂到这里（顶部提示条已删除），
       故需要 position: relative 作为圆点绝对定位的参照。 */
    position: relative;
    margin-bottom: 22px;
    padding: 26px 20px 24px;
    text-align: center;
    background: var(--grad-warm);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}
.hero-logo { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.hero-tag {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 16px;
    border-radius: var(--r-pill);
    background: var(--c-primary-050);
    color: var(--c-primary-900);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 1px;
}
.hero-sub {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--c-text-2);
    font-size: 14.5px;
    line-height: 1.7;
    /* 2026-09-11 第二轮：原为继承 .hero 的居中排版，改为中文段落版式 ——
       居左 + 首行缩进两个汉字（2em 随字号缩放，14.5px 时正好 29px）。
       段落块本身仍居中（max-width + auto 外边距），只调整行文对齐方式。 */
    text-align: left;
    text-indent: 2em;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    margin-top: 18px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--glow-primary);
    transition: background .15s var(--t), transform .15s var(--t);
}
.hero-cta:hover { background: var(--c-primary-700); transform: translateY(-1px); }

/* ---- 公告卡 ---- */
.notice {
    position: relative;
    margin-bottom: 26px;
    padding: 20px 24px 22px;
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-left: 6px solid var(--c-accent);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    overflow: hidden;
}
.notice::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-notice);
}
.notice-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--notice-line);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--c-accent-700);
}
.notice-body {
    color: var(--c-text);
    font-size: 15.5px;
    line-height: 1.8;
    word-break: break-word;
}
.notice-body > :first-child { margin-top: 0; }
.notice-body > :last-child  { margin-bottom: 0; }
.notice-body p { margin: 9px 0; }
.notice-body br { display: inline; }
.notice-empty { margin: 0; color: var(--c-text-3); font-style: italic; }

/* ---- 服务导航网格 ---- */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--c-text);
}
.section-title::before {
    content: '';
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--grad-gold);
}
.section-title small {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--c-text-3);
}

.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.svc {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 20px 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s var(--t), box-shadow .18s var(--t), border-color .18s var(--t);
}
.svc::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; }
.svc-0::before { background: var(--bar-0); }
.svc-1::before { background: var(--bar-1); }
.svc-2::before { background: var(--bar-2); }
.svc-3::before { background: var(--bar-3); }
.svc-4::before { background: var(--bar-4); }
.svc:hover {
    transform: translateY(-3px);
    border-color: var(--c-border-2);
    box-shadow: var(--sh-2);
    text-decoration: none;
}
.svc-ico {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    font-size: 30px;
    line-height: 1;
    border-radius: 16px;
    border: 1px solid var(--c-border);
    background: linear-gradient(135deg, var(--c-accent-050), var(--c-primary-050));
}
.svc-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.svc-title {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
    word-break: break-word;
}
.svc-blurb {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-text-2);
    word-break: break-word;
}
.svc-go {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--c-primary);
    opacity: .55;
    transition: transform .18s var(--t), opacity .18s var(--t);
}
.svc:hover .svc-go { transform: translateX(3px); opacity: 1; }

.empty {
    padding: 40px 24px;
    text-align: center;
    background: var(--c-surface);
    border: 1px dashed var(--c-border-2);
    border-radius: var(--r-md);
    color: var(--c-text-2);
}

/* ============================================================
   7. 管理视图
   ============================================================ */
.panel {
    padding: 24px 26px 28px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}
.panel h2 { margin: 0 0 6px; font-size: 20px; }
.panel-intro { margin: 0 0 20px; color: var(--c-text-2); font-size: 14px; line-height: 1.7; }

.status {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--c-bg-deep);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-md);
    font-size: 13px;
}
.status--err { border-left-color: var(--c-danger); background: var(--c-danger-050); }
.status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; min-width: 0; }
.status-k { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--c-text-2); }
.status-v {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--c-text);
    word-break: break-all;
}
.status-ok  { color: var(--c-green-700); font-weight: 600; }
.status-bad { color: var(--c-danger); font-weight: 600; }

.firsttime {
    margin-bottom: 22px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-accent-050) 100%);
    border: 1.5px solid var(--c-accent);
    border-left: 5px solid var(--c-accent);
    border-radius: var(--r-md);
    color: var(--c-accent-700);
    font-size: 13.5px;
    line-height: 1.7;
}
.firsttime-title { margin-bottom: 8px; font-weight: 700; font-size: 14.5px; }
.firsttime ol { margin: 0; padding-left: 22px; }
.firsttime li { margin-bottom: 6px; }
.firsttime li:last-child { margin-bottom: 0; }
.firsttime strong { color: var(--c-primary-900); }

.diag {
    margin-bottom: 22px;
    padding: 14px 16px 12px;
    background: var(--c-bg-deep);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 12.5px;
}
.diag-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
}
.diag-meta { font-weight: 400; font-size: 11px; color: var(--c-text-3); }
.diag-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diag table { width: 100%; margin-bottom: 10px; border-collapse: collapse; font-size: 12px; }
.diag th, .diag td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px dashed var(--c-border-2);
}
.diag th { font-size: 11.5px; font-weight: 600; color: var(--c-text-2); white-space: nowrap; }
.diag code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.45;
    background: var(--tint-code);
    padding: 1px 4px;
    border-radius: 3px;
    word-break: break-all;
}
.diag-verdict {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--c-green-050);
    color: var(--c-green-700);
    font-size: 12.5px;
    line-height: 1.6;
}
.diag-verdict small { display: block; margin-top: 4px; opacity: .9; }
.diag-verdict--err { background: var(--c-warn-050); color: #7a4a08; }
.diag-actions { text-align: right; }

/* ---- 表单 ---- */
.form { display: flex; flex-direction: column; gap: 14px; }
.divider {
    margin: 22px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--c-text);
}
.divider--req { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.divider small { margin-left: 8px; font-weight: 400; font-size: 12.5px; color: var(--c-text-3); }

.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld label { font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.fld small { font-size: 12px; line-height: 1.55; color: var(--c-text-3); }
.req { margin-left: 2px; color: var(--c-primary); font-weight: 700; }

.fld input[type=text],
.fld input[type=password],
.fld input[type=number],
.fld input[type=url],
.fld input[type=tel],
.fld select,
.fld textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--c-text);
    font: inherit;
    font-size: 15px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s var(--t), box-shadow .15s var(--t);
}
.fld select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e5c50' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--ring-primary);
}
.fld--pw1 { padding-left: 12px; border-left: 3px solid var(--c-primary); }
.fld--pw1 input { border-color: var(--c-primary); background: #fffaf9; }

.slot-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--c-bg-deep);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 14px;
    color: var(--c-text-2);
}
.slot-count label { font-weight: 600; }
.slot-count input {
    width: 74px;
    padding: 6px 8px;
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-sm);
    background: #fff;
    font: inherit;
    text-align: center;
}

.slots { display: flex; flex-direction: column; gap: 14px; }
.slot {
    padding: 14px 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.slot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: var(--c-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
.switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--c-text-2);
    cursor: pointer;
    user-select: none;
}
.switch input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--c-primary); }

.row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.row--top { grid-template-columns: 84px minmax(0, 1fr); align-items: end; }
.row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fld textarea { resize: vertical; min-height: 64px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.actions--end { justify-content: flex-end; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--t), border-color .15s var(--t), color .15s var(--t), transform .15s var(--t);
}
.btn-primary {
    background: var(--c-primary);
    color: #fff;
    box-shadow: 0 3px 12px var(--glow-primary);
}
.btn-primary:hover { background: var(--c-primary-700); color: #fff; text-decoration: none; }
.btn-ghost { background: #fff; border-color: var(--c-border-2); color: var(--c-text-2); }
.btn-ghost:hover { background: var(--c-bg-deep); color: var(--c-text); text-decoration: none; }
.btn-warn { background: var(--c-accent); color: #fff; }
.btn-warn:hover { background: var(--c-accent-700); color: #fff; text-decoration: none; }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---- 迷你富文本编辑器外观（与 caiji 视觉同步）---- */
.mini-editor { background: #fff; border: 1px solid var(--c-border-2); border-radius: var(--r-sm); overflow: hidden; }
.mini-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--c-bg-deep);
    border-bottom: 1px solid var(--c-border);
}
.mini-editor-toolbar button {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--c-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.mini-editor-toolbar button:hover { background: var(--c-accent-100); }
.mini-editor-toolbar .me-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--c-border-2); }
.mini-editor-toolbar select {
    width: auto;
    min-width: 64px;
    height: 26px;
    padding: 2px 16px 2px 6px;
    border: 1px solid var(--c-border-2);
    border-radius: 4px;
    font-size: 12px;
    background-position: right 4px center;
}
.mini-editor-palette {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
}
.mini-editor-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid var(--c-border-2);
    border-radius: 3px;
    cursor: pointer;
}
.mini-editor-swatch:hover { border-color: var(--c-primary); }
.mini-editor-area {
    min-height: 160px;
    padding: 10px 12px;
    background: #fff;
    font-size: 15px;
    line-height: 1.65;
    outline: none;
    overflow-y: auto;
    word-break: break-word;
}
.mini-editor-area:empty::before { content: attr(data-placeholder); color: var(--c-text-4); }
.mini-editor-area h3 { margin: 6px 0; font-size: 13px; }

/* ============================================================
   8. 弹层
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(60, 30, 18, .52);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}
.modal[hidden] { display: none; }
.modal-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 24px 26px 26px;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    animation: pop .18s var(--t);
}
@keyframes pop {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.modal-card h3 { margin: 0 0 14px; padding-right: 32px; font-size: 18px; }
.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-text-3);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s var(--t), color .15s var(--t);
}
.modal-close:hover { background: var(--c-bg-deep); color: var(--c-text); }
.modal .btn { margin-top: 14px; }
.tip { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--c-text-3); }
.tip code {
    font-family: var(--font-mono);
    background: var(--c-bg-deep);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--c-text-2);
    word-break: break-all;
}
.tip--danger { color: var(--c-danger); }

/* ============================================================
   9. 页脚
   ============================================================ */
.foot {
    margin-top: auto;
    background: var(--c-surface);
    border-top: 3px solid var(--c-primary);
    color: var(--c-text-3);
    font-size: 13px;
}
.foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.foot-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: #fff;
}
.foot-name { font-weight: 700; letter-spacing: .5px; color: var(--c-text-2); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foot a { color: var(--c-text-2); }
.foot a:hover { color: var(--c-primary); }
.foot-icp { white-space: nowrap; }
.foot-mgr {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-pill);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--t), border-color .15s var(--t), color .15s var(--t);
}
.foot-mgr:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; text-decoration: none; }
.foot-mgr.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.foot-mgr.is-on:hover { background: var(--c-accent-700); border-color: var(--c-accent-700); color: #fff; }

/* ============================================================
   10. 响应式
   ============================================================ */
@media (min-width: 720px) {
    :root { --sp: 28px; }
    .main { padding: 34px 0 64px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .hero { padding: 34px 28px 30px; }
    .hero-logo { max-width: 440px; }
    .row--top { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
    .status { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 26px; padding: 14px 18px; }
    .panel { padding: 28px 32px 32px; }
}

@media (min-width: 1040px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
    .hero-logo { max-width: 300px; }
    /* 2026-09-15：手机上门片较窄，logo 几乎占满宽度，给右上角的配色圆点
       让出一行高度，避免压住校徽右上角。 */
    .hero { padding-top: 42px; }
    .hero .theme-switch { top: 10px; right: 10px; padding: 2px 6px; gap: 4px; }
    .hero .theme-switch .theme-dot { width: 13px; height: 13px; }
    .foot-inner { flex-direction: column; gap: 12px; text-align: center; }
    .foot-brand, .foot-links { justify-content: center; }
    .row--2 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .hero-logo { max-width: 250px; }
    .svc { padding: 16px; gap: 13px; }
    .svc-ico { width: 50px; height: 50px; border-radius: 14px; font-size: 26px; }
    .svc-title { font-size: 16px; }
    .panel { padding: 18px 16px 22px; }
    .slot { padding: 12px; }
}

/* 横屏手机：收紧纵向留白，避免首屏只剩 Hero */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { padding: 14px 20px 16px; }
    .hero-logo { max-width: 220px; }
}

/* ============================================================
   11. 打印
   ============================================================ */
@media print {
    .topbar, .foot, .modal, .skip-link { display: none !important; }
    body { background: #fff; color: #000; }
    .main { padding: 0; }
    .wrap { max-width: 100%; padding: 0; }
    .hero, .notice, .svc { box-shadow: none; border: 1px solid #bbb; page-break-inside: avoid; }
    .svc-go { display: none; }
}

/* ============================================================
   12. 用户偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .topbar-track { animation: none !important; transform: none !important; }
}

@media (prefers-contrast: more) {
    :root { --c-border: #c9a98f; --c-border-2: #b08e73; }
    .svc, .notice, .panel, .hero { border-width: 2px; }
}

/* ============================================================
   13. 多主题配色（2026-09-12 新增）
   ------------------------------------------------------------
   机制：html[data-theme="…"] 覆盖 :root 设计令牌——只换颜色变量，
   不触碰任何布局/尺寸规则；默认（无 data-theme）＝校徽红现配色。
   切换入口：首页 Hero 卡片右上角 .theme-switch；状态存 localStorage
   （key＝site_theme，门户与 /caiji/ 子系统共享同一选择）。
   色彩依据（各校视觉识别系统/官网标准色）：
     · default 校徽红  —— 滕州一中校徽（现有配色）
     · thu    清华紫   —— 清华大学标准色 #660874（PANTONE 268C）＋玫红辅助
     · shnu   师大墨绿 —— 上海师范大学主体色墨绿＋玉兰金辅助
     · xjtlu  西浦蓝   —— 西交利物浦大学标准色西浦蓝 #010544＋西浦紫辅助
   语义色（成功绿/危险红/信息蓝/警示金）四套主题下保持一致，不参与换肤。
   ============================================================ */

/* ---- 清华紫（清华大学）---- */
html[data-theme="thu"] {
    --c-bg: #faf7fb;  --c-bg-deep: #f4eef7;
    --c-surface: #ffffff;  --c-surface-2: #fbf9fc;
    --c-border: #e9deee;  --c-border-2: #d6c2dd;
    --c-text: #2b2430;  --c-text-2: #64536d;  --c-text-3: #73617c;  --c-text-4: #8c7a95;
    --c-primary: #660874;  --c-primary-700: #4d0957;  --c-primary-900: #3f0a48;
    --c-primary-050: #f6eef8;
    --c-accent: #b33790;  --c-accent-700: #8a256e;
    --c-accent-050: #fbeef7;  --c-accent-100: #f5dcef;
    --grad-brand: linear-gradient(135deg, #4d0957 0%, #660874 52%, #7d2187 100%);
    --grad-gold:  linear-gradient(135deg, #b33790 0%, #8a256e 100%);
    --grad-warm:  linear-gradient(180deg, #fdfcff 0%, #faf7fb 100%);
    --bar-0: linear-gradient(90deg, #660874, #8a2f96);
    --bar-1: linear-gradient(90deg, #b33790, #d077b4);
    --bar-2: linear-gradient(90deg, #2f5f8a, #5588b0);
    --bar-3: linear-gradient(90deg, #c9a227, #dfc05a);
    --bar-4: linear-gradient(90deg, #3d2f8f, #6a5ac2);
    --sh-1: 0 1px 2px rgba(58, 27, 66, .05), 0 4px 14px rgba(58, 27, 66, .06);
    --sh-2: 0 4px 10px rgba(58, 27, 66, .08), 0 14px 34px rgba(58, 27, 66, .12);
    --glow-primary: rgba(102, 8, 116, .28);
    --ring-primary: rgba(102, 8, 116, .14);
    --tint-code:    rgba(58, 27, 66, .08);
    --grad-notice:  linear-gradient(90deg, #b33790, #8a256e 62%, #660874);
    --notice-bg:    #fdf8fe;
    --notice-border:#ecd9f0;
    --notice-line:  #e3cbe9;
}

/* ---- 师大墨绿（上海师范大学）---- */
html[data-theme="shnu"] {
    --c-bg: #f7faf8;  --c-bg-deep: #eef5f0;
    --c-surface: #ffffff;  --c-surface-2: #fbfdfc;
    --c-border: #dbe9df;  --c-border-2: #c2d8ca;
    --c-text: #24302b;  --c-text-2: #57655e;  --c-text-3: #65736c;  --c-text-4: #7f8d86;
    --c-primary: #1c5a49;  --c-primary-700: #144437;  --c-primary-900: #103a2f;
    --c-primary-050: #e9f3ef;
    --c-accent: #b07800;  --c-accent-700: #8a5e00;
    --c-accent-050: #fbf3e0;  --c-accent-100: #f3e5c2;
    --grad-brand: linear-gradient(135deg, #144437 0%, #1c5a49 52%, #2a7a5f 100%);
    --grad-gold:  linear-gradient(135deg, #b07800 0%, #8a5e00 100%);
    --grad-warm:  linear-gradient(180deg, #fdfffe 0%, #f7faf8 100%);
    --bar-0: linear-gradient(90deg, #1c5a49, #2a7a5f);
    --bar-1: linear-gradient(90deg, #b07800, #d3a53e);
    --bar-2: linear-gradient(90deg, #2f6f8a, #5795ad);
    --bar-3: linear-gradient(90deg, #7d5a9e, #a17fbf);
    --bar-4: linear-gradient(90deg, #9e4438, #c26b57);
    --sh-1: 0 1px 2px rgba(27, 58, 46, .05), 0 4px 14px rgba(27, 58, 46, .06);
    --sh-2: 0 4px 10px rgba(27, 58, 46, .08), 0 14px 34px rgba(27, 58, 46, .12);
    --glow-primary: rgba(28, 90, 73, .28);
    --ring-primary: rgba(28, 90, 73, .14);
    --tint-code:    rgba(27, 58, 46, .08);
    --grad-notice:  linear-gradient(90deg, #b07800, #8a5e00 62%, #1c5a49);
    --notice-bg:    #fdfcf5;
    --notice-border:#e8e6cf;
    --notice-line:  #dfe0c3;
}

/* ---- 西浦蓝（西交利物浦大学）---- */
html[data-theme="xjtlu"] {
    --c-bg: #f7f8fc;  --c-bg-deep: #eef0f8;
    --c-surface: #ffffff;  --c-surface-2: #fbfcfe;
    --c-border: #dfe2ee;  --c-border-2: #c6cce0;
    --c-text: #232635;  --c-text-2: #585e75;  --c-text-3: #676d85;  --c-text-4: #8188a0;
    --c-primary: #12227d;  --c-primary-700: #010544;  --c-primary-900: #01063f;
    --c-primary-050: #eceefb;
    --c-accent: #ce57c1;  --c-accent-700: #9c2f8f;
    --c-accent-050: #fdeefb;  --c-accent-100: #f8ddf4;
    --grad-brand: linear-gradient(135deg, #010544 0%, #12227d 52%, #28409f 100%);
    --grad-gold:  linear-gradient(135deg, #ce57c1 0%, #9c2f8f 100%);
    --grad-warm:  linear-gradient(180deg, #fdfeff 0%, #f7f8fc 100%);
    --bar-0: linear-gradient(90deg, #12227d, #28409f);
    --bar-1: linear-gradient(90deg, #ce57c1, #e08bdc);
    --bar-2: linear-gradient(90deg, #2f6f8a, #5795ad);
    --bar-3: linear-gradient(90deg, #c9a227, #dfc05a);
    --bar-4: linear-gradient(90deg, #0f5c6b, #2a8a97);
    --sh-1: 0 1px 2px rgba(23, 29, 66, .05), 0 4px 14px rgba(23, 29, 66, .06);
    --sh-2: 0 4px 10px rgba(23, 29, 66, .08), 0 14px 34px rgba(23, 29, 66, .12);
    --glow-primary: rgba(18, 34, 125, .28);
    --ring-primary: rgba(18, 34, 125, .14);
    --tint-code:    rgba(23, 29, 66, .08);
    --grad-notice:  linear-gradient(90deg, #ce57c1, #9c2f8f 62%, #12227d);
    --notice-bg:    #fcfcff;
    --notice-border:#e0dcf0;
    --notice-line:  #d4cfe9;
}

/* ---- 配色选择器（2026-09-15：移到首页 Hero 卡片右上角）---- */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--c-accent-100);
    background: var(--c-surface);
    border-radius: var(--r-pill);
}
/* 在 Hero 卡片里绝对定位到右上角（.hero 已是 position: relative）。
   放在 logo 长方框的角上，不占布局高度、不推开 logo。 */
.hero .theme-switch {
    position: absolute;
    top: 12px;
    right: 14px;
    box-shadow: var(--sh-1);
}
.theme-dot {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 2px solid var(--c-surface);
    border-radius: 50%;
    background: var(--dot, var(--c-primary));
    box-shadow: 0 0 0 1px var(--c-border-2);
    cursor: pointer;
    transition: transform .15s var(--t), box-shadow .15s var(--t);
}
.theme-dot:hover { transform: scale(1.18); }
.theme-dot.is-on { box-shadow: 0 0 0 2px var(--c-primary); }
@media (prefers-reduced-motion: reduce) { .theme-dot:hover { transform: none; } }