/* 收片入口 · 样式（管理页和上传页共用）
   视觉核心：每一集是一个竖屏小画面（9:16），收到就点亮。其余部分保持安静。 */

:root {
  color-scheme: light;
  --paper: #EEF0F4;
  --sheet: #FFFFFF;
  --sheet-2: #F6F7FA;
  --field: #F5F6F9;
  --hover: rgba(20, 27, 51, .055);
  --ink: #141B33;
  --ink-2: #454C63;
  --muted: #6F778D;
  --faint: #A0A6B6;
  --line: #DFE2EA;
  --line-2: #C9CED9;
  --tile: #E4E8EF;
  --signal: #087E8B;
  --signal-ink: #FFFFFF;
  --signal-soft: #DDF1F2;
  --blue: #2F51C4;
  --blue-soft: #E6EBFB;
  --amber: #995A00;
  --amber-soft: #FBEED3;
  --amber-fill: #E9A93A;
  --magenta: #A8155F;
  --magenta-soft: #F9E2ED;
  --red: #BF3328;
  --red-soft: #FBE4E1;
  --green: #1D7A4C;
  --green-soft: #DFF2E7;
  --seal: #C8372D;
  --btn: #141B33;
  --btn-ink: #FFFFFF;
  --mon-bg: #141B33;
  --mon-tile: rgba(255, 255, 255, .085);
  --mon-num: rgba(255, 255, 255, .42);
  --mon-on: #35C5D3;
  --mon-on-ink: #032128;
  --mon-text: #E9EDF7;
  --mon-muted: #8F98B4;
  --shadow-row: 0 1px 2px rgba(20, 27, 51, .07), 0 0 0 1px rgba(20, 27, 51, .04);
  --shadow-dlg: 0 28px 70px -18px rgba(20, 27, 51, .38), 0 0 0 1px rgba(20, 27, 51, .06);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --stamp: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0A0F1F;
    --sheet: #111831;
    --sheet-2: #161E3A;
    --field: #0C1228;
    --hover: rgba(231, 235, 245, .06);
    --ink: #E7EBF5;
    --ink-2: #B3BBD0;
    --muted: #7F88A3;
    --faint: #525B78;
    --line: #222B49;
    --line-2: #323C60;
    --tile: #1D2647;
    --signal: #35C5D3;
    --signal-ink: #032128;
    --signal-soft: rgba(53, 197, 211, .14);
    --blue: #93A9F6;
    --blue-soft: rgba(147, 169, 246, .14);
    --amber: #F2BB63;
    --amber-soft: rgba(242, 187, 99, .14);
    --amber-fill: #E3A33A;
    --magenta: #F27DBA;
    --magenta-soft: rgba(242, 125, 186, .14);
    --red: #FF7E70;
    --red-soft: rgba(255, 126, 112, .14);
    --green: #6FD39E;
    --green-soft: rgba(111, 211, 158, .14);
    --seal: #F06A5B;
    --btn: #E7EBF5;
    --btn-ink: #0A0F1F;
    --mon-bg: #060A16;
    --shadow-row: 0 0 0 1px rgba(255, 255, 255, .05);
    --shadow-dlg: 0 32px 80px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .07);
  }
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--signal-soft); }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loading { padding: 80px 24px; text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 标识：一个竖屏画面，底部已点亮 */
.logo { position: relative; flex: none; width: 17px; height: 28px; border-radius: 4px; background: var(--ink); overflow: hidden; }
.logo::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 9px; border-radius: 1.5px; background: var(--mon-on); }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--sheet); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.btn:hover { border-color: var(--faint); }
.btn .ic { width: 15px; height: 15px; }
.btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }
.btn.primary:hover { opacity: .88; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: var(--red-soft); }
.btn.armed { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.btn.confirm { background: var(--amber-fill); border-color: var(--amber-fill); color: #231500; }
.btn.sm { height: 28px; padding: 0 9px; font-size: 13px; border-radius: 7px; }
.btn.lg { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn.icon { width: 34px; padding: 0; }
.btn.sm.icon { width: 28px; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary:disabled:hover { opacity: .42; }

/* ---------- 状态 ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px; background: var(--tile); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.open { background: var(--blue-soft); color: var(--blue); }
.pill.submitted { background: var(--amber-soft); color: var(--amber); }
.pill.closed, .pill.expired { color: var(--muted); }
.pill.lg { height: 26px; padding: 0 11px 0 10px; font-size: 13px; }
.stamp { display: inline-block; padding: 0 5px 0 7px; border: 1.5px solid var(--seal); border-radius: 3px; color: var(--seal); font-family: var(--stamp); font-size: 12px; font-weight: 900; line-height: 19px; letter-spacing: .14em; white-space: nowrap; transform: rotate(-4deg); }
.seal { flex: none; display: inline-flex; flex-direction: column; align-items: center; margin: 4px 6px 0 0; padding: 5px 8px 4px 13px; border: 2.5px solid var(--seal); border-radius: 5px; outline: 1px solid var(--seal); outline-offset: 2.5px; color: var(--seal); font-family: var(--stamp); font-size: 21px; font-weight: 900; line-height: 1.2; letter-spacing: .24em; transform: rotate(-7deg); opacity: .94; }
.seal small { margin-left: -5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.seal.en { font-family: var(--sans); font-size: 15px; letter-spacing: .16em; padding: 6px 8px 5px 12px; }
.seal.hit { animation: stampIn .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes stampIn { from { transform: rotate(-7deg) scale(1.7); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: .94; } }

.bar { position: relative; height: 4px; border-radius: 2px; background: var(--tile); overflow: hidden; }
.bar > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--signal); transition: width .3s ease; }

/* 列表里的集数条：每一集一格 */
.ticks { display: flex; gap: 1px; flex: 1; min-width: 0; height: 12px; }
.ticks i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: var(--tile); }
.ticks i.on { background: var(--signal); }
.ticks i.part { background: color-mix(in srgb, var(--signal) 45%, var(--tile)); }
.ticks i.dup { background: var(--amber-fill); }

/* ---------- 集数监视器（标志性元素） ---------- */
.monitor { margin-top: 24px; padding: 20px 22px 18px; border-radius: 14px; background: var(--mon-bg); color: var(--mon-text); }
.mon-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.mon-h b { font-size: 18px; font-weight: 700; }
.mon-h span { color: var(--mon-muted); font-size: 13px; }
.wall { --tw: 20px; display: grid; grid-template-columns: repeat(auto-fill, var(--tw)); gap: 7px 5px; }
.tile { width: var(--tw); aspect-ratio: 9 / 16; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; border-radius: 3px; background: var(--mon-tile); color: var(--mon-num); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tile.w3 { font-size: 9.5px; letter-spacing: -.03em; }
.tile.got { background: var(--mon-on); color: var(--mon-on-ink); }
.tile.dup { background: #E9A93A; color: #231500; }
.tile.pending { background: repeating-linear-gradient(135deg, rgba(53, 197, 211, .3) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--mon-on); color: var(--mon-on); }
.tile.fresh { animation: tileIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes tileIn { from { transform: scale(.55); opacity: .2; } to { transform: none; opacity: 1; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; color: var(--mon-muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 14px; border-radius: 2px; background: var(--mon-tile); }
.legend i.got { background: var(--mon-on); }
.legend i.dup { background: #E9A93A; }
.legend i.pending { box-shadow: inset 0 0 0 1px var(--mon-on); background: transparent; }
.mon-notes { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; color: var(--mon-muted); font-size: 13px; }
.mon-notes:empty { display: none; }
.mon-notes .warn { color: #F2BB63; }
.mon-notes .ok { color: var(--mon-on); }

/* ---------- 表单 ---------- */
.fgroup { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.fgroup:first-child { margin-top: 2px; }
.fgroup legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 700; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld.wide { grid-column: 1 / -1; }
.fld-l { color: var(--ink-2); font-size: 13px; }
.fld-l b { color: var(--red); font-weight: 600; }
.fld input, .fld textarea, .ced input, .copyfield input, .login input, .finish textarea { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--field); color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.fld textarea, .finish textarea { height: auto; padding: 8px 10px; line-height: 1.6; resize: vertical; }
.fld input:focus, .fld textarea:focus, .ced input:focus, .login input:focus, .finish textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.fhint { color: var(--muted); font-size: 12px; }
.pair { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pair input { flex: 1; min-width: 0; }
.ced { display: flex; flex-direction: column; gap: 6px; }
.ced-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; align-items: center; gap: 8px; }
.ced-idx { color: var(--faint); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.ced-fixed { display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 8px; background: var(--tile); color: var(--ink-2); }
.ced-add { align-self: flex-start; margin-left: 24px; }
.err { margin-top: 14px; color: var(--red); font-size: 13px; }
.err:empty { display: none; }
.copyfield { display: flex; align-items: center; gap: 6px; max-width: 600px; }
.copyfield input { flex: 1; min-width: 0; height: 34px; color: var(--ink-2); font-size: 13px; }

/* ---------- 对话框 ---------- */
.dlg { width: min(660px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 16px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-dlg); }
.dlg.wide { width: min(980px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(6, 10, 22, .52); }
.dlg[open] { animation: dlgIn .18s ease-out; }
@keyframes dlgIn { from { transform: translateY(6px); } to { transform: none; } }
.dlg-in { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.dlg-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 12px; }
.dlg-h h2 { font-size: 18px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.dlg-h p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.dlg-close { margin: -4px -10px 0 auto; }
.dlg-b { padding: 4px 24px 22px; overflow-y: auto; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 18px; border-top: 1px solid var(--line); }
.created-b { padding-top: 26px; }
.ok-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); }
.ok-ic .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.created-b h2 { margin-top: 14px; font-size: 20px; font-weight: 800; }
.created-b p { margin-top: 4px; color: var(--ink-2); }
.created-b .copyfield { margin-top: 18px; max-width: none; }
.created-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv-h { min-width: 0; }
.pv-body { display: grid; place-items: center; min-height: 260px; overflow: auto; background: #05070D; }
.pv-body video, .pv-body img { display: block; max-width: 100%; max-height: calc(100dvh - 230px); }
.pv-body.text { place-items: stretch; background: var(--field); }
.pv-text { margin: 0; padding: 18px 24px; color: var(--ink); font: 13px/1.75 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-msg { display: flex; align-items: center; gap: 8px; padding: 48px 24px; color: #AAB3CB; }
.pv-body.text .pv-msg { color: var(--muted); }
.tests { margin: 0; padding: 0; list-style: none; }
.tests li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 1px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tests .ic { margin-top: 3px; }
.tests li.ok .ic { color: var(--green); }
.tests li.fail .ic { color: var(--red); }
.tests small { grid-column: 2; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.test-result { margin-top: 14px; font-weight: 600; }
.test-result.ok { color: var(--green); }
.test-result.fail { color: var(--red); font-weight: 500; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-size: 14px; text-align: center; box-shadow: var(--shadow-dlg); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .16s, transform .16s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   管理页
   ========================================================= */
.login { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }
.login-card { width: min(360px, 100%); }
.login-card .logo { width: 22px; height: 36px; border-radius: 5px; }
.login-card .logo::after { height: 12px; }
.login-card h1 { margin-top: 22px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.login-card p { margin-top: 4px; color: var(--muted); }
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.login input { height: 42px; border-radius: 10px; background: var(--sheet); }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.topbar { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 28px 0; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.brand .sub { padding-left: 10px; border-left: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.top-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.top-acts .btn.primary { margin-left: 8px; }
.tabs { flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 12px 28px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 11px; border: 0; background: none; color: var(--muted); font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--ink-2); }
.tab .n { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.tab .n.zero { color: var(--faint); }
.tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.tab[data-filter="open"] .dot { background: var(--blue); }
.tab[data-filter="submitted"] .dot { background: var(--amber); }
.tab[data-filter="overdue"] .dot { background: var(--magenta); }
.tab[data-filter="accepted"] .dot { background: var(--seal); }
.tab[data-filter="submitted"] .n:not(.zero) { color: var(--amber); }
.tab[data-filter="overdue"] .n:not(.zero) { color: var(--magenta); }
.tab[aria-pressed="true"] { color: var(--ink); }
.tab[aria-pressed="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.store { display: flex; gap: 20px; align-self: center; margin-left: auto; padding: 0 0 10px 16px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.store b { color: var(--ink); font-weight: 600; }

.panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 372px minmax(0, 1fr); }
.list-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.list-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px 28px; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--muted); }
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); }
.list-meta { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list { flex: 1; min-height: 0; margin: 0; padding: 0 14px 28px 18px; overflow-y: auto; list-style: none; }
.list li + li { margin-top: 2px; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 12px 12px 12px 14px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.row:hover { background: var(--hover); }
.row[aria-current="true"] { background: var(--sheet); box-shadow: var(--shadow-row); }
.row[aria-current="true"]::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px; border-radius: 2px; background: var(--ink); }
.row-title { font-size: 15px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.row .pill, .row .stamp { align-self: start; margin-top: 1px; }
.row-sub { min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.row-due { align-self: center; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.row-due.soon { color: var(--amber); font-weight: 600; }
.row-due.late { color: var(--magenta); font-weight: 600; }
.row-prog { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.row-prog .num { min-width: 52px; text-align: right; }
.list-empty { padding: 36px 14px; color: var(--muted); }
.list-empty b { display: block; color: var(--ink); font-size: 16px; font-weight: 700; }
.list-empty p { margin: 6px 0 16px; }

.detail-pane { min-height: 0; overflow-y: auto; background: var(--sheet); }
.detail { max-width: 960px; padding: 28px 40px 64px; }
.back { margin: -6px 0 10px -10px; }
.d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.d-title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.d-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; color: var(--ink); }
.d-facts .k { margin-right: 6px; color: var(--muted); }
.d-facts .late { color: var(--magenta); }
.d-facts .warn { color: var(--amber); }
.d-facts .ok { color: var(--green); }
.d-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.job { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--signal-soft); }
.job-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job p { font-size: 13px; }
.job .bar { margin-top: 10px; background: color-mix(in srgb, var(--signal) 18%, transparent); }
.banner { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 12px 16px; border-radius: 10px; background: var(--blue-soft); }
.banner > .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
.banner b { font-weight: 600; }
.banner p { margin-top: 1px; color: var(--ink-2); font-size: 13px; }
.banner.amber { background: var(--amber-soft); }
.banner.amber > .ic { color: var(--amber); }
.banner.magenta { background: var(--magenta-soft); }
.banner.magenta > .ic { color: var(--magenta); }
.banner.green { background: var(--green-soft); }
.banner.green > .ic { color: var(--green); }
.banner.grey { background: var(--sheet-2); }
.banner.grey > .ic { color: var(--muted); }
.note { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--amber-fill); border-radius: 0 8px 8px 0; background: var(--sheet-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.note span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; }

.sec { margin-top: 36px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.sec-h h3 { font-size: 16px; font-weight: 700; }
.sec-h .aside { color: var(--muted); font-size: 13px; }
.sec-h .tools { display: flex; gap: 6px; margin-left: auto; }

.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.mat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.mat:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mat-ic { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; }
.mat-ic .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.mat.ok .mat-ic { background: var(--signal); color: var(--signal-ink); }
.mat.part .mat-ic { background: var(--amber-soft); color: var(--amber); }
.mat.none .mat-ic { box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; }
.mat b { min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mat small { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mat.none small { color: var(--faint); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding-right: 12px; }
.steps li::before { content: ''; position: absolute; top: 9px; left: 24px; right: 4px; height: 2px; border-radius: 1px; background: var(--line); }
.steps li:last-child::before { display: none; }
.steps li.done:has(+ li.done)::before { background: var(--ink); }
.steps .dn { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.steps .dn .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.steps li.done .dn { background: var(--ink); color: var(--sheet); box-shadow: none; }
.steps li.cur .dn { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.steps b { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; }
.steps small { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.fcat { border-top: 1px solid var(--line); }
.fcat:last-child { border-bottom: 1px solid var(--line); }
.fcat > summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; list-style: none; cursor: pointer; }
.fcat > summary::-webkit-details-marker { display: none; }
.fcat > summary .chev { color: var(--muted); transform: rotate(-90deg); transition: transform .15s; }
.fcat[open] > summary .chev { transform: none; }
.fcat > summary b { font-weight: 700; }
.fcat > summary span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fempty { padding: 0 0 14px 26px; color: var(--faint); font-size: 13px; }
.fhead, .frow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 64px 80px 106px 104px; column-gap: 14px; align-items: center; }
.ep-col .fhead, .ep-col .frow { grid-template-columns: minmax(0, 1fr) 60px 96px 64px 80px 106px 104px; }
.fhead { padding: 0 0 6px 26px; color: var(--muted); font-size: 12px; }
.fhead span:nth-child(n+2) { text-align: right; }
.flist { margin: 0 0 12px; padding: 0; list-style: none; }
.frow { padding: 8px 0 8px 26px; border-top: 1px solid var(--line); font-size: 13px; }
.frow:hover { background: var(--sheet-2); }
.c-name { min-width: 0; color: var(--ink); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.c-name .dir { color: var(--muted); }
.c-meta { display: contents; }
.c-meta > span { color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-meta .warn { color: var(--amber); font-weight: 600; }
.c-meta .faint { color: var(--faint); }
.c-acts { display: flex; justify-content: flex-end; gap: 2px; }
.c-acts .note-txt { color: var(--muted); font-size: 12px; white-space: nowrap; }

.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px 20px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv .pre { white-space: pre-wrap; }
.kv small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.dz { border: 1px solid var(--line); border-radius: 12px; }
.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; }
.dz-row + .dz-row { border-top: 1px solid var(--line); }
.dz-row b { display: block; font-weight: 600; }
.dz-row p { max-width: 62ch; color: var(--muted); font-size: 13px; }

.d-empty { max-width: 560px; padding: 72px 40px; }
.d-empty h2 { font-size: 20px; font-weight: 800; }
.d-empty > p { margin-top: 6px; color: var(--ink-2); }
.howto { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding: 0; list-style: none; counter-reset: how; }
.howto li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; counter-increment: how; color: var(--ink-2); }
.howto li::before { content: counter(how); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tile); color: var(--ink); font-size: 12px; font-weight: 700; }
.howto b { display: block; color: var(--ink); font-weight: 600; }

/* =========================================================
   上传页（承制方）
   ========================================================= */
.u-top { display: flex; align-items: center; gap: 10px; max-width: 1140px; margin: 0 auto; padding: 18px 24px; }
.u-brand { font-weight: 800; letter-spacing: -.01em; }
.lang { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); }
.lang button { padding: 3px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.u-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px 150px; }
.u-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 0 26px; }
.u-title { font-size: 36px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
.u-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; color: var(--ink); }
.u-facts .k { margin-right: 6px; color: var(--muted); }
.u-facts .late { color: var(--magenta); font-weight: 600; }
.u-facts .soon { color: var(--amber); font-weight: 600; }
.u-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.u-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.u-sheet { border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.u-cat { padding: 20px 22px; scroll-margin-top: 16px; }
.u-cat + .u-cat { border-top: 1px solid var(--line); }
.u-cat-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.u-cat-h h2 { font-size: 16px; font-weight: 700; }
.u-cat-h .cnt { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.u-cat-h .cnt.ok { color: var(--green); font-weight: 600; }
.u-cat-h .cnt.part { color: var(--amber); font-weight: 600; }
.u-cat .monitor { margin-top: 14px; }
.u-cat .wall { --tw: 22px; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; padding: 13px 14px; border: 1.5px dashed var(--line-2); border-radius: 10px; color: var(--muted); transition: border-color .12s, background-color .12s; }
.drop > .ic { width: 18px; height: 18px; }
.drop-t { color: var(--ink-2); }
.drop-btns { display: flex; gap: 6px; margin-left: auto; }
.drop.over { border-color: var(--signal); background: var(--signal-soft); }
.files { margin: 6px 0 0; padding: 0; list-style: none; }
.file { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "ic main status acts" ". prog prog prog"; align-items: center; gap: 3px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.f-ic { grid-area: ic; }
.f-main { grid-area: main; }
.f-status { grid-area: status; }
.f-acts { grid-area: acts; }
.f-prog { grid-area: prog; }
.files .file:first-child { border-top: 0; }
.f-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tile); color: var(--muted); }
.file[data-state="done"] .f-ic { background: var(--signal-soft); color: var(--signal); }
.file[data-state="error"] .f-ic { background: var(--red-soft); color: var(--red); }
.file[data-state="stale"] .f-ic { background: var(--amber-soft); color: var(--amber); }
.f-main { min-width: 0; }
.f-name { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.f-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--signal-soft); color: var(--signal); font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.f-status { max-width: 18em; color: var(--muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.file[data-state="done"] .f-status { color: var(--green); }
.file[data-state="error"] .f-status { color: var(--red); }
.file[data-state="stale"] .f-status { color: var(--amber); }
.f-acts { display: flex; gap: 2px; }
.mini { padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.mini:hover { background: var(--hover); color: var(--ink); }
.mini.warn { color: var(--red); }
.mini:disabled { opacity: .4; cursor: not-allowed; }
.f-prog { height: 3px; border-radius: 2px; background: var(--tile); overflow: hidden; }
.f-prog i { display: block; width: 0; height: 100%; background: var(--signal); }
.file[data-state="done"] .f-prog, .file[data-state="stale"] .f-prog, .file[data-state="error"] .f-prog { display: none; }

.side-box { padding: 18px 20px; }
.side-box h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.side-box h3 .ic { color: var(--muted); }
.spec-text { margin-top: 8px; color: var(--ink-2); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.res { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--tile); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.how { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: how; }
.how li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; counter-increment: how; color: var(--ink-2); font-size: 13px; }
.how li::before { content: counter(how); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tile); color: var(--ink); font-size: 11px; font-weight: 700; }
.tip { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.tip .ic { width: 14px; height: 14px; margin-top: 2px; }
.finish h3 { font-size: 15px; }
.check { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; padding: 0; list-style: none; }
.check li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.check .ic { width: 15px; height: 15px; margin-top: 2px; stroke-width: 2.2; }
.check .ok .ic { color: var(--green); }
.check .no { color: var(--ink); }
.check .no .ic { color: var(--amber); }
.finish textarea { font-size: 13px; }
.finish .btn.lg { width: 100%; margin-top: 12px; }
.finish-msg { margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.finish-msg.warn { color: var(--amber); font-weight: 600; }

.done-panel { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding: 22px 24px; }
.done-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); }
.done-ic .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.done-panel h2 { font-size: 20px; font-weight: 800; }
.done-panel p { margin-top: 4px; color: var(--ink-2); }
.done-panel p.muted { color: var(--muted); font-size: 13px; }
.notice { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 16px 20px; color: var(--ink-2); }
.notice .ic { width: 18px; height: 18px; color: var(--muted); }
.fatal { max-width: 560px; margin: 40px auto 0; padding: 32px; }
.fatal .ic { width: 28px; height: 28px; color: var(--muted); }
.fatal h1 { margin-top: 16px; font-size: 22px; font-weight: 800; }
.fatal p { margin-top: 6px; color: var(--ink-2); }

.u-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--sheet); box-shadow: 0 -10px 30px -16px rgba(20, 27, 51, .25); }
.u-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 1092px; margin: 0 auto; }
.u-bar-text { flex: 1; min-width: 200px; font-size: 13px; font-variant-numeric: tabular-nums; }
.u-bar .bar { flex-basis: 100%; }
body.upload .toast { bottom: 96px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 980px) {
  .u-cols { display: flex; flex-direction: column; gap: 14px; }
  .u-side { display: contents; }
  .u-main { order: 2; width: 100%; }
  .u-side > .spec-box { order: 1; }
  .u-side > .how-box { order: 1; }
  .u-side > .finish { order: 3; }
  .u-side > * { width: 100%; }
}
@media (max-width: 899px) {
  .app { height: auto; min-height: 100vh; min-height: 100dvh; }
  .topbar { padding: 12px 16px 0; gap: 10px; }
  .brand .sub { display: none; }
  .top-acts .lbl { display: none; }
  .top-acts .btn.primary .lbl { display: inline; }
  .top-acts .btn.primary { margin-left: 4px; }
  .tabs { padding: 8px 10px 0; }
  .store { display: none; }
  .panes { display: block; }
  .list-pane { border-right: 0; }
  .list-head { padding: 12px 16px 8px; }
  .list { overflow: visible; padding: 0 8px 32px; }
  .detail-pane { display: none; }
  body.detail-open { overflow: hidden; }
  body.detail-open .detail-pane { position: fixed; inset: 0; z-index: 20; display: block; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .detail { padding: 14px 18px 56px; }
  .d-title { font-size: 22px; }
  .monitor { margin-left: -18px; margin-right: -18px; padding: 18px; border-radius: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .steps li:nth-child(2)::before { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 12px; }
  .dz-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 720px) {
  .fhead { display: none; }
  .frow, .ep-col .frow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name acts" "meta acts"; row-gap: 2px; padding-left: 0; }
  .fempty { padding-left: 0; }
  .c-name { grid-area: name; }
  .c-acts { grid-area: acts; }
  .c-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 12px; }
  .c-meta > span { text-align: left; font-size: 12px; color: var(--muted); }
  .c-meta > span:empty, .c-meta .faint { display: none; }
  .fgrid { grid-template-columns: 1fr; }
  .u-top { padding: 14px 16px; }
  .u-wrap { padding: 0 16px 160px; }
  .u-title { font-size: 28px; }
  .u-cat { padding: 18px 16px; }
  .u-cat .monitor { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 16px; }
  .drop-btns { margin-left: 0; }
  .file { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic main acts" ". status status" ". prog prog"; }
  .f-status { max-width: none; text-align: left; }
  .u-bar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 结算 ---------- */
.money { position: relative; display: block; }
.money .cur { position: absolute; top: 50%; left: 10px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.money input { padding-left: 22px; }
.bill-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 12px 16px; border-radius: 10px; background: var(--sheet-2); color: var(--ink-2); }
.bill-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bill-fig { min-width: 0; padding: 12px 16px 13px 0; }
.bill-fig + .bill-fig { padding-left: 18px; border-left: 1px solid var(--line); }
.bill-fig dt { color: var(--muted); font-size: 13px; }
.bill-fig dd { margin-top: 2px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-fig dd small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.bill-fig.big dd { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.bill-notes { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.bill-notes .warn { color: var(--amber); }
.bill-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.bill-pay .paid { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
@media (max-width: 720px) {
  .bill-figs { grid-template-columns: 1fr; }
  .bill-fig + .bill-fig { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .bill-empty { flex-direction: column; align-items: flex-start; }
}

/* ---------- 成片规格：点选 ---------- */
.picks { display: flex; flex-direction: column; gap: 10px; }
.pick-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 10px; }
.pick-k { padding-top: 5px; color: var(--ink-2); font-size: 13px; }
.pick-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--sheet); color: var(--ink-2); font-size: 13px; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
.pick:hover span { border-color: var(--faint); }
.pick.any span { color: var(--muted); }
.pick input:checked + span { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.spec-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 16px; margin: 0; font-size: 13px; }
.spec-list dt { color: var(--muted); white-space: nowrap; }
.spec-list dd { color: var(--ink); overflow-wrap: anywhere; }
.side-box .spec-list { margin-top: 10px; }
.side-box .spec-text b { color: var(--ink); font-weight: 600; }
.c-name .badge { margin-left: 8px; vertical-align: 1px; }
@media (max-width: 720px) {
  .pick-row { grid-template-columns: 1fr; gap: 6px; }
  .pick-k { padding-top: 0; }
}

/* ---------- 需要交付的物料：打勾 ---------- */
.mchecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mcheck { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--sheet); cursor: pointer; transition: border-color .12s; }
.mcheck:hover { border-color: var(--faint); }
.mcheck input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.mbox { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--field); color: transparent; transition: background-color .12s, border-color .12s; }
.mbox .ic { width: 12px; height: 12px; stroke-width: 2.8; }
.mcheck input:checked ~ .mbox { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); }
.mcheck:has(input:checked) { border-color: var(--btn); }
.mcheck input:focus-visible ~ .mbox { outline: 2px solid var(--blue); outline-offset: 2px; }
.mtxt { display: flex; flex-direction: column; min-width: 0; }
.mtxt b { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.mtxt small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.mtxt small.lock { color: var(--amber); }
.mcheck.locked { cursor: not-allowed; }
.mcheck.locked:hover { border-color: var(--btn); }
.mcheck.locked .mbox { opacity: .5; }
.madd { display: flex; gap: 8px; margin-top: 10px; }
.madd input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--field); color: var(--ink); }
.madd input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.mpick .fhint { display: block; margin-top: 8px; }
@media (max-width: 720px) { .mchecks { grid-template-columns: 1fr; } }

/* ---------- 输入框下面的快捷点选 ---------- */
.quick { display: flex; flex-wrap: wrap; gap: 5px; }
.quick:empty { display: none; }
.qk { max-width: 100%; height: 24px; padding: 0 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font-size: 12px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .12s, border-color .12s, color .12s; }
.qk:hover { border-color: var(--faint); color: var(--ink); }
.qk[aria-pressed="true"] { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); font-weight: 600; }

/* ---------- 分批交付 ---------- */
.badge.plain { background: var(--tile); color: var(--ink-2); }
.blist-a { margin: 0; padding: 0; list-style: none; }
.batch { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.batch:last-child { border-bottom: 1px solid var(--line); }
.batch-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.batch-h b { font-weight: 700; }
.batch-h span { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.batch-note { margin-top: 2px; color: var(--ink-2); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.batch-st { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
.batch-st.wait { color: var(--amber); font-weight: 600; }
.batch-st.ack { color: var(--green); }
.batch-st.ret { color: var(--magenta); }
.batch-acts { display: flex; flex: none; gap: 6px; }
.finish-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.finish .finish-btns .btn.lg { width: 100%; margin-top: 0; }
.finish-hint { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.blist { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.blist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; font-size: 13px; }
.blist b { font-weight: 600; }
.blist span { color: var(--muted); }
.blist small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.blist .ack small { color: var(--green); }
.blist .ret small { color: var(--magenta); }
.notice.warn { align-items: flex-start; border-color: transparent; background: var(--amber-soft); color: var(--ink); }
.notice.warn > .ic { margin-top: 3px; color: var(--amber); }
.u-wrap > .batches { margin-top: 14px; }
@media (max-width: 980px) { .u-side > .batches { order: 4; } }
@media (max-width: 720px) { .batch { flex-direction: column; } }

.finish .finish-btns .btn.lg { height: auto; min-height: 42px; padding: 9px 14px; white-space: normal; line-height: 1.3; text-align: center; }

/* =========================================================
   质感打磨：厚度、反馈、层次
   ========================================================= */
.list, .detail-pane, .dlg-b, .pv-body { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* 按钮：一点厚度和按压反馈 */
.btn { box-shadow: 0 1px 1px rgba(20, 27, 51, .05); transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s, filter .14s, transform .06s; }
.btn:not(:disabled):hover { background: var(--sheet-2); }
.btn:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(20, 27, 51, .3); }
.btn.primary:not(:disabled):hover { background: var(--btn); opacity: 1; filter: brightness(1.2); }
.btn.ghost { box-shadow: none; }
.btn.ghost:not(:disabled):hover { background: var(--hover); }
.btn.danger:not(:disabled):hover { background: var(--red-soft); }
.btn.armed, .btn.confirm { box-shadow: none; }
.btn.armed:not(:disabled):hover { background: var(--red); filter: brightness(1.08); }
.btn.confirm:not(:disabled):hover { background: var(--amber-fill); filter: brightness(1.05); }
.btn.ok { border-color: var(--green); color: var(--green); }
.btn:disabled { box-shadow: none; }

/* 对话框与提示 */
.dlg::backdrop { background: rgba(6, 10, 22, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes dlgIn { from { transform: translateY(8px) scale(.985); } to { transform: none; } }
.toast { padding: 11px 18px; border-radius: 12px; font-weight: 500; }

/* 列表 */
.row { transition: background-color .12s, box-shadow .12s; }
.row[aria-current="true"] { box-shadow: var(--shadow-row), 0 8px 18px -12px rgba(20, 27, 51, .35); }

/* 详情头部：字段一排，操作栏吸顶 */
.d-fields { display: flex; flex-wrap: wrap; gap: 14px 0; margin: 18px 0 0; }
.d-field { min-width: 0; padding: 0 22px; border-left: 1px solid var(--line); }
.d-field:first-child { padding-left: 0; border-left: 0; }
.d-field dt { color: var(--muted); font-size: 12px; }
.d-field dd { margin-top: 2px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.d-field dd small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.d-field dd small.late { color: var(--magenta); }
.d-field dd small.warn { color: var(--amber); }
.d-field dd small.ok { color: var(--green); }
.d-sentinel { height: 1px; margin-top: 14px; }
.d-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 -40px; padding: 10px 40px; background: var(--sheet); background: color-mix(in srgb, var(--sheet) 84%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); transition: box-shadow .16s; }
.d-bar .d-acts { margin-top: 0; }
.d-mini { display: none; flex: 1 1 220px; align-items: center; gap: 10px; min-width: 0; }
.d-mini b { overflow: hidden; font-size: 15px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.d-bar.stuck { box-shadow: 0 1px 0 var(--line), 0 14px 24px -20px rgba(20, 27, 51, .6); }
.d-bar.stuck .d-mini { display: flex; }
.detail.enter { animation: detailIn .18s ease-out; }
@keyframes detailIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sec, .fcat { scroll-margin-top: 76px; }

/* 监视器：屏幕的微光，点亮的格子会发光，可以点 */
.monitor { background: radial-gradient(90% 130% at 0% 0%, rgba(53, 197, 211, .14), transparent 60%), var(--mon-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 32px -20px rgba(20, 27, 51, .6); }
.tile { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: transform .12s, filter .12s, box-shadow .12s; }
.tile.got { background: linear-gradient(180deg, #62DCE7, var(--mon-on)); box-shadow: 0 0 0 1px rgba(53, 197, 211, .3), 0 6px 14px -6px rgba(53, 197, 211, .75); }
.tile.dup { box-shadow: 0 6px 14px -6px rgba(233, 169, 58, .75); }
button.tile { padding: 0 0 3px; cursor: pointer; }
button.tile:hover { transform: translateY(-2px); filter: brightness(1.08); }
button.tile:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* 批次卡片 */
.blist-a { display: flex; flex-direction: column; gap: 8px; }
.batch, .batch:last-child { position: relative; padding: 14px 16px 14px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet-2); }
.batch::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: 9px; width: 3px; border-radius: 2px; background: var(--faint); }
.batch.wait { border-color: var(--amber-fill); border-color: color-mix(in srgb, var(--amber-fill) 55%, var(--line)); background: var(--amber-soft); background: color-mix(in srgb, var(--amber-fill) 8%, var(--sheet)); }
.batch.wait::before { background: var(--amber-fill); }
.batch.ack::before { background: var(--green); }
.batch.ret::before { background: var(--magenta); }
.batch.ret .batch-h { opacity: .7; }
.batch-acts { flex-wrap: wrap; justify-content: flex-end; }

/* 文件：按批次筛选、跳转高亮 */
.ffilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ffilter .qk { height: 26px; padding: 0 11px; }
.ffilter .qk .n { opacity: .65; }
.frow.flash { animation: rowFlash 1.8s ease-out; }
@keyframes rowFlash { 0%, 35% { background: var(--signal-soft); } 100% { background: transparent; } }

/* 详细信息：默认只显示上传链接 */
.kv-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px 20px; margin: 0; }
.kv-top dt { color: var(--muted); }
.kv-top dd { min-width: 0; }
.kv-top small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.more { margin-top: 12px; }
.more > summary { display: inline-flex; align-items: center; gap: 6px; margin-left: -6px; padding: 5px 10px 5px 6px; border-radius: 8px; color: var(--ink-2); font-size: 13px; font-weight: 500; list-style: none; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--hover); }
.more > summary .chev { transform: rotate(-90deg); transition: transform .15s; }
.more[open] > summary .chev { transform: none; }
.more .when-open, .more[open] .when-closed { display: none; }
.more[open] .when-open { display: inline; }
.more > .kv { margin-top: 14px; }

/* 上传页：内容区轻轻抬起一点 */
.u-sheet { box-shadow: 0 1px 2px rgba(20, 27, 51, .04), 0 18px 36px -30px rgba(20, 27, 51, .45); }
.drop:hover { border-color: var(--faint); }

@media (max-width: 899px) {
  .d-bar { position: static; margin: 0; padding: 12px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .d-field { padding: 0 14px; }
  .kv-top { grid-template-columns: 1fr; gap: 2px; }
}

.fcat.none { display: flex; align-items: center; gap: 10px; padding: 11px 0 11px 26px; }
.fcat.none b { color: var(--ink-2); font-weight: 600; }
.fcat.none span { color: var(--faint); font-size: 13px; }
.detail-pane { overflow-x: hidden; }
@media (min-width: 900px) { .d-bar { margin-right: -100vw; padding-right: calc(100vw + 40px); } }
@media (max-width: 720px) { .fcat.none { padding-left: 0; } }

/* ---------- 海报尺寸要求 ---------- */
.psizes-wrap { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet-2); }
.psizes-h { font-size: 14px; font-weight: 700; }
.psizes { display: flex; flex-direction: column; margin-top: 8px; }
.psize { display: grid; grid-template-columns: minmax(0, 1fr) auto 124px; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.psize:first-child { border-top: 0; }
.psize .mcheck, .psize .mcheck:has(input:checked) { padding: 0; border: 0; background: none; }
.psize-dim { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; visibility: hidden; }
.psize.on .stepper { visibility: visible; }
.st-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: var(--sheet); color: var(--ink-2); cursor: pointer; }
.st-btn:hover { border-color: var(--faint); color: var(--ink); }
.st-btn .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.stepper output { min-width: 22px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.stepper .unit { margin-left: 2px; color: var(--muted); font-size: 12px; }
.padd { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto 76px auto; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); }
.padd input { height: 34px; }
.pslots { margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--sheet-2); }
.fcat .pslots { margin: 0 0 12px 26px; }
.pslots-h { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.pslots ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pslots li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; font-size: 13px; }
.pslots li .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.pslots li.ok .ic { color: var(--green); }
.pslots li.miss .ic { color: var(--faint); }
.pslots li b { min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pslots .dim { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pslots .cnt2 { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.pslots li.ok .cnt2 { color: var(--green); font-weight: 600; }
.pslots li.miss .cnt2 { color: var(--amber); font-weight: 600; }
.pslots .warn { margin-top: 8px; color: var(--amber); font-size: 12px; }
@media (max-width: 720px) {
  .psize { grid-template-columns: minmax(0, 1fr) auto; }
  .psize .stepper { grid-column: 1 / -1; justify-content: flex-start; }
  .psize:not(.on) .stepper { display: none; }
  .padd { grid-template-columns: 1fr 1fr auto 1fr; }
  .padd input:first-child { grid-column: 1 / -1; }
  .fcat .pslots { margin-left: 0; }
}