/* 花型工作台 · 通用组件与浏览器主壳。 */

/* 旧入口的顶栏保持可读，与新版工作面共用同一套令牌。 */
.wb-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.wb-topbar .brand { color: var(--text); font-size: 15px; font-weight: 700; }
.wb-topbar .brand .proto {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  color: var(--warn);
  border: 1px solid #e4c59a;
  border-radius: 4px;
  font-size: 11px;
  vertical-align: 2px;
}
.wb-topbar nav { display: flex; gap: 4px; }
.wb-topbar nav a { padding: 4px 6px; color: var(--text-2); font-size: 13px; }
.wb-topbar nav a:hover, .wb-topbar nav a.on { color: var(--text); }
.wb-topbar nav a.on { font-weight: 700; }
.wb-topbar .spacer { flex: 1; }

/* 按钮、输入与信息组件。 */
.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.25;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.wb-btn:hover { color: var(--accent-strong); background: var(--accent-weak); border-color: #eca795; }
.wb-btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 650; }
.wb-btn.primary:hover { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }
.wb-btn.danger { color: var(--danger); border-color: #e6abab; }
.wb-btn.ghost { color: var(--text-2); background: transparent; border-color: transparent; }
.wb-btn.ghost:hover { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.wb-btn.on { color: var(--accent-strong); background: var(--accent-weak); border-color: #eca795; }
.wb-btn:disabled { opacity: .46; cursor: not-allowed; }
.wb-btn:focus-visible, .wb-nav-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #e9a18f;
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, #fff);
  outline-offset: 2px;
}

.wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.wb-chip:hover { border-color: #eca795; color: var(--accent-strong); }
.wb-chip.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.wb-chip.static { cursor: default; }
.wb-chip .n { opacity: .65; font-size: 11px; }
.wb-chip.machine { border-style: dashed; }
.wb-chip.low { color: var(--warn); border-color: #e4c59a; }

.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.wb-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.wb-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(21, 31, 27, .08); }
.wb-card .swatch { aspect-ratio: 1 / 1; background-color: var(--canvas-bg); background-position: center; background-size: cover; }
.wb-card .body { padding: 10px 12px 12px; }
.wb-card .title { color: var(--text); font-size: 13px; font-weight: 650; }
.wb-card .meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.wb-palette { display: flex; flex: 1; height: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.wb-palette i { flex: 1; }
.wb-sets { color: var(--text-2); font-size: 11px; white-space: nowrap; }

.wb-input, .wb-select {
  min-height: 34px;
  padding: 6px 9px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  font-size: 13px;
}
.wb-input:focus, .wb-select:focus { outline: none; border-color: #e99681; box-shadow: 0 0 0 3px rgba(220, 97, 73, .12); }

.wb-modal-mask { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(20, 28, 25, .36); }
.wb-modal { width: min(560px, 92vw); max-height: 86vh; overflow: auto; padding: 20px 22px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.wb-modal h3 { margin: 0 0 12px; color: var(--text); font-size: 16px; }

.wb-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border-radius: 4px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.wb-badge.ok { color: var(--ok); background: #e7f4ef; }
.wb-badge.warn { color: var(--warn); background: #fbf0dc; }
.wb-badge.err { color: var(--danger); background: #fbe9e7; }
.wb-badge.dim { color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); }

.wb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wb-table th, .wb-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.wb-table th { color: var(--text-2); font-size: 12px; font-weight: 650; }
.wb-panel { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.wb-panel h4 { margin: 0 0 10px; color: var(--text-2); font-size: 13px; font-weight: 650; }
.wb-toast { position: fixed; bottom: 24px; left: 50%; z-index: 200; padding: 9px 18px; color: #fff; background: #242c29; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .2s; }
.wb-toast.show { opacity: .95; }
.wb-page { max-width: 1180px; margin: 0 auto; padding: 20px; }
.wb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wb-hint { color: var(--text-3); font-size: 12px; }

/* 浏览器工作台主壳。 */
.wb-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 100svh; height: 100dvh; min-height: 100svh; overflow: hidden; background: var(--bg); }
.wb-shell.generate-shell { grid-template-columns: 172px minmax(0, 1fr); }
.wb-shell.generate-shell .wb-sidebar { padding-right: 8px; padding-left: 8px; }
.wb-shell.generate-shell .wb-brand-mark { margin-right: 4px; margin-left: 4px; }
.wb-shell.generate-shell .wb-nav-link { padding-right: 8px; padding-left: 11px; }
.wb-shell.generate-shell .wb-identity { margin-right: 4px; margin-left: 4px; padding-right: 8px; padding-left: 8px; }
.wb-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 18px 12px 12px;
  color: var(--nav-text);
  background: var(--nav);
  border-right: 1px solid var(--nav-line);
  overflow: auto;
}
.wb-brand-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0 6px 30px;
  color: var(--nav-text);
}
.wb-brand-sign {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1;
}
.wb-brand-copy { display: grid; min-width: 0; gap: 1px; }
.wb-brand-copy strong { overflow: hidden; color: var(--nav-text); font-size: 14px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.wb-brand-short { display: none; }
.wb-brand-copy small { overflow: hidden; color: var(--nav-muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.wb-nav-kicker { margin: 0 10px 7px; color: #78827d; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.wb-nav-link {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  margin: 1px 0;
  padding: 8px 12px 8px 15px;
  color: var(--nav-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  line-height: 1.2;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.wb-nav-link::before { position: absolute; top: 13px; bottom: 13px; left: 0; width: 2px; content: ""; background: transparent; border-radius: 0 2px 2px 0; }
.wb-nav-link strong { overflow: hidden; font-size: 13px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.wb-nav-link small { overflow: hidden; color: #77817c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wb-nav-link:hover { color: var(--nav-text); background: var(--nav-raised); }
.wb-nav-link.is-active { color: #fff; background: #252c29; border-color: #313b36; }
.wb-nav-link.is-active::before { background: var(--accent); }
.wb-nav-link.is-active small { color: #c0c8c4; }
.wb-nav-spacer { flex: 1; }
.wb-identity { min-width: 0; margin: 16px 6px 0; padding: 11px 10px; color: var(--nav-muted); background: #1d2421; border: 1px solid #2a332f; border-radius: var(--radius-s); font-size: 10px; line-height: 1.35; }
.wb-identity strong { display: block; overflow: hidden; margin-bottom: 2px; color: var(--nav-text); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.wb-content { display: flex; flex-direction: column; min-width: 0; height: 100%; min-height: 0; overflow: hidden; background: var(--bg); }
.wb-content > #page-root { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
.wb-page-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.wb-page-head h1 { margin: 0; color: var(--text); font-size: 20px; font-weight: 720; letter-spacing: 0; line-height: 1.2; }
.wb-page-head .wb-hint { margin-left: auto; }
.wb-page-body { flex: 1; min-height: 0; padding: 22px 28px; overflow: auto; }
.wb-empty-state { max-width: 540px; margin: 13vh auto; padding: 28px 24px; color: var(--text-2); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
.wb-empty-state h2 { margin: 0 0 6px; color: var(--text); font-size: 17px; }
.wb-empty-state p { margin: 0; }

/* 生成页：话题在左、图像规格在中、对话在右。 */
.generate-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
.generate-sidebar, .generate-workspace, .generate-chat { min-width: 0; min-height: 0; }
.generate-sidebar { padding: 19px 12px; background: #f7f8f7; border-right: 1px solid var(--line); overflow: auto; }
.generate-workspace { padding: 24px 28px 34px; background: var(--bg); overflow: auto; }
.generate-workspace > * { max-width: 840px; margin-right: auto; margin-left: auto; }
.generate-chat { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); }
.topic-head { display: flex; align-items: center; gap: 8px; margin: 0 3px 14px; }
.topic-head h2 { flex: 1; margin: 0; color: var(--text); font-size: 13px; font-weight: 700; }
.topic-head .wb-btn { min-height: 30px; padding: 5px 8px; font-size: 11px; }
.topic-list { display: flex; flex-direction: column; gap: 3px; }
.topic-item { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; padding: 9px 8px; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-s); cursor: pointer; font: inherit; text-align: left; }
.topic-item:hover { color: var(--text); background: #eef1ef; }
.topic-item.is-active { color: var(--text); background: var(--accent-weak); border-color: #f3c7bb; }
.topic-dot { flex: none; width: 7px; height: 7px; background: #a9b1ad; border-radius: 50%; }
.topic-item.is-active .topic-dot { background: var(--accent); }
.topic-title { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.topic-stage { flex: none; color: var(--text-3); font-size: 10px; }
.generate-card { margin-bottom: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.generate-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.generate-card > header h2 { flex: 1; margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.generate-card > header .wb-hint { margin-left: auto; text-align: right; }
.spec-grid-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.spec-field-v2 { min-width: 0; }
.spec-field-v2.full { grid-column: 1 / -1; }
.spec-field-v2 label { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; color: var(--text-2); font-size: 11px; font-weight: 620; }
.spec-field-v2 label.required::after { content: "必填"; color: var(--warn); font-size: 10px; font-weight: 500; }
.spec-field-v2 input, .spec-field-v2 select, .spec-field-v2 textarea { width: 100%; min-height: 37px; padding: 8px 9px; color: var(--text); background: #fbfcfb; border: 1px solid var(--line-strong); border-radius: var(--radius-s); font-size: 12px; }
.spec-field-v2 textarea { min-height: 82px; resize: vertical; }
.spec-field-v2 input:focus, .spec-field-v2 select:focus, .spec-field-v2 textarea:focus { outline: 0; border-color: #e99681; box-shadow: 0 0 0 3px rgba(220, 97, 73, .12); }
.spec-field-v2.is-missing label { color: var(--warn); }
.preview-block { margin-top: 10px; padding: 11px 12px; background: #f7f8f7; border: 1px solid #e8ece9; border-left: 3px solid #edb8a9; border-radius: var(--radius-s); }
.preview-block + .preview-block { margin-top: 8px; }
.preview-title { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 12px; font-weight: 700; }
.preview-text { margin: 5px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.preview-source { margin-top: 5px; color: var(--text-3); font-size: 10px; }
.chat-panel-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 14px; border-bottom: 1px solid var(--line); }
.chat-panel-head h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.chat-panel-head small, .chat-panel-status { color: var(--text-3); font-size: 10px; }
.chat-panel-status { margin-left: auto; }
.chat-panel-log { display: flex; flex: 1; flex-direction: column; gap: 11px; min-height: 0; padding: 16px; overflow: auto; }
.chat-message { max-width: 92%; padding: 9px 11px; border-radius: var(--radius-s); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-message.user { align-self: flex-end; color: #fff; background: var(--accent); border-bottom-right-radius: 2px; }
.chat-message.assistant { align-self: flex-start; color: var(--text); background: #f3f5f4; border-bottom-left-radius: 2px; }
.chat-message.system { align-self: center; padding: 2px; color: var(--text-3); font-size: 11px; }
.chat-panel-input { padding: 12px 14px 14px; background: #fcfdfc; border-top: 1px solid var(--line); }
.chat-panel-input textarea { display: block; width: 100%; min-height: 72px; padding: 9px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-s); font-size: 12px; resize: vertical; }
.chat-panel-input textarea:focus { outline: 0; border-color: #e99681; box-shadow: 0 0 0 3px rgba(220, 97, 73, .12); }
.chat-panel-actions { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.chat-panel-actions .wb-hint { flex: 1; }
.stage-bar { display: flex; align-items: flex-start; gap: 0; padding: 3px 0 7px; }
.stage-step { position: relative; flex: 1; min-width: 0; color: var(--text-3); font-size: 10px; text-align: center; }
.stage-step::before { position: absolute; top: 8px; right: 0; left: 0; z-index: 0; height: 1px; content: ""; background: var(--line-strong); }
.stage-step:first-child::before { left: 50%; }
.stage-step:last-child::before { right: 50%; }
.stage-step-dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin: 0 auto 5px; color: var(--text-3); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; font-size: 9px; }
.stage-step.done, .stage-step.active { color: var(--text); }
.stage-step.done .stage-step-dot { color: #fff; background: var(--ok); border-color: var(--ok); }
.stage-step.active .stage-step-dot { color: #fff; background: var(--accent); border-color: var(--accent); }
.stage-step.active { font-weight: 700; }
.stage-step-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 动态页面模块的轻量覆盖。选择器特意带主壳，确保晚挂载的页内样式不会回退到深色原型。 */
body .wb-shell .inspire-toolbar, body .wb-shell .assets-tabs { padding-right: 28px; padding-left: 28px; background: rgba(255, 255, 255, .92); border-bottom-color: var(--line); }
body .wb-shell .inspire-toolbar { gap: 10px; padding-top: 13px; padding-bottom: 13px; }
body .wb-shell .inspire-search, body .wb-shell .inspire-filter { color: var(--text); background: #fbfcfb; border-color: var(--line-strong); }
body .wb-shell .inspire-search:focus { border-color: #e99681; box-shadow: 0 0 0 3px rgba(220, 97, 73, .12); }
body .wb-shell .inspire-scope { border-color: var(--line-strong); }
body .wb-shell .inspire-scope button { color: var(--text-2); border-right-color: var(--line-strong); }
body .wb-shell .inspire-scope button.is-active { color: #fff; background: var(--accent); }
body .wb-shell .inspire-main, body .wb-shell .assets-body { padding: 22px 28px 38px; background: var(--bg); }
body .wb-shell .inspire-group + .inspire-group, body .wb-shell .asset-date-group + .asset-date-group { margin-top: 30px; }
body .wb-shell .inspire-group-head h2, body .wb-shell .asset-date-head h2 { font-size: 15px; }
body .wb-shell .asset-grid { gap: 14px; }
body .wb-shell .asset-card, body .wb-shell .batch-history-card, body .wb-shell .candidate-card, body .wb-shell .version-card { border-color: var(--line); box-shadow: var(--shadow); }
body .wb-shell .asset-card:hover, body .wb-shell .batch-history-card:hover { border-color: var(--line-strong); box-shadow: 0 3px 10px rgba(21, 31, 27, .07); }
body .wb-shell .asset-card.is-selected { border-color: #e99681; box-shadow: 0 0 0 2px rgba(220, 97, 73, .13); }
body .wb-shell .asset-card-preview, body .wb-shell .candidate-preview { background-color: #eef1ef; }
body .wb-shell .batch-history-art { background: #edf1ef; }
body .wb-shell .batch-history-art::before { background: none; }
body .wb-shell .batch-history-art .batch-stage { color: var(--accent-strong); background: var(--accent-weak); border-color: #f3c7bb; }
body .wb-shell .assets-tab { color: var(--text-3); }
body .wb-shell .assets-tab.is-active { color: var(--accent-strong); border-color: var(--accent); font-weight: 650; }
body .wb-shell .candidate-filter button.is-active { color: var(--accent-strong); background: var(--accent-weak); border-color: #e99681; }
body .wb-shell .inspire-collection-bar { right: 28px; bottom: 22px; left: 236px; color: var(--text); background: rgba(255, 255, 255, .94); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
body .wb-shell .inspire-collection-count { color: var(--text); }
body .wb-shell .inspire-collection-input { color: var(--text); background: #fbfcfb; border-color: var(--line-strong); }
body .wb-shell .inspire-empty, body .wb-shell .assets-empty { background: var(--surface); border-color: var(--line-strong); }

@media (max-width: 1160px) and (min-width: 901px) {
  .wb-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .wb-sidebar { padding-right: 10px; padding-left: 10px; }
  .generate-layout { grid-template-columns: 184px minmax(0, 1fr) 282px; }
  .generate-workspace { padding-right: 20px; padding-left: 20px; }
  .generate-card { padding: 16px; }
  body .wb-shell .inspire-collection-bar { left: 214px; }
}

@media (max-width: 900px) {
  .wb-shell { display: block; height: auto; min-height: 100svh; overflow: visible; }
  .wb-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 82px repeat(4, minmax(0, 1fr));
    align-items: stretch;
    min-height: 58px;
    height: 58px;
    padding: 6px 7px;
    border-right: 0;
    border-bottom: 1px solid var(--nav-line);
    overflow: hidden;
  }
  .wb-brand-mark { min-width: 0; min-height: 0; margin: 0; padding: 0 6px; }
  .wb-brand-sign { flex-basis: 26px; width: 26px; height: 26px; font-size: 13px; }
  .wb-brand-copy strong { font-size: 12px; }
  .wb-brand-copy .wb-brand-full { display: none; }
  .wb-brand-copy .wb-brand-short { display: block; }
  .wb-brand-copy small, .wb-nav-kicker, .wb-nav-spacer, .wb-identity, .wb-nav-link small { display: none; }
  .wb-nav-link { display: flex; align-items: center; justify-content: center; min-height: 42px; margin: 0; padding: 5px 3px; text-align: center; }
  .wb-nav-link::before { top: auto; right: 17%; bottom: 1px; left: 17%; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .wb-nav-link strong { font-size: 12px; }
  .wb-content { height: auto; min-height: calc(100svh - 58px); overflow: visible; }
  .wb-content > #page-root { overflow: visible; }
  .wb-page-head { position: sticky; top: 58px; z-index: 20; min-height: 64px; padding: 14px 16px; }
  .wb-page-head h1 { font-size: 18px; }
  .wb-page-head .wb-hint { max-width: 42%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .generate-layout { display: flex; flex-direction: column; min-height: 0; }
  .generate-sidebar { order: 0; max-height: 156px; padding: 13px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .generate-workspace { order: 1; padding: 16px; overflow: visible; }
  .generate-chat { order: 2; min-height: 450px; border-top: 1px solid var(--line); border-left: 0; }
  .generate-workspace > * { max-width: none; }
  body .wb-shell .inspire-toolbar, body .wb-shell .assets-tabs { padding-right: 16px; padding-left: 16px; }
  body .wb-shell .inspire-main, body .wb-shell .assets-body { padding: 16px 16px 32px; }
  body .wb-shell .inspire-collection-bar { right: 12px; bottom: 12px; left: 12px; }
}

@media (max-width: 620px) {
  .wb-topbar { gap: 10px; padding: 8px 12px; }
  .wb-topbar .brand { flex: 0 0 auto; white-space: nowrap; }
  .wb-topbar nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .wb-topbar nav::-webkit-scrollbar { display: none; }
  .wb-topbar nav a { flex: 0 0 auto; }
  .wb-topbar .spacer, .wb-topbar > .wb-hint { display: none; }
  .wb-page { padding: 14px 12px; }
  .wb-page-head { gap: 8px; }
  .wb-page-head .wb-hint { font-size: 11px; }
  .generate-card { margin-bottom: 12px; padding: 14px 12px; }
  .generate-card > header { align-items: flex-start; }
  .generate-card > header .wb-hint { max-width: 48%; font-size: 10px; }
  .spec-grid-v2 { grid-template-columns: 1fr; gap: 11px; }
  .spec-field-v2.full { grid-column: auto; }
  .topic-head { margin-bottom: 10px; }
  body .wb-shell .inspire-toolbar { gap: 7px; }
  body .wb-shell .inspire-collection-bar { min-height: 58px; }
}

@media (max-width: 410px) {
  .wb-sidebar { grid-template-columns: 76px repeat(4, minmax(0, 1fr)); }
  .wb-brand-copy strong { font-size: 11px; }
  .wb-brand-sign { flex-basis: 24px; width: 24px; height: 24px; }
  .wb-nav-link strong { font-size: 11px; }
  .wb-page-head .wb-hint { display: none; }
  .wb-page-head .wb-badge { margin-left: auto; }
}