/* 页面布局。只组合 tokens 和 components，不新增颜色/圆角/字号。 */

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 10; height: var(--topbar-h);
          background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: stretch; gap: var(--s-6); height: 100%;
             max-width: var(--content-w); margin: 0 auto; padding: 0 var(--s-5); }
.brand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-bold);
         text-decoration: none; }
.brand-mark { width: 22px; height: 16px; border-radius: 3px; background: var(--tape); border: 2px solid var(--on-tape); }
.nav { display: flex; gap: var(--s-1); }
.nav a { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3);
         color: var(--ink-2); font-weight: var(--fw-medium); text-decoration: none;
         border-bottom: 3px solid transparent; margin-top: 3px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: var(--fw-bold); border-bottom-color: var(--tape); }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--paper);
         font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 20px; text-align: center; }

/* ---------- 页面容器 ---------- */
.page { max-width: var(--content-w); margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-8); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.stack { display: grid; gap: var(--s-5); }

/* ---------- 新建页：粘贴栏（整套设计里唯一的重点） ---------- */
.hero { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.lead { color: var(--ink-2); font-size: var(--fs-md); max-width: 36em; }
.pastebar { display: flex; align-items: stretch; min-height: var(--h-hero); margin-top: var(--s-3);
            background: var(--surface); border: var(--bw-strong) solid var(--ink); border-radius: var(--r-m); overflow: hidden; }
.pastebar:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.pastebar textarea { flex: 1; min-width: 0; padding: 14px var(--s-4); border: 0; background: transparent; resize: none;
                     font-size: var(--fs-md); line-height: 1.5; outline: none; max-height: 168px; }
.pastebar textarea::placeholder { color: var(--ink-3); }
.pastebar .btn-hero { padding: 0 var(--s-6); border-left: var(--bw-strong) solid var(--on-tape); font-size: var(--fs-md); }

.options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-5) var(--s-6); margin-bottom: var(--s-6); }
.options .field { width: auto; }
.options .select-wrap { min-width: 128px; }
.opt-checks { display: flex; gap: var(--s-5); align-items: center; height: var(--h-ctl); }

/* ---------- 解析结果 ---------- */
.result { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-5); padding: var(--s-5); }
.result-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--s-1); }
.result-main { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.result-main h3 { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pick { display: grid; gap: var(--s-2); }
.pick label { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
              border: var(--bw) solid var(--line); border-radius: var(--r-m); cursor: pointer; transition: border-color var(--t-fast); }
.pick label:hover { border-color: var(--line-strong); }
.pick label:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.pick input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.pick .grow { flex: 1; font-weight: var(--fw-medium); }
.result-actions { display: flex; gap: var(--s-3); }

.batch-row { display: grid; grid-template-columns: auto 96px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-5); }
.batch-row .title { font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* ---------- 队列行 ---------- */
.task { display: grid; grid-template-columns: 112px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); }
.task-main { display: grid; gap: var(--s-2); min-width: 0; }
.task-title { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.task-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
.task-actions { display: flex; gap: var(--s-1); }
.task-error { font-size: var(--fs-sm); color: var(--err); }
.files { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.file { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--h-sm); padding: 0 var(--s-3);
        border: var(--bw) solid var(--line-strong); border-radius: var(--r-m); background: var(--surface);
        font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.file:hover { border-color: var(--ink); }
.file.gone { cursor: default; border-style: dashed; color: var(--ink-3, var(--ink)); }
.file.gone:hover { border-color: inherit; }
.file { max-width: 100%; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file .num { white-space: nowrap; }

/* ---------- 素材库 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); }
.item { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-4); }
.item h3 { font-size: var(--fs-base); overflow-wrap: anywhere; }
.item .path { font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; }

/* ---------- 设置 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-grid .wide { grid-column: 1 / -1; }
.key-row { display: flex; gap: var(--s-2); }
.key-row .input { flex: 1; min-width: 0; }
.group-title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.status-list { display: grid; gap: var(--s-3); }
.status-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.footnote { margin-top: var(--s-7); font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  h1 { font-size: var(--fs-xl); }
  .topbar-in { gap: var(--s-3); padding: 0 var(--s-4); }
  .nav a { padding: 0 var(--s-2); }
  .page { padding: var(--s-5) var(--s-4) var(--s-7); }
  .pastebar { flex-direction: column; }
  .pastebar .btn-hero { height: var(--h-hero); border-left: 0; border-top: var(--bw-strong) solid var(--on-tape); }
  .result { grid-template-columns: 1fr; padding: var(--s-4); }
  .batch-row { grid-template-columns: auto 1fr; }
  .batch-row .thumb, .batch-row .chip { display: none; }
  .task { grid-template-columns: 88px 1fr; }
  .task-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .form-grid { grid-template-columns: 1fr; }
  .brand span:not(.brand-mark) { display: none; }
}

/* ---------- 在线版补充 ---------- */
.page.narrow { max-width: 520px; padding-top: var(--s-8); }
.toolbar { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.form-actions .spacer { flex: 1; }
.task-note { font-size: var(--fs-sm); color: var(--ink-2); }
.thumb img[hidden] { display: none; }