/* 颜色、字体和共用间距；图片路径见 data.js。无外部字体或样式依赖。 */
:root {
  --blue: #225b86;
  --blue-dark: #17496e;
  --blue-light: #edf3f7;
  --red: #b33835;
  --ink: #343e47;
  --muted: #899198;
  --line: #dde3e8;
  --paper: #fff;
  --desktop: #edf0f2;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  --serif: "SimSun", "Songti SC", "Noto Serif CJK SC", serif;
  --hand: "STKaiti", "KaiTi", "FangSong", "SimSun", serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--desktop); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; }
img { display: block; max-width: 100%; }
figure, h1, h2, h3, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label[role="button"]:focus-visible { outline: 2px solid #497a9f; outline-offset: 4px; }
button:disabled { cursor: default; }
::selection { color: #163e5a; background: #d7e8f4; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.icon-button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 5px; color: #77838d; border-radius: 3px; }
.icon-button:hover { color: var(--blue); background: #e9eef2; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 预览控制栏位于故事画面之外。 */
.preview-bar { position: sticky; top: 0; z-index: 40; height: 56px; border-bottom: 1px solid #d7dde3; background: #fafbfc; }
.preview-inner { max-width: 1440px; height: 100%; padding: 0 34px; margin: auto; display: flex; align-items: center; gap: 30px; }
.prototype-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.prototype-brand > .icon { color: var(--blue); width: 21px; height: 21px; }
.prototype-brand strong { font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.prototype-brand > span { padding-left: 12px; margin-left: 4px; border-left: 1px solid #d5dbe0; font-size: 11px; color: #8b959e; }
.slice-nav { display: flex; align-self: stretch; gap: 6px; margin: auto; }
.slice-nav a { display: flex; align-items: center; gap: 7px; padding: 0 13px; font-size: 12px; color: #71808c; border-bottom: 2px solid transparent; white-space: nowrap; }
.slice-nav a:hover { color: var(--blue); background: #f0f4f7; }
.slice-nav a.selected { color: var(--blue); background: #eef3f7; border-bottom-color: var(--blue); }
.slice-dot { display: block; width: 5px; height: 5px; background: #a8b5bd; border-radius: 50%; }
.slice-dot.archive { background: #b6a06e; }
.slice-dot.after { background: #b16b63; }
.slice-nav .icon { width: 15px; height: 15px; }
.nav-badge { min-width: 14px; font: 9px/14px Arial, sans-serif; color: white; background: #b45c57; border-radius: 7px; text-align: center; }
.nav-badge:empty { display: none; }
.preview-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.overview-link { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #73808a; }
.overview-link .icon { width: 15px; height: 15px; }
.overview-link:hover, .overview-link.selected { color: var(--blue); }
.reset-button { border-left: 1px solid #dfe4e8; border-radius: 0; padding-left: 12px; width: 32px; }
.reset-button .icon { width: 15px; height: 15px; }
.embedded .preview-bar, .embedded .fiction-note { display: none; }
.embedded .school-site { margin: 0; box-shadow: none; border: 0; }

/* 老式蓝白校网。 */
.school-site { width: calc(100% - 56px); max-width: 1160px; margin: 25px auto 0; background: var(--paper); border: 1px solid #d8dfe5; box-shadow: 0 3px 14px #344b6010; }
.school-utility { display: flex; align-items: center; justify-content: space-between; padding: 7px 25px; background: #f5f6f7; color: #899096; border-bottom: 1px solid #e8ecef; font-size: 11px; line-height: 1.5; }
.school-utility > span:last-child { display: flex; align-items: center; gap: 7px; }
.school-utility i { width: 1px; height: 10px; background: #d4d9dd; margin: 0 5px; }
.school-utility b { color: #c1c7cc; font-weight: normal; }
.school-utility button { font-size: inherit; padding: 0; }
.school-utility button:hover, .school-utility a:hover { color: var(--blue); }
.school-masthead { display: flex; align-items: center; justify-content: space-between; height: 116px; padding: 18px 33px; background: linear-gradient(100deg,#fff 72%,#f6f9fa); }
.school-identity { display: flex; align-items: center; gap: 18px; }
.school-identity h1 { font: bold 36px/1.2 var(--hand); letter-spacing: 4px; color: var(--blue-dark); }
.school-identity p { margin-top: 7px; font: 10px/1.5 Georgia, serif; color: #657c8c; letter-spacing: 2.35px; }
.masthead-right { text-align: right; padding-right: 3px; }
.masthead-right p { font: 19px/1.5 var(--hand); color: #667b88; letter-spacing: 2px; }
.masthead-right span { display: block; font-size: 10px; color: #98a2a9; margin-top: 8px; }
.masthead-right i { margin: 0 10px; font-style: normal; color: #bdc4c9; }
.school-nav { display: grid; grid-template-columns: repeat(7,1fr); background: var(--blue); height: 46px; padding: 0 17px; border-bottom: 3px solid #153f60; }
.school-nav a { display: flex; justify-content: center; align-items: center; gap: 8px; color: #f1f6f9; position: relative; font-size: 14px; letter-spacing: 1px; }
.school-nav a + a:before { content: ''; position: absolute; width: 1px; height: 13px; background: #ffffff25; left: 0; }
.school-nav a:hover { background: #174c76; }
.school-nav a.active { background: #163f60; }
.school-nav a.active:after { content: ''; width: 18px; height: 2px; background: #c9a75c; position: absolute; bottom: -3px; left: calc(50% - 9px); }
.school-nav .icon { width: 15px; height: 15px; }
.home-content { padding: 22px 24px 21px; }
.home-lead { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 19px; }
.campus-banner { height: 295px; position: relative; overflow: hidden; background: #b6c2cb; }
.banner-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; filter: saturate(.78); }
.banner-photo.slide-1 { object-position: 80% 50%; transform: scale(1.12); }
.banner-photo.slide-2 { object-position: 40% 70%; transform: scale(1.05); }
.banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#102b4159 0%,#102b4112 55%,transparent 100%); }
.banner-copy { position: absolute; top: 45px; left: 32px; right: 28px; color: #fff; text-shadow: 0 1px 4px #102b4129; }
.banner-copy p { font-size: 11px; letter-spacing: 2px; padding-left: 1px; opacity: .94; }
.banner-copy h2 { font: 34px/1.4 var(--hand); letter-spacing: 2px; margin: 14px 0 10px; }
.banner-copy > span { font-size: 12px; letter-spacing: 1px; }
.banner-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; color: #fff; background: #18374caa; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: 11px; }
.slide-dots { display: flex; gap: 5px; }
.slide-dots button { width: 18px; height: 18px; padding: 0; background: #ffffff2d; color: #fff; font: 10px/18px Arial,sans-serif; }
.slide-dots button.active { color: #5c513a; background: #e4d7b4; }
.banner-arrow { position: absolute; width: 26px; height: 38px; top: calc(50% - 19px); background: #17394c40; color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.campus-banner:hover .banner-arrow, .campus-banner:focus-within .banner-arrow { opacity: 1; }
.banner-arrow.prev { left: 0; transform: rotate(180deg); }
.banner-arrow.next { right: 0; }
.countdown-card { border: 1px solid #e1dcd0; background: #fbfaf6; text-align: center; position: relative; padding: 20px 15px 13px; color: #756c5a; }
.countdown-card:before, .countdown-card:after { content: ''; position: absolute; width: 11px; height: 11px; border-color: #c9b88d; border-style: solid; }
.countdown-card:before { border-width: 1px 0 0 1px; top: 6px; left: 6px; }
.countdown-card:after { border-width: 0 1px 1px 0; bottom: 6px; right: 6px; }
.exam-ribbon { display: block; font: 11px/1.7 var(--serif); color: #8f816a; padding-bottom: 13px; border-bottom: 1px solid #e7e0d3; letter-spacing: .5px; white-space: nowrap; }
.countdown-card > p { font-size: 16px; letter-spacing: 3px; margin-top: 17px; }
.day-number { display: flex; align-items: baseline; justify-content: center; height: 99px; margin: 1px 0 5px; }
.day-number strong { color: var(--red); font: 94px/.98 Georgia, "Times New Roman", serif; font-weight: normal; }
.day-number > span { font: 17px var(--serif); color: #8d7b65; margin-left: 9px; }
.exam-date { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; color: #9a917e; padding-bottom: 14px; border-bottom: 1px solid #e7e0d3; }
.exam-date .icon { width: 12px; height: 12px; }
.exam-wish { font: 16px/1.6 var(--hand); letter-spacing: 2px; margin-top: 10px; color: #8c7757; }
.exam-wish span { margin: 0 8px; color: #b6a88c; }
.countdown-card > small { font-size: 10px; color: #a59b86; }
.home-columns { display: grid; grid-template-columns: 1.12fr 1fr 260px; gap: 23px; margin-top: 22px; }
.home-columns > * { min-width: 0; }
.panel-heading { height: 37px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.panel-heading h2 { color: var(--blue); font-size: 17px; font-weight: 600; letter-spacing: 1px; line-height: 36px; border-bottom: 2px solid var(--blue); margin-top: -1px; }
.panel-heading > a { color: #9ba2a8; font-size: 10px; line-height: 34px; }
.panel-heading > a:hover { color: var(--blue); }
.panel-heading.red h2 { color: var(--red); border-bottom-color: var(--red); }
.news-feature { display: flex; gap: 13px; margin-bottom: 13px; }
.news-feature > img { width: 119px; height: 79px; object-fit: cover; filter: saturate(.7); }
.news-feature h3 { font-size: 14px; font-weight: 600; color: var(--blue); margin: 0 0 5px; }
.news-feature p { font-size: 10px; line-height: 1.85; color: #8e969d; }
.news-feature small { display: block; font: 10px/1.7 Arial,sans-serif; color: #a4abb1; margin-top: 4px; }
.dated-list { list-style: none; padding: 0; margin: 0; }
.dated-list li { display: flex; align-items: baseline; gap: 9px; font-size: 11px; line-height: 2.8; }
.dated-list li:before { content: ''; height: 3px; width: 3px; background: #9caab6; align-self: center; flex-shrink: 0; }
.dated-list a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dated-list time { margin-left: auto; flex-shrink: 0; color: #a5acb2; font: 10px Arial,sans-serif; }
.dated-list a:hover, .news-feature:hover h3 { color: var(--red); }
.notice-list { list-style: none; padding: 0; margin: -2px 0 0; }
.notice-list li { display: flex; gap: 12px; align-items: center; border-bottom: 1px dotted #e0e4e7; min-height: 55px; padding: 8px 0; }
.notice-list li:last-child { border: 0; }
.notice-date { width: 38px; flex-shrink: 0; color: #9babb9; text-align: center; line-height: 1.1; }
.notice-date strong { font: 22px/1.15 Georgia,serif; }
.notice-date small { display: block; font: 8px/1.9 Arial,sans-serif; color: #a5adb4; }
.notice-list li > div { line-height: 1.7; font-size: 11px; }
.notice-list a:hover { color: var(--blue); }
.notice-list li > div > small { display: block; font-size: 9px; color: #a6a8a9; margin-top: 2px; }
.pinned-notice > div > a { color: var(--red); }
.pinned-notice .notice-date { color: #b4605a; }
.alumni-callout { background: #f0f5f8; border: 1px solid #d9e3eb; position: relative; text-align: center; padding: 16px 15px 14px; overflow: hidden; }
.alumni-tag { text-align: left; color: #97a9b7; font-size: 9px; letter-spacing: 1px; }
.alumni-icon { position: absolute; width: 110px; height: 110px; color: #dfe8ee; transform: rotate(-14deg); right: -16px; top: 25px; stroke-width: .8; }
.alumni-year { font: 39px/1.2 Georgia,serif; color: #7696ae; margin: 9px 0 4px; position: relative; }
.alumni-year > span { font: 14px var(--serif); margin-left: 6px; }
.alumni-callout h2 { font: bold 20px/1.6 var(--serif); letter-spacing: 1px; color: #315d7b; position: relative; }
.alumni-description { color: #8c9ca7; font: 11px/1.9 var(--serif); margin: 10px 0 18px; position: relative; }
.alumni-button { display: flex; align-items: center; justify-content: center; gap: 26px; border: 1px solid #b7cbd9; color: #3c6b8e; height: 35px; font-size: 11px; background: #ffffff77; position: relative; }
.alumni-button .icon { width: 16px; height: 16px; }
.alumni-button:hover { background: #225b86; color: white; border-color: #225b86; }
.alumni-callout > small { font-size: 9px; color: #a0adb6; display: block; margin-top: 11px; }
.exam-links { display: flex; align-items: center; padding: 16px 20px; border: 1px solid #e0e5e9; margin-top: 23px; background: #f8fafb; gap: 0; }
.exam-links > div { display: flex; align-items: center; gap: 11px; color: var(--red); width: 29%; }
.exam-links > div > .icon { width: 30px; height: 30px; stroke-width: 1.2; }
.exam-links strong { display: block; font: bold 17px/1.5 var(--serif); letter-spacing: 1px; }
.exam-links small { display: block; font-size: 9px; letter-spacing: 1px; color: #a3a1a0; margin-top: 2px; }
.exam-links > a { display: flex; justify-content: center; align-items: center; gap: 18px; flex: 1; padding: 3px 10px; border-left: 1px solid #dde3e8; color: #5d6d7a; font-size: 12px; white-space: nowrap; }
.exam-links > a .icon { width: 12px; height: 12px; color: #9eabb5; }
.exam-links > a:hover { color: var(--red); }
.school-friendly { display: flex; align-items: center; gap: 10px; padding: 12px 25px; background: #f4f6f8; border-top: 1px solid #e5e9ec; color: #8e989f; font-size: 10px; }
.school-friendly button { padding: 0; font-size: inherit; }
.school-friendly button:hover { color: var(--blue); }
.school-friendly b { font-weight: normal; color: #c2c9cf; }
.school-friendly .maintenance-link { margin-left: auto; color: #98a7b2; }
.school-footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 22px; color: #a0a8ae; border-top: 1px solid #e7ebee; }
.school-footer > img { opacity: .42; }
.school-footer p { font-size: 9px; line-height: 1.9; text-align: center; }
.school-footer > span { font: 12px/1.55 var(--hand); padding-left: 25px; margin-left: 6px; border-left: 1px solid #e1e6ea; color: #a7b3bc; }
.fiction-note { max-width: 1160px; margin: 12px auto 24px; color: #a1aab3; font-size: 10px; text-align: center; letter-spacing: .5px; }
.fiction-note span { margin: 0 10px; }

/* 档案与新闻详情页沿用同一套校网框架。 */
.archive-strip { display: flex; align-items: center; justify-content: space-between; padding: 12px 25px; background: #f1f5f8; border-bottom: 1px solid #dce5eb; }
.archive-strip > div { display: flex; align-items: center; gap: 10px; }
.archive-strip .icon { width: 18px; height: 18px; color: #7695aa; }
.archive-strip strong { color: #416d8c; font-size: 13px; font-weight: 600; }
.archive-strip > div > span { color: #9aabb7; font-size: 10px; border-left: 1px solid #ccd9e2; padding-left: 13px; margin-left: 4px; }
.archive-strip > p { font-size: 12px; color: #788b99; }
.archive-strip > p > strong { color: var(--red); font: 27px/1 Georgia,serif; padding: 0 6px; }
.article-area { padding: 0 25px 26px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: #8c99a4; font-size: 10px; height: 44px; border-bottom: 1px solid #e8edf0; }
.breadcrumbs .icon { width: 12px; height: 12px; color: #97a8b6; }
.breadcrumbs > span { color: #b0b9c1; }
.breadcrumbs > span:last-child { color: #8e9aa4; }
.breadcrumbs a:hover { color: var(--blue); }
.article-grid { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 29px; padding-top: 24px; }
.article-sidebar > h2 { background: var(--blue); color: white; font-size: 17px; font-weight: 400; padding: 14px 18px; letter-spacing: 2px; }
.article-sidebar > nav { background: #f7f9fa; border: 1px solid #e1e7ec; border-top: 0; }
.article-sidebar > nav > a, .article-sidebar > nav > button { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 12px; padding: 13px 16px; border-bottom: 1px solid #e5eaee; color: #7e8a94; text-align: left; }
.article-sidebar > nav > :last-child { border-bottom: 0; }
.article-sidebar > nav .icon { width: 12px; height: 12px; color: #9fadb8; }
.article-sidebar > nav .active { background: #edf3f7; color: var(--blue); border-left: 3px solid var(--blue); padding-left: 13px; }
.article-sidebar > nav > :hover { background: #eef3f6; color: var(--blue); }
.sidebar-note { background: #f7f8f6; padding: 18px 15px; border: 1px solid #e6e8e1; margin-top: 19px; }
.sidebar-note > span { font-size: 9px; letter-spacing: 2px; color: #9e9e8c; }
.sidebar-note h3 { font: 17px/1.5 var(--hand); color: #77816c; margin: 6px 0; }
.sidebar-note p { font-size: 10px; color: #9b9f93; line-height: 1.9; }
.sidebar-note button { padding: 0; display: flex; align-items: center; gap: 22px; margin-top: 13px; color: #8c937d; font-size: 10px; }
.sidebar-note button .icon { width: 14px; height: 14px; }
.related-news { margin-top: 23px; }
.related-news h3 { color: #638199; font-size: 12px; font-weight: normal; padding-bottom: 11px; border-bottom: 1px solid #dfe6eb; }
.related-news a { display: block; font-size: 11px; line-height: 1.9; margin-top: 12px; color: #8d969d; padding-left: 9px; position: relative; }
.related-news a:before { content: '·'; position: absolute; left: 0; }
.related-news a:hover { color: var(--blue); }
.related-news small { display: block; font-size: 9px; color: #a1aba0; }
.archive-number { margin-top: 30px; padding-top: 14px; border-top: 1px solid #edf0f2; font: 9px/2 Arial,var(--sans); color: #b4bdc4; letter-spacing: 1px; }
.article-paper { min-width: 0; }
.article-heading { text-align: center; border-bottom: 1px dashed #dbe1e6; padding: 7px 0 18px; }
.article-category { font-size: 10px; color: #a2adb5; letter-spacing: 2px; }
.article-heading h2 { font: bold 24px/1.65 var(--serif); letter-spacing: 1px; color: #344f64; margin: 9px 5px 12px; }
.article-meta { display: flex; justify-content: center; gap: 17px; color: #a0a9b0; font-size: 9px; }
.article-meta button { font: inherit; padding: 0 1px; color: #7e929f; }
.article-body { padding-top: 19px; font: 14px/2.05 var(--serif); color: #646d74; }
.article-body > p { margin: 0 0 20px; text-indent: 2em; }
.article-body .notice-academic-link { color: #235c96; text-decoration: underline; text-underline-offset: 2px; }
.article-body.large-text { font-size: 17px; }
.wide-photo { margin: 21px 0 23px; }
.photo-button { display: block; padding: 0; width: 100%; position: relative; overflow: hidden; background: #e3e6e5; }
.wide-photo .photo-button img { width: 100%; height: 312px; object-fit: cover; object-position: center 45%; filter: saturate(.74); }
.class-photo .photo-button img { height: auto; object-fit: contain; }
.photo-enlarge { position: absolute; right: 11px; bottom: 11px; font: 9px/1.4 var(--sans); color: #fff; background: #233e4c94; display: flex; align-items: center; gap: 5px; padding: 5px 7px; opacity: 0; transition: opacity .15s; }
.photo-enlarge .icon { width: 12px; height: 12px; }
.photo-button:hover .photo-enlarge, .photo-button:focus-visible .photo-enlarge { opacity: 1; }
.wide-photo figcaption { font: 10px/1.6 var(--sans); color: #a1a8ad; text-align: center; margin-top: 10px; }
.table-caption { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
.table-caption > strong { font: bold 14px var(--serif); color: #536d80; }
.table-caption > span { font: 9px Arial,var(--sans); color: #a1abb4; }
.table-scroll { overflow-x: auto; }
.student-table { width: 100%; border-collapse: collapse; font: 11px/1.6 var(--sans); white-space: nowrap; }
.student-table th { background: #edf2f6; color: #6b8599; font-weight: normal; padding: 11px 10px; border: 1px solid #dce4eb; }
.student-table td { padding: 12px 8px; border: 1px solid #e1e6eb; text-align: center; color: #7a858d; }
.student-table td:first-child, .student-table td:last-child { color: #9ba4ab; font: 10px Arial,sans-serif; }
.student-table tr:nth-child(even) td { background: #fafbfc; }
.record-status { color: #758a76; }
.article-body > .record-footnote { font: 9px/1.8 var(--sans); color: #a7afb5; margin-top: 10px; text-indent: 0; }
.article-signature { text-align: right; color: #8f979d; margin: 27px 0 24px; font: 11px/2 var(--serif); }
.correction-box { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px; background: #f5f8fa; border: 1px solid #dfe7ed; margin: 22px 0; font-family: var(--sans); }
.correction-box > div { display: flex; align-items: center; gap: 12px; }
.correction-box > div > .icon { width: 24px; height: 24px; color: #8da6b9; }
.correction-box strong { display: block; font-size: 12px; color: #698295; font-weight: normal; }
.correction-box small { display: block; font-size: 9px; color: #9aa8b3; margin-top: 2px; }
.school-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 17px; background: var(--blue); color: #fff; border: 1px solid var(--blue); font: 12px/1.6 var(--sans); white-space: nowrap; }
.school-button:hover { background: #18496d; }
.school-button .icon { width: 14px; height: 14px; }
.article-bottom-links { border-top: 1px solid #e4e9ed; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; font: 10px/1.6 var(--sans); color: #96a4af; }
.article-bottom-links > a:hover { color: var(--blue); }
.attendance-record { display: grid; grid-template-columns: repeat(4,1fr); margin: 24px 0; border: 1px solid #dfe5e9; background: #f7f9fa; padding: 17px 0; }
.attendance-record > div { text-align: center; border-right: 1px solid #e1e6ea; }
.attendance-record > div:last-child { border-right: 0; }
.attendance-record small { display: block; font: 10px/1.6 var(--sans); color: #98a4ae; }
.attendance-record strong { font: 26px/1.5 Georgia,serif; color: #637f92; }
.attendance-record strong > span { font: 10px var(--sans); margin-left: 5px; }
.pending-record { border: 1px solid #e4d8c3; background: #fdfbf7; padding: 17px 18px; margin: 28px 0; }
.pending-record > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pending-label { font: 10px/1.5 var(--sans); color: #9a7752; padding: 3px 7px; background: #f1e9dc; }
.pending-record small { font: 9px Arial,var(--sans); color: #b7aa99; }
.pending-record h3 { font: bold 15px/1.7 var(--serif); color: #8b7e69; margin: 14px 0 7px; }
.pending-record > p { font-size: 12px; color: #a09585; }
.pending-record > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; padding-top: 12px; border-top: 1px solid #ede6da; }
.pending-record footer > span { font: 10px/1.6 var(--sans); color: #afa08b; }
.pending-record footer > button { display: flex; align-items: center; gap: 10px; color: #9e7c4c; font: 11px var(--sans); white-space: nowrap; padding: 3px 0; }
.pending-record button .icon { width: 13px; height: 13px; }
.normal-article { min-height: 550px; }

/* 原创桌面通讯界面。 */
body[data-surface="chat"] { background: #e4e9e9; }
.chat-desktop { max-width: 1150px; width: calc(100% - 64px); margin: 20px auto 0; }
.chat-desktop-caption { display: flex; align-items: center; justify-content: space-between; height: 31px; margin-bottom: 8px; color: #8b989b; }
.chat-desktop-caption > span { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1px; }
.chat-desktop-caption .icon { width: 15px; height: 15px; color: #6e8c86; }
.chat-desktop-caption > small { font: 10px Arial,var(--sans); color: #97a4a7; }
.chat-window { height: min(750px,calc(100svh - 173px)); min-height: 550px; display: grid; grid-template-columns: 58px 256px minmax(0,1fr); border: 1px solid #cfd8d8; box-shadow: 0 12px 40px #29443b13; overflow: hidden; }
.chat-rail { background: #35423f; display: flex; flex-direction: column; align-items: center; padding-top: 23px; gap: 17px; }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; position: relative; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px; font-size: 17px; font-family: var(--serif); color: #fff; vertical-align: middle; }
.avatar-flower { background: #d7c18b; }
.flower-stem { position: absolute; width: 2px; height: 25px; background: #7c8f65; left: 20px; bottom: -3px; transform: rotate(14deg); }
.flower-stem:after { content: ''; width: 13px; height: 7px; background: #819568; border-radius: 0 100% 0 100%; position: absolute; right: -1px; bottom: 9px; transform: rotate(15deg); }
.flower-head { position: absolute; color: #f7f4df; left: 8px; top: -8px; font-size: 33px; text-shadow: 1px 1px #a2845b20; }
.avatar-self { background: #a4bab4; }
.landscape-sun { position: absolute; width: 9px; height: 9px; background: #e2dbb4; border-radius: 50%; top: 6px; right: 7px; }
.landscape-mountain { position: absolute; width: 45px; height: 31px; background: #5d8079; transform: rotate(-30deg); left: -10px; bottom: -15px; }
.landscape-mountain:after { content: ''; position: absolute; width: 40px; height: 30px; background: #839d87; transform: rotate(58deg); top: -3px; left: 18px; }
.avatar-class { background: #a0b4c0; flex-direction: column; color: #f6f9fa; }
.avatar-class strong { font-size: 20px; line-height: 1.1; font-weight: normal; }
.avatar-class small { font: 5px/1.7 Arial,sans-serif; letter-spacing: 1.5px; }
.avatar-alumni { background: #e6e6dd; padding: 5px; }
.avatar-alumni img { width: 100%; opacity: .75; }
.avatar-rain { background: #b3bfc1; color: #edf1ef; }
.avatar-file { background: #9db78d; }
.avatar-file .icon { width: 24px; height: 24px; stroke-width: 1.2; color: #f5faf2; }
.avatar-blue { background: #849eac; color: #e9f0f3; }
.avatar-director { background: #798b95; color: #f2f4f5; }
.avatar-ochre { background: #baa77e; color: #f9f2e0; }
.avatar-rose { background: #b39c9c; color: #f9eeee; }
.rail-avatar { width: 34px; height: 34px; margin-bottom: 13px; border: 1px solid #ffffff19; }
.rail-button { width: 35px; height: 34px; padding: 6px; color: #91a09c; display: flex; align-items: center; justify-content: center; position: relative; }
.rail-button .icon { width: 23px; height: 23px; }
.rail-button:hover { color: #d0dcd6; }
.rail-button.active { color: #b5d2be; }
.rail-button > i { width: 6px; height: 6px; background: #c1776c; border: 1px solid #35423f; border-radius: 50%; position: absolute; right: 4px; top: 3px; }
.rail-bottom { margin-top: auto; margin-bottom: 20px; }
.contacts-panel { background: #e9eceb; border-right: 1px solid #dce1de; position: relative; display: flex; flex-direction: column; min-width: 0; }
.contacts-search { height: 75px; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.contacts-search > label { display: flex; align-items: center; height: 28px; background: #dce1df; border: 1px solid #d9dedb; border-radius: 3px; width: calc(100% - 35px); padding: 0 7px; gap: 5px; }
.contacts-search .icon { width: 12px; height: 12px; color: #9ca7a2; }
.contacts-search input { border: 0; background: none; width: 100%; min-width: 0; font-size: 10px; color: #677b71; }
.contacts-search input:focus-visible { outline: 0; }
.contacts-search label:focus-within { outline: 1px solid #9bb8aa; background: #f1f5f2; }
.contacts-search input::placeholder { color: #929d96; }
.contacts-search > button { background: #dce1df; border-radius: 3px; width: 27px; height: 28px; font-size: 18px; color: #9aa59e; padding: 0; }
.contact-item { display: flex; align-items: center; position: relative; width: 100%; min-height: 77px; padding: 13px 14px; gap: 11px; text-align: left; }
.contact-item:hover { background: #dee4e0; }
.contact-item.pinned { background: #e2e7e3; }
.contact-item.active { background: #d2dcd6; }
.contact-avatar { flex: 0 0 auto; position: relative; }
.contact-item .avatar { width: 39px; height: 39px; }
.unread-count { position: absolute; top: -5px; right: -5px; min-width: 16px; padding: 0 4px; height: 16px; border-radius: 9px; color: white; background: #bc6a60; text-align: center; font: 10px/16px Arial,sans-serif; }
.contact-copy { min-width: 0; display: block; width: 100%; }
.contact-copy > strong { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #4c5851; white-space: nowrap; overflow: hidden; padding-right: 24px; }
.contact-copy > strong > .icon { width: 10px; height: 10px; color: #a0aca3; }
.contact-copy > small { display: block; font-size: 10px; color: #8a968f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.contact-item > time { position: absolute; top: 15px; right: 13px; font: 8px/1.5 Arial,var(--sans); color: #a5afa9; }
.contacts-footer { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 16px 10px; color: #9fafa5; font-size: 8px; letter-spacing: 1px; }
.contacts-footer .icon { width: 11px; height: 11px; }
.contact-empty { padding: 30px 10px; text-align: center; font-size: 11px; color: #a0aba4; }
.conversation { min-width: 0; display: flex; flex-direction: column; background: #f2f4f2; position: relative; min-height: 0; }
.conversation-header { display: flex; align-items: center; justify-content: space-between; height: 75px; flex-shrink: 0; border-bottom: 1px solid #e0e5e0; padding: 0 26px; }
.conversation-header h2 { font-size: 16px; font-weight: 500; color: #3f4f45; line-height: 1.4; }
.conversation-header h2 > span { font-size: 13px; color: #8b9990; }
.conversation-header p { font-size: 9px; color: #a3aea6; margin-top: 4px; }
.conversation-header .icon-button:hover { background: #e3e9e3; color: #5b7b66; }
.mobile-contacts { display: none; }
.messages { flex: 1; overflow-y: auto; min-height: 0; padding: 10px 27px 26px; scrollbar-width: thin; scrollbar-color: #cdd8d0 transparent; }
.chat-time { text-align: center; font: 9px/1.5 Arial,var(--sans); color: #a5afa7; margin: 16px 0 21px; }
.message-row { display: flex; gap: 11px; align-items: flex-start; margin-top: 17px; }
.message-row > .avatar { width: 34px; height: 34px; border-radius: 3px; }
.message-stack { max-width: calc(100% - 100px); min-width: 0; }
.message-name { display: block; font-size: 9px; color: #98a39b; line-height: 1.3; margin: -1px 0 5px 1px; }
.message-content { display: flex; align-items: center; position: relative; gap: 8px; }
.message-bubble { position: relative; display: inline-block; background: #fff; border: 1px solid #e3e8e1; padding: 9px 12px; color: #4d574f; border-radius: 3px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.message-bubble:before { content: ''; position: absolute; top: 11px; left: -5px; width: 7px; height: 7px; transform: rotate(45deg); background: white; border-left: 1px solid #e3e8e1; border-bottom: 1px solid #e3e8e1; }
.message-row.own { flex-direction: row-reverse; }
.own .message-bubble { background: #cde4bf; border-color: #c2d9b4; color: #45553d; }
.own .message-bubble:before { right: -5px; left: auto; border: 0; border-right: 1px solid #c2d9b4; border-top: 1px solid #c2d9b4; background: #cde4bf; }
.own .message-content { flex-direction: row-reverse; }
.chat-link-card { width: 270px; max-width: 100%; background: white; border: 1px solid #dfe6df; border-radius: 3px; padding: 12px 12px 0; display: grid; grid-template-columns: 1fr 40px; gap: 12px 10px; }
.chat-link-card strong { color: #49584e; font-size: 12px; font-weight: normal; line-height: 1.7; display: block; }
.chat-link-card small { color: #a6aea5; font-size: 9px; display: block; margin-top: 6px; }
.chat-link-card footer { display: flex; align-items: center; gap: 5px; grid-column: 1/-1; padding: 6px 0; border-top: 1px solid #edf0eb; color: #a3aea4; font-size: 8px; }
.chat-link-card footer .icon { width: 10px; height: 10px; color: #829881; }
.chat-link-card:hover { background: #fafcf9; }
.message-failed { position: absolute; left: -25px; top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; color: white; background: #c6645c; font: bold 11px/16px Arial,sans-serif; padding: 0; }
.message-failed:hover { background: #ad4841; }
.failure-caption { display: block; color: #ad9891; font-size: 9px; margin-top: 6px; text-align: right; }
.message-sending { position: absolute; width: 13px; height: 13px; left: -22px; border: 1px solid #a6b4a9; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.chat-photo { max-width: 220px; background: #fff; padding: 4px; border: 1px solid #dfe5df; border-radius: 3px; text-align: left; }
.chat-photo > img { max-height: 180px; object-fit: cover; width: 100%; }
.chat-photo > span { display: block; font-size: 9px; color: #9ba69d; padding: 5px; overflow-wrap: anywhere; }
.empty-conversation { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: .55; }
.empty-conversation p { color: #98a69a; font-size: 11px; }
.empty-conversation .avatar { width: 48px; height: 48px; }
.chat-composer { border-top: 1px solid #dce3dc; background: #fafbf9; height: 153px; flex-shrink: 0; padding: 12px 22px 11px; position: relative; }
.composer-tools { display: flex; align-items: center; gap: 14px; height: 21px; color: #8d9b90; }
.composer-tools > button, .file-tool { display: flex; padding: 0; cursor: pointer; }
.composer-tools .icon { width: 19px; height: 19px; }
.composer-tools > button:hover, .file-tool:hover { color: #4d795a; }
.composer-hint { margin-left: auto; font-size: 9px; color: #b5bdb4; }
.chat-composer textarea { display: block; border: 0; outline: 0; resize: none; background: transparent; width: 100%; height: 65px; padding: 12px 0 2px; color: #566453; font-size: 12px; line-height: 1.8; }
.chat-composer textarea:focus-visible { outline: 0; }
.chat-composer textarea::placeholder { color: #bac2b9; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.composer-bottom > small { font-size: 9px; color: #b3bdb2; }
.send-button { background: #e9efe5; border: 1px solid #d4e0cd; color: #68805a; padding: 4px 16px; font-size: 11px; border-radius: 2px; }
.send-button > span { margin-left: 9px; color: #a4b79a; font-size: 12px; }
.send-button:hover { background: #dbe8d2; border-color: #b7cdab; }
.emoji-picker { position: absolute; top: -54px; left: 18px; display: flex; align-items: center; gap: 3px; height: 45px; padding: 5px; background: white; border: 1px solid #dce5d9; border-radius: 4px; box-shadow: 0 4px 12px #3b553117; z-index: 2; }
.emoji-picker button { padding: 6px; font-size: 16px; border-radius: 2px; }
.emoji-picker button:hover { background: #eef3e9; }
.emoji-picker button:nth-last-child(-n+2) { font-size: 10px; }
.contact-info { position: absolute; right: 0; top: 75px; bottom: 0; width: 240px; background: #fdfefb; border-left: 1px solid #dce4d9; padding: 45px 22px; z-index: 5; box-shadow: -6px 0 20px #24382308; text-align: center; }
.contact-info .icon-button { position: absolute; right: 9px; top: 9px; }
.contact-info .avatar { width: 50px; height: 50px; }
.contact-info h3 { margin-top: 14px; font-size: 14px; font-weight: normal; color: #677660; }
.contact-info p { font-size: 10px; line-height: 1.8; color: #9aa490; margin-top: 13px; }
.contact-info > small { display: block; margin-top: 27px; font-size: 10px; line-height: 2; color: #b0b7a6; }
.chat-footnote { display: flex; align-items: center; gap: 8px; color: #9ca9a2; font-size: 9px; height: 45px; }
.connection-dot { width: 5px; height: 5px; border-radius: 50%; background: #91ae96; }
.chat-footnote > a:last-child { margin-left: auto; }
.chat-footnote a:hover { color: #557b60; }

/* 切片总览与影像画廊。 */
body[data-surface="overview"] { background: #f3f5f5; }
.overview-page { max-width: 1130px; width: calc(100% - 72px); margin: 0 auto; padding-top: 49px; }
.overview-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 31px; border-bottom: 1px solid #d8e0e2; margin-bottom: 30px; }
.overview-heading > div > p { font-size: 10px; letter-spacing: 3px; color: #7b95a6; margin-bottom: 15px; }
.overview-heading h1 { font: 36px/1.5 var(--serif); letter-spacing: 3px; color: #34566d; }
.overview-heading > div > span { color: #a1aeb5; font-size: 10px; display: block; margin-top: 14px; letter-spacing: 1px; }
.overview-heading > aside { font: 12px/2.2 var(--serif); color: #99a5ad; text-align: right; padding-bottom: 4px; }
.slice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.slice-card { background: #fff; border: 1px solid #dfe5e8; overflow: hidden; }
.slice-card:hover { border-color: #9eb7c6; }
.slice-thumbnail { height: 253px; overflow: hidden; background: #e9eff2; border-bottom: 1px solid #e4e9ec; pointer-events: none; position: relative; }
.slice-card-copy { position: relative; display: flex; gap: 16px; padding: 22px 20px 41px; align-items: flex-start; }
.slice-number { font: 20px/1.5 Georgia,serif; color: #c2ccd1; }
.slice-card-copy h2 { font-size: 14px; font-weight: normal; color: #476477; margin-top: 2px; }
.slice-card-copy p { font-size: 10px; color: #a1abb2; margin-top: 7px; }
.slice-card-copy > .icon { margin-left: auto; width: 17px; height: 17px; margin-top: 5px; color: #a5b4bd; }
.slice-card-copy > small { position: absolute; bottom: 14px; left: 60px; font-size: 9px; color: #8ba4b4; }
.mini-school { background: #fff; padding: 16px 18px; height: 100%; font-family: var(--sans); }
.mini-masthead { display: flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 10px; }
.mini-masthead > img { width: 28px; height: 28px; }
.mini-masthead > strong { color: var(--blue); font: bold 19px var(--hand); letter-spacing: 2px; }
.mini-masthead > small { color: #99a9b4; font: 8px var(--hand); margin-left: auto; }
.mini-nav { background: var(--blue); color: #e8eff5; font-size: 7px; height: 20px; padding: 4px 10px; text-align: center; white-space: nowrap; }
.mini-hero { display: flex; gap: 8px; margin-top: 11px; height: 101px; }
.mini-hero > img { width: 74%; object-fit: cover; object-position: 50% 55%; filter: saturate(.6); }
.mini-hero > div { flex: 1; background: #f8f6f0; color: #a49479; text-align: center; font-size: 7px; padding: 11px 0; border: 1px solid #e7e1d5; }
.mini-hero > div > strong { display: block; font: 47px/1.3 Georgia,serif; color: var(--red); }
.mini-hero strong > small { font: 9px var(--serif); margin-left: 5px; }
.mini-lines { display: flex; gap: 22px; color: #a6b1b9; font-size: 7px; line-height: 2.3; margin-top: 8px; }
.mini-lines > span { width: 50%; }
.mini-article { display: flex; gap: 14px; margin-top: 15px; }
.mini-side { width: 22%; flex-shrink: 0; font-size: 8px; color: #94a6b2; padding: 6px; background: #f2f5f7; }
.mini-side hr { height: 1px; border: 0; background: #e1e8ed; margin: 8px 0; }
.mini-article-main { flex: 1; text-align: center; }
.mini-article-main > strong { display: block; font: bold 12px/1.6 var(--serif); color: #607e92; }
.mini-article-main > small { display: block; font-size: 6px; color: #b0bbc4; margin-top: 4px; }
.mini-article-main > img { width: 100%; height: 115px; object-fit: cover; margin-top: 10px; filter: saturate(.6); }
.mini-chat { display: flex; height: 100%; font-size: 8px; }
.mini-rail { background: #35423f; width: 31px; display: flex; align-items: center; flex-direction: column; gap: 16px; padding: 23px 0; color: #a8bbb0; }
.mini-rail .icon { width: 13px; height: 13px; }
.mini-contacts { width: 145px; background: #e3e8e4; padding-top: 25px; }
.mini-contacts > div { display: flex; align-items: center; gap: 7px; padding: 10px 8px; }
.mini-contacts .avatar { width: 23px; height: 23px; border-radius: 2px; font-size: 13px; }
.mini-contacts .flower-head { left: 3px; top: -9px; font-size: 25px; }
.mini-contacts .flower-stem { left: 14px; }
.mini-contacts .avatar-class strong { font-size: 14px; }
.mini-contacts .avatar-class small { font-size: 3px; }
.mini-contacts > div > span:last-child { display: block; color: #788779; min-width: 0; white-space: nowrap; }
.mini-contacts small { display: block; max-width: 95px; overflow: hidden; text-overflow: ellipsis; color: #a4afa4; font-size: 6px; margin-top: 3px; }
.mini-conversation { background: #f2f4f2; flex: 1; padding: 16px 19px; }
.mini-conversation > strong { display: block; font-size: 10px; font-weight: normal; color: #6e7c6d; border-bottom: 1px solid #e0e5dd; padding-bottom: 10px; }
.mini-conversation > small { display: block; font-size: 6px; color: #b0b9ad; text-align: center; margin: 8px 0; }
.mini-conversation p { background: white; border: 1px solid #e3e8df; color: #96a18f; padding: 8px; max-width: 83%; border-radius: 2px; font-size: 8px; line-height: 1.8; margin-top: 9px; }
.mini-conversation p.mini-own { background: #cde4bf; border-color: #c4dab9; margin-left: auto; max-width: 65%; }
.mini-fail { display: block; color: #be7c70; font-size: 7px; margin-top: 6px; text-align: right; }
.slice-index-card { min-height: 365px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 54px; border: 1px solid #e1e5e5; background: #eef1f0; }
.slice-index-card > img { opacity: .6; width: 43px; height: 43px; }
.slice-index-card > h2 { font: 22px/1.7 var(--serif); color: #647b87; margin: 18px 0 13px; letter-spacing: 1px; }
.slice-index-card > p { font-size: 10px; color: #9daab0; line-height: 2.1; }
.slice-index-card > a { display: flex; align-items: center; gap: 15px; margin-top: 20px; font-size: 11px; color: #7794a4; }
.slice-index-card .icon { width: 15px; height: 15px; }
.photo-archive { margin-top: 62px; }
.photo-archive-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid #d9e1e4; }
.photo-archive-heading p { color: #9aabb4; font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; }
.photo-archive-heading h2 { font: 25px var(--serif); color: #4a6b7d; letter-spacing: 2px; }
.photo-archive-heading > span { font-size: 9px; color: #9eafb8; }
.photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.archive-image-card { padding: 0; text-align: left; min-width: 0; }
.archive-image-card > div { aspect-ratio: 1.48; position: relative; overflow: hidden; background: #dbe2e3; }
.archive-image-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.66); transition: filter .2s; }
.archive-image-card > div > span { position: absolute; display: flex; align-items: center; gap: 6px; right: 9px; bottom: 9px; background: #233846a0; color: #f0f5f7; font-size: 8px; padding: 5px 7px; opacity: 0; }
.archive-image-card > div > span .icon { width: 11px; height: 11px; }
.archive-image-card:hover img { filter: saturate(.9); }
.archive-image-card:hover > div > span, .archive-image-card:focus-visible > div > span { opacity: 1; }
.archive-image-card > small { display: block; color: #a3b0b7; font-size: 8px; margin-top: 15px; letter-spacing: 1px; }
.archive-image-card h3 { font-size: 12px; font-weight: normal; color: #587787; margin-top: 5px; }
.archive-image-card > p { font-size: 9px; color: #abb6bc; margin-top: 5px; }
.overview-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 59px; padding: 24px 0; border-top: 1px solid #dce3e6; color: #a5b2b9; font-size: 9px; }
.overview-footer > span { font-size: 8px; letter-spacing: 1px; }
.overview-footer > a { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.overview-footer .icon { width: 13px; height: 13px; }

/* 弹窗、维护页与轻提示。 */
dialog { border: 1px solid #d2dce3; padding: 0; color: var(--ink); max-height: calc(100svh - 40px); overflow-y: auto; box-shadow: 0 20px 90px #102a3e38; }
dialog::backdrop { background: #1c324774; backdrop-filter: blur(2px); }
.correction-dialog { width: min(510px,calc(100% - 32px)); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; background: #f0f5f8; border-bottom: 1px solid #dce5eb; }
.dialog-top > span { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #7893a6; }
.dialog-top .icon { width: 16px; height: 16px; }
#correction-form { padding: 23px 27px 25px; }
#correction-title { font: bold 23px/1.6 var(--serif); color: #416580; letter-spacing: 2px; }
.dialog-intro { font-size: 11px; line-height: 1.9; color: #9ba6ae; margin: 9px 0 19px; }
.correction-document { background: #f6f8f9; border-left: 2px solid #b4c9d7; padding: 10px 13px; margin-bottom: 21px; }
.correction-document > small { display: block; font-size: 9px; color: #a0afb9; }
.correction-document > strong { font-size: 11px; color: #7a919f; font-weight: normal; display: block; margin: 3px 0; }
.correction-document > span { font: 8px/1.7 Arial,sans-serif; color: #b0bbc3; }
.field-label { display: block; font-size: 11px; color: #768c9d; margin: 15px 0 7px; }
.field-label > span { color: #a8b5be; font-size: 9px; }
#correction-form select, #correction-form textarea { display: block; width: 100%; border: 1px solid #dce4ea; background: #fff; font-size: 11px; color: #7c8e9a; padding: 10px; border-radius: 0; }
#correction-form textarea { resize: vertical; min-height: 100px; line-height: 1.8; }
#correction-form textarea::placeholder { color: #b3bdc5; }
.form-note { font-size: 9px; color: #b0b9c0; margin-top: 9px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 22px; }
.plain-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #9aa9b4; padding: 7px 13px; }
.plain-button:hover { color: var(--blue); background: #f0f5f8; }
.plain-button .icon { width: 14px; height: 14px; }
.image-dialog { width: min(1060px,calc(100% - 48px)); background: #f7f9fa; }
.image-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; background: #fff; }
.image-dialog header span { font-size: 8px; color: #9cabb6; letter-spacing: 2px; }
.image-dialog header h2 { font: 17px/1.8 var(--serif); color: #57768b; margin-top: 4px; }
.lightbox-image { width: 100%; max-height: calc(100svh - 220px); object-fit: contain; background: #dbe2e5; }
.image-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 12px 22px; }
.image-dialog footer > p { font-size: 9px; color: #99a8b2; }
.image-dialog footer > div { display: flex; gap: 8px; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%,12px); opacity: 0; pointer-events: none; padding: 11px 20px; max-width: calc(100% - 32px); width: max-content; color: #f6f8f9; background: #3e5566f2; box-shadow: 0 5px 20px #24415522; z-index: 200; font-size: 11px; transition: opacity .2s,transform .2s; border-radius: 2px; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
.maintenance { position: fixed; inset: 56px 0 0; display: flex; align-items: center; justify-content: center; background: #f4f6f8f9; z-index: 100; }
.maintenance-box { width: 360px; max-width: calc(100% - 40px); text-align: center; padding-bottom: 60px; }
.maintenance-box > img { margin: auto; opacity: .8; }
.maintenance-box h2 { font: 23px/1.8 var(--serif); letter-spacing: 3px; color: #4f7088; margin: 21px 0 10px; }
.maintenance-box p { font-size: 11px; color: #9aa9b4; }
.maintenance-progress { display: block; height: 2px; background: #e0e8ee; margin: 27px auto 21px; width: 200px; overflow: hidden; }
.maintenance-progress > i { display: block; height: 100%; width: 35%; background: #87a4b9; animation: progress 1.2s ease-in-out infinite; }
.maintenance-box > small { font-size: 9px; letter-spacing: 2px; color: #adb9c2; }
.is-maintaining { overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress { from { transform: translateX(-110%); } to { transform: translateX(390%); } }

/* 小屏保持校网的信息密度，聊天联系人通过返回键展开。 */
@media (min-width: 1500px) { .school-site { margin-top: 32px; } .chat-desktop { margin-top: 27px; } }
@media (max-width: 1100px) {
  .preview-inner { padding: 0 21px; gap: 16px; }
  .prototype-brand > span { display: none; }
  .slice-nav { gap: 0; }
  .slice-nav a { padding: 0 11px; }
  .school-site { width: calc(100% - 36px); }
  .home-columns { grid-template-columns: 1.05fr 1fr 230px; gap: 18px; }
  .home-lead { grid-template-columns: minmax(0,1fr) 230px; }
  .countdown-card { padding-right: 10px; padding-left: 10px; }
  .exam-ribbon { font-size: 10px; }
  .news-feature > img { width: 95px; }
  .news-feature h3 { font-size: 12px; }
  .news-feature p { font-size: 9px; }
  .news-feature p br { display: none; }
  .article-grid { grid-template-columns: 180px minmax(0,1fr); gap: 23px; }
  .chat-window { grid-template-columns: 55px 230px minmax(0,1fr); }
  .chat-desktop { width: calc(100% - 40px); }
  .message-stack { max-width: calc(100% - 65px); }
  .overview-page { width: calc(100% - 48px); }
  .slice-thumbnail { height: 235px; }
  .mini-masthead > strong { font-size: 16px; }
  .mini-masthead > small { display: none; }
  .mini-contacts { width: 115px; }
  .mini-conversation { padding: 14px 12px; }
  .mini-contacts small { max-width: 65px; }
}
@media (max-width: 850px) {
  .school-identity h1 { font-size: 31px; }
  .school-identity p { font-size: 8px; letter-spacing: 2px; }
  .school-identity > img { width: 63px; height: 63px; }
  .masthead-right p { font-size: 15px; letter-spacing: 0; }
  .masthead-right span { font-size: 8px; }
  .home-content { padding: 18px; }
  .home-lead { gap: 14px; grid-template-columns: minmax(0,1fr) 210px; }
  .campus-banner { height: 270px; }
  .banner-copy { left: 22px; top: 42px; }
  .banner-copy h2 { font-size: 28px; }
  .banner-copy p { font-size: 9px; }
  .banner-copy > span { font-size: 10px; }
  .countdown-card { padding-top: 15px; }
  .exam-ribbon { font-size: 9px; padding-bottom: 11px; }
  .countdown-card > p { font-size: 14px; }
  .day-number { height: 89px; }
  .day-number strong { font-size: 82px; }
  .exam-wish { margin-top: 9px; font-size: 14px; }
  .exam-date { font-size: 9px; padding-bottom: 9px; }
  .home-columns { grid-template-columns: 1fr 1fr; gap: 22px; }
  .alumni-callout { grid-column: 1/-1; text-align: left; display: grid; grid-template-columns: 1fr auto; padding: 15px 20px; }
  .alumni-year { display: none; }
  .alumni-tag { grid-column: 1; }
  .alumni-callout h2 { grid-column: 1; margin-top: 3px; }
  .alumni-description { margin: 5px 0 0; grid-column: 1; font-size: 10px; }
  .alumni-description br { display: none; }
  .alumni-button { grid-column: 2; grid-row: 2; padding: 0 18px; }
  .alumni-callout > small { grid-column: 2; grid-row: 3; text-align: right; margin-top: 6px; }
  .alumni-icon { right: 30%; }
  .exam-links { padding: 14px; flex-wrap: wrap; gap: 13px 0; }
  .exam-links > div { width: 100%; }
  .exam-links > a { padding-left: 0; justify-content: space-around; font-size: 10px; }
  .exam-links > a:nth-child(2) { border-left: 0; }
  .article-grid { grid-template-columns: 150px minmax(0,1fr); gap: 18px; }
  .article-area { padding: 0 18px 24px; }
  .article-heading h2 { font-size: 20px; }
  .article-meta { gap: 9px; font-size: 8px; flex-wrap: wrap; }
  .article-sidebar > h2 { font-size: 15px; padding: 11px 13px; }
  .article-sidebar > nav > a, .article-sidebar > nav > button { padding: 11px; font-size: 10px; }
  .article-sidebar > nav .active { padding-left: 8px; }
  .wide-photo:not(.class-photo) .photo-button img { height: 250px; }
  .correction-box { padding: 14px; }
  .correction-box small { font-size: 8px; }
  .correction-box .school-button { font-size: 10px; padding: 8px 11px; }
  .chat-window { grid-template-columns: 50px 205px minmax(0,1fr); }
  .contact-item { padding: 12px 10px; gap: 8px; }
  .contact-copy > strong { font-size: 11px; }
  .contact-copy > small { font-size: 9px; }
  .contact-item .avatar { width: 33px; height: 33px; }
  .contact-item > time { right: 9px; top: 14px; font-size: 7px; }
  .messages { padding-left: 18px; padding-right: 18px; }
  .conversation-header { padding: 0 18px; }
  .message-bubble { font-size: 11px; }
  .message-row { gap: 8px; }
  .message-row > .avatar { width: 30px; height: 30px; }
  .message-stack { max-width: calc(100% - 60px); }
  .chat-link-card { width: 240px; }
  .slice-grid { gap: 20px; }
  .slice-thumbnail { height: 210px; }
  .mini-school { padding: 12px; }
  .mini-nav { font-size: 6px; }
  .mini-hero { height: 87px; }
  .mini-hero > img { width: 70%; }
  .mini-hero > div { font-size: 6px; }
  .mini-hero > div > strong { font-size: 35px; }
  .mini-lines { font-size: 6px; }
  .mini-contacts { width: 90px; }
  .mini-contacts > div { padding: 9px 5px; gap: 5px; }
  .mini-contacts > div > span:last-child { font-size: 6px; }
  .mini-contacts small { max-width: 48px; font-size: 5px; }
  .mini-conversation > strong { font-size: 8px; }
  .mini-conversation p { font-size: 6px; padding: 6px; }
  .slice-card-copy { padding: 16px 13px 38px; gap: 11px; }
  .slice-card-copy h2 { font-size: 12px; }
  .slice-card-copy p { font-size: 9px; }
  .slice-card-copy > small { left: 44px; }
  .slice-index-card { min-height: 340px; padding: 30px; }
  .slice-index-card > h2 { font-size: 19px; }
  .photo-grid { gap: 15px; }
  .overview-footer > p { max-width: 220px; text-align: center; font-size: 8px; }
}
@media (max-width: 650px) {
  html { scrollbar-gutter: auto; }
  .preview-bar { height: 88px; }
  .preview-inner { padding: 0 15px; flex-wrap: wrap; gap: 0; justify-content: space-between; align-content: flex-start; }
  .prototype-brand { height: 42px; }
  .prototype-brand strong { font-size: 12px; }
  .prototype-brand > .icon { width: 18px; height: 18px; }
  .preview-actions { height: 42px; gap: 15px; }
  .overview-link { font-size: 10px; }
  .overview-link .icon { width: 13px; height: 13px; }
  .slice-nav { order: 3; width: calc(100% + 30px); margin: 0 -15px; height: 46px; gap: 0; border-top: 1px solid #edf0f2; justify-content: center; }
  .slice-nav > a { font-size: 11px; flex: 1; justify-content: center; padding: 0 6px; gap: 5px; }
  .slice-nav > a .icon { width: 13px; height: 13px; }
  .school-site { width: calc(100% - 20px); margin-top: 12px; }
  .school-utility { padding: 6px 12px; font-size: 8px; }
  .school-utility > span:first-child { display: none; }
  .school-utility > span:last-child { width: 100%; justify-content: space-between; gap: 4px; }
  .school-utility i { flex: 1; background: none; }
  .school-masthead { height: 96px; padding: 17px 16px; }
  .school-identity { gap: 10px; }
  .school-identity > img { width: 53px; height: 53px; }
  .school-identity h1 { font-size: 27px; letter-spacing: 2px; }
  .school-identity p { font-size: 7px; letter-spacing: 1.5px; margin-top: 5px; }
  .masthead-right { display: none; }
  .school-nav { height: auto; padding: 0; grid-template-columns: repeat(4,1fr); border-bottom-width: 2px; }
  .school-nav a { height: 34px; font-size: 10px; letter-spacing: 0; }
  .school-nav a:nth-child(n+5) { border-top: 1px solid #ffffff10; }
  .school-nav a:last-child { grid-column: span 2; }
  .school-nav .icon { width: 12px; height: 12px; }
  .school-nav a.active:after { display: none; }
  .home-content { padding: 12px; }
  .home-lead { display: flex; flex-direction: column; gap: 11px; }
  .campus-banner { height: 216px; }
  .banner-copy { top: 33px; left: 21px; right: 15px; }
  .banner-copy h2 { font-size: 26px; letter-spacing: .5px; margin-top: 13px; }
  .banner-copy p { font-size: 8px; letter-spacing: 1px; }
  .banner-copy > span { font-size: 9px; }
  .banner-bottom { height: 29px; font-size: 9px; padding: 0 11px; }
  .banner-arrow { opacity: 1; width: 20px; height: 30px; }
  .banner-arrow .icon { width: 16px; height: 16px; }
  .countdown-card { display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; padding: 14px 19px; }
  .exam-ribbon { grid-column: 1; border: 0; padding: 0; font-size: 8px; }
  .countdown-card > p { grid-column: 1; margin-top: 3px; font-size: 15px; letter-spacing: 2px; }
  .day-number { grid-column: 2; grid-row: 1/4; margin: 0; height: auto; padding-left: 18px; }
  .day-number strong { font-size: 65px; }
  .day-number > span { font-size: 13px; }
  .exam-date { grid-column: 1; border: 0; padding: 0; margin-top: 5px; justify-content: flex-start; font-size: 8px; }
  .exam-date .icon { width: 10px; height: 10px; }
  .exam-wish, .countdown-card > small { display: none; }
  .home-columns { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
  .panel-heading { height: 34px; margin-bottom: 13px; }
  .panel-heading h2 { font-size: 16px; line-height: 33px; }
  .news-feature > img { width: 128px; height: 83px; }
  .news-feature h3 { font-size: 14px; }
  .news-feature p { font-size: 10px; }
  .news-feature small { font-size: 9px; margin-top: 6px; }
  .dated-list li { font-size: 11px; line-height: 2.7; }
  .notice-list > li { padding: 10px 0; }
  .notice-list li > div { font-size: 12px; }
  .notice-list li > div > small { font-size: 10px; }
  .alumni-callout { display: block; padding: 20px; text-align: center; }
  .alumni-tag { font-size: 8px; }
  .alumni-callout h2 { margin-top: 12px; }
  .alumni-description { font-size: 11px; margin: 7px 0 15px; }
  .alumni-description br { display: block; }
  .alumni-callout > small { text-align: center; margin-top: 9px; }
  .alumni-icon { right: -5px; }
  .alumni-button { margin: auto; max-width: 245px; }
  .exam-links { margin-top: 15px; padding: 12px 10px; }
  .exam-links > div { gap: 10px; margin-left: 2px; }
  .exam-links > div .icon { width: 25px; height: 25px; }
  .exam-links strong { font-size: 16px; }
  .exam-links > a { gap: 3px; font-size: 8px; padding-right: 0; }
  .exam-links > a > .icon { width: 9px; height: 9px; }
  .school-friendly { padding: 12px; gap: 6px; flex-wrap: wrap; font-size: 8px; }
  .school-friendly > b { display: none; }
  .school-footer { padding: 16px 8px; gap: 8px; }
  .school-footer > img { width: 28px; height: 28px; }
  .school-footer p { font-size: 7px; }
  .school-footer > span { display: none; }
  .fiction-note { font-size: 8px; letter-spacing: 0; padding: 0 10px; }
  .fiction-note > span { margin: 0 4px; }
  .archive-strip { padding: 12px; }
  .archive-strip > div { gap: 7px; }
  .archive-strip .icon { width: 13px; height: 13px; }
  .archive-strip strong { font-size: 11px; }
  .archive-strip > div > span { display: none; }
  .archive-strip > p { font-size: 9px; }
  .archive-strip > p > strong { font-size: 24px; padding: 0 3px; }
  .article-area { padding: 0 13px 20px; }
  .breadcrumbs { font-size: 8px; gap: 5px; height: 39px; }
  .article-grid { display: block; padding-top: 16px; }
  .article-sidebar { display: none; }
  .article-heading { padding-top: 2px; padding-bottom: 14px; }
  .article-heading h2 { font-size: 20px; margin: 7px 0 11px; letter-spacing: 0; line-height: 1.7; }
  .article-category { font-size: 9px; }
  .article-meta { column-gap: 9px; row-gap: 5px; font-size: 7px; }
  .article-meta > span:last-child { display: none; }
  .article-body { font-size: 13px; padding-top: 17px; }
  .article-body > p { margin-bottom: 17px; }
  .wide-photo { margin: 17px 0 19px; }
  .wide-photo:not(.class-photo) .photo-button img { height: 210px; }
  .photo-enlarge { opacity: 1; font-size: 7px; padding: 4px 5px; right: 6px; bottom: 6px; }
  .photo-enlarge .icon { width: 10px; height: 10px; }
  .wide-photo figcaption { font-size: 8px; line-height: 1.8; margin-top: 8px; }
  .table-caption { margin-top: 18px; }
  .table-caption > strong { font-size: 12px; }
  .table-caption > span { font-size: 7px; }
  .student-table { font-size: 9px; min-width: 360px; }
  .student-table th { padding: 8px 7px; }
  .student-table td { padding: 10px 6px; }
  .student-table td:first-child, .student-table td:last-child { font-size: 8px; }
  .article-body > .record-footnote { font-size: 8px; }
  .article-signature { font-size: 10px; margin: 20px 0; }
  .correction-box { padding: 12px; gap: 10px; }
  .correction-box > div { gap: 8px; }
  .correction-box > div > .icon { display: none; }
  .correction-box strong { font-size: 11px; }
  .correction-box small { font-size: 8px; max-width: 160px; line-height: 1.7; }
  .correction-box .school-button { padding: 7px 10px; font-size: 10px; gap: 6px; }
  .correction-box .school-button .icon { width: 12px; height: 12px; }
  .article-bottom-links { font-size: 9px; gap: 9px; }
  .attendance-record { padding: 13px 0; }
  .attendance-record small { font-size: 8px; }
  .attendance-record strong { font-size: 23px; }
  .attendance-record strong > span { font-size: 8px; margin-left: 3px; }
  .pending-record { padding: 13px; }
  .pending-record > div { flex-wrap: wrap; }
  .pending-label { font-size: 8px; }
  .pending-record h3 { font-size: 14px; }
  .pending-record > p { font-size: 11px; }
  .pending-record footer { align-items: flex-start; gap: 8px; }
  .pending-record footer > span { font-size: 8px; }
  .pending-record footer > button { font-size: 10px; gap: 4px; flex-shrink: 0; }
  .normal-article { min-height: 400px; }
  .chat-desktop { width: 100%; margin-top: 0; }
  .chat-desktop-caption { padding: 0 14px; margin: 0; height: 35px; }
  .chat-desktop-caption > span { font-size: 10px; }
  .chat-desktop-caption > small { font-size: 8px; }
  .chat-window { display: block; height: calc(100svh - 155px); min-height: 465px; border-width: 1px 0; position: relative; box-shadow: none; }
  .chat-rail { display: none; }
  .contacts-panel { position: absolute; inset: 0; z-index: 10; display: none; }
  .show-contacts .contacts-panel { display: flex; }
  .contacts-search { height: 64px; padding: 0 20px; }
  .contacts-search > label { height: 32px; }
  .contact-item { min-height: 78px; padding: 15px 22px; gap: 14px; }
  .contact-item .avatar { width: 43px; height: 43px; }
  .contact-copy > strong { font-size: 14px; }
  .contact-copy > small { font-size: 11px; }
  .contact-item > time { right: 22px; top: 18px; font-size: 10px; }
  .contacts-footer { font-size: 10px; }
  .conversation { height: 100%; }
  .conversation-header { height: 64px; padding: 0 14px 0 7px; justify-content: flex-start; gap: 4px; }
  .conversation-header h2 { font-size: 15px; }
  .conversation-header h2 > span { font-size: 12px; }
  .conversation-header p { font-size: 8px; }
  .conversation-header > .icon-button { margin-left: auto; }
  .mobile-contacts { display: flex; align-items: center; justify-content: center; width: 33px; height: 40px; padding: 0; color: #8b9e8a; }
  .mobile-contacts .icon { transform: rotate(180deg); width: 20px; height: 20px; }
  .messages { padding: 2px 15px 20px; }
  .chat-time { font-size: 9px; margin: 15px 0 19px; }
  .message-row { margin-top: 15px; gap: 9px; }
  .message-row > .avatar { width: 33px; height: 33px; }
  .message-bubble { font-size: 12px; padding: 8px 10px; }
  .message-stack { max-width: calc(100% - 85px); }
  .chat-link-card { width: 235px; }
  .chat-link-card strong { font-size: 11px; }
  .chat-link-card small { font-size: 8px; }
  .chat-composer { height: 139px; padding: 10px 15px 9px; }
  .chat-composer textarea { height: 60px; }
  .composer-bottom > small { font-size: 8px; }
  .chat-footnote { height: 32px; padding: 0 14px; gap: 5px; font-size: 8px; }
  .chat-footnote > a:last-child { font-size: 8px; }
  .contact-info { top: 64px; }
  .failure-caption { font-size: 8px; }
  .overview-page { width: calc(100% - 32px); padding-top: 28px; }
  .overview-heading { display: block; padding-bottom: 24px; margin-bottom: 22px; }
  .overview-heading h1 { font-size: 30px; }
  .overview-heading > aside { text-align: left; font-size: 11px; margin-top: 22px; }
  .overview-heading > div > p { font-size: 9px; }
  .overview-heading > div > span { font-size: 9px; margin-top: 10px; }
  .slice-grid { grid-template-columns: 1fr; gap: 20px; }
  .slice-thumbnail { height: 228px; }
  .mini-school { padding: 14px; }
  .mini-masthead > strong { font-size: 18px; }
  .mini-hero { height: 97px; }
  .mini-hero > div { font-size: 7px; }
  .mini-hero > div > strong { font-size: 43px; }
  .mini-lines { font-size: 7px; }
  .mini-contacts { width: 112px; }
  .mini-contacts > div { padding: 10px 7px; gap: 7px; }
  .mini-contacts > div > span:last-child { font-size: 7px; }
  .mini-contacts small { max-width: 60px; font-size: 6px; }
  .mini-conversation p { font-size: 7px; }
  .slice-card-copy { padding: 19px 16px 40px; }
  .slice-card-copy h2 { font-size: 14px; }
  .slice-card-copy p { font-size: 10px; }
  .slice-card-copy > small { left: 47px; }
  .slice-index-card { min-height: 310px; padding: 30px; }
  .slice-index-card > h2 { font-size: 23px; }
  .photo-archive { margin-top: 40px; }
  .photo-archive-heading { margin-bottom: 20px; }
  .photo-archive-heading h2 { font-size: 23px; }
  .photo-archive-heading > span { font-size: 8px; }
  .photo-grid { grid-template-columns: 1fr; gap: 29px; }
  .archive-image-card > div { aspect-ratio: 1.5; }
  .archive-image-card > div > span { opacity: 1; }
  .archive-image-card h3 { font-size: 14px; }
  .archive-image-card > p { font-size: 10px; }
  .overview-footer { flex-wrap: wrap; gap: 16px; margin-top: 35px; padding: 20px 0; }
  .overview-footer > p { order: 3; width: 100%; max-width: none; text-align: left; }
  .overview-footer > a { margin-left: auto; font-size: 9px; }
  .maintenance { top: 88px; }
  #correction-form { padding: 20px; }
  #correction-title { font-size: 22px; }
  .correction-document > strong { font-size: 10px; }
  .image-dialog { width: calc(100% - 22px); }
  .image-dialog > header { padding: 14px; }
  .image-dialog header h2 { font-size: 15px; }
  .image-dialog > footer { padding: 10px; flex-wrap: wrap; }
  .image-dialog footer > p { font-size: 8px; }
  .image-dialog footer > div { margin-left: auto; gap: 0; }
  .toast { font-size: 10px; bottom: 18px; padding: 10px 14px; }
}
@media (max-width: 360px) {
  .school-identity h1 { font-size: 23px; }
  .school-identity p { font-size: 6px; }
  .school-identity > img { width: 47px; height: 47px; }
  .banner-copy h2 { font-size: 22px; }
  .news-feature > img { width: 100px; }
  .article-heading h2 { font-size: 18px; }
  .slice-nav > a { font-size: 10px; padding: 0 3px; }
  .slice-nav .slice-dot { width: 4px; height: 4px; }
  .chat-footnote { font-size: 7px; padding: 0 10px; }
  .chat-footnote > a:last-child { font-size: 7px; }
  .message-stack { max-width: calc(100% - 70px); }
  .chat-link-card { width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}