也不该被点开 */
pointer-events: none;
user-select: none;
}
/* 遮罩层：铺满整张卡片，按钮居中 */
.lp-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
animation: lpOverlayIn .18s var(--ease);
}
.lp-ask {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px 7px 14px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
box-shadow: var(--sh-md);
}
.lp-ask-text { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; }
.lp-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 16px;
border: none;
border-radius: var(--r-pill);
font-size: 12.5px;
font-weight: 700;
color: #fff;
background: var(--mint-ink);
box-shadow: 0 4px 12px rgba(47, 143, 110, .28);
transition: transform var(--speed) var(--ease), background var(--speed) ease;
}
.lp-btn:active { transform: scale(.96); }
.lp-btn:disabled { opacity: .6; }
/* 取消完成那颗按钮换成中性灰：它是"撤销"，不该跟确认一样醒目 */
.lp-btn.is-undo { background: var(--text-mid); box-shadow: var(--sh-sm); }
@keyframes lpOverlayIn {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
/* 长按过程里的"正在按住"反馈：书脊微微亮一下，让人知道按住有效 */
.list-item.lp-hold { border-left-color: var(--mint); }
/* 普通：雾蓝书脊 + 极浅蓝底（v1.7.0 换的配色）。
换之前普通事项是一条米白卡 + 暖灰书脊，跟「我的」栏目里的静态卡片长得一模一样，
整页扫下来只能靠一枚蓝色小徽标认出「普通」；现在四个级别各有各的颜色身份：
置顶=琥珀金、紧急=粉红、普通=雾蓝、已完成=薄荷。
只挂 .normal 类，所以不带动「我的」栏目与空栏目占位卡（那两类不是事项状态）。 */
.list-item.normal { border-left-color: var(--primary); background: linear-gradient(180deg, #f7fbff 0%, #ffffff 62%); }
.list-item.normal .item-time { color: var(--primary-dark); }
.list-item.normal .item-countdown { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-line); }
/* 置顶：琥珀金而非红色 —— 既要醒目，又要与「紧急」的粉红一眼区分。
置顶优先级高于紧急，故写在 urgent 之后覆盖同权重的规则。
置顶项即使截止时间已过也不会降级成 done，级别恒为「置顶」。 */
.list-item.pinned {
border-left-color: var(--honey);
border-left-width: 5px;
border-color: var(--honey-line);
background: linear-gradient(180deg, #fffaf0 0%, #fffdf9 100%);
box-shadow: 0 3px 12px rgba(247, 185, 85, .16);
opacity: 1;
}
.list-item.pinned .item-name { font-weight: 700; color: var(--honey-ink); }
.list-item.pinned .item-note { border-top-color: var(--honey-line); color: #a8802f; }
.list-item.pinned .item-time { color: var(--honey-ink); }
.list-item.pinned .item-time-sub { color: #d3a24a; }
.list-item.pinned .item-countdown { background: var(--honey-soft); color: var(--honey-ink); border-color: var(--honey-line); }
/* 图钉图标：置顶项标题前的小装饰 */
.pin-icon { color: var(--honey); font-size: 13px; }
.item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.item-name {
font-size: 15px;
font-weight: 600;
line-height: 1.5;
color: var(--text);
word-break: break-word;
display: flex;
align-items: baseline;
gap: 5px;
flex-wrap: wrap;
}
.item-name .ic { color: var(--honey); }
/* 小信息块（级别徽标 / N 人接龙 / 有附件 / 标签 / 剩余时间）：默认排成一行，
一行装不下才整体换行（flex + wrap）。这些是同一层级的"补充信息"，
挤在一排才好扫；标题不并进来 —— 它是主体，而且常常很长。
v1.19.0：「普通」不再挂胶囊，所以只要没有标签 / 接龙 / 附件 / 倒计时，
模板与 app.js 连这个容器一起不输出 —— 空的 flex 行照样会撑出一个 gap 的空隙。 */
.item-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.item-note {
font-size: 12px;
color: var(--text-soft);
line-height: 1.6;
padding-top: 7px;
margin-top: 3px;
border-top: 1px dashed var(--bg-lines);
word-break: break-word;
}
.item-meta {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
min-width: 84px;
}
.item-time { font-size: 14px; font-weight: 700; color: var(--text-mid); text-align: right; }
.item-time-sub { font-size: 11.5px; color: var(--text-soft); text-align: right; }
.list-item.urgent .item-time { color: var(--rose-ink); }
.list-item.urgent .item-time-sub { color: #e08fa2; }
.item-location {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 500;
color: var(--peach-ink);
background: var(--peach-soft);
border: 1px solid var(--peach-line);
padding: 3px 9px;
border-radius: var(--r-pill);
max-width: 100%;
}
.item-location .ic { font-size: 11.5px; }
/* ---------------------------------------------------------------- 4. 标签与倒计时 */
/* 统一胶囊：首页的 .item-tag 与管理页的 .tag 共用同一套外观，
避免同一种「级别徽标」在两个页面长得不一样。 */
.item-tag,
.tag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
padding: 4px 9px;
border-radius: var(--r-pill);
border: 1px solid transparent;
width: fit-content;
margin-left: 0;
vertical-align: middle;
white-space: nowrap;
}
.list-item .item-tag,
.item .tag { margin-left: 0; }
.item-name .item-tag { margin-left: 0; }
/* 级别配色：浅底 + 深字 + 同色描边 */
.tag-pinned, .tag.pinned { background: var(--honey-soft); color: var(--honey-ink); border-color: var(--honey-line); }
.tag-urgent, .tag.urgent { background: var(--rose-soft); color: var(--rose-ink); border-color: var(--rose-line); }
.tag-done, .tag.done { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint-line); }
.tag-normal, .tag.normal { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-line); }
/* 分类色：notice 用中性灰而不是蓝色 ——
蓝色留给「级别徽标」和导航选中态，否则一个「重要」标签和「普通」挤在一起全是蓝的。 */
.tag-notice { background: var(--surface-soft); color: var(--text-mid); border-color: var(--line); }
.tag-homework { background: var(--peach-soft); color: var(--peach-ink); border-color: var(--peach-line); }
.tag-online { background: var(--lilac-soft); color: var(--lilac-ink); border-color: var(--lilac-line); }
.tag.cate { background: var(--surface-soft); color: var(--text-mid); border-color: var(--line); }
/* 接龙徽标：淡紫（与「网课」同色系的那支，但语义不同 —— 它只出现在有接龙的事项上） */
.tag-roll, .tag.roll { background: var(--lilac-soft); color: var(--lilac-ink); border-color: var(--lilac-line); }
/* 详细通知徽标（v1.22.0）：琥珀金 —— 与「置顶」同一支的那支暖色。
为什么复用这一支：详细通知是班委亲手写的那段"真正要说的事"，在卡片上它就该
最显眼；而置顶那枚是"图钉 + 标题"，位置在标题里，两者不会混。
它只表示"这一条有详细通知"，正文一个字都不在卡片上（见 _cards.html 的说明）。 */
.tag-detail, .tag.detail { background: var(--honey-soft); color: var(--honey-ink); border-color: var(--honey-line); }
/* 定时徽标（v1.10.0～v1.20.0）：`.tag-sched` 随定时显示一起删掉了（v1.21.0）——
它只出现在管理页，学生端根本看不到未开始的事项。
雾青（--teal-*）没有跟着废掉：「有附件」胶囊与代码类文件的图标仍用它。 */
/* 接龙 / 附件那两行「点击卡片…」提示（.roll-cta / .attach-cta）在 v1.18.0 整体删掉了：
它们和「N 人接龙」「有附件」「文件收集」几颗胶囊说的是同一件事，一条事项同时开着
接龙又带着附件时还会并排出现两行，把卡片撑得老长。现在"这张卡可以点"由胶囊本身
表达，点进去都是同一个事项页（/notice/{id}），样式不再需要。 */
/* 剩余时间 / 已超时：与级别同色的浅胶囊 */
.item-countdown {
display: inline-flex;
align-items: center;
width: fit-content;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
padding: 4px 9px;
border-radius: var(--r-pill);
background: var(--surface-soft);
color: var(--text-mid);
border: 1px solid var(--line);
}
.list-item.urgent .item-countdown { background: var(--rose-soft); color: var(--rose-ink); border-color: var(--rose-line); }
.list-item.done .item-countdown { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint-line); }
/* 「距开始 X」（v1.22.0）：**固定用雾青**，不跟着级别变色。
它是"还没开始"的意思，与"离截止还剩多久"是两种心情；跟着级别变色会让人
以为那是同一件事的两个阶段（其实开始时间一到，这一颗就换成另一句了）。 */
.item-countdown.start-countdown,
.list-item.urgent .item-countdown.start-countdown,
.list-item.done .item-countdown.start-countdown {
background: var(--teal-soft);
color: var(--teal-ink);
border-color: var(--teal-line);
}
/* ---------------------------------------------------------------- 5. 按钮 */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 11px 20px;
border-radius: var(--r-pill);
border: 1px solid transparent;
background: var(--surface-soft);
color: var(--text-mid);
text-decoration: none;
transition: transform var(--speed) var(--ease), box-shadow var(--speed) ease,
background var(--speed) ease, opacity var(--speed) ease;
}
.btn .ic { font-size: 15px; }
.btn:active { transform: scale(.96); }
.btn-primary {
background: var(--primary);
color: #fff;
box-shadow: var(--sh-primary);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 8px 20px rgba(110, 168, 254, .38); }
.btn-ghost {
background: var(--surface-soft);
color: var(--text-mid);
border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-lines); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* 小圆点按钮（列表里的置顶 / 删除） */
.btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
line-height: 1;
padding: 7px 11px;
border-radius: var(--r-pill);
border: 1px solid transparent;
background: var(--surface-soft);
color: var(--text-mid);
transition: transform var(--speed) var(--ease), background var(--speed) ease, opacity var(--speed) ease;
}
.btn-sm .ic { font-size: 12px; }
.btn-sm:active { transform: scale(.94); }
.btn-sm:disabled { opacity: .5; cursor: not-allowed; }
.btn-soft { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-line); }
.btn-honey { background: var(--honey); color: #fff; box-shadow: 0 3px 10px rgba(247, 185, 85, .32); }
.btn-danger-soft { background: var(--rose-soft); color: var(--rose-ink); border-color: var(--rose-line); }
.btn-danger-soft:hover { background: var(--rose); color: #fff; }
/* 实心玫红：自绘弹窗里"删除 / 撤销"这类不可撤销的操作专用（v1.10.0） */
.btn-danger { background: var(--rose); color: #fff; box-shadow: 0 6px 16px rgba(255, 143, 163, .34); }
.btn-danger:hover { background: var(--rose-ink); }
/* ---------------------------------------------------------------- 6. 表单控件 */
.field { display: block; margin-bottom: 14px; }
.field-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-mid);
margin-bottom: 6px;
}
.field-label .req { color: var(--rose); }
input[type=text], input[type=url], input[type=datetime-local],
input[type=search], input:not([type]), select, textarea {
width: 100%;
padding: 10px 13px;
font-size: 13px;
color: var(--text);
background: var(--surface-soft);
border: 1px solid var(--line);
border-radius: var(--r-sm);
transition: border-color var(--speed) ease, background var(--speed) ease,
box-shadow var(--speed) ease;
-webkit-appearance: none;
appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
/* 聚焦态只改 background-**color**（v1.20.0）。
以前这里写的是 `background` 简写：它会把 background-position / -size / -repeat
一起重置成初始值，凡是在别处定过背景图（自绘下拉箭头）的控件都会走样 ——
文件页的排序下拉一聚焦，那颗 12px 的小箭头就被放大成默认尺寸并平铺，
压在「按名称」那几个字上（用户报的"按时间排序时 UI 渲染乱"就是它）。
只改颜色，背景图的其余性质一律不动。 */
input:focus, select:focus, textarea:focus {
outline: none;
background-color: var(--surface);
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea { resize: vertical; min-height: 74px; line-height: 1.6; }
/* 下拉框：自绘小箭头，避免各浏览器原生箭头风格不一 */
select {
background-image: var(--chevron-down);
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 15px;
padding-right: 34px;
cursor: pointer;
}
/* 自定义勾选框：圆角方块 + 打勾 */
input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
flex: none;
width: 19px;
height: 19px;
border: 1.6px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
cursor: pointer;
position: relative;
transition: background var(--speed) ease, border-color var(--speed) ease;
margin: 0;
}
input[type=checkbox]:checked { background: var(--honey); border-color: var(--honey); }
input[type=checkbox]:checked::after {
content: "";
position: absolute;
left: 5.5px;
top: 2px;
width: 5px;
height: 9.5px;
border: solid #fff;
border-width: 0 2.2px 2.2px 0;
border-radius: 1px;
transform: rotate(42deg);
}
.hint {
font-size: 11.5px;
color: var(--text-faint);
line-height: 1.65;
margin-top: 6px;
}
.hint code {
background: var(--surface-soft);
border: 1px solid var(--line);
border-radius: 5px;
padding: 1px 5px;
font-size: 11px;
color: var(--text-mid);
}
/* 备注里的行内链接：淡蓝底 + 下划线，一眼看出可以点 */
.inline-link {
color: var(--primary-dark);
font-weight: 600;
padding: 1px 5px;
margin: 0 1px;
border-radius: 6px;
background: var(--primary-soft);
transition: background var(--speed) ease;
}
.inline-link:hover { background: #dbe8ff; }
/* ---------------------------------------------------------------- 7. 空状态 / 折叠区 */
.empty,
.empty-state {
text-align: center;
padding: 34px 20px;
color: var(--text-soft);
font-size: 12.5px;
line-height: 1.7;
}
.empty-state { padding: 60px 20px; }
/* 空状态里的小插画泡泡 */
.empty-emoji {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
font-size: 24.5px;
}
/* 首页空卡片：用虚线框表达"这里还是空的"，比实心卡片更轻 */
.list-item.is-empty {
border: 1px dashed var(--line-strong);
border-left: 4px dashed var(--line-strong);
background: transparent;
box-shadow: none;
flex-direction: column;
gap: 4px;
}
.list-item.is-empty .item-name { font-size: 14px; color: var(--text-mid); }
/* 「全部任务已完成🎉」（v1.14.0）：同样是虚线空卡片，但换成薄荷绿并给标题着色。
它和「暂无通知」长一样的话，一眼分不出"事情都办完了"和"这里本来就空着"。
复用 --mint 三件套，不新配颜色。 */
.list-item.is-empty.is-all-done {
border-color: var(--mint-line);
background: var(--mint-soft);
}
.list-item.is-empty.is-all-done .item-name { color: var(--mint-ink); font-weight: 700; }
/* 已完成折叠条：就地铺开的抽屉头 */
.fold-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 13px 16px;
margin-bottom: 12px;
background: var(--surface);
border: 1px dashed var(--line-strong);
border-radius: var(--r-md);
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
cursor: pointer;
user-select: none;
transition: background var(--speed) ease, color var(--speed) ease,
border-color var(--speed) ease;
}
.fold-bar > span { display: inline-flex; align-items: center; gap: 7px; }
.fold-bar .ic { font-size: 14px; }
.fold-bar:hover { background: var(--surface-soft); border-color: var(--primary-line); color: var(--primary-dark); }
.fold-bar:active { transform: scale(.99); }
/* 折叠条的箭头：现在是 SVG，靠 .chev 这个类旋转即可
（旧的 写法已随 Font Awesome 一起移除） */
.fold-bar .chev { transition: transform .25s var(--ease); }
.fold-bar.open {
background: var(--mint-soft);
border-style: solid;
border-color: var(--mint-line);
color: var(--mint-ink);
margin-bottom: 8px;
}
.fold-bar.open .chev { transform: rotate(180deg); }
.fold-body { display: none; }
.fold-body.open { display: block; animation: foldExpand .3s var(--ease); }
@keyframes foldExpand {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.fold-body .fold-loading,
.fold-loading {
text-align: center;
padding: 18px 0;
font-size: 12px;
color: var(--text-faint);
}
/* 折叠区底部哨兵（v1.10.0）：分页加载时摆在最后一条卡片后面。
它自己占一行：滚到它进入视口就再要一批，"加载中 / 已到底 / 加载失败"都写在这里。
加载失败时可以点一下重试 —— 所以它是 button 而不是 div（键盘也能聚焦）。 */
.fold-sentinel {
display: block;
width: 100%;
text-align: center;
padding: 14px 0 6px;
font-size: 12px;
font-family: inherit;
color: var(--text-faint);
background: none;
border: none;
}
.fold-sentinel.loading::after {
/* 纯 CSS 三个点，省一个转圈图标 */
content: '…';
animation: foldDots 1.2s steps(4, end) infinite;
}
@keyframes foldDots {
0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; }
}
.fold-sentinel.retry {
color: var(--rose-ink);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.fold-sentinel.end { color: var(--text-faint); }
/* 通用小徽标（管理页的数据库后端标记等） */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 700;
line-height: 1.5;
border: 1px solid transparent;
}
.badge.mysql { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-line); }
.badge.sqlite { background: var(--peach-soft); color: var(--peach-ink); border-color: var(--peach-line); }
/* 玫红徽标：用来提醒"这里的操作是不可逆的"（文件管理页的「删除只在本页」） */
.badge.danger { background: var(--rose-soft); color: var(--rose-ink); border-color: var(--rose-line); }
/* 原来还有一个 .badge.mint（接龙页那句「N 人已接龙」用的），
v1.7.0 把那行冗余说明删掉后它就没人用了，一并移除 */
/* 提示条 */
.notice-bar {
display: flex;
gap: 9px;
align-items: flex-start;
font-size: 12px;
line-height: 1.7;
padding: 12px 14px;
border-radius: var(--r-md);
background: var(--honey-soft);
border: 1px solid var(--honey-line);
color: var(--honey-ink);
margin-bottom: 18px;
}
.notice-bar .ic { font-size: 14px; margin-top: 2px; color: var(--honey); }
/* 成功态：接龙页的「接龙成功 / 你已接龙」用它 */
.notice-bar.ok {
background: var(--mint-soft);
border-color: var(--mint-line);
color: var(--mint-ink);
}
.notice-bar.ok .ic { color: var(--mint); }
/* ---------------------------------------------------------------- 8. 自绘弹窗 */
/* 全站唯一的对话框（v1.10.0，见 static/ui.js）。代替 window.confirm / alert：
奶油底、圆角卡片、胶囊按钮，与页面其它部分同一套令牌。
结构：.ui-mask（全屏遮罩）> .ui-dialog（卡片）> 图标 + 标题 + 正文 + 双按钮 */
html.ui-lock, html.ui-lock body { overflow: hidden; }
.ui-mask {
position: fixed;
inset: 0;
z-index: 200; /* 高于页眉(100)与底部导航，低于无 */
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
background: rgba(74, 64, 72, .38);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: uiMaskIn .18s ease;
}
@keyframes uiMaskIn { from { opacity: 0; } to { opacity: 1; } }
.ui-dialog {
width: 100%;
max-width: 330px;
padding: 22px 22px 18px;
text-align: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--sh-md);
animation: uiDialogIn .24s var(--ease);
}
@keyframes uiDialogIn {
from { opacity: 0; transform: translateY(10px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 图标泡泡：普通提示用雾蓝，危险操作用粉红 */
.ui-dialog-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin: 0 auto 12px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-dark);
font-size: 21px;
}
.ui-dialog-icon.danger { background: var(--rose-soft); color: var(--rose-ink); }
.ui-dialog-icon .ic { font-size: 21px; }
.ui-dialog-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
word-break: break-word;
}
.ui-dialog-msg {
font-size: 12.5px;
line-height: 1.75;
color: var(--text-mid);
word-break: break-word;
}
.ui-dialog-msg p + p { margin-top: 6px; }
.ui-dialog-msg em {
font-style: normal;
font-weight: 700;
color: var(--text);
}
/* 输入框弹窗（UI.prompt，v1.11.0）："新建文件夹"这类要你填一个名字的操作用它。
弹窗整体是居中的，输入框这一块单独左对齐 —— 标签紧贴输入框更好读。 */
.ui-dialog-field {
display: block;
margin-top: 14px;
text-align: left;
}
.ui-dialog-label {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(--text-mid);
margin-bottom: 5px;
}
.ui-dialog-input { text-align: left; }
/* 必填没填时点确认：输入框转玫红，不关窗，焦点回到框里 */
.ui-dialog-input.invalid {
border-color: var(--rose);
background: var(--rose-soft);
box-shadow: 0 0 0 3px rgba(255, 143, 163, .18);
}
.ui-dialog-actions {
display: flex;
gap: 10px;
margin-top: 18px;
}
/* 两个按钮各占一半：手机上一只手就能点到，也不会因为文字长短一宽一窄 */
.ui-dialog-actions .btn { flex: 1; padding: 11px 12px; }
/* 纯提示（UI.alert）时只有确认按钮，取消那格隐藏 —— 隐藏由 [hidden] 那条全局规则兜住 */
/* ============================================================================
页面：首页
========================================================================== */
/* ---- 页面：首页 ---- */
body.has-bottom-nav {
/* 底部留白要连安全区一起算：导航栏自己会长高那么多（见下面的 .bottom-nav），
不留出来的话最后一排卡片会被压在小白条下面 */
padding-bottom: calc(var(--nav-height) + 28px + env(safe-area-inset-bottom, 0px));
}
/* ---- 页眉 ---- */
.header {
position: sticky;
top: 0;
z-index: 100;
padding: 20px 20px 18px;
background: rgba(253, 249, 244, .88);
backdrop-filter: saturate(1.4) blur(12px);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, box-shadow .3s ease, padding .3s ease;
/* 毛玻璃背景铺满整行，内容居中收窄 */
display: flex;
flex-direction: column;
align-items: center;
}
.header.scrolled {
border-bottom-color: var(--line);
box-shadow: 0 3px 14px rgba(120, 96, 72, .05);
}
/* 标题左边一个可爱的小圆点，替代 emoji，风格更干净统一 */
.header h1 {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
max-width: var(--content-max);
font-size: 20.5px;
font-weight: 700;
letter-spacing: .3px;
line-height: 1.35;
}
.header h1::before {
content: "";
flex: none;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 4px var(--primary-soft);
}
.header .sub-title {
width: 100%;
max-width: var(--content-max);
font-size: 12px;
color: var(--text-soft);
margin-top: 5px;
padding-left: 20px;
}
/* ---- 下拉刷新指示器（v1.17.0 起真的能用） ----
位置与位移都由 static/app.js 的 PullToRefresh 用 transform 直接写：
手势期间写 `translate(-50%, Npx)`（跟着手指走），刷新中写在页眉下面那个固定位置。
这里只负责"它长什么样"与"回弹的动画"。 */
.ptr-element {
position: fixed;
top: 0;
left: 50%;
/* 初始位置在屏幕外面（-80px 足够把它整个藏起来），JS 拖动时才把它拉下来 */
transform: translate(-50%, -80px);
z-index: 9999;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--sh-md);
display: flex;
align-items: center;
justify-content: center;
/* 回弹动画。JS 在拖动期间会把 transition 临时设成 none，否则指示器跟不上手指 */
transition: transform .3s var(--ease);
/* 它只用来显示状态，不该抢走手势或挡到页眉上的按钮 */
pointer-events: none;
}
.ptr-element .ic { color: var(--primary); font-size: 17px; transition: transform .3s ease; }
/* 拽够了（松手就会刷新）：箭头翻过来 + 换色，给一个"这就松手"的信号 */
.ptr-element.ready .ic { transform: rotate(180deg); color: var(--primary-dark); }
/* 正在刷新：转圈 */
.ptr-element.refreshing .ic { animation: spin 1s linear infinite; }
/* 刷新完成：打勾 + 薄荷绿（成功是报喜，用与「全部任务已完成」同一支绿色） */
.ptr-element.done .ic { color: var(--mint-ink); }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- 栏目容器与切换 ---- */
.page { display: none; padding: 18px 16px 8px; }
.page.active { display: block; animation: fadeIn .34s var(--ease); }
/* 宽屏下把栏目内容收成居中窄栏（与页眉对齐） */
#page-notice, #page-homework, #page-online, #page-mine {
max-width: var(--content-max);
margin: 0 auto;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- 底部导航 ---- */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
margin: 0 auto;
max-width: var(--content-max);
/* 安全区（iPhone 的小白条 / 微信底栏）只加在**高度**上，下面再用内边距留出来：
内容区因此恒为 --nav-height，图标与文字在电脑端和手机端都居中。
v1.20.0 之前是 height 固定 68px、底部内边距吃安全区 —— 内容区被压扁，
整排图标文字被顶高，手机上看着明显偏上。 */
height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
padding: 0 6px env(safe-area-inset-bottom, 0px);
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(255, 255, 255, .94);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
border-top: 1px solid var(--line);
border-radius: 22px 22px 0 0;
box-shadow: 0 -4px 18px rgba(120, 96, 72, .06);
transform: translateY(0);
transition: transform .3s var(--ease);
}
.bottom-nav.hidden { transform: translateY(100%); }
.nav-item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
/* 上下内边距刻意不等（10 / 6）：图标与文字整体下移 2px。
导航栏是"图标在上、文字在下"的两行，几何居中之后图标看上去仍偏上一点，
所以按观感再压 2px 下来，电脑端和手机端都更稳。 */
padding: 10px 0 6px;
font-size: 10.5px;
font-weight: 600;
color: var(--text-faint);
transition: color var(--speed) ease;
}
.nav-item .ic { font-size: 20.5px; transition: transform .3s var(--ease); }
/* 选中态：图标上浮 + 背后一块柔和小色块 */
.nav-item::after {
content: "";
position: absolute;
/* 跟着上面那 2px 一起下移，色块才继续套在图标背后 */
top: 6px;
left: 50%;
width: 44px;
height: 30px;
margin-left: -22px;
border-radius: var(--r-pill);
background: var(--primary-soft);
opacity: 0;
transform: scale(.6);
transition: opacity var(--speed) ease, transform .3s var(--ease);
}
.nav-item > * { position: relative; z-index: 1; }
.nav-item.active { color: var(--primary-dark); }
.nav-item.active::after { opacity: 1; transform: scale(1); }
.nav-item.active .ic { transform: translateY(-1px) scale(1.06); }
/* ---- 页脚版本信息 ---- */
.update-info {
text-align: center;
font-size: 11.5px;
color: var(--text-faint);
margin-top: 18px;
padding-bottom: 18px;
letter-spacing: .2px;
}
/* 两行式页脚（v1.24.4）：说明页的页脚是「更新时间 / 版本号」+「备案」两行。
两行都是 .update-info 里的正文，所以内层 自带的外边距一律清掉 ——
行与行之间只留 .beian-line 自己那 5px，块的上留白 / 下留白仍由 .update-info 出。
首页的 .update-info 里没有子元素，这条对它没有影响。 */
.update-info > * { margin: 0; }
/* ============================================================================
页面：首页 —— 附件 / 文件收集（v1.17.0 起）
这一节只管**首页卡片上的胶囊**（「有附件」+「文件收集」）。
文件清单本身（事项页 /notice/{id}）用的是文件页那套 .file-list / .file-row，
不在这里重复定义 —— 它是同一批文件，长得一样才对。
========================================================================== */
/* 「有附件」胶囊。用雾青（--teal-*，v1.10.0 为「定时未开始」引入的那一支）：
它既不是"紧急"也不是"已完成"，是第三种"这条还有东西可拿"的中性提示。 */
.item-tag.tag-attach {
background: var(--teal-soft);
border-color: var(--teal-line);
color: var(--teal-ink);
}
.item-tag.tag-attach .ic { font-size: 11px; }
/* 「文件收集」胶囊（v1.18.0）：**与「接龙」同一支淡紫**（v1.21.0 按用户要求改色）。
理由：这两颗胶囊是一对"要同学动手"的提示（报名 / 交文件），
在卡片上并排出现时用同一种颜色才像一组；蜜黄（--honey-*）留给置顶，
免得一行的胶囊五彩斑斓。配上传图标，与「N 人接龙」照样一眼分得清。 */
.item-tag.tag-collect {
background: var(--lilac-soft);
border-color: var(--lilac-line);
color: var(--lilac-ink);
}
.item-tag.tag-collect .ic { font-size: 11px; }
/* ============================================================================
页面：事项页（/notice/{id}，v1.18.0）
接龙 / 上传附件 / 查看附件三块合在一页上，骨架（.admin-topbar / .admin-card /
.admin-sub / .file-list / .file-row / .rc-*）全部复用现成的，
本节只加这一页独有的几处。
========================================================================== */
/* 「查看附件」板块标题下面的说明行：条数与"点哪儿下载"。与 .admin-sub 同一处位置。 */
.attach-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attach-sub .attach-tip { color: var(--text-faint); font-size: 11.5px; }
/* 「上传附件」板块标题下面的说明行：与 .attach-sub 同一处位置、更小一号 */
.collect-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.collect-sub .collect-tip { color: var(--text-faint); font-size: 11.5px; }
/* 上传工具行：与「班级文件」页的 .file-toolbar 同一套，去掉多余的下边距 */
.collect-toolbar {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--line);
}
.collect-list { margin-top: 2px; }
/* 附件的空态沿用 .empty（文件页同一套），这里不额外定义 */
/* ---- 详细通知板块（v1.22.0）----
事项页最上面那一块。折叠的实现在这里（CSS 截断），"要不要显示那颗展开按钮"
由 static/notice.js 量一次真实高度决定（服务端只能估，估不准）。 */
.detail-card { position: relative; }
/* 正文容器：折叠态下固定行数，超出部分藏起来 */
.detail-body {
position: relative;
margin-top: 2px;
font-size: 13.5px;
line-height: 1.75;
color: var(--text);
word-break: break-word;
}
.detail-body.collapsed .detail-content {
display: -webkit-box;
-webkit-box-orient: vertical;
/* 行数由模板注入的 --detail-lines 决定（默认 8 行，见 notice.html）；
同时给标准属性，将来浏览器支持了就自动生效 */
-webkit-line-clamp: var(--detail-lines, 8);
line-clamp: var(--detail-lines, 8);
overflow: hidden;
}
/* 折叠时底部一块**毛玻璃**（v1.24.2 按用户要求：原来是白→透明的渐变，
最后一排字只是"变淡"，还不足以提示"下面没显示完"）。三层叠出来的效果：
· backdrop-filter 把被截断的那半行字磨开 —— 这是"毛玻璃"的本体；
· 一层往下越来越实的白，把截断的边收干净；
· mask 让上半截的模糊淡入，不出现一条生硬的横边。
v1.23.0 起只有**真的折起来了**（内容超出）才盖上 —— 以前是"折着就显示"，
于是内容本来就没超出时，最后一排字会被它压得发虚（用户反馈的正是这个）。
要不要盖由 static/notice.js 量完行数决定（.has-fade）。 */
.detail-fade {
display: none;
position: absolute;
left: 0; right: 0; bottom: 0;
/* v1.24.3 按用户要求"薄一点"：高度 46 → 38px、模糊 3 → 1.8px、
白色那层也调淡（.55 → .42）。以前那一块压得有点像"贴了张白纸"，
现在只是把最后半行字轻轻磨开，仍然看得出下面还有内容。 */
height: 38px;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .42) 48%,
var(--surface) 100%);
backdrop-filter: blur(1.8px);
-webkit-backdrop-filter: blur(1.8px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 52%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 52%);
pointer-events: none;
}
.detail-body.collapsed.has-fade .detail-fade { display: block; }
/* 正文里的元素：与全站同一套字号与间距，不用浏览器默认的（默认 h3 / ul 太大太散） */
.detail-content > *:first-child { margin-top: 0; }
.detail-content p { margin: 0 0 8px; }
.detail-content h1, .detail-content h2, .detail-content h3, .detail-content h4 {
font-size: 14.5px;
font-weight: 700;
margin: 14px 0 6px;
color: var(--text);
}
.detail-content ul, .detail-content ol { margin: 0 0 8px; padding-left: 22px; }
.detail-content li { margin-bottom: 3px; }
.detail-content blockquote {
margin: 0 0 8px;
padding: 6px 12px;
border-left: 3px solid var(--primary-line);
background: var(--surface-soft);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
color: var(--text-mid);
}
/* 插图：等比缩放到栏宽之内，圆角与全站一致 */
.detail-content img {
max-width: 100%;
height: auto;
border-radius: var(--r-sm);
border: 1px solid var(--line);
margin: 6px 0;
cursor: zoom-in;
}
/* 展开 / 收起按钮：整行居中的一条淡底，**不要边框**（v1.24.2 按用户要求去掉）——
它紧挨着上面那块毛玻璃，再套一圈虚线就成了两个框叠在一起。 */
.detail-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: 10px;
padding: 9px;
border: none;
border-radius: var(--r-sm);
background: var(--surface-soft);
color: var(--text-mid);
font-size: 12px;
font-weight: 600;
transition: background var(--speed) ease, color var(--speed) ease;
}
.detail-toggle:hover { background: var(--primary-soft); color: var(--primary-dark); }
.detail-toggle .ic { font-size: 13px; transition: transform var(--speed) var(--ease); }
.detail-body.open + .detail-toggle .ic { transform: rotate(180deg); }
/* 量高度那一瞬用的类：不做过渡，免得用户看到内容"抖一下"（见 notice.js） */
.detail-body.measuring, .detail-body.measuring .detail-fade { transition: none !important; }
/* ============================================================================
页面：管理后台 —— 附件（v1.17.0）
两处：表单里的"上传暂存区"（.attach-field）与列表每行展开后的清单
（.attach-line / .attach-body）。两处都用文件页那套 .file-row 来显示文件，
只在外面包一层，保证"同一种文件在哪儿都长得一样"。
========================================================================== */
.attach-field { margin-top: 4px; }
.attach-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.attach-actions .btn { padding: 9px 15px; font-size: 12.5px; }
.attach-hint-extra { color: var(--text-faint); }
/* 暂存区清单：一行一个文件，与列表里那份同款 */
.attach-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.attach-list[hidden] { display: none; }
.attach-list .file-row { background: var(--surface); }
/* 上传中的那一行：进度条替掉大小，右边的类型徽标换成百分比 */
.attach-bar {
display: block;
height: 5px;
margin-top: 4px;
border-radius: var(--r-pill);
background: var(--bg-lines);
overflow: hidden;
}
.attach-bar > i {
display: block;
height: 100%;
width: 0;
border-radius: var(--r-pill);
background: var(--primary);
transition: width .15s linear;
}
.attach-state {
flex: none;
font-size: 11.5px;
font-weight: 600;
color: var(--primary-dark);
font-variant-numeric: tabular-nums;
}
.file-row.is-uploading { opacity: .9; }
.attach-list .attach-del { flex: none; }
.attach-list .file-thumb .ic { font-size: 17px; }
/* 没有图标文字可用时（.file-thumb 里放的是