/* Day and night: index.html's FSBOX_THEME puts data-theme="light" or "dark" on <html> before the page draws (this device's
   clock, or what 设置 → 外观 says).  Colours, type and shapes come from the company UI kit (static/fs/tokens.css + fs-ui.css, the owner 10-10: the whole
   site in fs-ui).  These names are the site's own and point at the kit's; the kit's night colours follow the same
   data-theme="dark", so only a few that the kit has no name for are set again for the night. */
:root {
  --bg: var(--fs-bg);
  --panel: var(--fs-surface);
  --panel-2: var(--fs-surface-2);
  --line: var(--fs-border);
  --line-2: var(--fs-border-2);
  --text: var(--fs-text);
  --muted: var(--fs-text-2);
  --faint: color-mix(in srgb, var(--fs-gray-500) 50%, var(--fs-gray-600));   /* the kit's text-3 is 3.8:1 on the page by day, too light for 12px words: 4.9:1 */
  --accent: var(--fs-accent-ink);       /* links, the page you are on, outlines: door yellow is too light for words */
  --accent-2: var(--fs-yellow-700);
  --accent-soft: var(--fs-accent-soft);
  --accent-fill: var(--fs-accent);      /* door yellow: the main button, bars, the step you are on */
  --accent-fill-2: var(--fs-accent-hover);
  --on-accent: var(--fs-accent-text);   /* words on door yellow */
  --sel-bg: var(--fs-ink);              /* a chosen chip or option (fs-chip.on): ink by day, door yellow at night */
  --on-sel: #fff;
  --seg-on: var(--fs-surface);          /* the chosen part of a segmented row (tabs under the title, 生图's 比例 …): raised on the grey track */
  --warm: var(--fs-orange-500);
  --ok: var(--fs-success);
  --ok-soft: var(--fs-success-bg);
  --warn: var(--fs-orange-700);         /* (the kit's warning yellow is the accent's colour: warnings stay orange) */
  --warn-soft: var(--fs-warning-bg);
  --bad: var(--fs-danger);
  --bad-soft: var(--fs-danger-bg);
  --code-bg: var(--fs-surface-2);
  --on-warn: #fff;
  --on-bad: #fff;
  --thumb-bg: linear-gradient(180deg, var(--fs-gray-100), var(--fs-gray-200));
  --toast-bg: var(--fs-ink);
  --swatch-edge: rgba(0, 0, 0, .15);
  --shadow: var(--fs-shadow-sm);
  --shadow-up: var(--fs-shadow-md);
  --radius: var(--fs-radius-lg);
  --mono: var(--fs-font-mono);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent-2: var(--fs-yellow-200);
  --sel-bg: var(--fs-accent);
  --on-sel: var(--fs-ink);
  --seg-on: var(--fs-border-2);
  --faint: var(--fs-text-3);
  --warn: var(--fs-orange-300);
  --on-warn: var(--fs-ink);
  --thumb-bg: linear-gradient(180deg, var(--fs-surface-2), var(--fs-surface));
  --toast-bg: var(--fs-border-2);
  --swatch-edge: rgba(255, 255, 255, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--fs-font-cn);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
code, pre, .mono { font-family: var(--mono); font-size: 13px; }
[hidden] { display: none !important; }

/* ---------- workspace navigation */
.ui-icon { width: 19px; height: 19px; flex: none; }
.top { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 216px; height: 100dvh; display: flex; flex-direction: column; gap: 24px; padding: 24px 14px 16px; background: var(--panel); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; color: var(--text); font-size: 17px; white-space: nowrap; line-height: 1.35; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; flex: none; }
.brand b { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }
.top nav { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }   /* (the owner, 10-07: no scrollbar beside the menu - it still scrolls with the wheel) */
.nav-label { margin: 16px 12px 5px; color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.nav-label:first-child { margin-top: 0; }
.top nav a { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 9px 12px; min-height: 38px; border-radius: 8px; font-size: 14px; white-space: nowrap; flex: none; }
.top nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.top nav a.on { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.top-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 8px 0; border-top: 1px solid var(--line); }
.top-right #who { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.queue { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; max-width: 100%; font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.queue .spin { flex: none; }
.queue .q-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.queue:hover { text-decoration: none; }
.nav-toggle { display: none; }
.with-nav main { width: calc(100% - 216px); max-width: 1360px; margin-left: max(216px, calc(216px + (100vw - 216px - 1360px) / 2)); padding: 32px 36px 72px; }
@media (max-width: 960px) {
  .top { position: sticky; inset: auto; top: 0; width: 100%; height: 64px; flex-direction: row; align-items: center; gap: 10px; padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; font-size: 15px; }
  .brand img { width: 30px; height: 30px; }
  .brand b { font-size: 11px; margin-top: 0; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .top nav { display: none; position: absolute; top: 72px; left: 12px; right: 12px; max-height: 75dvh; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .top.nav-open nav { display: flex; }
  .top-right { border: 0; padding: 0; flex-wrap: nowrap; }
  .top-right #who { display: none; }
  .queue { width: auto; }
  .queue .q-text { display: none; }
  .with-nav main { width: 100%; max-width: none; margin: 0; padding: 24px 20px 64px; }
}

/* ---------- layout */
main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-pad { padding: 20px 22px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stack > * + * { margin-top: 14px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- buttons & inputs */
button, .btn {
  font: inherit; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: var(--fs-radius-md); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
  white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s;
}
button:hover, .btn:hover { border-color: var(--faint); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: var(--accent-fill-2); border-color: var(--accent-fill-2); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover, .btn.ghost:hover { background: var(--panel); border-color: var(--line); color: var(--text); }
button.small, .btn.small { height: 30px; padding: 0 11px; font-size: 13px; border-radius: var(--fs-radius-sm); }
button.danger { color: var(--bad); }
button.danger.picked { background: var(--bad-soft); border-color: var(--bad); }
button:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
button .spin { width: 14px; height: 14px; }
.ai-picker { width: auto; }
.ai-settings-intro { margin: 6px 0 0; }
.ai-connections { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-settings-table .tbl { width: 100%; table-layout: fixed; }
.ai-settings-table th:first-child { width: 36%; }
.ai-settings-table th:nth-child(2) { width: 24%; }
.ai-settings-table th:nth-child(3) { width: 25%; }
.ai-settings-table th:last-child { width: 15%; }
.ai-settings-table td { vertical-align: top; padding: 16px 10px; }
.ai-settings-table select { min-width: 0; width: 100%; font-size: 13px; padding: 8px; }
.ai-stage-scope { margin-top: 5px; line-height: 1.5; }
.ai-settings-policy { line-height: 1.6; }
.ai-task-group-nav { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.ai-task-group-nav button { background: var(--bg); border-color: var(--line); }
.ai-task-groups { display: grid; gap: 32px; }
.ai-task-group { scroll-margin-top: 20px; }
.ai-task-group-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 10px; }
.ai-task-group-head h3 { font-size: 19px; margin: 0; }
.ai-task-group-head p, .ai-group-note { margin: 0; }
.ai-task-group .ai-settings-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ai-task-group .tbl tr:last-child td { border-bottom: 0; }
.ai-group-note { padding: 10px 12px 0; line-height: 1.6; }
.ai-task-save { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 16px; background: var(--panel); padding: 12px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.settings-account-grid > * { min-width: 0; }
.settings-account-grid .kv dd { overflow-wrap: anywhere; }
.theme-hours { display: flex; gap: 12px; flex-wrap: wrap; }
.theme-hours .field { flex: 0 1 150px; }
p.theme-now, p.theme-where { margin: 0; }
.ai-advanced { border-top: 1px solid var(--line); padding-top: 12px; }
.ai-advanced > summary { color: var(--muted); font-size: 14px; }
.ai-advanced-body { padding-top: 14px; }
.ai-advanced-body p { margin-bottom: 0; }
.ai-fallback-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ai-task-dialog { max-width: 620px; }
.ai-task-dialog p { margin: 6px 0 0; }
.ai-task-stages { display: grid; gap: 16px; }
.ai-task-stage { border-top: 1px solid var(--line); padding-top: 14px; }
.ai-task-stage h3 { margin-bottom: 5px; }
.ai-task-pickers { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; margin-top: 10px; }
.ai-task-pickers select { width: 100%; min-width: 0; }
@media (max-width: 850px) {
  .ai-settings-table .tbl, .ai-settings-table tbody { display: block; }
  .ai-settings-table thead { display: none; }
  .ai-settings-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ai-settings-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .ai-settings-table td:first-child, .ai-settings-table td:nth-child(3) { grid-column: 1 / -1; }
  .ai-settings-table td:nth-child(2) { grid-row: 2; }
  .ai-settings-table td:last-child { grid-row: 2; }
  .ai-settings-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
}
@media (max-width: 540px) {
  .ai-task-pickers, .ai-fallback-pickers { grid-template-columns: minmax(0, 1fr); }
}
label.field { display: block; }
label.field > span, div.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
label.field > small, div.field > small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 5px; }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=time], input:not([type]), select, textarea {
  font: inherit; width: 100%; color: var(--text); background: var(--panel);   /* (the kit's fs-input: on the card's white; grey boxes read as switched off) */
  border: 1px solid var(--line-2); border-radius: var(--fs-radius-md); padding: 8px 12px; outline: none;
}
/* one-line boxes as tall as the buttons beside them (36px; they were 42 and stood out of every row) */
input[type=text], input[type=password], input[type=number], input[type=search], input[type=time], input:not([type]), select { height: 36px; padding-top: 0; padding-bottom: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--fs-accent); box-shadow: var(--fs-focus); }
textarea { resize: vertical; min-height: 80px; }
textarea.code { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; min-height: 560px; tab-size: 2; white-space: pre; }

/* ---------- login */
.login-wrap { min-height: calc(100vh - 120px); display: grid; place-items: center; }
.login { width: min(380px, 100%); padding: 34px 30px 30px; text-align: center; }
.login .login-mark { display: block; width: 52px; height: 52px; margin: 0 auto 14px; }
.login h1 { font-size: 22px; }
.login p { color: var(--muted); margin: 6px 0 22px; font-size: 14px; }
.login form { text-align: left; }
.login button { width: 100%; margin-top: 14px; height: 40px; }
.login .feishu-login { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px; height: 40px; }
.form-err { color: var(--bad); font-size: 13.5px; margin-top: 10px; min-height: 1.4em; }

/* ---------- building cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.card { display: block; color: var(--text); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-up); }
.card .thumb { aspect-ratio: 5 / 4; background: var(--thumb-bg); display: grid; place-items: center; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.card .thumb .none { color: var(--faint); font-size: 13px; }
.card .body { padding: 14px 16px 16px; }
.card .title { font-weight: 650; font-size: 15.5px; }
.card .name { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.card .meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.swatches { display: inline-flex; gap: 3px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--swatch-edge); display: inline-block; }
.card.new { display: grid; place-items: center; min-height: 320px; border: 1.5px dashed var(--line-2); background: transparent; box-shadow: none; color: var(--muted); text-align: center; }
.card.new:hover { border-color: var(--accent); color: var(--accent); }
.card.new .plus { font-size: 34px; line-height: 1; margin-bottom: 8px; }

/* ---------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.badge.ok { color: var(--ok); background: var(--ok-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad { color: var(--bad); background: var(--bad-soft); }
.badge.info { color: var(--accent); background: var(--accent-soft); }
.badge.gray { color: var(--muted); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------- detail */
.detail-head { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; margin-bottom: 18px; }
.detail-head .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.reqs { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 8px 12px; margin: -6px 0 14px; }
.reqs > summary { cursor: pointer; font-weight: 600; }
.reqs-body { display: grid; gap: 8px; margin-top: 8px; }
.reqs-text { white-space: normal; line-height: 1.6; overflow-wrap: anywhere; }
.reqs textarea { width: 100%; box-sizing: border-box; }
.chip { font-size: 13px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; display: inline-flex; gap: 6px; align-items: center; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 8px; display: inline-block; }
.actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.actions .row { justify-content: flex-end; }
.actions .label { font-size: 12px; color: var(--faint); margin-right: 2px; }
.actions button.big { font-size: 15px; padding: 9px 18px; }
.actions details.more { position: relative; }
.actions details.more > summary { list-style: none; cursor: pointer; }
.actions details.more > summary::-webkit-details-marker { display: none; }
.actions details.more > .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 10px; min-width: 300px;
  padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.actions details.more > .menu .row { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: none; border-radius: 0; height: 40px; padding: 0 14px; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { font-size: 12px; color: var(--faint); margin-left: 3px; }

/* 3D preview: Blender-like dark grey by default (cream models read better on it), light on request */
.viewer { height: min(72vh, 720px); border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid #1c1c1c;
  background: radial-gradient(ellipse at 50% 38%, #4b4b4b 0%, #3a3a3a 45%, #262626 100%); }
.viewer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 70%, #000 20%, transparent 70%); }
.viewer.light { background: radial-gradient(ellipse at 50% 30%, #fbf9f5, #e9e3d8); border-color: var(--line); }
.viewer.light::before { display: none; }
.viewer model-viewer { width: 100%; height: 100%; --poster-color: transparent; position: relative; }
.viewer model-viewer { --progress-bar-color: var(--fs-yellow-400); --progress-bar-height: 3px; }
.viewer.light model-viewer { --progress-bar-color: var(--accent); }
/* the 3D tab's loading: over the picture of the work, readable on the dark view and the light one */
.viewer .mvload { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  gap: 7px; min-width: 230px; padding: 9px 16px 11px; border-radius: 12px; background: rgba(18,18,18,.78); color: #f3f3f3; font-size: 13px;
  pointer-events: none; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.viewer .mvload i { display: block; width: 100%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.viewer .mvload i b { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--fs-yellow-400); transition: width .25s; }
.viewer.light .mvload { background: rgba(255,255,255,.92); color: #1f2226; box-shadow: 0 4px 18px rgba(0,0,0,.10); }
.viewer.light .mvload i { background: rgba(0,0,0,.10); }
.viewer.light .mvload i b { background: var(--accent-fill); }
.viewer.done .mvload { display: none; }
.viewer .hint { position: absolute; left: 14px; bottom: 12px; font-size: 12.5px; color: #d6d6d6; background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 99px; }
.viewer.light .hint { color: #6b665e; background: rgba(255,255,255,.75); }
.viewer .vbtns { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.viewer .vbtns button { background: rgba(40,40,40,.8); color: #e8e8e8; border-color: rgba(255,255,255,.12); }
.viewer.light .vbtns button { background: rgba(255,255,255,.85); color: #1f2226; border-color: rgba(0,0,0,.08); }
.viewer .vexp { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px;
  color: #e8e8e8; background: rgba(40,40,40,.8); border: 1px solid rgba(255,255,255,.12); padding: 4px 12px; border-radius: 99px; }
.viewer.light .vexp { background: rgba(255,255,255,.85); color: #1f2226; border-color: rgba(0,0,0,.08); }
.viewer .vexp input[type=range] { width: 150px; height: auto; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
.viewer .vexp b { font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: right; }

/* conversation with the model maker */
.chatwrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.chat { display: flex; flex-direction: column; min-height: 60vh; }
.chat-log { display: flex; flex-direction: column; gap: 14px; padding: 16px; max-height: 68vh; overflow-y: auto; }
.msg { max-width: 86%; display: flex; flex-direction: column; gap: 6px; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg .bubble { padding: 10px 14px; border-radius: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.msg.user .bubble { background: var(--accent-fill); color: var(--on-accent); border-bottom-right-radius: 4px; }
.msg.agent .bubble { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .who { font-size: 12px; color: var(--faint); }
.msg .imgs { display: flex; gap: 6px; flex-wrap: wrap; }
.msg .imgs img { height: 84px; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--line); }
.vcard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); max-width: 520px; }
.vcard .vmain { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #3a3a3a; cursor: zoom-in; }
.vcard .vrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); }
.vcard .vrow img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #3a3a3a; cursor: zoom-in; }
.vcard .vfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 13px; }
.chat-input { border-top: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-input textarea { min-height: 64px; resize: vertical; }
.chat-input .atts { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-input .atts .t { position: relative; }
.chat-input .atts .up { left: 3px; bottom: 3px; font-size: 10px; line-height: 14px; padding: 0 5px; }
.chat-input .atts img { height: 56px; border-radius: 6px; border: 1px solid var(--line); }
.chat-input .atts button { position: absolute; top: -6px; right: -6px; height: 20px; width: 20px; padding: 0; border-radius: 99px; font-size: 12px; }
.vlist { display: flex; flex-direction: column; gap: 8px; max-height: 76vh; overflow-y: auto; }
.vitem { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.vitem:hover { background: var(--panel-2); border-color: var(--line); }
.vitem.cur { border-color: var(--accent); }
.vitem img, .vitem .noimg { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #3a3a3a; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--faint); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* money */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; }
.stat .v { font-size: 22px; font-weight: 700; margin-top: 4px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tblwrap { overflow-x: auto; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--panel-2); }
.gallery figure.sq img { aspect-ratio: 1; object-fit: contain; }
.gallery figcaption { font-size: 13px; padding: 8px 12px; color: var(--muted); display: flex; justify-content: space-between; }
.gallery.big { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.gallery.big img { aspect-ratio: auto; max-height: 560px; object-fit: contain; background: var(--panel-2); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare figure { margin: 0; }
.compare img { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); max-height: 76vh; object-fit: contain; }
.compare figcaption { font-size: 13px; color: var(--muted); margin: 6px 2px; }
.compare .pic { position: relative; }
.compare .pic.drawing { touch-action: none; }
.compare .pic.drawing img { cursor: crosshair; }
.an-box { position: absolute; border: 2px solid #e0452b; background: rgba(224, 69, 43, .12); border-radius: 4px; pointer-events: none; }
.annot { margin-top: 12px; }
.annot input { flex: 1; min-width: 200px; }
.inv-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.inv-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.inv-item.off { opacity: .55; }
.inv-item .crop { aspect-ratio: 4 / 3; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; position: relative; }
.inv-item .crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.inv-item .crop .none { color: var(--faint); font-size: 12px; }
.inv-item .bd { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.inv-item .nm { font-weight: 650; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.inv-item .what { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.inv-item input[type=text] { font-size: 12.5px; padding: 5px 7px; }
.ref-pick { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ref-pick img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; opacity: .75; }
.ref-pick img.on { border-color: var(--accent); opacity: 1; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: none; }
table.t td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }

.files .group { font-size: 12.5px; font-weight: 650; color: var(--muted); margin: 18px 0 6px; text-transform: none; }
.files .group:first-child { margin-top: 0; }
.files a.file { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--text); }
.files a.file:hover { background: var(--panel-2); text-decoration: none; }
.files .ext { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; min-width: 44px; text-align: center; }
.files .fname { flex: 1; font-family: var(--mono); font-size: 13px; word-break: break-all; }
.files .size { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

/* ---------- markdown */
.md { font-size: 14.5px; line-height: 1.7; }
.md h1 { font-size: 21px; margin: 4px 0 14px; }
.md h2 { font-size: 17px; margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.md h3 { font-size: 15px; margin: 18px 0 8px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md code { background: var(--code-bg); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.md pre { background: var(--code-bg); padding: 12px 14px; border-radius: 9px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; margin: 10px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--panel-2); font-weight: 600; white-space: nowrap; }
.md blockquote { margin: 10px 0; padding: 4px 14px; border-left: 3px solid var(--line-2); color: var(--muted); }
.md hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

/* ---------- jobs */
.job { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.job:last-child { border-bottom: none; }
.job:hover { background: var(--panel-2); }
a.job { color: var(--text); }
a.job:hover { text-decoration: none; }
.job > div { min-width: 0; overflow-wrap: anywhere; }
.job .jt { font-weight: 600; font-size: 14px; }
.job .jm { font-size: 12.5px; color: var(--faint); }
.log { background: #111418; color: #d9dde3; font-family: var(--mono); font-size: 12px; line-height: 1.55; padding: 14px 16px; border-radius: 10px; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
.log .ok { color: #7ee2a8; }
.log .bad { color: #ff8f86; }
.log .hl { color: #9cc2ff; }
.running-box { margin-bottom: 18px; }
.running-box #rb-steps:not(:empty) { padding: 8px 16px 10px; border-top: 1px solid var(--line); }
/* a job's steps (stepsHTML) */
.steps { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.step { display: flex; gap: 8px; align-items: center; min-height: 20px; }
.step .mk { width: 16px; text-align: center; flex: none; display: inline-flex; justify-content: center; }
.step.ok .mk { color: var(--ok); }
.step.bad .mk, .step.bad .lb { color: var(--bad); }
.step.todo, .step.skip { color: var(--faint); }
.step.run .lb { font-weight: 600; }
.step .tm { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd { font-size: 12px; color: var(--muted); line-height: 1.4; }
.thoughts { display: flex; flex-direction: column; gap: 2px; margin: 3px 0 5px; font-size: 12.5px; }
.thoughts .th { color: var(--text); line-height: 1.4; }
.thoughts .tt { color: var(--muted); font-size: 12px; margin: 1px 0 5px; line-height: 1.45; }
.bubble .steps { margin-top: 8px; }
.log .think { color: #8f97a3; }
.running-box .head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.running-box .log { border-radius: 0 0 var(--radius) var(--radius); max-height: 260px; }
.progress { height: 3px; background: var(--line); overflow: hidden; position: relative; }
.progress::after { content: ""; position: absolute; inset: 0; width: 30%; background: var(--accent-fill); animation: slide 1.3s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rot .8s linear infinite; display: inline-block; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- new building */
.drop { border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 26px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; background: var(--panel-2); }
.drop b { color: var(--accent); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.thumbs .t { position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.thumbs .t img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.thumbs .t .tag { position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 700; background: var(--accent-fill); color: var(--on-accent); padding: 1px 7px; border-radius: 99px; }
.thumbs .t .tb { position: absolute; right: 4px; top: 4px; display: flex; gap: 3px; }
.thumbs .t .tb button { height: 24px; width: 24px; padding: 0; font-size: 13px; border-radius: 6px; background: rgba(255,255,255,.9); color: #1f2226; border-color: rgba(0,0,0,.1); }
.thumbs .t .fn { font-size: 11px; color: var(--muted); padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the line dropped: the page is trying again */
.netbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; padding: 6px 14px; border-radius: 99px;
  background: var(--warn); color: var(--on-warn); font-size: 13px; font-weight: 600; box-shadow: var(--shadow); pointer-events: none; }
.netbar[hidden] { display: none; }
/* a picture's upload: waiting, how far, done, failed */
.up { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; line-height: 16px; padding: 1px 7px; border-radius: 99px;
  background: rgba(20, 22, 26, .72); color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.up.ok { background: var(--ok); }
.up.bad { background: var(--bad); pointer-events: auto; }
.thumbs .t .up { bottom: 30px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.opt { border: 1.5px solid var(--line); border-radius: 11px; padding: 14px 15px; cursor: pointer; background: var(--panel); }
.opt:hover { border-color: var(--line-2); }
.opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.opt.off { opacity: .5; cursor: not-allowed; }
.opt h3 { margin-bottom: 4px; }
.opt p { margin: 0; font-size: 13px; color: var(--muted); }
.note { font-size: 13.5px; padding: 11px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.note.info { background: var(--accent-soft); color: var(--accent); }
.note a { color: inherit; text-decoration: underline; }

/* ---------- misc */
.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 6px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--toast-bg); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: min(560px, calc(100vw - 32px)); }
.toast.bad { background: var(--fs-danger); }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(12, 12, 14, .92); display: grid; place-items: center; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 8px; }
.lightbox .lb-cap { color: #ddd; font-size: 14px; margin-top: 10px; text-align: center; }
.lightbox .lb-cap a { color: var(--fs-yellow-300); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

@media (max-width: 860px) {
  main { padding: 20px 16px 60px; }
  .detail-head { grid-template-columns: 1fr; }
  .actions { align-items: stretch; }
  .actions .row { justify-content: flex-start; }
  .grid2, .compare, .opts { grid-template-columns: 1fr; }
  .viewer { height: 62vh; }
  .viewer .hint { display: none; }
  .viewer .vexp input[type=range] { width: 110px; }
  .chatwrap { grid-template-columns: 1fr; }
  .msg { max-width: 100%; }
  .gallery.big { grid-template-columns: 1fr; }
}

/* print page */
.sw { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); vertical-align: middle; flex: none; }
.chip .sw { width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.pcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 12px; }
.ppics { display: grid; gap: 6px; align-content: start; }
.ppics figure { margin: 0; position: relative; }
.ppics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #3a3a3a; cursor: zoom-in; display: block; }
.ppics figcaption { position: absolute; left: 6px; bottom: 6px; font-size: 11px; color: #eee; background: rgba(0,0,0,.5); padding: 1px 7px; border-radius: 99px; }
ol.checks { margin: 0; padding-left: 22px; } ol.checks li { margin: 6px 0; }
@media (max-width: 700px) { .pcards { grid-template-columns: minmax(0, 1fr); } .pcard { grid-template-columns: 110px minmax(0, 1fr); }
  .pcard .badge { white-space: normal; height: auto; min-height: 22px; } }   /* (a long way to lie on the plate: it wraps, the page does not scroll sideways) */

/* library */
.tabs a.tab { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; font-weight: 550; font-size: 14px; }
.tabs a.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.libcard { overflow: hidden; padding: 0; }
.libcard img, .libcard .noimg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #3a3a3a; }

/* printers and the send dialog */
.tray { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal .dialog { width: min(720px, 100%); max-height: 88vh; overflow-y: auto; }
.modal .pick { justify-content: flex-start; height: auto; padding: 12px 14px; text-align: left; gap: 10px; }

/* ---- scale: filters, selection, batches, lifecycle, review ---- */
.fchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: 0 12px; text-decoration: none; white-space: nowrap; }
.fchip:hover { text-decoration: none; }
.fchip:hover { border-color: var(--line-2); color: var(--text); }
.fchip.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--on-sel); }
.fchip .n { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.fchip.warn:not(.on) { border-color: var(--warn); color: var(--warn); }
.fsep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.card { position: relative; }
.card .flags, .lc .flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card .flags span, .lc .flags span { font-size: 11.5px; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 1px 7px; }
/* the list page: picking cards (a tick box shows while picking), the bar at the top of the list (app.js pageHome) */
.cards .card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card .pick { display: none; position: absolute; top: 10px; left: 10px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; background: var(--panel);
  border: 2px solid var(--line-2); place-items: center; font-weight: 700; color: var(--on-accent); cursor: pointer; }
.cards.selecting .card .pick { display: grid; }
.card.picked { outline: 2px solid var(--accent); outline-offset: -2px; }
.card.picked .pick { background: var(--accent-fill); border-color: var(--accent-fill); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 16px 0; }
.batchwrap { position: sticky; top: 66px; z-index: 19; }              /* under the site's bar (58 px) */
.batchwrap:not(:empty) { margin-bottom: 14px; }
.batchbar { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.batchbar .bb-n { white-space: nowrap; margin-right: 2px; }
.batchbar .bb-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 2px; }
@media (max-width: 640px) {
  .batchbar { padding: 8px; }
  .batchbar [data-fold], .batchbar .bb-sep { display: none; }
}
button.danger.solid { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
button.danger.solid:hover { opacity: .9; }
.dl-list { margin: 0; padding-left: 20px; max-height: 38vh; overflow-y: auto; }
.dl-list li { margin: 2px 0; }
/* a floating menu: a card's (right-click / long press) or a 「更多」 button's (app.js openMenu) */
.ctxmenu { position: fixed; z-index: 45; min-width: 210px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ctxmenu button { display: flex; width: 100%; justify-content: space-between; gap: 18px; height: 32px; padding: 0 10px; border: none; border-radius: 6px;
  background: none; font-weight: 500; text-align: left; }
.ctxmenu button:hover:not(:disabled), .ctxmenu button:focus-visible { background: var(--accent-soft); outline: none; }
.ctxmenu button.danger { color: var(--bad); }
.ctxmenu button.danger:hover, .ctxmenu button.danger:focus-visible { background: var(--bad-soft); }
.ctxmenu button span { overflow: hidden; text-overflow: ellipsis; }
.ctxmenu .head { padding: 3px 10px 5px; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxmenu .sep { height: 1px; background: var(--line); margin: 4px 6px; }
kbd { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; white-space: nowrap; }
table.keys td:first-child { white-space: nowrap; width: 1%; }
.toast .toast-act { margin-left: 12px; height: 26px; padding: 0 10px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.toast .toast-act:hover { border-color: #fff; }
/* the trash (app.js pageTrash) */
.tr-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--panel-2); display: block; }
.bat { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.bat:last-child { border-bottom: none; padding-bottom: 0; }
.bar { height: 6px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.bar span { display: block; height: 100%; background: var(--accent-fill); border-radius: 99px; transition: width .3s; }
.bad-t { color: var(--bad); }
.warn-t { color: var(--warn); }
.ok-t { color: var(--ok); }
.lc { padding: 12px 16px; margin: 12px 0 4px; }
.lc-current { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.lc-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 14px; background: var(--panel-2); border-radius: 8px; }
.lc-next > div { min-width: 0; }
.lc-next .btn { flex: none; }
.lc-actions { gap: 10px; flex-wrap: wrap; padding-top: 14px; }
/* a building's stages across its page (not a job's steps above: they shared .steps/.step and stood the bar on end) */
.stagebar { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sstep { flex: 1; min-width: 88px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); padding: 6px 8px;
  border-radius: 8px; background: var(--panel-2); white-space: nowrap; }
.sstep .n { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; background: var(--line); color: var(--muted); flex: none; }
.sstep.done { color: var(--ok); }
.sstep.done .n { background: var(--ok-soft); color: var(--ok); }
.sstep.cur { color: var(--text); font-weight: 600; background: var(--accent-soft); }
.sstep.cur .n { background: var(--accent-fill); color: var(--on-accent); }

/* Daily work: pending work first, then filters and the collection. */
.work-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.work-stat { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.work-stat strong { margin-left: auto; font-size: 26px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.work-stat .stat-arrow { font-size: 17px; color: var(--faint); }
.work-stat:hover, .work-stat.on { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.work-stat.on strong { color: var(--accent); }
#nf, #bn { max-width: none; }
.workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.workflow-step { display: flex; align-items: center; gap: 10px; min-width: 0; height: 58px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 14px; font-weight: 500; }
.workflow-step:hover { text-decoration: none; }
.workflow-step b { font-weight: 600; }
.workflow-number { display: grid; place-items: center; width: 25px; height: 25px; flex: none; background: var(--panel-2); border-radius: 50%; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.workflow-arrow { margin-left: auto; color: var(--faint); }
.workflow-step.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.workflow-step.on .workflow-number { color: var(--on-accent); background: var(--accent-fill); }
.workflow-step.passed { color: var(--ok); }
.workflow-step.passed .workflow-number { color: var(--ok); background: var(--ok-soft); }
.workflow-step[aria-disabled=true] { background: transparent; border-style: dashed; }
.new-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: stretch; }
.new-content, .new-options { padding: 24px; min-width: 0; }
.new-content { min-height: 442px; }
.new-content .drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 176px; padding: 24px; }
.new-content .drop > .ui-icon { width: 30px; height: 30px; color: var(--faint); margin-bottom: 3px; }
.new-content .thumbs:empty { display: none; }
.new-content textarea { min-height: 128px; }
.new-advanced { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.new-options h2 { font-size: 15px; margin-bottom: 20px; }
.new-options .dz-sz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.new-options .dz-sz label { min-width: 0; font-size: 12px; }
.new-options .dz-sz input { width: 100%; padding: 8px 10px; }
.new-options .dz-sz select { grid-column: 1 / -1; width: 100%; }
.new-ai select { width: 100%; min-width: 0; max-width: 100%; }
.new-actions { padding-top: 6px; }
.new-actions .primary { width: 100%; height: 42px; }
.new-options .form-err:empty { display: none; }
.card .title { line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) and (min-width: 961px) {
  .new-workspace { grid-template-columns: minmax(0, 1fr) 288px; gap: 16px; }
  .new-content, .new-options { padding: 18px; }
}
@media (max-width: 700px) {
  .new-workspace { grid-template-columns: 1fr; }
  .new-content, .new-options { padding: 18px; }
  .new-content { min-height: 0; }
  .workflow { gap: 6px; }
  .workflow-step { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; height: 68px; font-size: 12px; }
  .workflow-arrow { display: none; }
}
.batch-history { margin-bottom: 16px; }
.task-scopebar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.task-scope { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.task-scope > span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.task-scope select { width: min(420px, 100%); min-width: 0; }
.task-workflow { padding: 18px 20px; margin-bottom: 20px; }
.task-workflow h2 { font-size: 17px; overflow-wrap: anywhere; }
.task-workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.task-workflow-steps > * { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.task-workflow-steps > a:hover { background: var(--accent-soft); text-decoration: none; }
@media (max-width: 640px) {
  .task-scope { width: 100%; }
  .task-scope select { flex: 1; }
  .task-workflow { padding: 16px; }
  .task-workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.task-views { display: flex; gap: 26px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.task-views > a { display: flex; align-items: center; gap: 8px; padding: 0 2px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; }
.task-views > a:hover { color: var(--text); text-decoration: none; }
.task-views > a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }
.task-views > a > span { padding: 1px 7px; border-radius: 6px; background: var(--panel-2); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.task-views > a.on > span { background: var(--accent-soft); }
.task-filters { margin-bottom: 16px; }
.task-panel { overflow: hidden; }
.task-scroll { overflow-x: auto; }
.task-table { width: 100%; min-width: 850px; border-collapse: collapse; table-layout: fixed; }
.task-table th, .task-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.task-table th { padding-top: 11px; padding-bottom: 11px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.task-table th:nth-child(1) { width: 27%; }
.task-table th:nth-child(2) { width: 14%; }
.task-table th:nth-child(3) { width: 22%; }
.task-table th:nth-child(4) { width: 12%; }
.task-table th:nth-child(5) { width: 8%; }
.task-table th:nth-child(6) { width: 17%; }
.task-table tbody tr:last-child td { border-bottom: 0; }
.task-table tbody tr:hover { background: var(--panel-2); }
.task-kind { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.task-work { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-work:hover { color: var(--accent); }
.task-table .badge { white-space: nowrap; font-size: 12px; }
.task-result { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.task-owner { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; }
.task-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.task-actions .btn { white-space: nowrap; font-size: 12px; padding: 4px 8px; }
.task-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 280px; padding: 30px; }
.task-empty > .ui-icon { width: 34px; height: 34px; color: var(--faint); }
.task-empty h2 { font-size: 15px; font-weight: 500; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
  .work-summary { gap: 8px; }
  .work-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; font-size: 12px; }
  .work-stat strong { margin: 0; font-size: 24px; }
  .work-stat .stat-arrow { display: none; }
  .lc-next { align-items: flex-start; flex-direction: column; }
}
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.rcard { padding: 12px; display: grid; gap: 10px; }
.rpics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rpics figure { margin: 0; }
.rpics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--panel-2); }
.rpics figcaption { font-size: 12px; color: var(--faint); text-align: center; margin-top: 3px; }
@media (max-width: 640px) {
  .rgrid { grid-template-columns: 1fr; }
  .step { min-width: 72px; font-size: 12px; }
}
.warnbox { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 6px 10px; line-height: 1.5; }

/* files by drop and paste (app.js dropZone): the place lights up while a file is held over it */
.droppable.dropping { outline: 2px dashed var(--accent); outline-offset: 3px; background-color: var(--accent-soft); }

/* a note with pictures for the AI (app.js composer) */
.composer textarea { min-height: 140px; }
.composer .atts { display: flex; gap: 6px; flex-wrap: wrap; }
.composer .atts:empty { display: none; }
.composer .atts .t { position: relative; }
.composer .atts img { height: 64px; border-radius: 6px; border: 1px solid var(--line); }
.composer .atts .up { left: 3px; bottom: 3px; font-size: 10px; line-height: 14px; padding: 0 5px; }
.composer .atts button { position: absolute; top: -6px; right: -6px; height: 20px; width: 20px; padding: 0; border-radius: 99px; font-size: 12px; }
.kept img { height: 64px; border-radius: 6px; cursor: pointer; opacity: .35; outline: 2px solid transparent; outline-offset: 1px; }
.kept img.on { opacity: 1; outline-color: var(--accent); }

/* the test plate's samples: picture, number, place on the plate (app.js plateMap, fsbox/preview.py) */
.tp-head { display: flex; gap: 12px; align-items: flex-start; }
.tp-pic { position: relative; flex: 0 0 128px; width: 128px; height: 128px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden;
  cursor: zoom-in; background: var(--panel-2); }
.tp-pic.dark { background: #2b2f35; }
.tp-pic.light { background: #ebe7df; }
.tp-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tp-old { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: #ebe7df; }
.tp-pic .tp-n { position: absolute; left: 6px; top: 6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--accent-fill);
  color: var(--on-accent); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.tp-over { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tp-over[hidden] { display: none; }
.platemap rect { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1.5; }
.platemap polygon { fill: #8d939c; fill-opacity: .45; stroke: #8d939c; stroke-width: 1; }
.platemap polygon.on { fill: var(--accent); fill-opacity: .95; stroke: var(--accent); }
.platemap text { font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: central; cursor: pointer;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.platemap polygon { cursor: pointer; }
#tp-map { display: flex; flex-direction: column; gap: 2px; }
[data-sample].flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; }
@media (max-width: 560px) { .tp-pic { flex-basis: 96px; width: 96px; height: 96px; } }

/* the compare tab's list of differences, numbered on the pictures */
.an-box.saved { border-color: #f0a020; background: rgba(240, 160, 32, .10); }
.an-box.saved::before { content: attr(data-n); position: absolute; left: -2px; top: -22px; background: #f0a020; color: #fff; font-size: 12px;
  font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.an-list { display: flex; flex-direction: column; gap: 8px; }
.an-list:empty { display: none; }
.an-item { display: flex; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.an-item .n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 99px; background: #f0a020; color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; }
.an-item img { height: 64px; max-width: 220px; object-fit: contain; border-radius: 6px; cursor: zoom-in; background: #fff; }

/* the printers as a live monitor: camera, job, temperatures, AMS */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .pr-grid { grid-template-columns: 1fr; } }
.pr-cam { position: relative; background: #111; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.pr-cam img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.pr-cam .cam-msg { color: #ddd; padding: 16px; text-align: center; line-height: 1.6; }
.pr-cam .cam-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; }
.pr-cam .cam-bar button { background: rgba(30, 30, 30, .75); color: #eee; border-color: rgba(255, 255, 255, .15); }
.pr-cam .cam-bar span { color: #ddd; background: rgba(0, 0, 0, .45); padding: 1px 8px; border-radius: 99px; margin-left: auto; }
.pr-cam .cam-bar span:empty { display: none; }
/* the board's and the send dialog's camera (the owner, 10-07): a lane's small, the confirmation's big enough to see the plate */
.lane-cam { border-radius: 8px; }
.lane-cam .cam-bar { left: 6px; right: 6px; bottom: 6px; }
.lane-cam .cam-bar button { padding: 2px 8px; font-size: 12px; }
.sendcam { max-height: 42vh; }
.cam-line { line-height: 1.5; }
.pr-live { gap: 10px; }
.pr-temps { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pr-temps div { display: flex; flex-direction: column; }
.pr-temps b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pr-ams { display: flex; flex-direction: column; gap: 4px; }
.tray-on .tray { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 生图: a set's pictures, the box editor */
.imgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.imtile { margin: 0; display: grid; gap: 6px; }
.imtile img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--panel-2); border-radius: 8px; cursor: zoom-in; }
.imtile.wait > div { aspect-ratio: 1; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; color: var(--faint); font-size: 13px; gap: 6px; }
/* exactly the picture's size: the boxes are fractions of it (10-04: a tall picture left the layer wider than itself -
   every box drawn on it landed left of where it was drawn) */
.boxwrap { position: relative; justify-self: center; align-self: center; width: fit-content; max-width: 100%; margin-inline: auto;
  user-select: none; touch-action: none; }
.boxwrap img { display: block; max-width: 100%; max-height: 62vh; border-radius: 8px; }
.boxlayer { position: absolute; inset: 0; cursor: crosshair; }
.bx { position: absolute; border: 2px solid #e61e1e; background: rgba(230, 30, 30, 0.08); border-radius: 2px; }
.bx span { position: absolute; left: -2px; top: -20px; background: #e61e1e; color: #fff; font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }
.bx.drawing { border-style: dashed; }

/* 生图 · 设计 (app.js pageImagine, pageDesign): the list, the four steps, the views; a building's redraw */
button.wrap, .btn.wrap { white-space: normal; height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; line-height: 1.35; }
button.wrap:not(.small), .btn.wrap:not(.small) { min-height: 36px; }
.note.bad { background: var(--bad-soft); color: var(--bad); }
.dz-sz { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.dz-sz label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.dz-sz input[type=number] { width: 84px; }
.dz-sz select { width: auto; }
.dz-sz .x { color: var(--faint); }
.dl-new, .dz-sec { scroll-margin-top: 72px; }
.dl-new { margin-bottom: 16px; }
.dl-filters { gap: 8px; margin: 10px 0 14px; }
.dl-filters input[type=search] { flex: 1 1 180px; max-width: 300px; }
.dl-filters select { width: auto; }
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.dcard { display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: transform .15s, box-shadow .15s; }
.dcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(40,32,20,.08), 0 10px 28px rgba(40,32,20,.10); }
.dcard .dc-main { display: block; flex: 1; color: var(--text); }
.dcard .dc-main:hover { text-decoration: none; }
.dcard .thumb { aspect-ratio: 1; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.dcard .thumb img { width: 100%; height: 100%; object-fit: contain; }
.dcard .thumb .none { color: var(--faint); font-size: 13px; }
.dcard .body { padding: 12px 14px 4px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }
.dcard .title { font-weight: 650; min-width: 0; }
.dcard .meta { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.dc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.dc-tags span { font-size: 11.5px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 7px; }
.dc-req { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.dc-foot { display: flex; align-items: center; gap: 8px; padding: 6px 14px 12px; min-width: 0; }
.dc-foot a { white-space: nowrap; }
.dz-page h1 { overflow-wrap: anywhere; }
.dz-page { padding-bottom: 90px; }
.dz-page .workflow-step { height: 42px; padding: 7px 12px; font-size: 13px; }
.dz-page .dz-sec { display: none; }
.dz-page[data-step="0"] #dz-s1, .dz-page[data-step="1"] #dz-s2, .dz-page[data-step="2"] #dz-s3, .dz-page[data-step="3"] #dz-s4 { display: block; }
.dz-nextbar { position: fixed; z-index: 20; bottom: 16px; left: 252px; right: 36px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 20px; box-shadow: 0 4px 24px rgba(0, 0, 0, .12); }
.dz-nextbar > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dz-nextbar b { font-size: 14px; }
.dz-nextbar .row { flex-wrap: nowrap; }
.dz-steps .sstep { border: 0; justify-content: center; }
.dz-steps .sstep:disabled { opacity: .75; }
.model-handoff { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.model-source { display: grid; gap: 12px; min-width: 0; }
.model-source > img { width: 100%; max-height: 430px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: zoom-in; }
.model-source .dz-pre { max-height: 280px; overflow: auto; margin-top: 10px; }
.model-request { min-width: 0; }
.model-request select { width: 100%; min-width: 0; max-width: 100%; }
/* Account and review workspaces */
.accounts-layout, .retro-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.accounts-list, .retro-reports, .retro-side, .retro-lessons { min-width: 0; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list-toolbar input[type=search] { width: 210px; padding: 7px 10px; font-size: 13px; }
.compact-stats { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--muted); }
.compact-stats b { color: var(--text); margin-left: 5px; }
.users-table { min-width: 590px; width: 100%; }
.users-table th, .users-table td { padding: 14px 16px; vertical-align: top; }
.users-table th { white-space: nowrap; }
.users-table td:first-child { width: 24%; overflow-wrap: anywhere; }
.users-table td:nth-child(2) { width: 22%; }
.users-table td:nth-child(3) { width: 25%; }
.users-table td:nth-child(n+4) { white-space: nowrap; }
.user-state { margin-top: 4px; }
.user-ip { font-size: 12px; color: var(--faint); margin-top: 3px; }
.user-ip span { display: block; max-width: 190px; overflow-wrap: anywhere; white-space: normal; font-size: 12px; }
.user-local { background: var(--panel-2); }
.account-create h2 { margin-bottom: 2px; }
.account-create > button { width: 100%; }
.account-help { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); }
.account-help p { margin: 10px 0 0; }
.page-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.page-tabs a { color: var(--muted); font-size: 14px; padding: 0 0 11px; border-bottom: 2px solid transparent; }
.page-tabs a:hover { text-decoration: none; color: var(--accent); }
.page-tabs a.on { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }
.page-tabs a span { font-weight: 400; margin-left: 5px; color: var(--faint); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.summary-line { display: flex; justify-content: space-between; padding: 7px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 14px; }
.summary-line b { color: var(--text); font-size: 20px; line-height: 1.3; }
.retro-schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.retro-schedule .row { flex-wrap: nowrap; gap: 6px; }
.retro-schedule input { width: 62px; }
.retro-schedule .small { white-space: nowrap; }
.retro-history details + details { border-top: 1px solid var(--line); padding-top: 12px; }
.retro-history summary { display: flex; align-items: baseline; gap: 16px; cursor: pointer; font-size: 13px; }
.retro-history summary::before { content: "›"; color: var(--faint); }
.retro-history details[open] > summary::before { content: "⌄"; }
.retro-history summary time { color: var(--faint); white-space: nowrap; }
.retro-history summary span { min-width: 0; }
.retro-history .rep-body { margin-top: 16px; }
.report-evidence { margin-top: 5px; color: var(--faint); }
.report-evidence > summary { cursor: pointer; }
.report-evidence ul { margin: 6px 0; padding-left: 18px; color: var(--muted); }
.filter-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-buttons .on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-buttons span { margin-left: 4px; opacity: .7; }
.lessons-table { width: 100%; min-width: 800px; table-layout: fixed; }
.lessons-table th, .lessons-table td { padding: 14px 18px; vertical-align: top; }
.lessons-table th:first-child { width: 51%; }
.lessons-table th:nth-child(2) { width: 21%; }
.lessons-table th:nth-child(3) { width: 12%; }
.lessons-table th:nth-child(4) { width: 8%; }
.lessons-table th:nth-child(5) { width: 8%; }
.lessons-table th { white-space: nowrap; font-size: 12px; }
.lessons-table td { overflow-wrap: anywhere; }
.lessons-table td:last-child { white-space: nowrap; padding-left: 8px; padding-right: 12px; }
.lesson-text { font-size: 14px; line-height: 1.65; }
.lesson-record { margin-top: 8px; font-size: 12px; }
.lesson-record > summary { color: var(--faint); cursor: pointer; }
.lesson-record[open] { padding: 10px 12px; border-radius: 8px; background: var(--panel-2); }
.lesson-record[open] > summary { margin-bottom: 8px; }
.lesson-record > div + div { margin-top: 6px; }
.lesson-help { padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lesson-help p { max-width: 840px; margin: 10px 0 0; }
@media (max-width: 1250px) {
  .accounts-layout, .retro-layout { grid-template-columns: minmax(0, 1fr); }
  .account-create { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .account-create h2, .account-help, #nu-err { grid-column: 1 / -1; }
  .account-create > button { grid-column: 3; }
  .retro-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .account-create, .retro-side { display: flex; flex-direction: column; }
  .account-create > *, .retro-side > * { width: 100%; }
  .list-toolbar { padding: 14px; gap: 12px; }
  .list-toolbar > .row { width: 100%; flex-wrap: wrap; }
  .list-toolbar input[type=search] { width: 100%; }
  .compact-stats { gap: 18px; }
  .retro-history summary { gap: 8px; flex-wrap: wrap; }
  table.users-table, table.lessons-table { min-width: 0; table-layout: auto; }
  .users-table thead, .lessons-table thead { display: none; }
  .users-table tbody, .lessons-table tbody { display: block; }
  .users-table tr, .lessons-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 16px; border-bottom: 1px solid var(--line); }
  .users-table tr:last-child, .lessons-table tr:last-child { border-bottom: 0; }
  table.users-table td:nth-child(n), table.lessons-table td:nth-child(n) { width: auto; padding: 0; border: 0; white-space: normal; }
  .users-table td:first-child { grid-column: 1; grid-row: 1; }
  .users-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; }
  .users-table td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .users-table td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .users-table td:nth-child(5) { grid-column: 2; grid-row: 1; }
  .user-state { display: inline-block; margin: 0 0 0 8px; }
  .lessons-table td:first-child { grid-column: 1 / -1; }
  .lessons-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .lessons-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .lessons-table td:nth-child(4) { grid-column: 2; grid-row: 3; text-align: right; color: var(--faint); }
  .lessons-table td:nth-child(4)::before { content: "出现 "; }
  .lessons-table td:nth-child(4)::after { content: " 次"; }
  .lessons-table td:nth-child(5) { grid-column: 1; grid-row: 3; }
  .lessons-table #rt-empty td { grid-column: 1 / -1; }
}
@media (max-width: 960px) { .dz-nextbar { left: 20px; right: 20px; } }
@media (max-width: 640px) {
  .model-handoff { grid-template-columns: 1fr; gap: 18px; }
  .dz-page .workflow-step { height: 40px; padding: 6px; flex-direction: row; gap: 6px; font-size: 12px; }
  .dz-nextbar { left: 12px; right: 12px; bottom: 10px; padding: 12px; }
  .dz-nextbar > div:first-child .small { display: none; }
  .dz-nextbar .row { gap: 4px; }
  .dz-nextbar button, .dz-nextbar .btn { font-size: 12px; padding: 8px; }
}
.dz-title { cursor: text; border-bottom: 1px dashed transparent; }
.dz-title:hover, .dz-title:focus-visible { border-bottom-color: var(--line-2); outline: none; }
.dz-steps { margin: 0 0 14px; }
.dz-steps .sstep { cursor: pointer; }
.dz-sec { margin-bottom: 14px; }
.dz-pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.dz-req { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dz-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.dz-refs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; background: var(--panel-2); }
.dz-ref { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 140px; }
.dz-ref figcaption { line-height: 1.3; }
#dz-req:empty, #dz-go:empty { display: none; }
.dz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.dz-aibox { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.dz-aibox > * + * { margin-top: 10px; }
.dz-asking { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 14px; }
.dz-ok { color: var(--ok); font-weight: 650; }
.dz-q { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.dz-qt { font-weight: 600; line-height: 1.5; }
.dz-opts { display: flex; flex-wrap: wrap; gap: 6px; }
button.dz-opt { white-space: normal; height: auto; min-height: 30px; padding: 4px 11px; text-align: left; line-height: 1.4; font-weight: 500; }
button.dz-opt.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--on-sel); }
.dz-other { display: flex; align-items: center; gap: 6px; }
.dz-other input[type=text] { flex: 1; min-width: 0; padding: 5px 9px; font-size: 13.5px; }
.dz-qa { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.dz-mark { display: inline-block; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 99px; margin-left: 6px; vertical-align: 1px;
  color: var(--muted); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.dz-mark.mine { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.field.miss > span { color: var(--bad); }
.field.miss input, .field.miss select { border-color: var(--bad); }
.field.dirty > span::after { content: " · 改了"; color: var(--warn); font-weight: 600; }
.dz-go { border-top: 1px solid var(--line); padding-top: 14px; }
.dz-go > * + * { margin-top: 6px; }
.dz-go input[type=text] { flex: 1 1 200px; width: auto; min-width: 0; }
/* aspects compared: each a row of options ticked or not; every version a block of its own pictures */
.dz-cmp { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); gap: 8px; }
.dz-axis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.dz-axl { font-weight: 600; font-size: 13.5px; padding-top: 5px; min-width: 4.5em; }
.dz-axis > button.ghost { padding: 4px 8px; }
.dz-cmp-add { gap: 6px; }
.dz-grp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dz-grp + .dz-grp { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dz-gh { gap: 8px; }
@media (max-width: 600px) { .dz-axis { grid-template-columns: minmax(0, 1fr) auto; } .dz-axis .dz-opts { grid-column: 1 / -1; grid-row: 2; } }
.dz-sh { gap: 8px 10px; margin-bottom: 4px; }
#dz-cnone:empty { display: none; }
.dz-round { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dz-round:not([hidden]) ~ .dz-round:not([hidden]) { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
#dz-rounds:not(:empty) { margin-top: 10px; }
.dz-older { margin-top: 14px; }
.dz-older > summary { cursor: pointer; color: var(--muted); }
.dz-older #dz-older-list { margin-top: 10px; }
.dz-rh { gap: 8px; }
.dz-pic { position: relative; }
.dz-pic img { display: block; }
.dz-star { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; border-radius: 99px; font-size: 18px; line-height: 1;
  background: rgba(255, 255, 255, .9); color: #8a7f6c; border-color: rgba(0, 0, 0, .08); }
.dz-star.on { color: var(--fs-accent); }
.dz-chosen { position: absolute; left: 6px; top: 6px; background: var(--ok); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.dz-tile.chosen img { outline: 3px solid var(--ok); outline-offset: -3px; }
.dz-tile figcaption { gap: 4px; }
.dz-frompic { gap: 10px; }
.dz-frompic img { height: 64px; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; background: var(--panel-2); }
.dz-views { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }   /* the four elevations, then the plan and the two from above a corner */
.dz-view { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.dz-view.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.dz-view.bad { border-color: var(--bad); }
.dz-vh { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 6px; flex-wrap: wrap; }
.dz-vpic { aspect-ratio: 4 / 5; background: var(--panel-2); border-radius: 8px; display: grid; place-items: center; overflow: hidden; color: var(--faint); }
.dz-vpic img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.dz-vst { display: flex; flex-direction: column; gap: 2px; min-height: 2.8em; overflow-wrap: anywhere; }
.dz-vbt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.dz-probs { margin: 4px 0 6px; padding-left: 20px; }
.dz-sheet { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dz-sheet img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.dz-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.dz-show figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; min-width: 0; }
.dz-show figcaption { font-size: 13px; font-weight: 600; color: var(--muted); }
.dz-show img { width: 100%; max-height: 70vh; object-fit: contain; display: block; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); cursor: zoom-in; }
.dz-wait { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 10px; }
.dz-bpanel { margin: -6px 0 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-color: var(--accent); }
.dz-bbody { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.dz-bsheet { width: min(360px, 100%); border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.dz-from { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; max-width: 100%; }
.dz-from img { height: 40px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.dz-rd { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.dz-rd > * + * { margin-top: 8px; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qchips button { height: 28px; padding: 0 11px; border-radius: 99px; }
@media (max-width: 980px) { .dz-views { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .dz-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dcard .body { padding: 10px 10px 4px; }
  .dc-foot { padding: 6px 10px 10px; }
  .dz-sec.panel-pad, .dz-new.panel-pad { padding: 16px 14px; }
  .dz-sz input[type=number] { width: 62px; padding: 8px 8px; }
  .dz-views, .dz-page .imgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-show { grid-template-columns: 1fr; }
  .dz-aibox { padding: 12px; }
}
@media (max-width: 480px) { .dz-steps .sstep { min-width: 0; padding: 6px 4px; gap: 4px; font-size: 12px; justify-content: center; } }

/* ---------- plates (the print page: a card a plate, as Bambu Studio's plate list; app.js platesPanel) */
.plate-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.plate-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; height: auto; padding: 8px;
  text-align: left; white-space: normal; border-radius: 10px; font-weight: 400; }
.plate-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: var(--panel-2); display: block; }
.plate-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.plate-card .pc-head { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 14px; }
.plate-card .pc-sub, .plate-card .pc-order { font-size: 12px; color: var(--muted); }
.plate-card .pc-pieces { font-size: 12px; color: var(--faint); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plate-detail { border-top: 1px solid var(--line); padding-top: 12px; }
.plate-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.plate-viewer { height: min(52vh, 460px); }
.plate-pieces { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; font-size: 13px; }
.plate-set { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.plate-set summary { cursor: pointer; font-size: 13.5px; }
.pset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.pset-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.pset-grid input[type=number] { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .plate-body { grid-template-columns: minmax(0, 1fr); }
  .plate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* the production board (生产) */
.queue.harvest { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lane .badge { white-space: nowrap; }
.pbar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.pbar span { display: block; height: 100%; background: var(--accent-fill); }
.stat.warn .v { color: var(--warn); }
.prod .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
@media (max-width: 560px) {
  .prod .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .prod .stat { padding: 10px 12px; }
  .prod .stat .v { font-size: 18px; }
  .order-card { padding: 10px; gap: 10px; }
  .oc-thumb { width: 56px; height: 56px; }
}
.tl-wrap { overflow-x: auto; }
.timeline { width: 100%; min-width: 560px; height: auto; display: block; }
.timeline .tl-grid { stroke: var(--line); stroke-width: 1; }
.timeline .tl-night { fill: rgba(70, 90, 150, .10); }
:root[data-theme="dark"] .timeline .tl-night { fill: rgba(140, 160, 230, .10); }
.timeline .tl-tick, .timeline .tl-name { fill: var(--muted); font-size: 12px; }
.timeline .tl-bar { fill: #fff; font-size: 12px; pointer-events: none; }
.timeline .tl-now { fill: var(--accent-soft); stroke: var(--accent); stroke-dasharray: 4 3; }
.timeline .tl-nowline { stroke: var(--bad); stroke-width: 2; }
.chip-btn { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.chip-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.order-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.oc-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--panel-2); flex: none; display: block; }
.oc-title { font-weight: 600; color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.lane-pic { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); flex: none; }
.lane-pic.none { display: grid; place-items: center; font-size: 11.5px; color: var(--muted); text-align: center; }
.spool { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); display: inline-block; }
.spool.empty { background: transparent; border-style: dashed; padding: 0; color: inherit; }   /* (not the page's empty-state box) */
.spool.unknown { background: var(--panel-2); color: var(--muted); font-size: 10px; line-height: 12px; text-align: center; font-weight: 700; }
.spool-set { cursor: pointer; }
.spool.spool-set:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
/* the spool editor: the maker's colours of a line */
.swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; padding: 2px; }
.swc { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--text); text-align: left; min-width: 0; }
.swc .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swc.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.adv { border-color: var(--accent); }
.adv-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.adv-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; }

/* 营销四页（灵感、拍摄、图文、评论）：卡片、图、关键词 */
.yx-h { font-size: 16px; margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yx > .yx-h:first-child, .yx > .yx-group:first-child .yx-h { margin-top: 4px; }
.yx-gap { margin-bottom: 14px; }
.yx-gap-top { margin-top: 22px; }
.yx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.yx-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.yx-card h3, .yx-title { margin: 0; font-size: 16px; line-height: 1.45; }
.yx-card p { margin: 0; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.yx-card textarea { width: 100%; min-height: 72px; resize: vertical; }
.yx-idea-card { cursor: pointer; transition: border-color .15s, background .15s; min-height: 180px; }
.yx-idea-card:hover { border-color: var(--accent); background: var(--panel-2); }
.yx-idea-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.yx-open-hint { color: var(--accent); white-space: nowrap; }
.yx-pool-tools { display: flex; gap: 12px; margin-bottom: 18px; }
.yx-pool-tools input { flex: 1; max-width: 460px; }
.yx-detail-modal { background: rgba(0,0,0,.65); backdrop-filter: blur(5px); }
.modal .yx-detail-dialog { --dlg-h: min(740px, 88vh); width: min(1100px, 94vw); height: var(--dlg-h); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
/* a photo or video opened here shows whole, no scrolling inside the dialog (the owner 10-11: 点进去之后视频和图片预览不全): the title, the bottom bar and the margins take about 250px */
.yx-detail-main .lib-big, .yx-detail-main > .yx-pics.one img, .yx-detail-main .yx-video-wrap video { max-height: max(220px, calc(var(--dlg-h) - 250px)); }
.yx-detail-main > .yx-pics.one img { aspect-ratio: auto; object-fit: contain; }
.yx-detail-head { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; padding: 26px 30px 22px; border-bottom: 1px solid var(--line); }
.yx-detail-head h2 { margin: 12px 0 0; line-height: 1.45; font-size: 23px; overflow-wrap: anywhere; }
.yx-detail-head > div { min-width: 0; }
.yx-detail-head > button { flex-shrink: 0; }
.yx-detail-scroll { overflow-y: auto; min-height: 0; flex: 1; }
.yx-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.yx-detail-main, .yx-detail-aside { padding: 26px 30px; min-width: 0; }
.yx-detail-aside { background: var(--panel-2); border-left: 1px solid var(--line); min-height: 100%; }
.yx-detail-section + .yx-detail-section { margin-top: 26px; }
.yx-detail-section h3 { font-size: 13px; color: var(--muted); font-weight: 500; margin: 0 0 10px; }
.yx-detail-text { white-space: pre-wrap; line-height: 1.85; font-size: 15px; overflow-wrap: anywhere; }
.yx-detail-aside .yx-detail-text { font-size: 13px; }
.yx-detail-aside .yx-tags { display: grid; }
.yx-detail-aside .chip { white-space: normal; overflow-wrap: anywhere; padding: 10px; }
.yx-detail-foot { display: flex; align-items: center; gap: 10px; padding: 18px 30px; border-top: 1px solid var(--line); }
.yx-detail-main > .yx-pics { margin: 0 0 24px; border-radius: 10px; }
.yx-post-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.yx-video-wrap video { width: 100%; max-height: 470px; display: block; border-radius: 10px; background: #08090b; }
.yx-detail-main > .yx-video-wrap { margin-bottom: 24px; }
@media (max-width: 700px) {   /* on a phone: one column, the picture first */
  .modal .yx-detail-dialog { --dlg-h: 92dvh; width: 96vw; max-height: 92dvh; }
  .yx-detail-columns { grid-template-columns: minmax(0, 1fr); }
  .yx-detail-aside { border-left: 0; border-top: 1px solid var(--line); min-height: 0; }
  .yx-detail-head, .yx-detail-main, .yx-detail-aside, .yx-detail-foot { padding-left: 18px; padding-right: 18px; }
  .yx-detail-head { padding-top: 18px; padding-bottom: 14px; }
  .yx-detail-head h2 { font-size: 19px; }
  .yx-detail-main .lib-big, .yx-detail-main > .yx-pics.one img, .yx-detail-main .yx-video-wrap video { max-height: max(220px, calc(var(--dlg-h) - 220px)); }
}
.yx-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.yx-gallery figure { margin: 0; min-width: 0; }
.yx-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--thumb-bg); border-radius: 8px; cursor: zoom-in; }
.yx-gallery figcaption { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 7px; overflow-wrap: anywhere; }
.notice-list:has(.yx-grid) { margin-top: 22px; }
.yx-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.yx-done { opacity: .62; }
.yx-pics { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; margin: -16px -18px 2px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--thumb-bg); }
.yx-pics.one { grid-template-columns: 1fr; }
.yx-pics img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; cursor: zoom-in; }
.yx-pics.one img { aspect-ratio: 4 / 3; }
.yx-pics .more { display: grid; gap: 3px; }
.yx-pics .more img { aspect-ratio: auto; min-height: 0; }
.yx-post .yx-pics { margin: 0; border-radius: 10px; }
.yx-post .yx-pics.one img { aspect-ratio: 3 / 4; }
.yx-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--thumb-bg); border-radius: 10px; }
.yx-card > .yx-noimg { margin: -16px -18px 2px; border-radius: var(--radius) var(--radius) 0 0; }
.yx-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.yx-tags .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yx-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.yx-group { margin-bottom: 30px; }
.yx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.yx-layout aside { position: sticky; top: 76px; }
.yx-layout > :first-child > :first-child { margin-top: 0; }   /* the main column starts level with the side cards */
.yx-post { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px; }
.yx-body { white-space: pre-wrap; font-size: 14px; line-height: 1.7; max-height: 10.2em; overflow: hidden; }
.yx-body.open { max-height: none; }
.yx-pre { white-space: pre-wrap; line-height: 1.65; margin-top: 8px; color: var(--muted); }
.yx-side-h { margin: 0 0 6px; font-size: 15px; }
.yx-quote { font-size: 15px; line-height: 1.6; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; overflow-wrap: anywhere; }
.yx-inbox-toolbar { display: grid; gap: 12px; margin-bottom: 16px; }
.yx-inbox-toolbar p { margin: 0; }
.yx-inbox-toolbar input { max-width: 440px; }
.yx-inbox-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.yx-inbox-sources button { display: inline-flex; align-items: center; gap: 7px; }
.yx-inbox-sources span { opacity: .7; font-size: 12px; }
.yx-bulk { position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 16px; margin-bottom: 10px; max-width: 1000px; }
.yx-bulk label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.yx-rows { padding: 0; max-width: 1000px; overflow: hidden; }
.yx-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.yx-row:last-child { border-bottom: 0; }
.yx-row.on { background: var(--accent-soft); }
.yx-row-pick { padding-top: 2px; }
.yx-row-pick input { width: 16px; height: 16px; cursor: pointer; }
.yx-row-main { display: grid; gap: 5px; min-width: 0; }
.yx-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.yx-row-meta b { font-size: 13px; color: var(--text); }
.yx-row-text { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.yx-row-said { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.yx-row-said b { font-weight: 500; color: var(--faint); margin-right: 8px; }
.yx-row-reply { width: 100%; min-height: 34px; padding: 6px 9px; font-size: 13px; line-height: 1.5; resize: vertical; field-sizing: content; }
.yx-row-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 220px; }
.yx-more { display: block; margin: 12px auto 0; }
@media (max-width: 700px) { .yx-row { grid-template-columns: 24px minmax(0, 1fr); } .yx-row-act { grid-column: 2; justify-content: flex-start; max-width: none; } }
@media (max-width: 960px) { .yx-bulk { top: 72px; } }
.yx-due input { height: 30px; padding: 0 6px; }
@media (max-width: 900px) { .yx-layout, .yx-post { grid-template-columns: 1fr; } .yx-layout aside { position: static; } .yx-post .yx-pics { max-width: 320px; } }
.yx-hit { outline: 3px solid var(--accent); outline-offset: 3px; }
.yx-up.busy { pointer-events: none; opacity: .7; }
.yx-done-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.yx-done-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: zoom-in; display: block; }
.yx-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.yx-nav a { padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.yx-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.yx-dashboard { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; margin: 20px 0; align-items: stretch; }   /* cards side by side, one height */
.yx-dashboard section { min-width: 0; }
.yx-dashboard h2 { margin-bottom: 14px; }
.yx-pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.yx-pipeline a { display: flex; flex-direction: column; align-items: center; padding: 10px 2px; background: var(--panel-2); border-right: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.yx-pipeline a:last-child { border: 0; }
.yx-pipeline b { font-size: 22px; color: var(--text); }
.yx-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 6px 0; }
.yx-metrics > div { display: flex; flex-direction: column; }
.yx-metrics span { font-size: 12px; color: var(--muted); }
.yx-metrics b { font-size: 22px; font-variant-numeric: tabular-nums; }
.yx-spark { width: 100%; height: 100px; display: block; margin-top: 14px; }
.yx-chart-empty { display: flex; align-items: center; }
.yx-home-account { margin-bottom: 24px; }
.yx-home-account .yx-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yx-conversion-metrics { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.yx-account-sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 22px; }
.yx-account-sources h3 { font-size: 14px; margin: 0 0 12px; }
.yx-account-sources .yx-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yx-source-bars { display: grid; gap: 8px; }
.yx-source-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 12px; color: var(--muted); }
.yx-source-bars b { font-weight: 500; font-variant-numeric: tabular-nums; }
.yx-source-bars i { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.yx-source-bars em { display: block; height: 100%; background: var(--accent-fill); }
.yx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.yx-tools > input { width: 220px; max-width: 100%; }
.yx-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.yx-tools .yx-filters:last-child { margin-left: auto; }
.yx-schedule { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; color: var(--text); border-bottom: 1px solid var(--line); }
.yx-schedule b { font-size: 13px; overflow-wrap: anywhere; }
.yx-report { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.yx-report > div { min-width: 0; }
.yx-report > span { flex-shrink: 0; }
.yx-insight-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.yx-insight-summary > div { display: flex; flex-direction: column; gap: 4px; }
.yx-insight-summary strong { font-size: 30px; }
.yx-insight-summary > p { grid-column: 1 / -1; margin: 0; }
.yx-takeaway { padding: 12px; border-radius: 8px; background: var(--accent-soft); color: var(--text); }
.yx-takeaway p { margin-top: 6px; }
.yx-analysis { display: grid; gap: 12px; padding-top: 12px; }
@media (max-width: 760px) {
  .yx-dashboard { grid-template-columns: 1fr; gap: 14px; }
  .yx-home-account .yx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yx-tools > input { width: 100%; }
  .yx-tools .yx-filters:last-child { margin-left: 0; }
  .yx-schedule { grid-template-columns: minmax(0, 1fr) auto; }
  .yx-schedule > span:first-child { grid-column: 1 / -1; }
  .yx-insight-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}


/* Unread belongs to the signed-in account; task status remains separate. */
.notice-count { margin-left:auto; padding:1px 7px; border-radius:20px; background:var(--fs-danger); color:#fff; font-size:11px; font-weight:700; line-height:18px; }
.notice-dot { display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--fs-danger); box-shadow:0 0 0 3px var(--fs-danger-bg); }
.notice-spot { display:inline-flex; align-items:center; gap:9px; }
.notice-spot:empty { display:none; }
.notice-group { font-size:12px; color:var(--fs-danger); white-space:nowrap; }
.notice-work { margin:12px 0; }
.notice-work:has(.notice-spot:empty) { display:none; }
.notice-text { white-space:pre-line; max-height:55vh; overflow:auto; line-height:1.7; }
.notice-dialog .dialog { max-width:640px; width:94vw; }

.yx-package-list { display:grid; gap:14px; }
.yx-asset-package > summary { padding:20px 24px; cursor:pointer; list-style:none; }
.yx-asset-package > summary::-webkit-details-marker { display:none; }
.yx-asset-package > summary .row::after { content:'展开'; font-size:12px; color:var(--muted); margin-left:12px; }
.yx-asset-package[open] > summary .row::after { content:'收起'; }
.yx-package-body { padding:0 24px 24px; }
.yx-asset-steps { display:flex; gap:24px; padding:14px 0; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }
.yx-asset-items { display:grid; gap:12px; margin-top:16px; }
.yx-asset-item { display:grid; grid-template-columns:168px minmax(0,1fr); gap:18px; padding:16px; border:1px solid var(--line); border-radius:10px; }
.yx-ai-pic { display:grid; gap:6px; align-content:start; text-align:center; }
.yx-ai-pic .yx-pics, .yx-ai-pic .yx-noimg { margin:0; border-radius:8px; overflow:hidden; }
.yx-ai-pic .yx-pics img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.yx-ai-pic .yx-pics .more { display:none; }
.yx-ai-pic .yx-noimg { aspect-ratio:3/4; display:grid; place-items:center; background:var(--panel-2); }
.yx-ai-main { display:grid; gap:10px; min-width:0; align-content:start; }
.yx-ai-main > .row { gap:8px; }
.yx-ai-info { display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px 12px; margin:0; font-size:13px; line-height:1.65; }
.yx-ai-info dt { color:var(--faint); }
.yx-ai-info dd { margin:0; color:var(--muted); overflow-wrap:anywhere; }
.yx-copy { padding:0 6px; height:22px; margin-left:4px; }
.yx-ai-acts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--line); }
.yx-ai-acts select { width:auto; height:30px; padding:0 8px; font-size:13px; }
.yx-quiet { color:var(--faint); }
@media (max-width:700px) { .yx-asset-item { grid-template-columns:1fr; gap:12px; } .yx-ai-pic { width:140px; } .yx-ai-info { grid-template-columns:52px minmax(0,1fr); gap:6px 10px; } }

.yx-content-result { padding:20px 0; border-bottom:1px solid var(--line); }

.notice-list:empty { display:none; }
.notice-list { margin:12px 0 20px; padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.notice-list > details > summary { cursor:pointer; color:var(--text); }
.notice-rows { display:grid; gap:6px; }
.notice-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.notice-row > span:nth-child(2) { flex:1; }

.notice-row { width:100%; text-align:left; text-decoration:none; color:var(--text); border-radius:0; }
.notice-history { margin:12px 0 20px; }
.yx-ideas-tabs { display:flex; gap:8px; margin-bottom:6px; }
.yx-ideas-tabs button span { opacity:.7; }

/* Usage: token categories, daily values and numeric metering share the same accounting terms. */
.usage-page h2 { margin: 0 0 14px; }
.usage-page .stat .v { font-size: 32px; }
.usage-page .stat > .small:last-child { display: block; margin-top: 8px; }
.usage-tokens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.usage-tokens > div { display: flex; flex-direction: column; gap: 7px; }
.usage-tokens strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.usage-analysis { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(350px, 1fr); gap: 20px; }
.usage-legend { display: flex; gap: 18px; }
.usage-legend span { display: flex; align-items: center; gap: 6px; }
.usage-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.usage-api { background: var(--warm); }
.usage-sub { background: var(--accent-2); }
.usage-chart { display: flex; align-items: flex-end; gap: 8px; height: 185px; overflow-x: auto; margin-top: 24px; }
.usage-day { flex: 1 0 27px; max-width: 70px; height: 100%; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.usage-day-plot { width: 85%; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: hidden; }
.usage-day-plot i { display: block; flex-shrink: 0; }
.usage-day span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.usage-components { display: grid; gap: 13px; }
.usage-component { display: grid; grid-template-columns: 68px minmax(40px, 1fr) 70px; gap: 10px; align-items: center; font-size: 13px; }
.usage-component b { text-align: right; font-variant-numeric: tabular-nums; }
.usage-track { height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.usage-track i { display: block; height: 100%; border-radius: 4px; min-width: 0; }
.usage-color-0 { background: var(--accent-fill); }
.usage-color-1 { background: var(--fs-data-3); }
.usage-color-2 { background: var(--fs-data-2); }
.usage-color-3 { background: var(--warm); }
.usage-color-4 { background: var(--fs-data-4); }
.usage-color-5 { background: var(--fs-data-5); }
.usage-quality summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.usage-quality .stack { margin-top: 14px; gap: 6px; }
.usage-quality p { margin: 0; }
.usage-call summary { cursor: pointer; white-space: nowrap; }
.usage-call-detail { min-width: 270px; padding: 16px 0 6px; }
.usage-call-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 440px; }
.usage-page td > .small.faint { display: block; margin-top: 4px; }
.usage-pricing > p { max-width: 1000px; line-height: 1.7; }

.usage-gemini-tokens { grid-template-columns: repeat(4, 1fr); padding: 14px 0 6px; }

/* Work conversation controls and purpose accounting. */
.chat-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chat-mode { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chat-mode button[aria-pressed="true"] { background:var(--sel-bg); border-color:var(--sel-bg); color:var(--on-sel); }
.chat-mode #c-mode-hint { margin-left:8px; }
.chat-piece-picker summary { cursor:pointer; font-size:13px; color:var(--muted); }
.chat-pieces { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px; max-height:240px; overflow:auto; padding-top:8px; }
.chat-piece { display:flex; align-items:center; gap:8px; text-align:left; padding:7px 9px; min-width:0; }
.chat-piece img { width:40px; height:40px; object-fit:contain; border-radius:4px; }
.chat-piece span { overflow-wrap:anywhere; font-size:12px; }
.chat-options { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.chat-options .ai-picker { width:auto; max-width:380px; min-width:190px; }
.ai-effort-picker { width:auto; min-width:160px; max-width:230px; }
.chat-controls #c-send { flex:0 0 auto; }
.reserve-summary { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

.revision-comparison { margin-top:16px; background:var(--bg); }
.revision-comparison h3 { margin:0 0 8px; }
.revision-variants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0; }
.revision-variant { padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:0; }
.revision-variant h4 { margin:0 0 10px; }
.revision-hero { width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:8px; cursor:zoom-in; }
.revision-model { display:block; width:100%; height:280px; border-radius:8px; background:linear-gradient(135deg,#27313e,#14191f); }
.revision-thumbs { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.revision-thumbs img { width:calc(33.333% - 4px); aspect-ratio:4/3; object-fit:contain; cursor:zoom-in; }
.revision-reply { white-space:pre-wrap; line-height:1.6; }

.usage-purpose-blocks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.usage-purpose-block { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg); min-width:0; }
.usage-purpose-block h3 { margin:0 0 10px; }
.usage-purpose-amount { display:block; font-size:26px; margin-bottom:6px; }
.usage-purpose-block .usage-track { margin:14px 0; }
.usage-purpose-block .usage-track i { background:var(--accent-fill); }
.usage-purpose-block details { margin-top:16px; }
.system-machine-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 16px; }
.system-machine-head h2 { margin:0; font-size:21px; }
.system-machine-head p { margin:6px 0 0; }
.system-ranges { display:flex; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.system-ranges button { white-space:nowrap; }
.system-metrics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.system-metric,.system-disk { padding:20px 22px 16px; min-width:0; }
.system-metric-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:18px; }
.system-metric-head h2 { margin:0 0 4px; font-size:16px; }
.system-metric-head strong { font-size:27px; letter-spacing:-.5px; line-height:1.25; }
.system-metric-head strong small { font-size:13px; font-weight:400; letter-spacing:0; }
.system-metric svg { width:100%; display:block; overflow:visible; cursor:crosshair; }
.system-metric svg text { fill:var(--muted); font:10px system-ui,sans-serif; }
.system-grid-line { stroke:var(--line); stroke-dasharray:3 4; stroke-width:.7; }
.system-chart-area { opacity:.08; }
.system-chart-area.series-0,.system-chart-dot.series-0 { fill:var(--fs-data-1); }
.system-chart-area.series-1,.system-chart-dot.series-1 { fill:var(--fs-data-3); }
.system-chart-line { fill:none; stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.system-chart-line.series-0 { stroke:var(--fs-data-1); }
.system-chart-line.series-1 { stroke:var(--fs-data-3); }
.system-chart-foot { display:flex; justify-content:space-between; gap:10px; min-height:20px; margin-top:9px; flex-wrap:wrap; }
.system-network-value { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:19px; }
.series-key { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }
.series-key.blue { background:var(--fs-data-1); }.series-key.teal { background:var(--fs-data-3); }
.system-disk { grid-column:1/-1; }
.system-disk-bar { height:12px; background:var(--bg); border-radius:7px; overflow:hidden; margin:12px 0; }
.system-disk-bar i { display:block; height:100%; background:var(--fs-data-1); border-radius:7px; }
.system-monitor-note { margin:12px 0 0; text-align:right; }
.system-management { margin-top:8px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.system-management > summary { padding:18px 22px; cursor:pointer; }
.system-management > summary span { margin-left:12px; }
.system-management-body { padding:0 16px 16px; }
.settings-nav { display:flex; gap:8px; margin:0 0 18px; }
.ai-account-section { margin:0; }
.ai-account-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ai-account-slot { padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; min-width:0; min-height:286px; }
.ai-account-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ai-account-heading b { font-size:14px; line-height:1.5; }
.ai-account-heading .badge { font-size:11px; white-space:nowrap; }
.ai-account-meta > p { margin:8px 0 0; font-size:12px; overflow-wrap:anywhere; }
.ai-account-body { flex:1; padding:18px 0; }
.ai-account-body p { margin:0; line-height:1.6; }
.ai-account-actions { gap:7px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.ai-account-actions button { white-space:nowrap; }
.ai-account-quotas { display:grid; gap:14px; }
.ai-account-quota .row { justify-content:space-between; gap:8px; }
.ai-account-quota strong { font-size:19px; font-variant-numeric:tabular-nums; }
.ai-quota-track { position:relative; height:5px; background:var(--bg); border-radius:3px; margin:7px 0; }
.ai-quota-track i { display:block; height:100%; background:var(--fs-data-1); border-radius:3px; }
.ai-quota-track i.limited { background:var(--fs-orange-600); }
.ai-quota-track em { position:absolute; left:10%; top:-2px; height:9px; border-left:1px dashed var(--muted); }
.ai-quota-reset,.ai-quota-policy { font-size:12px; }
.ai-account-timezone { margin:12px 0 0; font-size:12px; }
.ai-account-api { grid-column:span 2; flex-direction:row; align-items:center; gap:18px; min-height:0; }
.ai-account-api .ai-account-meta { flex:1; min-width:0; }
.ai-account-api .ai-account-actions { flex:none; margin:0; border:0; padding:0; }
@media (max-width:1150px) { .ai-account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ai-account-api { grid-column:span 1; } }

/* Settings: account categories, compact subscriptions and separate API connections. */
.settings-navigation { margin-bottom:24px; }
.settings-navigation > .sub-tabs:first-child { margin:0; gap:28px; width:auto; padding:0; border-radius:0; background:none; border-bottom:1px solid var(--line); }
.settings-navigation > .sub-tabs:first-child > .btn { border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 2px; background:transparent; color:var(--muted); font-size:14px; box-shadow:none; }
.settings-navigation > .sub-tabs:first-child > .btn.primary { color:var(--accent); border-bottom-color:var(--accent); font-weight:650; }
.settings-navigation > .sub-tabs:first-child > .btn:hover { color:var(--text); }
.settings-navigation > .sub-tabs + .sub-tabs { margin:16px 0 0; gap:8px; }
.settings-page .ai-accounts-panel { padding:0; border:0; background:transparent; box-shadow:none; }
.settings-page .ai-accounts-panel > h2 { font-size:16px; margin:0 0 6px; }
.ai-subscription-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ai-subscription-grid > .ai-account-slot { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(175px,.88fr); grid-template-areas:"meta quota" "actions quota"; gap:18px 20px; min-height:196px; padding:22px; }
.ai-subscription-grid .ai-account-meta { grid-area:meta; }
.ai-subscription-grid .ai-account-heading { align-items:flex-start; flex-wrap:wrap; }
.ai-subscription-grid .ai-account-body { grid-area:quota; padding:0 0 0 20px; border-left:1px solid var(--line); }
.ai-subscription-grid .ai-account-actions { grid-area:actions; align-self:end; margin:0; padding:0; border:0; }
.ai-subscription-grid .ai-account-quota strong { font-size:22px; }
.ai-subscription-grid .ai-account-quotas { gap:12px; }
.ai-api-section { margin-top:24px; }
.settings-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.settings-section-head h2,.settings-section-head h3 { margin:0; font-size:16px; }
.ai-api-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ai-api-grid > .ai-account-api { grid-column:auto; padding:18px 22px; }
.settings-platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.settings-platform-grid .plat-card { min-height:228px; }
.settings-planned-section { margin-top:26px; }
.settings-planned-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.settings-planned-grid > .plat-planned { min-height:0; padding:16px 20px; }
.settings-planned-grid .ai-account-meta > p { margin-top:8px; }
/* Task settings keep the grouped desktop tables used for comparing routes. */
@media (min-width:851px) {
  .settings-task-page .ai-task-group .ai-settings-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .settings-task-page .ai-settings-table .tbl { display:table; width:100%; table-layout:fixed; border-collapse:collapse; }
  .settings-task-page .ai-settings-table thead { display:table-header-group; }
  .settings-task-page .ai-settings-table tbody { display:table-row-group; }
  .settings-task-page .ai-settings-table tr,.settings-task-page .ai-settings-table tr:has(th) { display:table-row; padding:0; background:transparent; border:0; border-radius:0; }
  .settings-task-page .ai-settings-table th,.settings-task-page .ai-settings-table td { display:table-cell; vertical-align:top; border-bottom:1px solid var(--line); }
  .settings-task-page .ai-settings-table td { padding:16px 10px; }
  .settings-task-page .ai-settings-table td[data-label]::before { display:none; content:none; }
}
@media (max-width:1000px) {
  .ai-subscription-grid,.ai-api-grid,.settings-platform-grid { grid-template-columns:minmax(0,1fr); }
  .settings-navigation > .sub-tabs:first-child { gap:18px; }
}
@media (max-width:600px) {
  .ai-subscription-grid > .ai-account-slot { grid-template-columns:minmax(0,1fr); grid-template-areas:"meta" "quota" "actions"; }
  .ai-subscription-grid .ai-account-body { padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }
  .settings-planned-grid { grid-template-columns:minmax(0,1fr); }
}

/* 方寸界 (the owner 10-08): one entry holds several pages (作品 · 任务, 排产 · 打印机, 设置's six tabs) - tabs under the title */
.sub-tabs { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 3px; margin: 4px 0 18px; border-radius: var(--fs-radius-md); background: var(--panel-2); }
.sub-tabs > .btn { height: 32px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 500; box-shadow: none; }
.sub-tabs > .btn:hover { color: var(--text); background: transparent; }
.sub-tabs > .btn.primary { background: var(--seg-on); color: var(--text); font-weight: 600; box-shadow: var(--fs-shadow-sm); }
.prod > .sub-tabs { margin: 0; }
@media (max-width: 960px) { .sub-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .sub-tabs::-webkit-scrollbar { display: none; } .sub-tabs > .btn { flex: none; } }
/* platform accounts and website accounts: cards like the AI accounts */
.plat-card { min-height: 250px; }
.plat-card.plat-planned { border-style: dashed; background: transparent; min-height: 0; }
.plat-login .plat-qr { display: grid; place-items: center; min-height: 120px; }
.plat-login .plat-qr img { width: 240px; max-width: 100%; border-radius: 10px; background: #fff; padding: 8px; }
.plat-ok { font-size: 18px; font-weight: 650; color: var(--ok); margin: 20px 0; }
.people-grid .ai-account-slot { min-height: 0; }
.person-card .ai-account-body { padding: 14px 0; }
.person-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person-name > span:last-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.person-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.person-note { font-weight: 400; }
.person-add { border-style: dashed; background: transparent; }
.person-add input, .person-add select { font-size: 13px; padding: 7px 9px; }
/* 任务设置: each task a card (the owner 10-08: 别给我搞那种表格啥的) */
.ai-task-group .ai-settings-table { border: 0; border-radius: 0; overflow: visible; }
.ai-settings-table .tbl { display: block; }
.ai-settings-table thead { display: none; }
.ai-settings-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ai-settings-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.ai-settings-table tr:has(th) { display: none; }
.ai-settings-table td { display: block; padding: 0; border: 0; min-width: 0; }
.ai-settings-table td:first-child, .ai-settings-table td:nth-child(3) { grid-column: 1 / -1; }
.ai-settings-table td:nth-child(2), .ai-settings-table td:last-child { grid-row: 2; }
.ai-settings-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.ai-task-group .tbl tr:last-child td { border-bottom: 0; }

/* 农场管家 全屏看板 */
#app:fullscreen { background: var(--bg); overflow: auto; padding: 16px; }

kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--panel); display: inline-block; min-width: 18px; text-align: center; }
/* 运营台: one inbox grouped by post (the owner 10-09) */
.ops-head { display: grid; gap: 12px; margin-bottom: 16px; }
.ops-total { font-size: 17px; }
.ops-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.ops-bar b { display: block; }
.ops-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-filters i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ops-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.ops-side { position: sticky; top: 12px; display: grid; gap: 12px; }
.ops-side .panel { display: grid; gap: 8px; align-content: start; }
.ops-side .ops-bars > div { grid-template-columns: 104px minmax(0, 1fr) 28px; }
.ops-quick-sel { display: none; width: auto; max-width: 200px; }
@media (max-width: 960px) { .ops-layout { grid-template-columns: minmax(0, 1fr); } .ops-side { position: static; } .ops-quick-sel { display: inline-block; } .ops-side .ops-quick-box { display: none; } }
.ops-post { overflow: hidden; }
.ops-post-head { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ops-post-img { width: 48px; height: 64px; border-radius: 6px; object-fit: cover; flex: none; cursor: zoom-in; background: var(--panel-2); }
.ops-post-img.ph { display: grid; place-items: center; font-size: 11px; color: #fff; cursor: default; }
.ops-post-title { display: grid; gap: 3px; min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.ops-rows { display: grid; }
.ops-row { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.ops-rows > .ops-row:first-child { border-top: 0; }
.ops-row.need-look { box-shadow: inset 3px 0 0 var(--warn); }
.ops-row.need-ready { box-shadow: inset 3px 0 0 var(--accent); }
.ops-row.need-app { box-shadow: inset 3px 0 0 var(--ok); }
.ops-row.off .ops-input, .ops-row.off .ops-text { opacity: .45; }
.ops-row-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ops-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; flex: none; }
.ops-text { margin: 0; font-size: 14px; line-height: 1.55; }
.ops-text.long { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ops-text.long.open { display: block; }
.ops-why { font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 7px 10px; }
.ops-suggest { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.ops-input { width: 100%; font-size: 13.5px; resize: vertical; min-height: 54px; }
.ops-acts, .ops-fills { gap: 8px; flex-wrap: wrap; }
.ops-check { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.ops-check input { width: auto; }
.ops-more { justify-self: start; margin: 0 14px 12px; }
.ops-fold > summary { display: flex; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.ops-fold[open] > summary { border-bottom: 1px solid var(--line); }
.ops-quick-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; justify-content: flex-start; }
.warn-t { color: var(--warn); }
.ch-xhs { background: #ff2442; } .ch-dm { background: var(--fs-data-4); } .ch-dy { background: #1f1f1f; } .ch-sph { background: #f08a24; } .ch-mention { background: var(--muted); }
.badge.ops-ch { color: #fff; }
.ops-bars { display: grid; gap: 7px; }
.ops-bars > div { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-size: 12.5px; }
.ops-bars b { height: 8px; border-radius: 4px; background: var(--accent-fill); display: block; }
.ops-done { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.ops-done-card { padding: 12px 14px; display: grid; gap: 6px; }

/* 灵感池: product ideas by stage (the owner 10-08) */
.idea-feed h3, .idea-saved h3 { font-size: 15px; margin: 0; }
.idea-feed p, .idea-saved p { margin: 0; overflow-wrap: anywhere; }
.idea-feed, .idea-saved { cursor: pointer; gap: 8px; align-content: start; }
.idea-feed:hover, .idea-saved:hover { border-color: var(--accent); }
/* 内容: today's picks on top, inline editing, the AI review in view */
.post-picks .yx-card h3 { margin: 0; }
.post-picks .yx-card p { margin: 0; }
.post-edit input, .post-edit textarea { font-size: 14px; }
.post-ai { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--panel-2); }
.post-score { font-size: 20px; font-weight: 650; line-height: 1; }
.post-ai-text { margin: 0; max-height: 12em; overflow: auto; }
.mini-table { border-collapse: collapse; }
.mini-table th, .mini-table td { padding: 3px 6px; border-bottom: 1px solid var(--line); font-weight: normal; }
.mini-table th { color: var(--muted); }


/* 营销总览 board (the owner 10-08) */
.board-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.board-acct { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: grid; gap: 3px; min-width: 0; }
.board-acct .row { gap: 6px; flex-wrap: nowrap; }
.board-acct b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-2); }
.board-dot.ok { background: var(--ok); } .board-dot.warn { background: var(--warn); }
.board-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 16px 0; }
.board-heat { display: grid; grid-template-columns: 22px repeat(16, minmax(0, 1fr)); gap: 3px; font-size: 10.5px; color: var(--faint); }
.board-heat b { aspect-ratio: 1.4; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); display: block; }
.board-heat b.lv1, .board-legend b.lv1 { background: color-mix(in srgb, var(--accent-fill) 22%, var(--panel)); border-color: transparent; }
.board-heat b.lv2, .board-legend b.lv2 { background: color-mix(in srgb, var(--accent-fill) 45%, var(--panel)); border-color: transparent; }
.board-heat b.lv3, .board-legend b.lv3 { background: color-mix(in srgb, var(--accent-fill) 70%, var(--panel)); border-color: transparent; }
.board-heat b.lv4, .board-legend b.lv4 { background: var(--accent-fill); border-color: transparent; }
.board-heat b.best { outline: 2px solid var(--warn); outline-offset: -1px; }
.board-hh { text-align: center; }
.board-legend { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); }
.board-legend b { width: 14px; height: 9px; border-radius: 2px; display: inline-block; }
.board-boost { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.board-launched { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.board-perf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.board-product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; align-items: start; }
.board-product img, .board-product .yx-noimg { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: grid; place-items: center; margin: 0; }
.board-post { display: grid; gap: 6px; padding: 12px 14px; align-content: start; }
.board-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.board-tiles > div { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.board-tiles span { font-size: 12px; color: var(--muted); }
.board-tiles b { font-size: 14px; font-variant-numeric: tabular-nums; }
.intel-card h3 { margin: 0; font-size: 15px; }
.intel-card p { margin: 0; }
@media (max-width: 1000px) { .board-row { grid-template-columns: minmax(0, 1fr); } }

/* 素材库: the photo wall (the owner 10-08) */
.lib-up { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.lib-just { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; border-color: var(--accent); background: var(--accent-soft); }
.lib-just select { width: auto; max-width: 220px; }
.lib-tray { position: sticky; top: 12px; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-color: var(--accent); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lib-tile { position: relative; border-radius: 10px; overflow: hidden; background: var(--panel-2); border: 2px solid transparent; cursor: pointer; aspect-ratio: 3 / 4; }
.lib-tile.on { border-color: var(--accent); }
.lib-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; padding-left: 3px; pointer-events: none; }
video.lib-big { width: 100%; max-height: 70vh; background: #000; border-radius: var(--fs-radius-md); }
.lib-video { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; font-size: 26px; color: var(--muted); padding: 8px; text-align: center; overflow-wrap: anywhere; }
.lib-check { position: absolute; top: 6px; left: 6px; background: rgba(255, 255, 255, .85); border-radius: 6px; padding: 2px 4px; display: flex; }
.lib-check input { width: 16px; height: 16px; margin: 0; }
.lib-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; align-items: center; padding: 18px 8px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.lib-meta b { background: rgba(0, 0, 0, .45); border-radius: 4px; padding: 0 5px; }
.lib-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-more { display: block; margin: 10px auto 0; }
.lib-big { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: var(--panel-2); }
.lib-edit-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
.lib-canvas { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: var(--panel-2); }
@media (max-width: 700px) { .lib-edit-body { grid-template-columns: minmax(0, 1fr); } .lib-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
/* 营销各页的二级入口：页面标题下面一排（the owner 10-09） */
.yx-subbar .btn { display: inline-flex; align-items: center; gap: 6px; }
.yx-subbar:empty { display: none; }
.nav-sub-n { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.nav-sub-n.todo { padding: 0 6px; border-radius: 20px; background: var(--fs-danger); color: #fff; opacity: 1; font-weight: 700; line-height: 17px; }
.yx-sub > .yx-h:first-child, .yx-sub > section:first-child > .yx-h:first-child { margin-top: 4px; }
@media (max-width: 960px) { .yx-subbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .yx-subbar .btn { flex: none; } }
/* 农场管家: a card per printer, what it needs first (the owner 10-08: 重新搞一版舒服的) */
.farm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.farm-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.farm-stat .v { font-size: 28px; font-weight: 650; line-height: 1.3; }
.farm-stat .muted { font-size: 13px; } .farm-stat .faint { font-size: 12px; }
.farm-grid > .empty { grid-column: 1 / -1; text-align: left; padding: 14px 2px; }
.farm-stat.warn .v { color: var(--warn); }
.farm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: stretch; }
.farm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.farm-card.tone-bad { border-color: var(--bad); }
.farm-card.tone-warn { border-color: var(--warn); }
.farm-card.tone-ok { border-color: var(--ok); }
.fc-head { display: flex; align-items: center; gap: 8px; }
.fc-name { font-size: 16px; }
.fc-act { border-radius: 10px; padding: 10px 12px; background: var(--panel-2); display: grid; gap: 8px; }
.fc-act.warn { background: var(--warn-soft); }
.fc-act.bad { background: var(--bad-soft); }
.fc-act.ok { background: var(--ok-soft); }
.fc-act-title { font-weight: 650; }
.fc-now { display: grid; gap: 6px; }
.fc-next { display: grid; gap: 6px; }
.fc-label { font-size: 12px; color: var(--muted); }
.fc-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.fc-foot .link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; }
@media (max-width: 700px) { .farm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .farm-stat { padding: 10px 12px; border-radius: 10px; }
  .farm-stat .v { font-size: 24px; } .farm-grid { grid-template-columns: minmax(0, 1fr); } }
.farm-card .fc-act .spool, .farm-card .fc-next .spool { margin: 0 3px; vertical-align: -2px; }
/* 素材库：一个产品一张卡片，点开铺照片；选好的先预览再写（the owner 10-09） */
.lib-prods { display: grid; gap: 12px; }
.lib-prod { padding: 0; overflow: hidden; }
.lib-prod > summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; list-style: none; }
.lib-prod > summary::-webkit-details-marker { display: none; }
.lib-prod[open] > summary { border-bottom: 1px solid var(--line); }
.lib-prod > .lib-grid, .lib-prod > .lib-more { margin: 14px 16px; }
.lib-covers { display: flex; gap: 4px; flex: none; }
.lib-covers img, .lib-covers .lib-video { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--panel-2); font-size: 16px; }
.lib-prod-name { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lib-chev { font-size: 22px; color: var(--muted); transition: transform .15s; }
.lib-prod[open] .lib-chev { transform: rotate(90deg); }
.lib-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lib-pick-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.lib-pick-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-pick-tile button { position: absolute; top: 4px; right: 4px; min-height: 0; padding: 2px 7px; }
@media (max-width: 640px) { .lib-covers img:nth-child(n+3) { display: none; } }
.post-writing { border-style: dashed; margin-bottom: 12px; }
/* 营销总览改版（the owner 10-09，照抖音电商罗盘首页）：要处理、指标卡、漏斗、项目卡、竞对墙 */
.yx-alerts { display: grid; gap: 12px; margin-bottom: 18px; }
.yx-alert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.yx-alert { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.yx-alert:hover { text-decoration: none; border-color: var(--accent); }
.yx-alert i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.yx-alert.warn i { background: var(--warn); }
.yx-alert.bad i { background: var(--fs-danger); }
.yx-alert.bad { border-color: rgba(220, 64, 74, .45); }
.yx-alert b { font-size: 13px; color: var(--accent); white-space: nowrap; }
.yx-kpi-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin: 6px 0 10px; }
.yx-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.yx-kpi-card { display: grid; gap: 4px; padding: 14px 16px; min-width: 0; }
.yx-kpi-card strong { font-size: 28px; font-weight: 650; line-height: 1.3; }
.yx-mini { width: 100%; height: 28px; display: block; margin-top: 4px; }
.funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.funnel > i { display: none; }
.funnel-step { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: var(--panel-2); min-width: 0; }
.funnel-step b { font-size: 18px; }
.funnel-step.weak { background: rgba(220, 64, 74, .12); box-shadow: inset 0 0 0 1px rgba(220, 64, 74, .5); }
.rival-card { gap: 10px; }
@media (max-width: 760px) {
  .yx-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .yx-kpi-card strong { font-size: 24px; }
  .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 卡片顶上的图（the owner 10-09：情报库里都要有图片；内容里能有图的都上图） */
.yx-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--panel-2); cursor: zoom-in; }
.yx-cover.ph { display: grid; place-items: center; cursor: default; background: linear-gradient(135deg, hsl(var(--h) 42% 34%), hsl(calc(var(--h) + 35) 40% 20%)); }
.yx-cover.ph span { color: rgba(255, 255, 255, .88); font-size: 18px; font-weight: 650; letter-spacing: 2px; padding: 0 12px; text-align: center; }
.yx-angle-bar { margin: 4px 0 12px; }
.pick-rows { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); }
.pick-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.pick-row .small:last-child { overflow-wrap: anywhere; }
/* 灵感池（the owner 10-09：只要看灵感和记灵感）：记灵感的框能粘贴、拖图，缩略图先看到 */
.idea-add { display: grid; gap: 10px; margin-bottom: 16px; }
.idea-add textarea { font-size: 13.5px; }
.idea-add.drag { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft); }
.idea-drop { border: 1px dashed var(--line-2); border-radius: 8px; padding: 10px; text-align: center; }
.idea-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.idea-thumbs:empty { display: none; }
.idea-thumb { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.idea-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea-thumb button { position: absolute; top: 3px; right: 3px; min-height: 0; padding: 1px 6px; }
.idea-pics { position: relative; }
.idea-pics .chip { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .55); color: #fff; border: 0; }
.fc-alert { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--warn-soft); }
.fc-alert.lv1, .fc-alert.lv2 { background: var(--bad-soft); }
.fc-alert.lv4 { background: var(--panel-2); color: var(--muted); }
.fc-alert a { white-space: nowrap; font-size: 12px; }
.idea-detail-pics .idea-thumb { width: 120px; height: 120px; }
.idea-detail-pics img { cursor: zoom-in; }

/* Optional references on the assembly view. */
.piece-hotspot { --min-hotspot-opacity:1; --max-hotspot-opacity:1; border:1px solid rgba(255,255,255,.8); background:rgba(22,29,42,.82); color:#fff; border-radius:4px; padding:2px 5px; min-width:0; min-height:0; height:22px; font-size:10px; line-height:1.2; box-shadow:0 1px 5px #0004; }
.piece-hotspot:hover, .piece-hotspot:focus-visible, .piece-hotspot.selected { background:#284eaa; border-color:#fff; outline:2px solid #93b6ff; z-index:2; }
.mv-piece-info { position:absolute; left:14px; bottom:58px; display:flex; align-items:center; gap:10px; padding:8px 11px; max-width:65%; border:1px solid #ffffff35; border-radius:9px; background:#192335eb; color:#fff; font-size:12px; z-index:5; }
.mv-piece-info[hidden], .mv-label-count[hidden], #mv-piece-pick[hidden] { display:none; }
.mv-label-count { position:absolute; left:15px; top:15px; border-radius:6px; padding:5px 8px; background:#0009; color:#ddd; font-size:11px; pointer-events:none; }
#mv-piece-pick { width:auto; max-width:220px; }

/* Account-scoped introduction to the workbench release. */
.feature-guide-dialog { width:min(820px,calc(100vw - 32px)); max-height:90vh; overflow:auto; padding:24px; }
.feature-guide-dialog header, .feature-guide-dialog footer { display:flex; align-items:center; gap:10px; }
.feature-guide-dialog header { justify-content:space-between; }
.feature-guide-dialog h2 { margin:10px 0 16px; font-size:23px; }
.feature-guide-picture { border-radius:14px; background:var(--fs-surface-2); overflow:hidden; }
.feature-guide-picture svg { display:block; width:100%; max-height:310px; }
.feature-guide-picture text { font-family:inherit; font-size:15px; }
.feature-guide-dialog p { color:var(--muted); font-size:14px; line-height:1.8; margin:18px 0 22px; }
.feature-guide-dialog footer [data-guide-skip] { margin-right:auto; }
.guide-counter { font-size:12px; color:var(--muted); margin-right:12px; font-variant-numeric:tabular-nums; }
/* a design's own models, and how to go on (straight to a Demo or the print files) */
.dz-models { display: grid; gap: 4px; margin-top: 10px; }
.dz-path { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dz-path h3 { margin: 0; }

/* 营销板块全面开建（the owner 10-10）：内容按号合成一张、发布包、每个号的卡片、我们的观众、拖整个文件夹上传 */
.badge.acct { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.post-group { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 14px; }
.post-group-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.post-fork { width: auto; max-width: 160px; }
.post-pack summary { cursor: pointer; }
.pick-use { padding: 10px; border-radius: 10px; background: var(--panel-2); gap: 8px; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.acct-card { display: grid; gap: 8px; padding: 12px 14px; cursor: pointer; min-width: 0; }
.acct-card:hover { border-color: var(--line-2); }
.acct-card.off { opacity: .7; }
.acct-card .board-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acct-style { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-portrait { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.aud-person { gap: 6px; }
.lib-up.drag { box-shadow: inset 0 0 0 2px var(--accent); }
.lib-up { flex-wrap: wrap; }

/* 写稿页（the owner 10-10）：左边人写，右边 AI 写的一版，手机上上下排 */
.yx-write { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.yx-write textarea { min-height: 300px; }
.yx-write-pics { display: flex; gap: 8px; overflow-x: auto; }
.yx-write-pics img { width: 96px; height: 96px; flex: none; object-fit: cover; border-radius: var(--fs-radius-sm); cursor: zoom-in; }
.yx-write-ai { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.yx-ai-para { display: flex; gap: 8px; align-items: flex-start; }
.yx-ai-para > p, .yx-ai-para > span, .yx-ai-para > b, .yx-ai-para > .yx-tags { flex: 1; margin: 0; min-width: 0; }
.yx-ai-para > button { flex: none; }
@media (max-width: 900px) { .yx-write { grid-template-columns: minmax(0, 1fr); } .yx-write-ai { position: static; max-height: none; } }
/* 灵感池's 近期由头: room before the box under it (the owner, 10-10: 这个由头的前端也贴着下面太近了) */
.idea-occ { margin: 4px 0 16px; align-items: center; }

/* 素材库生图（the owner 10-10）：左边对话列表，右边一轮轮的对话，底下输入框；手机上上下排 */
.gen { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.gen-threads { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.gen-thread { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding: 8px 10px; text-align: left; white-space: normal; }
.gen-thread b { font-size: 13px; font-weight: 600; }
.gen-thread.on { border-color: var(--accent); background: var(--accent-soft); }
.gen-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gen-talk { display: flex; flex-direction: column; gap: 18px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.gen-empty { padding: 32px 8px; text-align: center; }
.gen-turn { display: flex; flex-direction: column; gap: 8px; }
.gen-me { align-self: flex-end; max-width: 80%; background: var(--accent-soft); border-radius: var(--fs-radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gen-me p { margin: 0; white-space: pre-wrap; }
.gen-at { color: var(--accent); }
.gen-refs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gen-ref { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; border: 1px solid var(--line); border-radius: var(--fs-radius-sm); background: var(--panel); font-size: 12px; }
.gen-ref img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; }
.gen-ref select { width: auto; padding: 2px 6px; font-size: 12px; height: 26px; }
.gen-ref-edit button { height: 24px; width: 24px; padding: 0; }
.gen-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gen-pic { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gen-pic img { width: 100%; aspect-ratio: var(--gen-ar, 3 / 4); object-fit: cover; border-radius: var(--fs-radius-md); cursor: zoom-in; background: var(--panel-2); }
.gen-pic figcaption { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gen-pic figcaption select { width: auto; max-width: 150px; height: 30px; padding: 2px 8px; font-size: 13px; }
.gen-wait { aspect-ratio: var(--gen-ar, 3 / 4); border: 1px dashed var(--line-2); border-radius: var(--fs-radius-md); display: grid; place-items: center; align-content: center; gap: 6px; }
.gen-composer { padding: 12px; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 12px; box-shadow: var(--shadow-up); }
.gen-input { position: relative; }
.gen-input textarea { min-height: 76px; }
.gen-at-menu { position: absolute; left: 8px; bottom: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; gap: 2px; min-width: 180px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--fs-radius-md); box-shadow: var(--shadow-up); }
.gen-at-menu button { justify-content: flex-start; height: auto; padding: 4px 6px; border: 0; gap: 8px; }
.gen-at-menu img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.gen-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.gen-presets .chip { cursor: pointer; }
.gen-controls { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.gen-ctl { display: inline-flex; align-items: center; gap: 6px; }
.gen-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--fs-radius-sm); background: var(--panel-2); }
.gen-seg button { border: 0; border-radius: 5px; height: 28px; padding: 0 10px; background: transparent; color: var(--muted); }
.gen-seg button:hover { color: var(--text); }
.gen-seg button.on { background: var(--seg-on); color: var(--text); font-weight: 600; box-shadow: var(--fs-shadow-sm); }
.gen-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gen-pick { padding: 0; height: auto; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; }
.gen-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-pick.on { border-color: var(--fs-accent); }
@media (max-width: 900px) {
  .gen { grid-template-columns: minmax(0, 1fr); }
  .gen-threads { position: static; flex-direction: row; overflow-x: auto; max-height: none; }
  .gen-thread { flex: none; max-width: 160px; }
  .gen-talk { max-height: none; }
  .gen-me { max-width: 100%; }
  .gen-composer { position: static; }
}
.lib-ai { position: absolute; right: 6px; top: 6px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--accent-fill); color: var(--on-accent); }

/* Usage receipts, part selection and platform account matrix. */
.usage-purpose-block .row h3 { margin:0; }
.usage-purpose-link { padding:0; border:0; background:none; color:var(--accent); font-size:12px; text-align:left; box-shadow:none; }
.usage-purpose-amount { margin:14px 0 4px; }
.usage-purpose-meters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.usage-purpose-meters div { display:flex; flex-direction:column; gap:4px; }
.usage-purpose-meters span,.usage-purpose-meters small { font-size:12px; color:var(--muted); }
.usage-purpose-meters b { font-size:15px; }
.usage-purpose-table { margin-top:12px; }
.usage-purpose-table .usage-purpose-link { font-size:13px; }
.usage-purpose-dialog { width:min(1080px,94vw); max-width:1080px; max-height:88vh; overflow:auto; }
.usage-purpose-dialog > [data-close] { float:right; }
.usage-purpose-dialog h3 { margin:24px 0 12px; }
.chat-piece-tools { display:flex; align-items:center; gap:12px; margin:12px 0; }
.chat-piece-tools input { flex:1; min-width:0; }
.chat-piece-browser { display:grid; grid-template-columns:minmax(190px,.7fr) minmax(0,1.5fr); gap:14px; }
.chat-pieces { display:flex; flex-direction:column; gap:4px; max-height:350px; padding:0; }
.chat-piece { width:100%; flex-shrink:0; border:1px solid transparent; border-radius:6px; background:var(--bg); padding:10px; gap:10px; }
.chat-piece b { font-size:12px; color:var(--muted); min-width:32px; }
.chat-piece span { font-size:13px; }
.chat-piece[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-bg,var(--bg)); }
.chat-piece[aria-pressed="true"] b { color:var(--accent); }
.chat-piece-detail { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.chat-piece-detail [data-piece-preview] { height:260px; display:grid; place-items:center; background:var(--bg); }
.chat-piece-detail model-viewer { width:100%; height:260px; }
.chat-piece-detail [data-piece-preview] img { width:100%; height:260px; object-fit:contain; }
.chat-piece-selected { padding:12px; display:grid; gap:10px; }
.chat-piece-selected p { margin:0; }
.chat-piece-selected [data-piece-quote] { margin-left:auto; }
.matrix-head { display:flex; align-items:center; gap:24px; justify-content:space-between; }
.matrix-head h2 { margin:0; }.matrix-head p { margin:8px 0 0; }
.matrix-head input { width:280px; }
.matrix-filters { display:flex; flex-wrap:wrap; gap:8px; }
.matrix-panel { overflow:hidden; }
.marketing-matrix { margin:0; width:100%; }
.marketing-matrix th,.marketing-matrix td { padding:16px; }
.marketing-matrix td:nth-child(4) { max-width:240px; white-space:normal; }
.marketing-matrix details { max-width:220px; }
.marketing-matrix details p { white-space:normal; }
.matrix-actions { flex-wrap:wrap; gap:6px; }
.matrix-meter { height:4px; border-radius:4px; background:var(--line); width:100%; margin-top:8px; }
.matrix-meter i { display:block; height:100%; background:var(--accent-fill); border-radius:4px; }
.matrix-pending > summary,.matrix-planned > summary { cursor:pointer; color:var(--muted); }
.marketing-performance td:nth-child(7) { max-width:250px; white-space:normal; }
.marketing-performance td { vertical-align:middle; }   /* 编辑风格 level with the row's words */
.marketing-performance { min-width:720px; } .marketing-matrix { min-width:860px; } .marketing-performance td:first-child { white-space:nowrap; }   /* (on a phone it scrolls sideways: names were breaking a letter a line) */
@media (max-width:950px) { .usage-purpose-blocks { grid-template-columns:1fr; } .chat-piece-browser { grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr); } }
.gen-ref img[data-big] { cursor: zoom-in; }
.gen-pick-wrap { position: relative; }
.gen-zoom { position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; border: 0; }

/* 组装 (fsbox.assemble): the steps beside the model */
.asm { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.asm-steps { max-height: 72vh; overflow: auto; padding: 6px; }
.asm-step { display: flex; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; line-height: 1.5; font-size: 13px; }
.asm-step:hover { background: var(--panel-2); }
.asm-step.on { background: var(--accent-soft); color: var(--accent); }
.asm-step .n { flex: none; min-width: 1.8em; color: var(--faint); font-variant-numeric: tabular-nums; }
.asm-head { padding: 10px 10px 2px; font-size: 12px; color: var(--muted); }
.asm .viewer { min-height: 460px; }
.asm-sheet-body { background: #fff; color: #222; border-radius: 10px; padding: 16px 20px; }
.asm-sheet-step { break-inside: avoid; margin: 14px 0; }
.asm-sheet-step img { display: block; width: 100%; max-width: 640px; margin-top: 6px; border: 1px solid #eee; border-radius: 6px; }
#asm-print { display: none; }
@media print { body.asm-printing > *:not(#asm-print) { display: none !important; } body.asm-printing #asm-print { display: block; color: #000; } }
@media (max-width: 900px) { .asm { grid-template-columns: minmax(0, 1fr); } .asm-steps { max-height: 40vh; } .asm .viewer { min-height: 340px; } }