/* ==========================================================================
   Source Library — workspace design system (v2: "soft workbench")
   Every selector below is targeted directly by web/workspace.js (ids and
   class names are a stable contract with the renderer) — this file only
   restyles those hooks, it does not add or rename any of them.
   ========================================================================== */

:root {
  /* --- warm neutrals ---------------------------------------------------- */
  --canvas: #f4efe4;
  --canvas-deep: #ece2cd;
  --paper: #fffcf7;
  --paper-soft: #faf5ea;
  --line: #e7dcc4;
  --line-strong: #d6c6a4;
  --ink: #2b2419;
  --copy: #3a3021;
  --muted: #8c7d64;
  --muted-soft: #ad9f83;

  /* --- accent: brick / terracotta ---------------------------------------*/
  --accent: #b1552f;
  --accent-dark: #8c4222;
  --accent-soft: #f7e5d7;
  --accent-line: #e2b48d;
  --accent-wash: #fbf0e6;

  /* --- status ------------------------------------------------------------*/
  --green: #4c7a58;
  --green-soft: #e7f0e5;
  --green-line: #bdd6bc;
  --yellow: #96691c;
  --yellow-soft: #f6ecd3;
  --yellow-line: #e0c581;
  --red: #ad3b49;
  --red-soft: #f8e7e7;
  --red-line: #e3b7bc;
  --blue: #3d6f89;

  /* --- elevation & shape --------------------------------------------------*/
  --shadow-xs: 0 1px 2px rgba(74, 54, 30, 0.08);
  --shadow-sm: 0 4px 14px rgba(74, 54, 30, 0.09);
  --shadow-md: 0 16px 36px rgba(70, 50, 26, 0.13);
  --shadow-lg: 0 30px 68px rgba(58, 42, 22, 0.22);
  --shadow-focus: 0 0 0 3px rgba(177, 85, 47, 0.3);
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 999px;
  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);

  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- reset & base ---------------------------------------------------------*/
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
  margin: 0;
  min-width: 1080px;
  background:
    radial-gradient(1100px 620px at 14% -8%, rgba(177, 85, 47, 0.07), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(76, 122, 88, 0.05), transparent 55%),
    var(--canvas);
  color: var(--copy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1, h2, h3 { font-family: inherit; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #c3ac82; background-clip: padding-box; }

/* ==========================================================================
   Shell — the rail and the surface float as two soft cards on a warm canvas
   ========================================================================== */
.app-shell { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 14px; min-height: 100vh; padding: 14px; }

.rail {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 28px);
  border-radius: var(--r-xl);
  background: linear-gradient(175deg, var(--canvas-deep), #e2d5b8);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 0 21px;
  color: var(--ink);
  border-bottom: 1px solid rgba(43, 36, 25, 0.08);
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-bars { display: inline-flex; align-items: end; gap: 3px; height: 19px; }
.brand-bars i { width: 5px; border-radius: 3px; background: var(--accent); }
.brand-bars i:nth-child(1) { height: 7px; opacity: 0.6; }
.brand-bars i:nth-child(2) { height: 13px; opacity: 0.82; }
.brand-bars i:nth-child(3) { height: 19px; }

.nav-list { display: grid; gap: 3px; padding: 14px 11px; }
.nav-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 42px;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: #6c6047;
  text-align: left;
  font-size: 13.5px;
  font-weight: 620;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-item:hover { background: rgba(43, 36, 25, 0.06); color: var(--ink); }
.nav-item.is-active { background: var(--paper); color: var(--accent-dark); box-shadow: var(--shadow-xs); }
.nav-item.is-active svg { color: var(--accent); }
.nav-item b {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: rgba(43, 36, 25, 0.1);
  color: #5b5138;
  font-size: 10.5px;
  font-weight: 750;
}
.nav-item.is-active b { background: var(--accent); color: #fff; }
.nav-item.muted { color: #7b7057; }
.rail-bottom { margin-top: auto; padding: 11px; border-top: 1px solid rgba(43, 36, 25, 0.08); }

/* ==========================================================================
   Surface / topbar
   ========================================================================== */
.surface { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: calc(100vh - 28px); background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
}
.topbar-heading h1 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
.topbar-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.storage-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  color: #766a52;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.storage-line i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft); }
.storage-line.is-ready { background: var(--green-soft); border-color: var(--green-line); color: #2f5b3d; }
.storage-line.is-ready i { background: var(--green); }
.storage-line.is-warning { background: var(--accent-soft); border-color: var(--accent-line); color: #8a431f; }
.storage-line.is-warning i { background: var(--accent); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.primary-button, .outline-button, .tool-button, .text-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 660;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.primary-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, #c1653c, var(--accent));
  color: #fff;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(140, 66, 34, 0.3), 0 8px 18px rgba(177, 85, 47, 0.22);
}
.primary-button:hover:not(:disabled) { background: linear-gradient(180deg, #a54f2c, var(--accent-dark)); border-color: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(140, 66, 34, 0.34), 0 12px 24px rgba(177, 85, 47, 0.28); }
.primary-button:active:not(:disabled) { transform: translateY(0); }
.primary-button:disabled, .outline-button:disabled {
  cursor: not-allowed;
  color: #a99c85;
  border-color: var(--line);
  background: var(--paper-soft);
  box-shadow: none;
  transform: none;
}
.outline-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--paper);
  color: #443b2c;
  font-size: 13px;
}
.outline-button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-dark); }
.outline-button.is-complete { border-color: var(--green-line); background: var(--green-soft); color: var(--green); }
.outline-button.is-complete:hover:not(:disabled) { border-color: var(--green); }
.tool-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: #6a5f49;
  font-size: 12px;
}
.tool-button:hover, .text-button:hover { color: var(--accent-dark); border-color: var(--accent-line); background: var(--accent-wash); }
.text-button { min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.icon-button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: #756a53; }
.icon-button:hover { background: var(--paper-soft); color: var(--ink); }
.danger-button { border-color: var(--red-line); color: #963040; }
.danger-button:hover:not(:disabled) { border-color: var(--red); background: var(--red-soft); color: var(--red); }

/* toast / message bar */
.message {
  margin: 0;
  padding: 11px 26px;
  border-bottom: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: #7c3f1c;
  font-size: 13px;
  line-height: 1.55;
}
.message.is-success { border-color: var(--green-line); background: var(--green-soft); color: #2f5b3d; }

/* ==========================================================================
   Content grid / catalog
   ========================================================================== */
.content-grid { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(460px, 1fr); min-height: 0; }
.content-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
.content-grid.is-wide .catalog { border-right: 0; }
.catalog { min-width: 0; border-right: 1px solid var(--line); }

.catalog-tools { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.select-all { display: inline-flex; align-items: center; gap: 8px; color: #61553f; font-size: 13px; font-weight: 620; }
.select-all input, .row-checkbox input, .mini-check input { position: absolute; opacity: 0; pointer-events: none; }
.select-all span, .row-checkbox span, .mini-check span { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); transition: background 0.12s var(--ease), border-color 0.12s var(--ease); }
.select-all input:checked + span, .row-checkbox input:checked + span, .mini-check input:checked + span { border-color: var(--accent); background: var(--accent); }
.select-all input:checked + span::after, .row-checkbox input:checked + span::after, .mini-check input:checked + span::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.select-all input:focus-visible + span, .row-checkbox input:focus-visible + span, .mini-check input:focus-visible + span { box-shadow: var(--shadow-focus); }
.tool-spacer { flex: 1; }
.search { display: flex; align-items: center; gap: 7px; width: min(255px, 36%); min-width: 190px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--paper-soft); color: #94886e; transition: border-color 0.12s var(--ease), background 0.12s var(--ease); }
.search:focus-within { border-color: var(--accent-line); background: var(--paper); box-shadow: var(--shadow-focus); }
.search input { min-width: 0; width: 100%; height: 34px; border: 0; background: transparent; color: #47402f; font-size: 12.5px; outline: 0; }
.search svg { width: 16px; height: 16px; }

.table-head, .product-row { display: grid; grid-template-columns: 30px minmax(210px, 2.1fr) 0.62fr 54px 64px 74px 30px; align-items: center; column-gap: 12px; }
.table-head { min-height: 36px; padding: 0 22px; color: #9c8f76; font-size: 10.5px; font-weight: 720; letter-spacing: 0.05em; text-transform: uppercase; }
.product-list { padding: 6px 14px 90px; }
.product-list--special { padding: 0; }
.product-row {
  min-height: 116px;
  margin-bottom: 9px;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.product-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.product-row.is-selected { border-color: var(--accent-line); background: var(--accent-wash); box-shadow: none; transform: none; }
.row-checkbox { position: relative; display: inline-grid; width: 20px; height: 20px; place-items: center; }
.product-summary { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 13px; min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.product-thumb { width: 84px; height: 70px; border: 1px solid var(--line); border-radius: var(--r-md); object-fit: cover; background: var(--paper-soft); }
.product-summary h2 { margin: 0; overflow: hidden; color: var(--ink); font-size: 13.5px; line-height: 1.45; font-weight: 700; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-summary p { overflow: hidden; margin: 6px 0 0; color: #9a8e75; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.product-source, .product-number { color: #6c6149; font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: #6f6450; font-size: 12px; white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #c4b696; }
.status.is-complete { color: var(--green); }
.status.is-complete i { background: var(--green); }
.status.is-pending { color: var(--yellow); }
.status.is-pending i { background: #d19a2b; }
.status.is-failed { color: var(--red); }
.status.is-failed i { background: var(--red); }
.row-actions { position: relative; }
.menu-button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: #756a53; font-size: 18px; }
.menu-button:hover { background: var(--paper-soft); }
.catalog-empty { display: grid; min-height: 340px; place-items: center; align-content: center; gap: 7px; padding: 50px; color: #8a7c62; text-align: center; line-height: 1.6; }
.catalog-empty h2 { margin: 0; color: #4c4130; font-size: 16px; }
.catalog-empty p { max-width: 370px; margin: 0; font-size: 13px; }

/* ==========================================================================
   Inspector
   ========================================================================== */
.inspector { min-width: 0; background: var(--paper-soft); border-left: 1px solid var(--line); }
.inspector-empty { display: grid; min-height: 520px; place-items: center; align-content: center; padding: 45px; color: #8a7c62; text-align: center; }
.inspector-empty svg { width: 32px; height: 32px; padding: 12px; box-sizing: content-box; border-radius: var(--r-full); background: var(--paper); border: 1px solid var(--line); color: #b7a67f; }
.inspector-empty h2 { margin: 18px 0 7px; color: #504432; font-size: 16px; }
.inspector-empty p { max-width: 260px; margin: 0; font-size: 13px; line-height: 1.6; }

.inspector-title { display: flex; justify-content: space-between; gap: 18px; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.inspector-title p { margin: 0 0 7px; color: #8a7c62; font-size: 10.5px; font-weight: 720; letter-spacing: 0.05em; text-transform: uppercase; }
.inspector-title h2 { display: -webkit-box; max-width: 320px; margin: 0; overflow: hidden; color: var(--ink); font-size: 15px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inspector-title a { display: inline-block; max-width: 310px; margin-top: 8px; overflow: hidden; color: var(--blue); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.inspector-title a:hover { text-decoration: underline; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; color: #8a7c62; font-size: 10.5px; }
.quality-score { color: var(--green); font-weight: 760; }
.quality-score.is-warning { color: var(--yellow); }

.detail-section { padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.detail-section + .detail-section { margin-top: 8px; }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-title h3 { margin: 0; color: #423826; font-size: 13.5px; font-weight: 720; }
.section-title p { margin: 6px 0 0; color: #8f8168; font-size: 11px; line-height: 1.45; }
.section-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.media-scope-note { margin: 12px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper-soft); color: #78694f; font-size: 10.5px; line-height: 1.55; }

/* media */
.media-groups { display: grid; gap: 17px; margin-top: 14px; }
.media-group { min-width: 0; }
.media-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.media-group > header strong { flex: 0 0 auto; color: #4a3f2c; font-size: 12px; font-weight: 700; white-space: nowrap; }
.media-group > header span { overflow: hidden; color: #998c72; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
.media-group .media-grid { margin-top: 0; }
.media-group--colors { padding: 12px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-wash); }
.media-group--colors .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-group--colors .media-label { white-space: normal; text-overflow: clip; font-size: 12px; line-height: 1.4; left: 4px; }
.field-editor { margin-top: 12px; }
.field-editor summary { cursor: pointer; color: var(--accent-dark); font-size: 12px; padding: 6px 0; }
.quality-warning { color: #b45309; width: 100%; }
.media-tile { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-soft); transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); }
.media-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.media-tile.is-selected { border: 2px solid var(--accent); }
.media-tile button { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s var(--ease); }
.media-tile:hover img { transform: scale(1.04); }
.media-video { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(160deg, #4a4030, #2b241a); color: #fff; }
.media-video svg { width: 26px; height: 26px; }
.media-selected { position: absolute; top: 5px; right: 5px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: var(--r-sm); background: rgba(255, 252, 247, 0.92); color: transparent; box-shadow: var(--shadow-xs); }
.media-tile.is-selected .media-selected { background: var(--accent); color: #fff; }
.media-selected svg { width: 13px; height: 13px; stroke-width: 3; }
.media-label { position: absolute; right: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; padding: 3px 6px; border-radius: var(--r-sm); background: rgba(43, 36, 25, 0.8); color: #fff; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.media-tile.media-cache-failed { border-color: var(--red-line); }
.media-tile.media-cache-direct_export_only { border-style: dashed; }

/* text fields */
.text-field-list { margin: 12px -20px -18px; border-top: 1px solid var(--line); }
.text-card { border-bottom: 1px solid var(--line); background: var(--paper); }
.text-card .text-field { border-bottom: 0; }
.text-field { display: flex; align-items: center; min-height: 43px; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.text-field--locked { background: var(--paper-soft); }
.field-check { display: inline-flex; align-items: center; gap: 10px; }
.mini-check { position: relative; display: inline-grid; width: 18px; height: 18px; place-items: center; }
.mini-check span { width: 17px; height: 17px; border-radius: 5px; }
.text-label { color: #524634; font-size: 12.5px; font-weight: 660; }
.text-detail, .text-card .text-detail { margin-left: auto; color: #9c8f75; font-size: 11px; }
.text-preview { padding: 0 20px 14px 48px; }
.text-preview-copy, .text-source-preview { margin: 0; color: #5f5340; font-size: 11px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.text-preview-copy.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.text-preview-copy.is-full { margin-top: 8px; padding: 9px 10px; border-left: 2px solid var(--accent-line); background: var(--paper-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.text-source-preview { padding: 0 20px 14px 48px; color: var(--blue); }
.text-preview-empty { margin: 0; color: #a06c45; font-size: 11px; }
.text-value-editor { width: 100%; min-height: 58px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: #4d4230; font-size: 11px; line-height: 1.55; }
.text-more { margin-top: 8px; }
.text-more summary { cursor: pointer; color: var(--blue); font-size: 10.5px; font-weight: 700; }
.text-more[open] summary { margin-bottom: 8px; }

.parameter-preview { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-soft); overflow: hidden; }
.parameter-preview > div { display: grid; grid-template-columns: minmax(90px, 0.75fr) minmax(0, 1.25fr); border-bottom: 1px solid var(--line); }
.parameter-preview > div:last-child { border-bottom: 0; }
.parameter-preview dt, .parameter-preview dd { min-width: 0; margin: 0; padding: 9px 10px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.parameter-preview dt { color: #82755c; background: #f1e9d8; font-weight: 700; }
.parameter-preview dd { color: #4d4230; border-left: 1px solid var(--line); background: var(--paper); }
.parameter-editor { display: grid; gap: 7px; }
.parameter-edit-row { display: grid; grid-template-columns: minmax(90px, 0.72fr) minmax(0, 1.28fr) 25px; gap: 6px; align-items: stretch; }
.parameter-edit-row input, .parameter-edit-row textarea { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: #4d4230; font-size: 10.5px; line-height: 1.45; resize: vertical; }
.add-parameter { justify-self: start; }

/* custom fields */
.custom-section { background: var(--paper); }
.custom-row { display: grid; grid-template-columns: 18px minmax(0, 0.65fr) minmax(0, 1fr) 25px; gap: 7px; align-items: center; margin-top: 11px; }
.custom-row input { min-width: 0; height: 31px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-soft); color: #4f4432; font-size: 11px; }
.remove-custom { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: #948765; font-size: 18px; }
.remove-custom:hover { color: var(--red); background: var(--red-soft); }
.custom-empty { margin-top: 12px; color: #93876c; font-size: 12px; }
.custom-field + .custom-field { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.custom-result { display: -webkit-box; margin: 7px 32px 0 25px; overflow: hidden; color: #6d6047; font-size: 10.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.custom-result.is-empty { color: #9a7a4a; }

/* json */
.json-section { background: var(--paper-soft); }
.json-section .section-title span { color: #93876c; font-size: 11px; }
.json-section pre {
  max-height: 220px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid #3a2f22;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #e4d9c2;
  font: 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.export-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 68px; padding: 12px 28px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -10px 30px rgba(70, 50, 26, 0.05); }
.export-bar p { flex: 1; margin: 0; color: #756a52; font-size: 13px; }
.export-bar .primary-button { min-width: 185px; }
.export-bar .outline-button { min-width: 145px; }

/* ==========================================================================
   Dialogs
   ========================================================================== */
.export-dialog { width: min(930px, calc(100vw - 80px)); padding: 0; border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); background: var(--paper); }
.export-dialog::backdrop { background: rgba(43, 36, 25, 0.42); backdrop-filter: blur(2px); }
.dialog-card { padding: 0; }
.dialog-header, .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.dialog-header { border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-size: 19px; font-weight: 760; letter-spacing: -0.02em; color: var(--ink); }
.dialog-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.dialog-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr); gap: 20px; padding: 22px 24px; }
.dialog-grid h3 { margin: 0 0 12px; color: #453a28; font-size: 13.5px; font-weight: 720; }
.export-product-list { display: grid; gap: 9px; max-height: 320px; overflow: auto; }
.export-product { display: flex; align-items: center; gap: 10px; min-height: 55px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-md); }
.export-product img { width: 42px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); object-fit: cover; }
.export-product strong { display: -webkit-box; overflow: hidden; color: #4a4030; font-size: 12px; font-weight: 650; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.export-product span { margin-left: auto; color: #8a7c62; font-size: 11px; white-space: nowrap; }
.export-option { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 16px; color: #5c5138; font-size: 12px; font-weight: 700; }
.export-option select { height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: #473c2a; }
.rights-confirm { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; margin-top: 14px; padding: 11px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); color: #7c4523; font-size: 11px; line-height: 1.55; }
.rights-confirm input { width: 17px; height: 17px; accent-color: var(--accent); }
.export-preview { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-soft); }
.export-preview pre { margin: 0; color: #574b37; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.export-preview p { margin: 13px 0 0; color: #8a7c62; font-size: 11px; line-height: 1.55; }
.dialog-footer { border-top: 1px solid var(--line); }
.dialog-footer .primary-button { min-width: 190px; }

.queue-dialog-body { display: grid; gap: 9px; padding: 22px 24px; }
.queue-dialog-body label { color: #4f4432; font-size: 12px; font-weight: 750; }
.queue-dialog-body textarea { width: 100%; resize: vertical; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: #453a28; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.queue-dialog-body p { margin: 0; color: #78694f; font-size: 11px; line-height: 1.6; }

/* ==========================================================================
   Queue view — workflow stages, runner panel, queue list
   ========================================================================== */
.workflow-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px 24px 0; background: var(--paper-soft); }
.workflow-stage { position: relative; min-height: 194px; padding: 20px 21px 20px 66px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-xs); transition: box-shadow 0.15s var(--ease); }
.workflow-stage::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  color: #8a7c62;
  font: 800 13px/1 inherit;
}
.workflow-stage:nth-of-type(1)::before { content: "1"; }
.workflow-stage:nth-of-type(2)::before { content: "2"; }
.workflow-stage.is-active { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line), var(--shadow-sm); }
.workflow-stage.is-active::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.workflow-stage.is-complete { border-color: var(--green-line); background: linear-gradient(150deg, var(--paper), #f3f8f1); box-shadow: inset 0 0 0 1px var(--green-line), var(--shadow-xs); }
.workflow-stage.is-complete::before { background: var(--green); border-color: var(--green); color: #fff; }
.workflow-stage.is-locked { background: var(--paper-soft); color: #8a7c62; box-shadow: none; }
.workflow-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-stage-head > span { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.workflow-stage.is-complete .workflow-stage-head > span { background: var(--green-soft); color: var(--green); }
.workflow-stage.is-locked .workflow-stage-head > span { background: #ece2cd; color: #8f8368; }
.workflow-state { display: inline-flex; min-height: 24px; align-items: center; padding: 0 10px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 800; }
.workflow-state.is-complete { background: var(--green-soft); color: var(--green); }
.workflow-state.is-pending { background: var(--accent-soft); color: #8a431f; }
.workflow-state.is-warning { background: var(--yellow-soft); color: var(--yellow); }
.workflow-state.is-muted { background: #ece2cd; color: #8f8368; }
.workflow-stage h2 { margin: 16px 0 0; color: var(--ink); font-size: 17px; font-weight: 740; letter-spacing: -0.015em; }
.workflow-stage p { min-height: 36px; margin: 7px 0 0; color: #78694f; font-size: 11.5px; line-height: 1.6; }
.workflow-stage.is-locked h2, .workflow-stage.is-locked p { color: #8f8368; }
.workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }

.runner-panel {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) minmax(300px, 0.8fr) auto;
  align-items: center;
  gap: 28px;
  margin: 20px 24px 8px;
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--paper), var(--paper-soft));
  box-shadow: var(--shadow-sm);
}
.runner-panel.is-waiting { border-color: var(--accent-line); background: linear-gradient(135deg, #fffaf3, var(--accent-wash)); }
.runner-kicker { display: inline-block; color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.runner-main h2 { margin: 5px 0 0; color: var(--ink); font-size: 17px; font-weight: 740; letter-spacing: -0.015em; }
.runner-main p { max-width: 680px; margin: 7px 0 0; overflow: hidden; color: #78694f; font-size: 11.5px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.runner-progress { display: block; width: 100%; height: 6px; margin-top: 14px; overflow: hidden; border: 0; border-radius: var(--r-full); appearance: none; background: var(--line); }
.runner-progress::-webkit-progress-bar { border-radius: inherit; background: var(--line); }
.runner-progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #c76b40, var(--accent)); transition: width 0.25s var(--ease); }
.runner-stats { display: grid; grid-template-columns: repeat(4, minmax(54px, 1fr)); gap: 6px; margin: 0; }
.runner-stats div { padding: 8px 6px; border-left: 1px solid var(--line-strong); text-align: center; }
.runner-stats dt { color: #8a7c62; font-size: 10px; }
.runner-stats dd { margin: 4px 0 0; color: #3a3121; font-size: 17px; font-weight: 800; }
.runner-actions { display: grid; min-width: 138px; gap: 8px; }

.queue-list { display: grid; gap: 8px; padding: 16px 24px 24px; }
.queue-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 100px 105px 38px; align-items: center; gap: 14px; min-height: 78px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.queue-row.is-current { border-color: var(--accent-line); background: var(--accent-wash); }
.queue-order { color: #8a7c62; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.queue-row strong { display: block; overflow: hidden; color: #423826; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.queue-row p { overflow: hidden; margin: 6px 0 0; color: #7c6f56; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Settings view
   ========================================================================== */
.settings-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 24px; background: var(--paper-soft); }
.settings-panel section { min-height: 220px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-xs); }
.settings-panel h2 { margin: 0; font-size: 15.5px; font-weight: 740; color: var(--ink); }
.settings-panel p { margin: 10px 0 0; color: #6b5f47; font-size: 12px; line-height: 1.7; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.settings-panel dl { margin: 15px 0 0; border-top: 1px solid var(--line); }
.settings-panel dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.5; }
.settings-panel dt { color: #8a7c62; }
.settings-panel dd { margin: 0; color: #4f4432; }
.settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-session-card { background: linear-gradient(150deg, var(--paper), var(--paper-soft)); }
.session-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-full); background: var(--green-soft); color: #2f5b3d; font-size: 10.5px; font-weight: 800; }
.session-badge.is-warning { background: var(--accent-soft); color: #8a431f; }
.settings-panel .settings-privacy-note { color: #8a7c62; font-size: 10.5px; }

/* ==========================================================================
   Responsive & motion
   ========================================================================== */
@media (max-width: 1300px) {
  .content-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); }
  .table-head, .product-row { grid-template-columns: 28px minmax(185px, 2fr) 0.58fr 46px 56px 65px 25px; column-gap: 9px; }
  .product-thumb { width: 68px; height: 60px; }
  .product-summary { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
  .topbar-actions { gap: 10px; }
  .primary-button { padding: 0 13px; }
  .storage-line { display: none; }
}
@media (max-width: 1240px) {
  .content-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
  .workflow-stages { grid-template-columns: 1fr; }
  .workflow-stage { min-height: 0; }
  .settings-panel { grid-template-columns: 1fr; }
  .runner-panel { grid-template-columns: minmax(0, 1fr) auto; }
  .runner-stats { grid-row: 2; }
  .runner-actions { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Source Library skin v3 — "Editorial Ledger"
   Selected visual direction: bright editorial workspace, cobalt action color,
   slim navigation, integrated two-stage stepper and table-first queue.
   This section deliberately overrides presentation only; renderer hooks and
   business state remain unchanged.
   ========================================================================== */

:root {
  --canvas: #f6f8fb;
  --canvas-deep: #f8fafc;
  --paper: #ffffff;
  --paper-soft: #f7f9fc;
  --line: #e3e8f0;
  --line-strong: #cbd4e1;
  --ink: #101f3d;
  --copy: #25334d;
  --muted: #6e7b91;
  --muted-soft: #98a4b7;
  --accent: #155eef;
  --accent-dark: #0b4bd4;
  --accent-soft: #edf4ff;
  --accent-line: #b8d0ff;
  --accent-wash: #f6f9ff;
  --green: #1f8a58;
  --green-soft: #eaf7f0;
  --green-line: #b8e3ca;
  --yellow: #a96705;
  --yellow-soft: #fff7e6;
  --yellow-line: #f3d08b;
  --red: #c24151;
  --red-soft: #fff0f2;
  --red-line: #efbec6;
  --blue: #155eef;
  --shadow-xs: 0 1px 2px rgba(15, 31, 61, 0.05);
  --shadow-sm: 0 8px 24px rgba(15, 31, 61, 0.07);
  --shadow-md: 0 18px 44px rgba(15, 31, 61, 0.1);
  --shadow-lg: 0 28px 72px rgba(15, 31, 61, 0.18);
  --shadow-focus: 0 0 0 3px rgba(21, 94, 239, 0.2);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-full: 999px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  min-width: 1080px;
  height: 100vh;
  overflow: hidden;
  background: var(--canvas);
  color: var(--copy);
}

* { scrollbar-color: #c7d0de transparent; }
*::-webkit-scrollbar-thumb { background: #c7d0de; }
*::-webkit-scrollbar-thumb:hover { background: #aeb9ca; }

.app-shell {
  position: fixed;
  inset: 0;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  background: var(--paper);
}

.rail {
  height: 100vh;
  min-height: 100vh;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fbfcfe;
  box-shadow: none;
}

.brand {
  min-height: 104px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  font-weight: 760;
}

.brand-bars { gap: 3px; }
.brand-bars i { width: 5px; border-radius: 2px; background: var(--accent); }
.brand-bars i:nth-child(1), .brand-bars i:nth-child(2), .brand-bars i:nth-child(3) { opacity: 1; }

.nav-list { gap: 7px; padding: 24px 16px; }
.nav-item {
  min-height: 48px;
  gap: 12px;
  padding: 0 14px;
  border-radius: var(--r-md);
  color: #44536d;
  font-size: 14px;
  font-weight: 620;
}
.nav-item:hover { background: #f1f5fb; color: var(--ink); }
.nav-item.is-active {
  border: 1px solid #dbe7ff;
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
}
.nav-item.is-active svg { color: var(--accent); }
.nav-item b {
  min-width: 21px;
  height: 21px;
  background: #e9edf4;
  color: #68768c;
  font-size: 10.5px;
}
.nav-item.is-active b { background: #d5e3ff; color: var(--accent-dark); }
.nav-item.muted { color: #56647a; }
.rail-bottom { padding: 16px; border-top: 1px solid var(--line); }

.surface {
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
.surface > .topbar { grid-row: 1; min-width: 0; }
.surface > .message { grid-row: 2; }
.surface > .content-grid { grid-row: 3; }
.surface > .export-bar { grid-row: 4; }

.topbar {
  min-height: 104px;
  padding: 20px 32px 20px 36px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topbar-heading h1 { color: var(--ink); font-size: 26px; font-weight: 760; letter-spacing: -0.03em; }
.topbar-heading p { margin-top: 7px; color: var(--muted); font-size: 13px; }
.topbar-actions { gap: 10px; }
.storage-line {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--paper-soft);
  color: #5c6a80;
  font-size: 11.5px;
}
.storage-line.is-ready { background: var(--green-soft); color: #176c44; }
.storage-line.is-warning { background: var(--yellow-soft); border-color: var(--yellow-line); color: #8b5909; }

.primary-button, .outline-button, .tool-button, .text-button, .icon-button { font-weight: 660; }
.primary-button {
  min-height: 40px;
  padding: 0 17px;
  border-color: var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.2);
}
.primary-button:hover:not(:disabled) {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(21, 94, 239, 0.25);
  transform: translateY(-1px);
}
.primary-button:disabled, .outline-button:disabled {
  color: #9aa6b8;
  border-color: var(--line);
  background: #f5f7fa;
}
.outline-button {
  min-height: 38px;
  padding: 0 14px;
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: #263550;
  font-size: 13px;
}
.outline-button:hover:not(:disabled) { border-color: #8eb3ff; background: var(--accent-wash); color: var(--accent-dark); }
.outline-button.is-complete { border-color: var(--green-line); background: var(--green-soft); color: var(--green); }
.tool-button { border-radius: var(--r-sm); background: var(--paper); color: #536178; }
.tool-button:hover, .text-button:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-dark); }
.text-button { border-radius: var(--r-sm); color: var(--accent-dark); }
.icon-button { border-radius: var(--r-sm); color: #69768a; }
.icon-button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.danger-button { border-color: var(--red-line); color: var(--red); }

.message { border-color: var(--accent-line); background: var(--accent-soft); color: #204b98; }
.message.is-success { border-color: var(--green-line); background: var(--green-soft); color: #176c44; }

.catalog { border-right-color: var(--line); container-type: inline-size; }
.content-grid { min-height: 0; overflow: hidden; }
.catalog, .inspector { min-height: 0; overflow: auto; }
.catalog-tools { min-height: 62px; padding: 12px 24px; border-bottom-color: var(--line); }
.select-all { color: #46546a; }
.select-all span, .row-checkbox span, .mini-check span { border-color: var(--line-strong); border-radius: 5px; background: var(--paper); }
.select-all input:checked + span, .row-checkbox input:checked + span, .mini-check input:checked + span { border-color: var(--accent); background: var(--accent); }
.search { border-color: var(--line); border-radius: var(--r-sm); background: var(--paper-soft); color: #7a879a; }
.search:focus-within { border-color: var(--accent-line); background: var(--paper); }
.search input { color: var(--ink); }
.table-head { color: #7b8799; background: #fbfcfe; }
.product-list { padding: 0 16px 88px; }
.product-row {
  min-height: 108px;
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: var(--paper);
}
.product-row:hover { border-color: var(--line-strong); background: #fbfdff; box-shadow: none; transform: none; }
.product-row.is-selected { border-color: var(--accent-line); background: var(--accent-wash); }
.product-thumb { border-color: var(--line); border-radius: var(--r-md); background: var(--paper-soft); }
.product-summary h2 { color: var(--ink); }
.product-summary p { color: var(--muted); }
.product-source, .product-number { color: #536178; }
.status { color: #5f6d82; }
.status i { background: #9da9ba; }
.status.is-pending { color: var(--yellow); }
.catalog-empty { color: var(--muted); }
.catalog-empty h2 { color: var(--ink); }

.inspector { border-color: var(--line); background: var(--paper-soft); }
.inspector-empty { color: var(--muted); }
.inspector-empty svg { border-color: var(--line); background: var(--paper); color: #8290a5; }
.inspector-empty h2 { color: var(--ink); }
.inspector-title { border-color: var(--line); background: var(--paper); }
.inspector-title p, .detail-meta { color: var(--muted); }
.inspector-title h2 { color: var(--ink); }
.inspector-title a { color: var(--accent-dark); }
.detail-section { border-color: var(--line); background: var(--paper); }
.detail-section + .detail-section { margin-top: 6px; }
.section-title h3 { color: var(--ink); }
.section-title p { color: var(--muted); }
.media-scope-note { background: var(--accent-wash); color: #536178; }
.media-group > header strong { color: var(--ink); }
.media-group > header span { color: var(--muted); }
.media-group--colors { border-color: var(--accent-line); border-radius: var(--r-md); background: var(--accent-wash); }
.media-tile { border-color: var(--line); border-radius: var(--r-md); background: var(--paper-soft); }
.media-tile.is-selected { border-color: var(--accent); }
.media-video { background: #1c2a43; }
.media-selected { border-radius: 5px; background: rgba(255, 255, 255, 0.94); }
.media-tile.is-selected .media-selected { background: var(--accent); }
.media-label { border-radius: 4px; background: rgba(16, 31, 61, 0.84); }

.text-field-list, .text-card, .text-field, .parameter-preview, .parameter-preview > div { border-color: var(--line); }
.text-field--locked { background: var(--paper-soft); }
.text-label { color: #34425b; }
.text-detail, .text-card .text-detail { color: var(--muted); }
.text-preview-copy, .text-source-preview { color: #4e5d73; }
.text-source-preview { color: var(--accent-dark); }
.text-preview-copy.is-full { border-color: var(--accent-line); background: var(--accent-wash); }
.text-value-editor, .parameter-edit-row input, .parameter-edit-row textarea, .custom-row input { border-color: var(--line); background: var(--paper); color: var(--ink); }
.parameter-preview { background: var(--paper-soft); }
.parameter-preview dt { color: #5e6c81; background: #eef2f7; }
.parameter-preview dd { border-color: var(--line); background: var(--paper); color: var(--ink); }
.custom-result { color: #536178; }
.json-section { background: var(--paper-soft); }
.json-section pre { border-color: #263752; background: #111d32; color: #dfe8f7; }

.export-bar {
  position: sticky;
  bottom: 0;
  z-index: 12;
  min-height: 82px;
  padding: 12px 24px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -12px 32px rgba(15, 31, 61, 0.09);
  backdrop-filter: blur(12px);
}
.export-bar.has-selection { border-top-color: var(--accent-line); }
.export-bar-summary { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; }
.export-bar-summary > div { min-width: 0; }
.export-selection-count {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-soft);
  color: #77859a;
  font-size: 15px;
  font-weight: 760;
}
.export-selection-count.is-active { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.export-bar strong { display: block; color: var(--ink); font-size: 13.5px; font-weight: 720; }
.export-bar p { margin-top: 4px; overflow: hidden; color: #5f6d82; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.export-bar .primary-button { min-width: 170px; }
.export-bar .outline-button { min-width: 120px; }

.export-dialog { border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lg); }
.export-dialog::backdrop { background: rgba(16, 31, 61, 0.42); backdrop-filter: none; }
.dialog-header, .dialog-footer, .export-product { border-color: var(--line); }
.dialog-header h2, .dialog-grid h3, .export-product strong { color: var(--ink); }
.dialog-header p, .export-product span { color: var(--muted); }
.export-product { border-radius: var(--r-md); }
.export-option { color: #46546a; }
.export-option select, .queue-dialog-body textarea { border-color: var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
.rights-confirm { border-color: var(--yellow-line); border-radius: var(--r-md); background: var(--yellow-soft); color: #7a5009; }
.export-preview { border-color: var(--line); border-radius: var(--r-md); background: var(--paper-soft); }
.export-preview pre { color: #41516a; }
.export-preview p, .queue-dialog-body p { color: var(--muted); }
.queue-dialog-body label { color: var(--ink); }

/* Export workspace — visible preflight, progress and results */
.export-dialog { width: min(1040px, calc(100vw - 64px)); max-height: calc(100vh - 56px); }
.export-dialog .dialog-card { display: flex; max-height: calc(100vh - 56px); flex-direction: column; overflow: hidden; }
.export-dialog .dialog-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); min-height: 0; overflow: auto; }
.export-product-list { max-height: 246px; }
.export-product { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; min-height: 66px; }
.export-product img { width: 46px; height: 46px; }
.export-product > div { min-width: 0; }
.export-product > span { margin-left: 0; }
.export-product-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 !important; color: inherit !important; white-space: normal !important; }
.export-product-counts b { display: inline-flex; min-height: 20px; align-items: center; padding: 0 7px; border-radius: var(--r-full); background: #edf2f8; color: #536178; font-size: 9.5px; font-weight: 700; }
.export-product-counts b:nth-child(1) { background: var(--accent-soft); color: var(--accent-dark); }
.export-product-counts b:nth-child(2) { background: #eef0ff; color: #4f58a8; }
.export-product-counts b:nth-child(3) { background: #edf7f0; color: #39714b; }
.export-check { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.export-check > div { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-soft); }
.export-check span { color: var(--muted); font-size: 10.5px; }
.export-check strong { color: var(--ink); font-size: 17px; }
.export-check p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.export-check p.is-warning { padding: 8px 10px; border: 1px solid var(--yellow-line); border-radius: var(--r-sm); background: var(--yellow-soft); color: var(--yellow); }
.export-preview { align-self: stretch; }
.export-preview pre { font-size: 10.5px; line-height: 1.65; }
.export-status { margin: 0 24px 20px; padding: 16px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-wash); }
.export-status-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.export-status-heading strong { display: block; color: var(--ink); font-size: 13px; }
.export-status-heading span { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.export-status-heading b { color: var(--accent-dark); font-size: 12px; }
.export-status progress { display: block; width: 100%; height: 5px; margin-top: 12px; overflow: hidden; border: 0; border-radius: var(--r-full); appearance: none; background: #dfe8f7; }
.export-status progress::-webkit-progress-bar { background: #dfe8f7; }
.export-status progress::-webkit-progress-value { background: var(--accent); transition: width 0.2s var(--ease); }
.export-status.is-complete progress::-webkit-progress-value { transition: none; }
.export-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--accent-line); }
.export-destination { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; }
.export-destination span { color: var(--muted); font-size: 10.5px; }
.export-destination code { overflow: hidden; color: #34425b; font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.export-result-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.export-result-counts > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.export-result-counts span { color: var(--muted); font-size: 10.5px; }
.export-result-counts strong { grid-row: 1 / span 2; grid-column: 2; color: var(--ink); font-size: 19px; }
.export-result-counts small { color: var(--green); font-size: 9.5px; }
.export-failures { margin-top: 12px; color: var(--red); font-size: 10.5px; }
.export-failures summary { cursor: pointer; font-weight: 720; }
.export-failures ul { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.export-failures li { display: grid; grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr); gap: 10px; color: var(--copy); }
.export-failures li span { overflow: hidden; color: var(--red); text-overflow: ellipsis; white-space: nowrap; }
.export-dialog .dialog-footer { flex: 0 0 auto; background: var(--paper); }
.export-dialog .dialog-footer.is-result { justify-content: flex-end; }
.media-group--details { border-color: #d6dafa; border-radius: var(--r-md); background: #fafaff; }
.media-tile.is-unavailable { opacity: 0.62; }
.media-tile.is-unavailable button { cursor: not-allowed; }

@media (max-width: 1180px) {
  .export-dialog { width: min(940px, calc(100vw - 40px)); }
  .export-dialog .dialog-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; padding-left: 18px; padding-right: 18px; }
  .export-status { margin-left: 18px; margin-right: 18px; }
}
.queue-parse-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-soft);
  color: var(--muted);
  font-size: 11.5px;
}
.queue-parse-status strong {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 5px;
  background: #e7ecf3;
  color: #68768c;
  font-size: 11px;
}
.queue-parse-status.is-ready { border-color: var(--accent-line); background: var(--accent-wash); color: #365b9d; }
.queue-parse-status.is-ready strong { background: var(--accent); color: #ffffff; }

.workflow-stages {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 68px;
  padding: 32px 48px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.workflow-stages::before {
  content: "";
  position: absolute;
  top: 54px;
  left: 12%;
  right: 12%;
  border-top: 1px dashed #bdc7d6;
}
.workflow-stage {
  position: relative;
  z-index: 1;
  min-height: 134px;
  padding: 6px 20px 8px 68px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.workflow-stage::before {
  top: 4px;
  left: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  background: var(--paper);
  color: var(--accent-dark);
  font-size: 15px;
}
.workflow-stage.is-active { border: 0; box-shadow: none; }
.workflow-stage.is-active::before { border-color: var(--accent); background: var(--accent); color: #fff; }
.workflow-stage.is-complete { border: 0; background: transparent; box-shadow: none; }
.workflow-stage.is-complete::before { content: "✓"; border-color: var(--accent); background: var(--paper); color: var(--accent); font-size: 19px; }
.workflow-stage.is-locked { background: transparent; color: var(--muted); }
.workflow-stage-head { justify-content: flex-start; gap: 12px; }
.workflow-stage-head > span {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #34425b;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.workflow-stage.is-complete .workflow-stage-head > span, .workflow-stage.is-locked .workflow-stage-head > span { background: transparent; color: #34425b; }
.workflow-state { min-height: 20px; padding: 0; border-radius: 0; background: transparent !important; font-size: 10.5px; }
.workflow-state.is-complete { color: var(--green); }
.workflow-state.is-pending { color: var(--accent-dark); }
.workflow-state.is-warning { color: var(--yellow); }
.workflow-state.is-muted { color: var(--muted); }
.workflow-stage h2 { margin: 11px 0 0; color: var(--ink); font-size: 18px; font-weight: 720; }
.workflow-stage p { min-height: 0; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.workflow-stage.is-locked h2 { color: #45536a; }
.workflow-stage.is-locked p { color: var(--muted); }
.workflow-actions { gap: 7px; margin-top: 12px; }
.workflow-actions .primary-button, .workflow-actions .outline-button { min-height: 32px; padding: 0 10px; border-radius: var(--r-sm); font-size: 11.5px; box-shadow: none; }

.runner-panel {
  grid-template-columns: minmax(300px, 1fr) auto auto;
  gap: 24px;
  margin: 0;
  padding: 24px 40px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
.runner-panel.is-waiting { border-color: var(--yellow-line); background: var(--yellow-soft); }
.runner-kicker { color: var(--ink); font-size: 20px; font-weight: 740; letter-spacing: -0.02em; text-transform: none; }
.runner-kicker b { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 650; }
.runner-main h2 { display: block; margin: 7px 0 0; color: #4d5b71; font-size: 12px; font-weight: 680; }
.runner-main p { display: block; max-width: none; margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.runner-progress { height: 3px; margin-top: 12px; background: #e7ecf3; }
.runner-progress::-webkit-progress-bar { background: #e7ecf3; }
.runner-progress::-webkit-progress-value { background: var(--accent); }
.runner-stats { grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 0; }
.runner-stats div { min-width: 54px; padding: 4px 10px; border-left: 1px solid var(--line); }
.runner-stats dt { color: var(--muted); font-size: 9.5px; }
.runner-stats dd { margin-top: 3px; color: var(--ink); font-size: 14px; }
.runner-actions { display: flex; min-width: 0; gap: 8px; }

.queue-table { margin: 0 32px 28px; border-bottom: 1px solid var(--line); }
.queue-table-head, .queue-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 112px 112px 36px;
  align-items: center;
  gap: 14px;
}
.queue-table-head {
  min-height: 44px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  color: #7b8799;
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.04em;
}
.queue-list { display: block; padding: 0; }
.queue-row {
  min-height: 86px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: #fbfdff; }
.queue-row.is-current { border-color: var(--accent-line); background: var(--accent-wash); }
.queue-order { color: #8591a3; font-size: 11px; }
.queue-row strong { color: var(--ink); font-size: 13.5px; font-weight: 680; }
.queue-row p { margin-top: 7px; color: var(--accent-dark); font-size: 11px; }
.queue-row .outline-button { min-height: 34px; padding: 0 10px; font-size: 11.5px; }

.settings-panel { gap: 16px; padding: 24px 32px; background: var(--paper-soft); }
.settings-panel section { border-color: var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: none; }
.settings-panel h2 { color: var(--ink); }
.settings-panel p { color: #59677d; }
.settings-panel dl, .settings-panel dl > div { border-color: var(--line); }
.settings-panel dt { color: var(--muted); }
.settings-panel dd { color: #34425b; }
.login-session-card { background: var(--paper); }
.session-badge { background: var(--green-soft); color: var(--green); }
.session-badge.is-warning { background: var(--yellow-soft); color: var(--yellow); }

@media (max-width: 1300px) {
  .app-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .topbar { padding-left: 28px; padding-right: 24px; }
  .topbar-heading h1 { font-size: 23px; }
  .workflow-stages { gap: 32px; padding-left: 32px; padding-right: 32px; }
  .runner-panel { padding-left: 32px; padding-right: 32px; }
  .queue-table { margin-left: 24px; margin-right: 24px; }
}

@media (max-width: 1180px) {
  .workflow-stages { grid-template-columns: 1fr; gap: 18px; }
  .workflow-stages::before { display: none; }
  .workflow-stage { min-height: 112px; }
  .runner-panel { grid-template-columns: minmax(0, 1fr) auto; }
  .runner-stats { grid-row: 2; }
  .runner-actions { grid-column: 2; grid-row: 1 / span 2; }
}

.online-setup-dialog { width: min(820px, calc(100vw - 48px)); }
.online-setup-dialog .dialog-card { max-height: calc(100vh - 56px); overflow: auto; }
.online-setup-body { display: grid; gap: 20px; padding: 24px; }
.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: setup-step; }
.setup-steps li { position: relative; min-height: 112px; padding: 18px 16px 16px 50px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-soft); counter-increment: setup-step; }
.setup-steps li::before { content: counter(setup-step); position: absolute; top: 16px; left: 16px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 760; }
.setup-steps b { display: block; color: var(--ink); font-size: 13px; }
.setup-steps span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.bookmarklet-install { display: grid; justify-items: center; gap: 12px; padding: 26px; border: 1px dashed var(--accent-line); border-radius: var(--r-md); background: var(--accent-wash); text-align: center; }
.bookmarklet-install > span { color: #3c506f; font-size: 11.5px; font-weight: 700; }
.bookmarklet-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 22px; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-size: 14px; font-weight: 760; text-decoration: none; box-shadow: 0 8px 18px rgba(23, 105, 224, 0.22); cursor: grab; user-select: none; }
.bookmarklet-button:active { cursor: grabbing; }
.bookmarklet-status { margin: 0; color: var(--muted); font-size: 10.5px; }
.bookmarklet-status.is-ready { color: var(--green); }
.bookmarklet-status.is-error { color: var(--red); }
.setup-actions { display: flex; justify-content: flex-end; gap: 8px; }
.online-security-note { padding: 14px 16px; border: 1px solid #d9e3f0; border-radius: var(--r-sm); background: #f8fafc; }
.online-security-note strong { color: var(--ink); font-size: 11.5px; }
.online-security-note p { margin: 6px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.65; }

@media (max-width: 900px) {
  body { min-width: 0; }
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; }
  .rail { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr); height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .surface { height: auto; min-height: 0; }
  .brand { min-height: 62px; padding: 0 18px; border-bottom: 0; }
  .nav-list { display: flex; min-width: 0; padding: 9px 12px; overflow-x: auto; }
  .nav-item { display: flex; flex: 0 0 auto; min-height: 42px; padding: 0 12px; white-space: nowrap; }
  .rail-bottom { display: none; }
  .topbar { min-height: auto; align-items: flex-start; gap: 14px; padding: 18px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .storage-line { order: -1; width: 100%; justify-content: flex-end; }
  .rail, .surface, .content-grid, .catalog, .inspector { min-width: 0; max-width: 100%; }
  .content-grid { display: block; overflow: auto; }
  .catalog { min-height: 0; overflow: visible; }
  .inspector { overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
  .product-list { padding-bottom: 20px; }
  .table-head, .product-row { grid-template-columns: 34px minmax(0, 1fr) 76px 74px 34px; }
  .table-head span:nth-child(3), .product-source, .table-head span:nth-child(5), .product-row > .status:nth-of-type(2) { display: none; }
  .export-bar { flex-wrap: wrap; padding: 12px 16px; }
  .export-bar-summary { flex-basis: 100%; }
  .export-dialog .dialog-grid { grid-template-columns: 1fr; }
  .setup-steps { grid-template-columns: 1fr; }
  .setup-steps li { min-height: 88px; }
}

@media (min-width: 901px) {
  @container (max-width: 720px) {
    .table-head, .product-row { grid-template-columns: 28px minmax(0, 1fr) 44px 44px 64px 26px; column-gap: 8px; }
    .table-head > :nth-child(3), .product-source { display: none; }
    .product-summary { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
    .product-thumb { width: 60px; height: 60px; }
    .catalog-tools { padding-left: 16px; padding-right: 16px; }
    .search { min-width: 140px; }
  }
}

@media (max-width: 640px) {
  .brand { padding: 0 12px; font-size: 15px; }
  .brand-bars { display: none; }
  .nav-item svg, .nav-item b { display: none; }
  .topbar { display: block; }
  .topbar-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .topbar-actions .storage-line { grid-column: 1 / -1; justify-content: flex-start; }
  .topbar-actions .primary-button { grid-column: 1 / -1; }
  .catalog-tools { flex-wrap: wrap; padding: 10px 12px; }
  .search { flex: 1 0 100%; width: 100%; min-width: 0; order: 2; }
  .export-bar .primary-button, .export-bar .outline-button { flex: 1; min-width: 0; padding: 0 10px; }
  .detail-section, .inspector-title { padding-left: 16px; padding-right: 16px; }
  .text-field-list { margin-left: -16px; margin-right: -16px; }
  .table-head { display: none; }
  .product-row { grid-template-columns: 30px minmax(0, 1fr) 34px; min-height: 90px; padding: 12px; }
  .product-row > :not(.row-checkbox):not(.product-summary):not(.menu-button) { display: none; }
  .product-thumb { width: 54px; height: 54px; }
  .queue-table { margin: 0 10px 20px; }
  .queue-table-head { display: none; }
  .queue-row { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; }
  .queue-row > .status, .queue-row > .outline-button { grid-column: 2; justify-self: start; }
  .queue-row > .icon-button { grid-column: 3; grid-row: 1; }
  .runner-panel { grid-template-columns: 1fr; padding: 20px 16px; }
  .runner-main { min-width: 0; }
  .runner-main p { overflow-wrap: anywhere; white-space: normal; }
  .runner-stats, .runner-actions { grid-column: 1; grid-row: auto; }
  .workflow-stages { padding: 22px 16px; }
  .workflow-stage { padding-left: 58px; }
  .online-setup-dialog, .export-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .online-setup-body { padding: 16px; }
  .setup-actions { display: grid; grid-template-columns: 1fr; }
  .export-check, .export-result-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-header, .dialog-footer { padding-left: 16px; padding-right: 16px; }
}