/* 极客松NAS系统的样子：「甲 沙盘」（2026-10-17 用户定，画布「极客松提交系统界面设计」）。
   中文用各台设备自带的正规字：苹果设备是苹方，Windows 是微软雅黑，别的用思源黑体；数字用 Bricolage Grotesque（第 39 届主海报的西文字，正常宽度）。
   寒蝉德黑体两款 2026-10-17 先后撤掉：窄体用户说「不要用这种拉长的字体」，正常宽度的用户又说「字还是被拉长的，不要这种字体，正规字体就行」。
   数字的字是裁过的子集，放在本程序的 fonts/ 下，出处与许可见那里的 字体说明.txt；不向外面的站取字体与脚本，现场没有外网也照样显示。
   颜色取第 39 届副海报量出来的：沙 #D29941、海；底是浅沙色，顶栏是深海色。
   系统内各页铺满全屏（用户同日「系统内，要充满全屏」）：不设版心，两边只留窄边；看板方砖一行五块，特别宽的屏一行十块。
   登录页整屏铺第 39 届母图，左下是照官方延展写的标题招牌。 */
@font-face { font-family: "JKS Num"; src: url(fonts/num.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
:root { font-size: 16px;
  --ground: #F3ECE0; --panel: #ffffff; --line: #E3DACB; --ink: #14212B; --soft: #4F483E; --faint: #6E6458;
  --sea: #0F2A33; --sea-2: #12323C; --sea-line: #3B5862; --sea-mute: #B9C6C9; --gold-light: #E9D3A8;
  --sand: #D29941; --sand-ink: #1B1408; --sand-text: #8A5D1A;
  --ok-bg: #D9ECE8; --ok: #1D5A5E; --bad: #B5452B; --bad-bg: #FBE6DF; --bad-text: #8C3A26; --later: #B9AE9C; --late: #2A6F97; --late-bg: #DCEAF3;
  --gut: clamp(1rem, 2.4vw, 3rem);
  --head: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  --num: "JKS Num", "Avenir Next", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); font: 1rem/1.6 var(--body); -webkit-text-size-adjust: 100%; }
a { color: #1F4E5A; text-decoration: none; } a:hover { text-decoration: underline; } i, em { font-style: normal; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.num, .mono { font-family: var(--num); } .mono { font-size: .8rem; color: var(--faint); }

/* 顶栏「甲 沙海条」（2026-10-17 用户定）：一条第 39 届母图的沙海照片，左边压深色让字看得清；左头两枚白色标识、竖线、标题块；
   右边离收片倒计时牌与身份牌，都是半透明的白牌；值班、管理的页签在沙海条下面一条深色窄栏里 */
header.top { color: #fff; }
header.top .band { position: relative; background: #0F2A33 url(沙海.jpg?v=97237f3aed) 50% 47% / cover no-repeat; }
header.top .band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 36, 46, .94) 0%, rgba(12, 36, 46, .86) 38%, rgba(12, 36, 46, .38) 72%, rgba(12, 36, 46, .24) 100%); }
header.top .band .in { position: relative; min-height: 8rem; padding: 1rem var(--gut); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; }
.brand { display: flex; align-items: center; gap: 1.35rem; color: #fff; } .brand:hover { text-decoration: none; }
.brand .logos { display: flex; align-items: flex-end; gap: .6rem; } .brand .logos img { height: 2.5rem; width: auto; display: block; }
.brand .vdiv { width: 1px; height: 3.25rem; background: rgba(255, 255, 255, .4); }
.title { display: flex; flex-direction: column; color: #fff; }
.title i { font-size: .76rem; color: #F1DDB4; line-height: 1.5; }
.title b { margin-top: .1rem; font: 600 1.9rem/1.2 var(--head); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .75rem; }
.title b span { font-size: 1.12rem; font-weight: 500; color: #F1C77A; }
.sand { align-self: center; padding: .05rem .5rem; border: 1px solid #f0b45a; color: #f0b45a; font: 400 .72rem/1.5 var(--body); }
header.top .right { display: flex; align-items: center; gap: .8rem; }
.clock { display: flex; flex-direction: column; align-items: flex-end; padding: .45rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); }
.clock i { font-size: .72rem; color: #fff; opacity: .9; } .clock b { font: 600 1.7rem/1.05 var(--num); color: #fff; }
.me { display: flex; align-items: center; gap: .85rem; padding: .5rem .7rem .5rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); }
.me .badge { min-width: 2.75rem; height: 2.75rem; padding: 0 .55rem; border-radius: 999px; background: #fff; color: #0F2A33; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.me .who { font-size: 1rem; color: #fff; white-space: nowrap; } .me .who small { font-size: .85rem; opacity: .9; } .me .sep { width: 1px; height: 1.4rem; background: rgba(255, 255, 255, .45); } .me form { margin: 0; }
button.link { background: none; border: 0; padding: 0 .4rem 0 0; min-height: 0; color: #fff; font: inherit; font-size: .9rem; white-space: nowrap; cursor: pointer; } button.link:hover { color: #F1C77A; }
nav.tabs { background: var(--sea); } nav.tabs .in { padding: 0 var(--gut); display: flex; flex-wrap: wrap; gap: 0 1.75rem; font-size: .95rem; }
nav.tabs a { color: var(--gold-light); padding: .65rem 0 calc(.65rem + 3px); } nav.tabs a:hover { color: #fff; text-decoration: none; }
nav.tabs a.on { color: #fff; padding-bottom: .65rem; border-bottom: 3px solid var(--sand); }

main { flex: 1; width: 100%; padding: 1.25rem var(--gut) 2.5rem; }
footer { padding: .8rem var(--gut) 1.2rem; text-align: center; font-size: .75rem; color: var(--faint); }
.note { margin: 0 0 1rem; padding: .6rem 1rem; background: var(--ok-bg); color: var(--ok); }
p.bad { margin: 0 0 1rem; padding: .6rem 1rem; background: var(--bad); color: #fff; }
.soft { color: var(--soft); font-size: .9rem; } .oktext { color: var(--ok); } .badtext { color: var(--bad-text); }

/* 看板顶上的五块数 */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--panel); padding: .8rem 1.2rem; }
.stat i { display: block; font-size: .85rem; color: var(--soft); }
.stat b { font: 600 2.3rem/1.1 var(--num); } .stat span { font: 500 1.15rem/1 var(--num); color: var(--faint); }
.stat.sand { background: var(--sand); color: var(--sand-ink); } .stat.sand i, .stat.sand span { color: var(--sand-ink); }
.stat.bad { background: var(--bad); color: #fff; } .stat.bad i, .stat.bad span { color: #fff; }

/* 二十块方砖：一行五块铺满，特别宽的屏一行十块 */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 2600px) { .tiles { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 1250px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { background: var(--panel); padding: .9rem 1rem .85rem; display: flex; flex-direction: column; gap: .6rem; }
.tile.alert { background: var(--bad-bg); outline: 2px solid var(--bad); outline-offset: -2px; }
.th { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.th .code { font: 600 1.9rem/1 var(--num); color: var(--ink); } .th span { font-size: 1rem; color: var(--soft); }
.chip { padding: .05rem .5rem; font-size: .78rem; align-self: center; } .chip.done { background: var(--ink); color: #fff; } .chip.sand { background: var(--sand); color: var(--sand-ink); }
.nodes5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.nodes5 .n { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.box { height: 1.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .8rem; line-height: 1.2; }
.box.ok { background: var(--ok-bg); color: var(--ok); } .box.miss { background: var(--bad); color: #fff; } .box.warn { background: var(--sand); color: var(--sand-ink); }
.box.late { background: var(--late-bg); color: var(--late); outline: 1px solid var(--late); outline-offset: -1px; } .box.late small { font: 500 .66rem/1.1 var(--num); }
.box.now { background: #FFF1C9; color: #6B4600; outline: 1px solid var(--sand); outline-offset: -1px; } .box.later { border: 1px dashed var(--later); color: var(--faint); }
.lab { font-size: .72rem; line-height: 1.25; color: var(--faint); text-align: center; white-space: nowrap; overflow: hidden; display: flex; flex-direction: column; }
.nodes5.big .box { height: 3.4rem; font-size: .95rem; } .nodes5.big .box small { font: 400 .75rem/1.2 var(--num); opacity: .85; }
.nodes5.big .lab { font-size: .78rem; white-space: normal; display: flex; flex-direction: column; line-height: 1.35; } .nodes5.big .lab .num { font-size: .75rem; }
.mats { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .8rem; color: var(--faint); } .mats .got { color: var(--ok); }
.acts { display: flex; flex-wrap: wrap; gap: .4rem; } .acts form { margin: 0; }
.legend { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .82rem; color: var(--soft); }
.legend .box { display: inline-flex; height: auto; padding: .2rem .65rem; }

/* 卡片与表 */
.card { background: var(--panel); padding: 1.2rem 1.4rem 1.3rem; margin-bottom: .75rem; min-width: 0; }
.card h2 { margin: 0 0 .9rem; font: 500 1.3rem/1.3 var(--head); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.card.once { outline: 2px solid var(--sand); outline-offset: -2px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: .75rem; margin-bottom: .75rem; } .two > .card { margin-bottom: 0; }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: .75rem; } .cats > .card { margin-bottom: 0; }
.tag { padding: .05rem .5rem; border: 1px solid var(--sand); color: var(--sand-text); font: 400 .75rem/1.5 var(--body); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { font-weight: 500; color: var(--soft); font-size: .82rem; border-bottom: 1px solid var(--ink); } tbody th { font-weight: 500; color: var(--soft); width: 9rem; }
td.name { min-width: 14rem; } td.name .tag { margin-left: .4rem; }

/* 团队的一页 */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.hero .id { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; } .hero .code { font: 600 3.6rem/1 var(--num); }
.hero .id span { font: 500 1.5rem/1.2 var(--head); } .hero .state { margin: 0 0 .3rem; font-size: 1rem; color: var(--soft); } .hero .back { margin: 0 0 .3rem auto; font-size: .9rem; }

/* 团队页与值班详情：「甲 两栏任务」加「乙 七十二小时」顶上的时间线（2026-10-17 用户定「用甲，但把乙的时间线移过来」，接替同日的「丙 三步走」）。
   顶上一条：队名、下一个节点与离收片两个倒计时、三天的时间线；下面两栏：左边收片要交的与签收，右边上传与本队文件表 */
body.team header .clock { display: none; }
body.team .card { border-radius: 12px; }
.tlcard { background: var(--panel); border-radius: 14px; padding: 1.4rem 1.6rem 1.3rem; margin-bottom: 1rem; }
.tlhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.tlhead .id { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; }
.tlhead .code { font: 600 3.4rem/1 var(--num); } .tlhead .id > span { font: 500 1.45rem/1.2 var(--head); } .tlhead .back { font-size: .9rem; margin-left: .6rem; }
.cds { display: flex; gap: 1rem 2.6rem; flex-wrap: wrap; }
.cd { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cd i { font-size: .82rem; color: var(--soft); } .cd b { font: 600 2.8rem/1.05 var(--num); } .cd small { font-size: .78rem; color: var(--faint); }
.cd.nx i { color: var(--sand-text); } .cd.nx b { color: #B07A22; }
.tl { position: relative; height: 6.2rem; margin: 1.9rem .9rem 0; }
.tl .rail { position: absolute; left: 0; right: 0; top: .55rem; height: 6px; border-radius: 3px; background: #EEE6D8; }
.tl .past { position: absolute; left: 0; top: .55rem; height: 6px; border-radius: 3px; background: var(--sand); }
.tl .mk { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; line-height: 1.35; }
.tl .dot { width: 1.35rem; height: 1.35rem; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2px solid #C9BBA4; }
.tl .mk.ok .dot { background: #2E7D78; border: 3px solid #fff; box-shadow: 0 0 0 1px #2E7D78; }
.tl .mk.next .dot, .tl .mk.now .dot { border: 4px solid var(--sand); }
.tl .mk.miss .dot { background: var(--bad); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--bad); }
.tl .mk.warn .dot { background: var(--sand); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--sand); }
.tl .mk.late .dot { background: var(--late); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--late); } .tl .mk.late small { color: var(--late); font-weight: 600; }
.tl .mk b { margin-top: .45rem; font-size: .85rem; font-weight: 600; } .tl .mk i { font-size: .76rem; color: var(--faint); } .tl .mk small { font-size: .72rem; color: var(--faint); }
.tl .mk.ok small { color: var(--ok); } .tl .mk.miss small { color: var(--bad-text); }
.tl .nowmk { position: absolute; top: -1.15rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tl .nowmk span { background: var(--ink); color: #fff; font-size: .7rem; padding: .05rem .4rem; border-radius: 4px; } .tl .nowmk::after { content: ''; width: 2px; height: 1.45rem; background: var(--ink); }
.tl .end { position: absolute; bottom: 0; font-size: .75rem; color: var(--faint); } .tl .end.l { left: -.9rem; } .tl .end.r { right: -.9rem; }
.remind { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 25rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.split aside, .split .main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .split .card { margin-bottom: 0; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }
.card h2 .cnt { margin-left: auto; font: 500 .92rem/1 var(--num); color: var(--faint); } .card h2 span.cnt:not(.num) { font: 400 .88rem/1 var(--body); }
.card.side p { margin: .3rem 0 0; } .card.side .txt { line-height: 1.75; font-size: .92rem; }
.reqlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.reqlist li { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: 10px; background: #FBF7F0; }
.reqlist li.got { background: #F2F8F6; }
.reqlist .mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px dashed var(--later); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--ok); box-sizing: border-box; }
.reqlist li.got .mark { border: 0; background: var(--ok-bg); }
.reqlist .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; } .reqlist .nm small { font-size: .75rem; color: var(--faint); }
.reqlist .acts { display: flex; align-items: center; gap: .4rem; flex: none; } .reqlist .acts form { margin: 0; }
.row.between { justify-content: space-between; align-items: center; }
.small { font-size: .85rem; }
a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.1rem; padding: .25rem .8rem; border-radius: 8px; font-size: .88rem; white-space: nowrap; text-decoration: none; }
a.btn.sea, button.sea { background: #1673A6; color: #fff; border: 0; border-radius: 10px; } a.btn.sea:hover, button.sea:hover { background: #125F8A; color: #fff; }
a.btn.ghost { border: 1px solid #C9BBA4; color: var(--soft); background: #fff; } a.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
button.sea { min-height: 2.75rem; padding: .5rem 1.8rem; }
button.small.warnbtn { min-height: 1.9rem; padding: .15rem .7rem; font-size: .8rem; border-radius: 6px; }
td.cat { color: var(--sand-text); white-space: nowrap; }
/* 上传：一排类别标签，一大块虚线框（拖进来或点了选文件） */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
label.chip { display: inline-flex; margin: 0; position: relative; }
label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
label.chip span { padding: .4rem .95rem; border-radius: 999px; background: var(--ground); color: var(--soft); font-size: .9rem; cursor: pointer; }
label.chip input:checked + span { background: var(--sea); color: #fff; } label.chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }
label.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 9.5rem; margin: 0 0 .9rem; padding: 1rem; border: 2px dashed #C9BBA4; border-radius: 12px; background: #FBF7F0; color: var(--ink); text-align: center; cursor: pointer; }
label.drop.over { border-color: #1673A6; background: #EEF6FB; }
label.drop input { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
label.drop b { font-size: 1.1rem; font-weight: 500; } label.drop u { color: #1673A6; text-decoration: none; border-bottom: 1px solid #1673A6; }
label.drop .picked { font-size: .95rem; color: var(--ok); } label.drop .exts { font-size: .8rem; color: var(--faint); } label.drop .exts i[hidden] { display: none; }

/* 表单 */
label { display: block; margin: .5rem 0; font-size: .88rem; color: var(--soft); }
label input, label select { display: block; width: 100%; max-width: 30rem; margin-top: .25rem; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid #CBBFAD; background: #fff; font: inherit; font-size: 1rem; color: var(--ink); }
label.check { display: flex; align-items: center; gap: .5rem; } label.check input { width: auto; min-height: 0; margin: 0; }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem 1rem; } .row label { flex: 1 1 14rem; } .row button { margin-bottom: .5rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 1rem; }
button { min-height: 2.75rem; padding: .5rem 1.1rem; border: 1px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
button:hover { background: var(--ground); } button.main { background: var(--sea); border-color: var(--sea); color: #fff; } button.main:hover { background: #18404C; }
button.small { min-height: 2.25rem; padding: .25rem .7rem; font-size: .85rem; }
button.warnbtn { min-height: 2.25rem; padding: .3rem .85rem; border: 0; background: var(--bad); color: #fff; font-size: .88rem; } button.warnbtn:hover { background: #973721; }
button[disabled] { opacity: .45; cursor: default; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; } form.inline input { min-height: 2.25rem; padding: .25rem .5rem; border: 1px solid #CBBFAD; font: inherit; }
.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.slip { padding: .6rem .8rem; border: 1px dashed var(--later); display: flex; justify-content: space-between; gap: .8rem; } .slip b { font-size: 1.2rem; } .slip span { font-size: 1rem; color: var(--ink); }
.up .row label { max-width: none; }
.bar { height: .6rem; background: var(--line); margin: .6rem 0 .3rem; } .bar span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
#ptext.bad { color: var(--bad-text); }

/* 登录「乙 沙上」：整屏铺第 39 届母图（上沙下海、V 字海岸线）。左下的海上是标题招牌，白字；
   登录表单不放盒子，深色字直接写在右上那片沙上，输入框是沙里压出的一道深线；登录键用海水的蓝 #1F9BD3（用户同日定「再浅一些，和海水差不多」，取底图中段海面量的色；白字对比约 3.2 比 1，字放到 24 像素按大字过线）。
   表单的位置按母图铺满时沙的位置算，16:9 上下各种宽屏都落在沙上。登录栏宽 15.2rem、登录键高 2.56rem、字 1.2rem 半粗（用户同日「进入栏按键再整体小五分之一，上面的两个横条也与其缩短后一样长」，原为 19rem、3.2rem、1.5rem）。 */
body.login { background: #2A8FC7; color: #fff; }
.gate { position: relative; flex: 1; min-height: 100vh; overflow: hidden; background: #2A8FC7 url(沙海.jpg?v=97237f3aed) 50% 42% / cover no-repeat; }
/* 左上角两枚标识，依次金鸡、厦门金鸡（用户同日「左上角加金鸡的两个LOGO」）：形状取标识库原图，颜色用白（照第 39 届官方版式在沙海画面上的做法；用户先定「换回原图的棕金色」，看过又定「换白色」），不加描边投影；
   高约屏高的 3.3%（用户同日「LOGO要整体小一半」，原为 6.6%），离顶 2.4%，整枚落在沙上、宽屏上也不碰左边那道浪；左边与下方招牌对齐 */
.marks { position: absolute; left: clamp(1.5rem, 6vw, 5.5rem); top: clamp(.9rem, 2.4vh, 2rem); display: flex; align-items: flex-end; gap: clamp(.5rem, 1.2vh, .9rem); }
.marks img { height: clamp(23px, 3.3vh, 40px); width: auto; display: block; }
.sign { position: absolute; left: clamp(1.5rem, 6vw, 5.5rem); bottom: clamp(1.5rem, 9vh, 5rem); color: #fff; text-shadow: 0 1px 16px rgba(0, 30, 52, .32); }
.sign p { margin: 0; }
.sign .fest { font: 500 clamp(2.4rem, 7vh, 4.4rem)/1.14 var(--head); }
.sign .en { margin-top: 1.1rem; font: 500 clamp(1rem, 2.3vh, 1.45rem)/1.3 var(--head); text-transform: uppercase; }
.sign .unit { margin-top: 1.6rem; font: 500 clamp(1.9rem, 4.9vh, 3rem)/1.15 var(--head); }
.sign .sub { margin-top: .35rem; font: 500 clamp(1.25rem, 2.9vh, 1.8rem)/1.3 var(--head); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
/* 登录栏的位置（用户同日「把整个登录栏位置，往下调整一点」）：高屏多往下、矮屏少挪，任何屏幕都不比原来的 6% 高、不超过 13%；
   左右仍在 59.5%（曾挪到 56%，用户同日「登录框不要向左移动，之前那个位置好，恢复到之前」） */
.door { position: absolute; left: 59.5%; top: clamp(6vh, calc(42vh - 290px), 13vh); width: 15.2rem; color: #3A2507; }
.door h1 { margin: 0 0 1rem; font: 500 1.5rem/1.2 var(--head); color: #2A1A04; }
.door form { display: flex; flex-direction: column; gap: 1.1rem; }
.door label { margin: 0; color: #4F3310; font-size: .88rem; }
.door label input { max-width: none; margin-top: .15rem; min-height: 2.6rem; padding: 0 .1rem; border: 0; border-bottom: 2px solid rgba(74, 42, 6, .62); background: transparent; color: #241503; font-size: 1.35rem; }
.door label input:focus { outline: none; border-bottom-color: #1F9BD3; }
/* 浏览器记住了账号会自动填充，并铺一层亮白蓝底（用户 10 月 17 日指出「怎么不是透明的了」）：把底色裁进字形里，底就看不见了；只拉长过渡时间的办法有的浏览器不认 */
.door label input:-webkit-autofill, .door label input:-webkit-autofill:hover, .door label input:-webkit-autofill:focus {
  -webkit-text-fill-color: #241503; caret-color: #241503; -webkit-background-clip: text; background-clip: text; box-shadow: none; transition: background-color 600000s 0s, color 600000s 0s; }
.door label input:autofill { -webkit-text-fill-color: #241503; -webkit-background-clip: text; background-clip: text; box-shadow: none; }
/* 登录键用海水的材质、半透明（用户同日「用透明条，不用这么硬」「蓝条使用海水材质，透明」）：键面是底图上带光纹的那段浅海，
   按照片铺满一屏时的比例取（1600 像素宽），和左下的海是同一片水；海水层五成五不透明（用户同日「再降透明度，目前还太实」），10 像素圆角，底下的沙先褪去大半橙色，叠起来不发灰。 */
.door button.main { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 2.56rem; margin-top: .3rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 10px;
  background: transparent; color: #fff; font: 600 1.2rem/1 var(--head); letter-spacing: .14em; text-shadow: 0 1px 8px rgba(0, 40, 70, .65), 0 0 2px rgba(0, 40, 70, .4);
  -webkit-backdrop-filter: blur(2px) saturate(.3) brightness(1.08); backdrop-filter: blur(2px) saturate(.3) brightness(1.08); }
.door button.main::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #1F9BD3 url(沙海.jpg?v=97237f3aed) -470px -600px / 1600px auto no-repeat; opacity: .55; transition: opacity .15s; }
.door button.main:hover::before { opacity: .78; }
.door p.bad { margin: 0 0 .8rem; padding: .45rem .8rem; background: #B5452B; color: #fff; font-size: .88rem; }
.gate .foot { position: absolute; right: clamp(1.5rem, 6vw, 5.5rem); bottom: 1.4rem; margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 8px rgba(0, 30, 52, .3); }
@media (max-width: 1100px) and (min-width: 701px) { .door { left: auto; right: 4vw; } }

/* 手机：值班长在手机上看看板 */
@media (max-width: 700px) {
  header.top .band .in { min-height: 0; padding: .8rem 1rem; gap: .6rem; } .brand { gap: .7rem; } .brand .logos img { height: 1.6rem; } .brand .vdiv { height: 2.2rem; }
  .title i { font-size: .62rem; } .title b { font-size: 1.2rem; } .title b span { font-size: .82rem; }
  header.top .right { width: 100%; justify-content: space-between; } .clock { padding: .3rem .7rem; } .clock b { font-size: 1.25rem; }
  .me .who small, .clock .d { display: none; } .clock i { white-space: nowrap; }
  .me { gap: .55rem; padding: .3rem .5rem .3rem .3rem; } .me .badge { min-width: 2.1rem; height: 2.1rem; font-size: .85rem; } .me .who { font-size: .85rem; }
  nav.tabs .in { padding: 0 1rem; gap: 0 1.1rem; font-size: .88rem; }
  main { padding: .8rem .7rem 2rem; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: .6rem; } .stat { padding: .5rem .6rem; }
  .stat i { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat b { font-size: 1.4rem; } .stat span { font-size: .8rem; }
  .stat.wide-only { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .tile { padding: .55rem .65rem; gap: .4rem; } .tile.alert { order: -1; }
  .th { gap: .35rem; flex-wrap: nowrap; } .th .code { font-size: 1.25rem; } .th span { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .th .chip { display: none; }
  .tiles .box { height: .5rem; font-size: 0; } .tiles .lab, .tiles .mats, .tiles .acts { display: none; }
  .legend { font-size: .74rem; }
  .hero .code { font-size: 2.8rem; } .hero .id span { font-size: 1.15rem; }
  .two, .cats { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 1rem; } .nodes5.big .box { height: 3rem; font-size: .8rem; } .nodes5.big .lab { font-size: .68rem; }
  .tlcard { padding: 1rem 1rem .9rem; } .tlhead .code { font-size: 2.6rem; } .tlhead .id > span { font-size: 1.15rem; } .cds { gap: .8rem 1.6rem; } .cd { align-items: flex-start; text-align: left; } .cd b { font-size: 2rem; }
  .tl { margin: 1.7rem .6rem 0; height: 5.6rem; } .tl .mk b { font-size: .68rem; } .tl .mk i { font-size: .6rem; } .tl .mk small { font-size: .58rem; } .tl .end { font-size: .62rem; }
  .gate { display: flex; flex-direction: column; min-height: 100vh; background: none; }
  .sign { position: static; padding: 34vh 1.25rem 1.4rem; background: #2A8FC7 url(沙海.jpg?v=97237f3aed) 22% 100% / cover no-repeat; }
  .sign .fest { font-size: 2.3rem; } .sign .en { font-size: 1rem; } .sign .unit { font-size: 1.9rem; margin-top: 1.1rem; } .sign .sub { font-size: 1.3rem; }
  .door { position: static; width: auto; flex: 1; padding: 1.4rem 1.25rem 1.6rem; background: #D9A24C url(沙海.jpg?v=97237f3aed) 67.6% 0 / 700% auto no-repeat; }
  .door { padding-bottom: 3rem; }
  .gate .foot { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; color: #4F3310; text-shadow: none; }
}