/* 审看系统的样子（D229，2026-10-09 定）：两套。
   甲「放映厅」——登录页与审看人的各页：深色底、金色点题，面板圆角，像坐在放映厅里看片；
   乙「展厅」——管理端：浅底、深蓝顶栏与金色细节，直角，大号数字。
   版面沿用 D225 以来的：审看一部作品的页铺满屏幕，左任务栏、中间播放窗与资料、右意见表，观看与填表同在一页。
   字体都放在本站的 fonts/ 目录（出处与许可见那里的 字体说明.txt）：标题用思源宋体，正文用思源黑体，这两款中文字体分成小片、由 fonts/cjk.css 引进来，
   浏览器只取页面用到的几片；数字与拉丁字，审看端用 Outfit，管理端用 Bodoni Moda。字体没到之前先用各人电脑自带的宋体与黑体顶着。
   不向外面的站取任何字体与脚本；字号不随宽屏放大。 */
@font-face { font-family: "Outfit"; src: url(fonts/outfit.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(fonts/bodoni-moda.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
:root { font-size: 16px;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --lat: "Outfit", "Noto Sans SC", "Avenir Next", "Avenir", "Century Gothic", "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --num: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif; }
.t-a { --bg: #0a0d14; --bar: #0d111a; --panel: #111723; --sel: #182033; --wash: #0d111a; --field: #0d111a; --line: #1e2636; --line2: #2a3141; --edge: #2c364a; --rim: #5d6880;
  --ink: #eef0f4; --soft: #c9cfda; --mute: #9aa3b2; --faint: #808a9c; --gold: #d9b25f; --gold-text: #d9b25f; --main: #d9b25f; --on-main: #1a1406; --main-hi: #f0cf86;
  --ok: #5fd1a0; --warn: #f0b45a; --bad: #ef8a7a; --link: #d9b25f; --link-hi: #f0cf86; --r: 14px; --r2: 10px; --pill: 999px; --top: 14.5rem; color-scheme: dark; }
.t-b { --bg: #f3f4f6; --bar: #0c1c36; --panel: #fff; --sel: #f3f4f6; --wash: #f7f8fa; --field: #fff; --line: #e2e5ea; --line2: #d3d8e0; --edge: #d3d8e0; --rim: #7f8998;
  --ink: #0d1626; --soft: #4a5568; --mute: #4a5568; --faint: #6b7686; --gold: #b8892f; --gold-text: #8a6520; --main: #0c1c36; --on-main: #fff; --main-hi: #142a4d;
  --ok: #17633f; --warn: #7a4e00; --bad: #a8321f; --link: #1f4f9c; --link-hi: #0c1c36; --r: 0px; --r2: 0px; --pill: 0px; --top: 18rem; color-scheme: light; }      /* --top：播放窗以外要留在一屏里的高度；管理端多一条页签，多留一些 */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 1rem/1.7 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hi); text-decoration: underline; }
i, em { font-style: normal; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 页眉：标识、单元全称与系统名、引导行；审看一部作品时中间有一粒写着哪一轮、到哪一步 */
header { background: var(--bar); border-bottom: 1px solid var(--line); }
.t-b header { --ink: #fff; --soft: #c5cfe0; --mute: #a9b6cc; --faint: #a9b6cc; --gold: #d6ab52; --edge: #2a3d61; --warn: #f0b45a; --link-hi: #fff; color: #eef1f6; border-bottom: 0; }
header .in { max-width: 85rem; margin: 0 auto; padding: .7rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem 1.75rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--ink); } .brand:hover { text-decoration: none; color: var(--ink); }
.logo { flex: none; display: flex; align-items: center; justify-content: center; } .t-b .logo { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; } .t-b .logo img { width: 30px; height: 30px; }
.brand b { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .8rem; font: 700 1.1rem/1.4 var(--serif); letter-spacing: .06em; }
.brand em { padding-left: .8rem; border-left: 1px solid var(--edge); font: 400 .81rem/1.3 var(--sans); letter-spacing: .3em; color: var(--gold); }
.brand small, .face h1 small { padding: .05rem .6rem; border: 1px solid var(--warn); border-radius: var(--pill); font: 400 .72rem/1.5 var(--sans); letter-spacing: .1em; color: var(--warn); }
.brand i { display: block; margin-top: .1rem; font-size: .72rem; letter-spacing: .24em; color: var(--mute); }
.pill { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .3rem 1rem; border: 1px solid var(--edge); border-radius: 999px; font-size: .81rem; color: var(--soft); }
.pill::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } .pill.off::before { background: var(--faint); } .pill i { color: var(--faint); }
nav { display: flex; align-items: center; gap: .2rem 1.4rem; flex-wrap: wrap; font-size: .875rem; } nav form { margin: 0; }
nav a, button.link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; letter-spacing: 0; color: var(--mute); cursor: pointer; }
nav a span, button.link span { padding: .15rem 0; border-bottom: 2px solid transparent; } nav a:hover, button.link:hover { color: var(--ink); text-decoration: none; background: none; }
nav a.on { color: var(--ink); font-weight: 500; } nav a.on span { border-bottom-color: var(--gold); }
nav .who { display: flex; align-items: center; gap: .6rem; padding-left: 1.25rem; border-left: 1px solid var(--edge); color: var(--soft); }
nav .who i { color: var(--mute); } nav .who b { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font: 400 .81rem/1 var(--sans); }
/* 管理端的页签：顶栏下面一条白底，当前一项压一道深蓝的粗线 */
.tabs { background: var(--panel); border-bottom: 1px solid var(--line); } .tabs .in { max-width: 85rem; margin: 0 auto; padding: 0 2.5rem; display: flex; flex-wrap: wrap; gap: 0 2.25rem; }
.tabs a { padding: .8rem 0 calc(.8rem - 3px); border-bottom: 3px solid transparent; color: var(--soft); } .tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--main); }
footer { padding: .9rem 2.5rem 1.3rem; text-align: center; font-size: .72rem; letter-spacing: .14em; color: var(--faint); }

/* 正文 */
main { flex: 1; width: 100%; max-width: 85rem; margin: 0 auto; padding: 2rem 2.5rem 3rem; }
/* 审看一部作品的页铺满整个屏幕：不设版心，四边只留窄边，页眉压矮，把地方让给播放窗 */
body.w header .in, main.wide { max-width: none; } body.w header .in { padding: .35rem 1.5rem; } main.wide { padding: 1rem 1.5rem 2rem; } body.w .brand i { display: none; } body.w .logo img { width: 30px; height: 30px; }
body.w.t-b .logo { width: 2.25rem; height: 2.25rem; } body.w.t-b .logo img { width: 26px; height: 26px; }
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: .9rem 1.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero p { margin: 0; }
.hero .plate { font-size: .81rem; letter-spacing: .3em; color: var(--gold-text); } .hero h1 { margin: 0; font: 700 2.1rem/1.35 var(--serif); letter-spacing: .06em; } .t-b .hero h1 { font-weight: 900; font-size: 2.6rem; }
.hero h1 .tag { margin-left: .5rem; font-size: .875rem; padding: .2rem .9rem; } .hero .meta { margin: .2rem 0 0; } .hero .acts { margin: 0; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.75rem 1.5rem; margin-bottom: 1.5rem; color: inherit; overflow-x: auto; }
.t-b .card { border: 0; } .t-b .card > h2:first-child { margin: -1.4rem -1.75rem 1.1rem; padding: 1.1rem 1.75rem .8rem; border-bottom: 1px solid var(--ink); }
.card.narrow { max-width: 27rem; margin: 3rem auto; } .card.once { border: 2px solid var(--gold); }
h1 { font: 700 1.6rem/1.35 var(--serif); letter-spacing: .03em; margin: 0 0 .5rem; } h1 small { display: block; font: 400 .9rem/1.6 var(--sans); letter-spacing: .08em; color: var(--faint); }
h2 { font: 700 1.25rem/1.4 var(--serif); letter-spacing: .1em; margin: 0 0 .8rem; } h3 { font: 400 .78rem/1.5 var(--sans); letter-spacing: .2em; color: var(--gold-text); margin: 0 0 .3rem; }
.card > h3 { margin-top: 1.2rem; }
p { margin: .4rem 0; } .hint { color: var(--mute); font-size: .9rem; } .count { color: var(--mute); font-size: .9rem; margin: .5rem 0 .9rem; }
.note, .bad { padding: .7rem 1rem; margin: 0 0 1.25rem; border-left: 4px solid; border-radius: var(--r2); background: var(--panel); } .note { border-color: var(--ok); color: var(--ok); } .bad { border-color: var(--bad); color: var(--bad); }
.t-b .note { background: #e3f3ea; } .t-b .bad { background: #fbe6e2; }
.warn { color: var(--bad); } .t-a .warn { color: var(--warn); } .crumb { font-size: .875rem; color: var(--mute); margin: 0 0 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; } th, td { text-align: left; padding: .7rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { font-weight: 400; font-size: .75rem; letter-spacing: .2em; color: var(--faint); white-space: nowrap; border-bottom: 1px solid var(--line2); } .t-b thead th { border-bottom-color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; } .t-a td a { color: var(--ink); } .t-a td a:hover { color: var(--main-hi); }
td.no { font: .88rem var(--lat); letter-spacing: .04em; white-space: nowrap; color: var(--faint); } .t-b td.no { font: 1.02rem var(--num); } td.pw { font: 1.05rem ui-monospace, Menlo, monospace; letter-spacing: .08em; }
td small { color: var(--mute); } tr.gone td { color: var(--faint); } tr.gone .tag { opacity: .7; }
td.prog { min-width: 11rem; white-space: nowrap; } td.prog .bar { display: inline-block; width: calc(100% - 4.5rem); vertical-align: middle; margin-right: .75rem; }
.tag { display: inline-block; font: 500 .75rem/1.6 var(--sans); letter-spacing: .08em; padding: .05rem .7rem; border-radius: var(--pill); vertical-align: middle; white-space: nowrap; }
.t-a .tag { border: 1px solid var(--edge); color: var(--mute); } .t-a .tag.s-draft, .t-a .tag.k-edge { color: var(--warn); border-color: #6d5630; } .t-a .tag.s-done, .t-a .tag.s-on, .t-a .tag.k-in { color: var(--ok); border-color: #2c6d57; }
.t-a .tag.k-out { color: var(--bad); border-color: #7a443c; }
.t-b .tag { background: #e8ebf0; color: var(--soft); } .t-b .tag.s-done, .t-b .tag.s-on, .t-b .tag.k-in { background: #e3f3ea; color: #17633f; } .t-b .tag.s-draft, .t-b .tag.k-edge { background: #fdf3df; color: #7a4e00; }
.t-b .tag.k-out { background: #fbe6e2; color: #a8321f; }
.bar { height: 6px; background: var(--line); border-radius: var(--pill); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--gold); } .bar.full i { background: var(--ok); } .t-b .bar.full i { background: #1f8a5b; }
.meta { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; color: var(--mute); font-size: .9rem; margin: .2rem 0 1rem; }
ul.plain { margin: .2rem 0 .6rem; padding-left: 1.2rem; font-size: .93rem; } ol.pledge { padding-left: 1.4rem; } ol.pledge li { margin: .55rem 0; }
details { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; } summary { cursor: pointer; color: var(--mute); font-size: .92rem; padding: .5rem 0; } .card > details:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* 表单 */
form { margin: .6rem 0 0; } label { display: block; margin: .7rem 0; font-size: .875rem; color: var(--mute); } label b { font: 500 .94rem/1.5 var(--sans); color: var(--ink); display: block; }
input:not([type=checkbox]):not([type=radio]), textarea, select { display: block; width: 100%; min-height: 2.875rem; margin-top: .4rem; padding: .5rem .9rem; font: 1rem/1.5 var(--sans); color: var(--ink);
  background: var(--field); border: 1px solid var(--rim); border-radius: var(--r2); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input.score { max-width: 9rem; font: 500 1.5rem/1.3 var(--lat); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
label.pick, label.tick { display: flex; align-items: center; gap: .8rem; color: var(--ink); font-size: 1rem; margin: 0; min-height: 2.75rem; cursor: pointer; }
label.pick { min-height: 3.375rem; padding: 0 1rem; border: 1px solid var(--rim); border-radius: var(--r2); margin-top: .6rem; }
.t-a label.pick:has(input:checked) { border-color: var(--gold); background: #1c2130; color: #f0cf86; font-weight: 500; } .t-b label.pick:has(input:checked) { border: 2px solid var(--main); padding: 0 calc(1rem - 1px); font-weight: 500; }
input[type=radio], input[type=checkbox] { width: 1.125rem; height: 1.125rem; accent-color: var(--main); flex: none; }
button { font: 500 1rem/1.4 var(--sans); cursor: pointer; white-space: nowrap; flex: none; min-height: 2.875rem; padding: 0 1.6rem; letter-spacing: .12em; color: var(--on-main); background: var(--main);
  border: 1px solid var(--main); border-radius: var(--r2); } button:hover { background: var(--main-hi); border-color: var(--main-hi); }
button.ghost { background: transparent; color: var(--ink); border-color: var(--rim); font-weight: 400; } button.ghost:hover { background: var(--sel); border-color: var(--ink); } .t-b button.ghost { border-color: var(--main); color: var(--main); }
button.small { min-height: 2.25rem; padding: 0 .9rem; font-size: .85rem; letter-spacing: .05em; }
.acts { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .9rem; } .acts form { margin: 0; display: flex; gap: .5rem; } .acts form input { margin-top: 0; min-width: 9rem; } td.acts { margin: 0; }
form.inline { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; } form.inline label { margin: 0; flex: 1 1 9rem; } form.inline label.tick { flex: 1 1 100%; }
td form.inline { flex-wrap: nowrap; margin: 0; align-items: center; } td form.inline input, td form.inline select { min-height: 2.25rem; margin-top: 0; padding: .2rem .6rem; font-size: .88rem; min-width: 5rem; }
.roles { display: flex; flex-wrap: wrap; gap: 0 1.4rem; flex: 1 1 100%; }

/* 终评的表决：每一类一栏，范围里的作品逐部一个勾选框；表决台上的得票表 */
fieldset.ballot { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; } .ballot legend { padding: 0; margin-bottom: .2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.ballot legend b { font: 700 1.2rem/1.5 var(--serif); letter-spacing: .08em; } .ballot legend span { font-size: .875rem; color: var(--mute); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 .9rem; } .picks label.pick { align-items: center; padding-top: .45rem; padding-bottom: .45rem; }
.picks .pick span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7rem; min-width: 0; } .picks .pick i { font: .78rem var(--lat); letter-spacing: .06em; color: var(--faint); } .picks .pick small { flex: 1 1 100%; font-size: .8rem; color: var(--mute); font-weight: 400; }
.t-a .picks label.pick:has(input:checked) small { color: var(--soft); } .picks .pick.off { opacity: .5; cursor: not-allowed; }
td.num { font: 500 1.5rem/1.2 var(--num); white-space: nowrap; } .t-a td.num { font: 600 1.25rem/1.2 var(--lat); } table.votes td:first-child { min-width: 12rem; }
.card details > table { margin-top: .5rem; }

/* 管理端：总览的三格、轮次页顶上的四格大数字 */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .grid .card { margin: 0; }
.stat { border-top: 3px solid var(--main) !important; } .stat:hover { text-decoration: none; color: inherit; background: var(--wash); } .stat p { margin: 0; color: var(--mute); font-size: .9rem; }
.stat p.big { margin: .2rem 0 .7rem; } .stat b { font: 500 3.5rem/1.1 var(--num); color: var(--ink); margin-right: .2rem; } .stat .bar { margin-bottom: .7rem; }
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border-top: 3px solid var(--main); margin-bottom: 1.5rem; }
.kpi > div { padding: 1.2rem 1.6rem 1.3rem; border-right: 1px solid var(--line); min-width: 0; } .kpi > div:last-child { border-right: 0; } .kpi span { display: block; font-size: .75rem; letter-spacing: .2em; color: var(--faint); }
.kpi b { display: block; font: 500 4rem/1.1 var(--num); } .kpi b small { margin-left: .6rem; font: 400 .875rem/1 var(--sans); color: var(--faint); } .kpi b.hi { color: var(--gold-text); } .kpi .bar { height: 4px; margin-top: .3rem; }
.kpi > div.lack { background: #fdf3df; } .kpi .lack span, .kpi .lack b, .kpi .lack b small { color: #7a4e00; }

/* 审看一部作品：任务栏、作品（播放窗在最上面）、意见表。观看与填表在同一页：宽屏上表跟着页面走，始终在播放窗旁边 */
.desk { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 23rem; grid-template-areas: 'rail roll col' 'rail more col'; grid-template-rows: auto 1fr; column-gap: 1.25rem; align-items: start; }
.desk.two { grid-template-columns: minmax(0, 1fr) 23rem; grid-template-areas: 'roll col' 'more col'; } .rail { grid-area: rail; } .roll { grid-area: roll; } .roll.more { grid-area: more; } .col { grid-area: col; }
.rail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); display: flex; flex-direction: column; }
.rail-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); } .rail-head svg { flex: none; } .rail-head .due { flex: 1 1 100%; letter-spacing: 0; color: var(--faint); }
.ring { fill: none; stroke: var(--line2); stroke-width: 5; } .ring.on { stroke: var(--gold); stroke-linecap: round; }
.rail-head b { display: block; font: 600 1.6rem/1.15 var(--lat); } .rail-head b span { font-size: 1rem; font-weight: 400; color: var(--faint); } .rail-head p { margin: .1rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--mute); letter-spacing: .06em; }
.rail-list { overflow: auto; } .rail-list a { display: flex; align-items: center; gap: .75rem; min-height: 3.6rem; padding: .4rem 1.25rem; border-top: 1px solid var(--line); color: var(--soft); font-size: .94rem; line-height: 1.4; }
.rail-list a:first-child { border-top: 0; } .rail-list a:hover { text-decoration: none; background: var(--sel); color: var(--ink); }
.rail-list i { flex: none; min-width: 1.9rem; font: .75rem var(--lat); letter-spacing: .06em; color: var(--faint); } .rail-list span { flex: 1; min-width: 0; } .rail-list em { flex: none; font-size: .72rem; letter-spacing: .1em; color: var(--faint); }
.rail-list em.s-done { color: var(--ok); } .rail-list em.s-draft { color: var(--warn); } .rail-list em.s-now { color: var(--gold-text); }
.rail-list a.now { border-left: 4px solid var(--gold); padding-left: calc(1.25rem - 4px); background: var(--sel); color: var(--ink); font-weight: 500; } .rail-list a.now i { color: var(--gold-text); }
.roll { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
/* 播放窗。横片：宽度不小于 731 像素（抖音的播放页窄于它就退成手机竖版），高度照画幅算再加底下 36 像素的进度条；屏幕矮时收窄一点，免得进度条落到屏幕外。竖片：用它的竖版，固定大小摆在中间 */
.screen { background: #000; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; justify-content: center; } .t-b .screen { border: 0; }
.screen .box { position: relative; width: clamp(731px, calc((100vh - var(--top) - 36px) / var(--k)), 100%); }
.screen .box::before { content: ''; display: block; padding-top: calc(var(--k) * 100% + 36px); } .screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; color-scheme: light; }      /* 深色页里嵌浅色的页，不写这一句浏览器会给它垫一块白底，没放出来之前白得晃眼 */
.screen.tall .box { width: 324px; } .screen.tall .box::before { padding-top: 672px; }
/* 备选的小云雀 AI：它的分享页照手机竖屏排，给一个竖的窗口，高度随屏幕 */
.screen.xq .box { width: 430px; max-width: 100%; } .screen.xq .box::before { padding-top: 0; height: clamp(560px, calc(100vh - var(--top)), 780px); }
.screenbar { display: flex; justify-content: space-between; align-items: center; gap: .3rem 1.5rem; flex-wrap: wrap; font-size: .81rem; color: var(--mute); } .screenbar p { margin: 0; }
.screenbar a { display: inline-flex; align-items: center; min-height: 2.25rem; margin-left: .5rem; padding: 0 1rem; border: 1px solid var(--edge); border-radius: 999px; color: var(--soft); }
.screenbar a:hover { text-decoration: none; border-color: var(--gold); color: var(--ink); } .t-b .screenbar a { border-radius: 0; border-color: var(--rim); }
.roll-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem 1.75rem; flex-wrap: wrap; } .roll-head p { margin: 0; } .roll-head .ttl { min-width: 0; }
.roll-head .no { font: .75rem/1.6 var(--lat); letter-spacing: .3em; color: var(--gold-text); } .roll-head .no span { margin-right: .7em; font-family: var(--sans); letter-spacing: .2em; color: var(--faint); } .roll-head .no b { font-weight: 500; }
.roll-head h1 { margin: .1rem 0 0; font-size: 2.1rem; line-height: 1.3; } .roll-head .en { font: .875rem/1.6 var(--lat); color: var(--mute); }
.step { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; font-size: .81rem; color: var(--mute); }
.step a, .step .off { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border: 1px solid var(--edge); border-radius: var(--pill); color: var(--soft); } .step a:hover { text-decoration: none; border-color: var(--gold); color: var(--ink); }
.step .off { color: var(--faint); border-style: dashed; } .t-b .step a, .t-b .step .off { border-color: var(--rim); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-weight: 500; } .t-b .facts { border: 0; border-top: 3px solid var(--main); }
.facts div { padding: .85rem 1.25rem; border-right: 1px solid var(--line); min-width: 0; } .facts div:last-child { border-right: 0; } .facts span { display: block; font-size: .72rem; font-weight: 400; letter-spacing: .2em; color: var(--faint); white-space: nowrap; }
.watchbar { padding: 1.4rem 1.6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.75rem; flex-wrap: wrap; } .watchbar p { margin: 0; font-size: .94rem; color: var(--soft); }
.watchbar div { display: flex; gap: .75rem; flex-wrap: wrap; }
a.watch { display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.6rem; background: var(--main); color: var(--on-main); border: 1px solid var(--main); border-radius: var(--r2); font-weight: 500; letter-spacing: .1em; }
a.watch.alt { background: transparent; color: var(--ink); border-color: var(--rim); font-weight: 400; } a.watch:hover { text-decoration: none; background: var(--main-hi); color: var(--on-main); } a.watch.alt:hover { background: var(--sel); color: var(--ink); }
.roll.more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: .9rem; } .row { padding: 1.1rem 1.4rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; } .t-b .row { border: 0; }
.row h3 { margin: 0 0 .4rem; } .row p { margin: 0; color: var(--soft); font-size: .94rem; } .row:first-child:last-child, .row:nth-child(odd):last-child { grid-column: 1 / -1; }
.col { min-width: 0; position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow: auto; }
.sheet { margin: 0; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; } .t-b .sheet { border: 0; border-top: 3px solid var(--main); }
.sheet-head { padding: 1.05rem 1.5rem .95rem; border-bottom: 1px solid var(--line); } .sheet-head b { display: block; font: 700 1.3rem/1.4 var(--serif); letter-spacing: .16em; }
.sheet-head span { font-size: .75rem; letter-spacing: .08em; color: var(--faint); } .sheet .how { margin: 0; padding: .85rem 1.5rem 1rem; font-size: .8rem; line-height: 1.65; color: var(--mute); border-top: 1px solid var(--line); background: var(--wash); }
.part { margin: 0; padding: .95rem 1.5rem 1.05rem; border-bottom: 1px solid var(--line); } .part h3 { color: var(--mute); margin: 0 0 .1rem; } .part label:not(.pick):not(.tick) { margin: 0; } .part:last-child { border-bottom: 0; } .part p { margin: 0 0 .3rem; }
.part label b { font: 400 .78rem/1.5 var(--sans); letter-spacing: .2em; color: var(--mute); }
.sheet-foot { padding: .7rem 1.5rem 1.1rem; } .sheet-foot .acts { margin-top: .5rem; gap: .6rem; } .sheet-foot .acts button { min-height: 3.25rem; padding: 0 .8rem; } .sheet-foot .acts button:first-child { flex: 2 1 9rem; letter-spacing: .2em; }
.sheet-foot .acts button.ghost { flex: 1 1 6.5rem; letter-spacing: .05em; } .sign { font-size: .75rem; color: var(--faint); margin-top: .8rem; }
.sheet label.tick { min-height: 2.75rem; }
details.more { margin-top: .9rem; border-top: 0; padding: 0 .4rem; font-size: .9rem; }

/* 水印：每页带当前账号的姓名 */
.mark { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; opacity: .06; }
.mark span { flex: 0 0 25%; text-align: center; transform: rotate(-24deg); font-size: .85rem; white-space: nowrap; padding: 2.2rem 0; }

/* 登录页：左边一条胶片齿孔，中间名称与三轮到哪一步，右边登录，底下三行署名与版权行。文字照名称标准手册的标准写法 */
body.door { flex-direction: row; }
.reel { flex: 0 0 4rem; background: var(--bar); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 1.5rem 0; }
.reel i { width: 26px; height: 36px; border-radius: 6px; background: #1a2130; } .reel i.on { background: var(--gold); }
.lobby { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.strip { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1.75rem; flex-wrap: wrap; padding: 1.6rem 3.5rem; font-size: .75rem; letter-spacing: .24em; color: var(--faint); }
.strip span { display: flex; align-items: center; gap: .9rem; font-size: .81rem; letter-spacing: .3em; color: var(--mute); }
/* 名称与登录卡这一行靠左对齐页眉的标识，宽度有上限：屏幕再宽，登录卡也不跟着贴到最右边去，停在版面三分之二上下的位置（上限随屏宽走，免得特别宽的屏上它又偏到中间） */
.hall { flex: 1; width: 100%; max-width: max(92rem, 71.25vw); display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem 4.5rem; padding: 1.5rem 3.5rem 2.5rem; }
.face { flex: 999 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; } .face p { margin: 0; }
.face .plate { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem 1rem; color: var(--gold); } .face .plate::before { content: ''; width: 2.75rem; height: 2px; background: var(--gold); }
.face .plate b { font: 400 .94rem/1.6 var(--sans); letter-spacing: .42em; } .face .plate i { font: 400 .75rem/1.6 var(--lat); letter-spacing: .12em; color: var(--mute); white-space: nowrap; }
.face h1 { margin: 0; font: 700 clamp(2.2rem, 5.3vw, 4.75rem)/1.18 var(--serif); letter-spacing: .04em; } .face h1 span { color: var(--gold); } .face h1 small { display: inline-block; margin-left: 1rem; vertical-align: middle; }
.face .en { margin-top: -.6rem; font: 500 clamp(.875rem, 1.4vw, 1.1rem)/1.5 var(--lat); letter-spacing: .2em; color: var(--soft); white-space: nowrap; }
.face .motto { font: 600 1.15rem/1.6 var(--serif); letter-spacing: .3em; color: var(--soft); } .face .motto i { display: block; font: 400 .78rem/1.6 var(--lat); letter-spacing: .1em; color: var(--mute); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 40rem; border-top: 1px solid var(--line2); margin-top: .3rem; }
.three div { padding: 1.05rem 1.25rem 0 0; border-top: 2px solid transparent; margin-top: -1px; } .three div.on { border-top-color: var(--gold); }
.three span { display: block; font: .75rem/1.6 var(--lat); letter-spacing: .3em; color: var(--faint); } .three b { display: block; font: 600 1.35rem/1.5 var(--serif); color: var(--soft); } .three i { display: block; font-size: .81rem; color: var(--faint); }
.three .on span { color: var(--gold); } .three .on b { color: var(--ink); } .three .on i { color: var(--mute); }
.gate { flex: 1 1 22rem; max-width: 26rem; margin: 0; padding: 2.5rem 2.5rem 2.1rem; background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; }
.gate h2 { margin: 0; font-size: 1.75rem; letter-spacing: .2em; } .gate h2 + p { margin: 0 0 1.1rem; font-size: .81rem; color: var(--mute); } .gate label { margin: .9rem 0; }
.gate button { width: 100%; min-height: 3.375rem; margin-top: .7rem; font-size: 1.06rem; letter-spacing: .5em; text-indent: .5em; }
.gate .hint { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--faint); } .gate .bad { margin: 0 0 .4rem; background: var(--field); }
.credit { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); font-size: .75rem; color: var(--mute); }
.credit div { padding: 1.05rem 1.75rem 1.15rem; border-right: 1px solid var(--line); } .credit div:first-child { padding-left: 3.5rem; } .credit div:last-child { border-right: 0; padding-right: 3.5rem; }
.credit dt { color: var(--gold); letter-spacing: .24em; } .credit dd { margin: 0; }
.rights { margin: 0; padding: .7rem 3.5rem .95rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem 1.5rem; font-size: .72rem; letter-spacing: .12em; color: var(--faint); }
.rights span:last-child { font-family: var(--lat); white-space: nowrap; }

/* 窄一些的屏：意见表留在作品右边，任务栏挪到最下面，靠「上一部、下一部」翻 */
@media (max-width: 1520px) { .desk { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: 'roll col' 'more col' 'rail rail'; grid-template-rows: auto auto auto; } .desk.two { grid-template-columns: minmax(0, 1fr) 21rem; }
  .rail { position: static; max-height: none; margin-top: 1.5rem; } .rail-list { max-height: 22rem; } }
/* 再窄：播放窗独占一行，意见表在它下面 */
@media (max-width: 1180px) { .desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'roll' 'col' 'more' 'rail'; grid-template-rows: none; } .desk.two { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'roll' 'col' 'more'; }
  .col { position: static; max-height: none; overflow: visible; margin-top: 1.25rem; } .pill { display: none; } .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi > div:nth-child(2) { border-right: 0; } .kpi > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
/* 窄到放不下电脑版的播放页：用它的手机竖版，摆在中间 */
@media (max-width: 830px) { .screen .box { width: 324px; } .screen .box::before { padding-top: 672px; } .screen.xq .box { width: 100%; } body.w header .in { padding: .4rem 1rem; } main.wide { padding: .9rem 1rem 2rem; } }
/* 手机：一栏到底，先作品、再意见表、最后任务栏 */
@media (max-width: 860px) {
  header .in { padding: .6rem 1rem; } .brand b { font-size: 1rem; letter-spacing: .03em; } .brand i { letter-spacing: .08em; } nav { flex: 1 1 100%; gap: 0 1.1rem; } nav .who { margin-left: auto; padding-left: .9rem; } nav .who i { display: none; } .brand small { display: none; } .tabs .in { padding: 0 1rem; gap: 0 1.4rem; }
  main { padding: 1.25rem 1rem 2.5rem; } footer { padding: .9rem 1rem 1.3rem; } .card { padding: 1.1rem 1rem 1.2rem; } .t-b .card > h2:first-child { margin: -1.1rem -1rem 1rem; padding: 1rem 1rem .7rem; }
  .hero h1, .t-b .hero h1 { font-size: 1.9rem; } .kpi > div { padding: 1rem 1rem 1.1rem; } .kpi b { font-size: 2.75rem; } .stat b { font-size: 2.75rem; }
  .roll-head h1 { font-size: 1.7rem; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts div { padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .facts div:nth-child(2n) { border-right: 0; } .facts div:nth-last-child(-n+2) { border-bottom: 0; }
  .roll.more { grid-template-columns: minmax(0, 1fr); } .watchbar { padding: 1rem; } .watchbar div { width: 100%; } a.watch { flex: 1 1 auto; justify-content: center; } .screenbar a { margin: 0 .5rem 0 0; }
  .sheet-head, .part, .sheet-foot, .sheet .how { padding-left: 1.1rem; padding-right: 1.1rem; }
  table { font-size: .9rem; } th, td { padding: .6rem .4rem; } .x { display: none; } td form.inline { flex-wrap: wrap; } .mark span { flex-basis: 50%; }
  .reel { display: none; } .strip { padding: 1.1rem 1.25rem; letter-spacing: .1em; } .strip span { letter-spacing: .08em; font-size: .75rem; } .hall { padding: 1rem 1.25rem 2rem; gap: 1.75rem; } .face { gap: 1.1rem; } .face h1 { font-size: clamp(1.4rem, 7.6vw, 2.2rem); }     /* 手机上单元全称要排在一行里，不把末一个字甩到下一行 */
  .face .plate b { letter-spacing: .25em; } .face .en { margin-top: -.3rem; letter-spacing: .06em; } .face .motto { font-size: 1rem; letter-spacing: .2em; } .face .motto i { letter-spacing: .02em; } .three div { padding-right: .6rem; } .three b { font-size: 1.15rem; }
  .gate { max-width: none; padding: 1.75rem 1.25rem 1.6rem; } .credit { grid-template-columns: minmax(0, 1fr); } .credit div, .credit div:first-child, .credit div:last-child { padding: .7rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .credit div:last-child { border-bottom: 0; } .rights { padding: .7rem 1.25rem 1rem; letter-spacing: .04em; }
}