:root {
  --uie-primary: #5b43f5;
  --uie-primary-strong: #4930e8;
  --uie-primary-soft: #f1efff;
  --uie-blue: #2563eb;
  --uie-title: #1e293b;
  --uie-text: #475569;
  --uie-muted: #94a3b8;
  --uie-border: #e2e8f0;
  --uie-surface: #ffffff;
  --uie-bg: #f5f7fb;
  --uie-success: #059669;
  --uie-danger: #dc2626;
  --uie-shadow: 0 8px 28px rgba(30, 41, 59, 0.07);
  --uie-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--uie-bg);
  color: var(--uie-text);
  font-family: var(--uie-font);
  font-size: 14px;
  line-height: 1.6;
}
button, input, textarea, select { font: inherit; }
button, select, [tabindex] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.uie-shell {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) auto;
  min-height: calc(100vh - var(--yh-site-header-height, 142px));
}

.uie-sidebar {
  position: sticky;
  top: var(--yh-site-header-height, 142px);
  align-self: start;
  height: calc(100vh - var(--yh-site-header-height, 142px));
  overflow-y: auto;
  padding: 22px 14px;
  background: #fff;
  border-right: 1px solid var(--uie-border);
}
.uie-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 14px;
  color: var(--uie-title);
  font-size: 16px;
  font-weight: 700;
}
.uie-brand i { color: var(--uie-primary); font-size: 20px; }
.uie-sidebar > a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: 4px 0;
  padding: 9px 10px;
  border-radius: 9px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: .18s ease;
}
.uie-sidebar > a:hover { color: var(--uie-primary); background: #f7f6ff; }
.uie-sidebar > a.active { color: var(--uie-primary); background: var(--uie-primary-soft); }
.uie-sidebar > a i { font-size: 18px; }
.uie-history-rail {
  position: sticky;
  top: var(--yh-site-header-height, 142px);
  align-self: start;
  display: flex;
  width: 300px;
  height: calc(100vh - var(--yh-site-header-height, 142px));
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-left: 1px solid var(--uie-border);
  transition: width .3s ease;
}
.uie-history-rail.collapsed { width: 60px; }
.uie-history-head {
  display: flex;
  width: 100%;
  height: 57px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, .65);
  white-space: nowrap;
}
.uie-history-title { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--uie-title); }
.uie-history-title i { flex: none; color: var(--uie-blue); font-size: 18px; }
.uie-history-title strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.uie-history-toggle {
  display: flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--uie-border);
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.uie-history-toggle:hover { border-color: #93c5fd; background: #eff6ff; color: var(--uie-blue); }
.uie-history-toggle i { font-size: 16px; }
.uie-history-rail.collapsed .uie-history-head { height: auto; flex-direction: column; padding: 16px 0; gap: 12px; }
.uie-history-rail.collapsed .uie-history-title strong { display: none; }
.uie-history-content { min-height: 0; flex: 1; overflow: hidden; }
.uie-conversation-list {
  display: block;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d7dce5 transparent;
}
.uie-conversation-list::-webkit-scrollbar { width: 5px; }
.uie-conversation-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #d7dce5; }
.uie-conversation-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
  color: var(--uie-text);
  text-align: left;
  transition: padding .2s ease, background .2s ease;
}
.uie-conversation-item:hover,
.uie-conversation-item.active { padding-left: 20px; background: #f1f5f9; }
.uie-conversation-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.uie-conversation-row > i { flex: none; color: var(--uie-blue); font-size: 20px; }
.uie-conversation-info { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.uie-conversation-info strong { overflow: hidden; color: #334155; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.uie-conversation-info span { margin-top: 2px; color: var(--uie-muted); font-size: 10px; white-space: nowrap; }
.uie-conversation-thumb { display: block; width: 100%; max-height: 120px; border: 1px solid #f1f5f9; border-radius: 8px; background: #f8fafc; object-fit: cover; }
.uie-conversation-thumb.is-broken { display: none; }
.uie-history-rail.collapsed .uie-conversation-item { align-items: center; padding: 8px 0; }
.uie-history-rail.collapsed .uie-conversation-item:hover { padding-left: 0; background: #eff6ff; }
.uie-history-rail.collapsed .uie-conversation-row { display: none; }
.uie-history-rail.collapsed .uie-conversation-thumb { width: 36px; height: 36px; max-height: none; border-radius: 8px; }
.uie-muted { padding: 18px 10px; color: var(--uie-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.uie-history-rail.collapsed .uie-muted { padding-inline: 8px; writing-mode: vertical-rl; letter-spacing: 2px; }

.uie-workspace { min-width: 0; padding: 24px clamp(18px, 2.4vw, 38px) 42px; }
.uie-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: min(1440px, 100%);
  margin: 0 auto 18px;
}
.uie-page-head h1 { margin: 0; color: var(--uie-title); font-size: 24px; line-height: 1.35; font-weight: 700; }
.uie-page-head p { margin: 5px 0 0; color: var(--uie-muted); font-size: 13px; }
.uie-oss-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--uie-success);
  font-size: 12px;
  font-weight: 600;
}

.uie-grid {
  display: grid;
  grid-template-columns: minmax(380px, 480px) minmax(520px, 1fr);
  gap: 18px;
  width: min(1440px, 100%);
  margin: 0 auto;
  align-items: start;
}
.uie-card {
  min-width: 0;
  border: 1px solid var(--uie-border);
  border-radius: 16px;
  background: var(--uie-surface);
  box-shadow: var(--uie-shadow);
}
.uie-control-card { padding: 22px; }
.uie-section-title, .uie-model-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.uie-prompt-title, .uie-model-title { margin-top: 24px; }
.uie-step {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--uie-primary-soft);
  color: var(--uie-primary);
  font-size: 12px;
  font-weight: 700;
}
.uie-section-title h2, .uie-model-title h2, .uie-result-head h2 { margin: 0; color: var(--uie-title); font-size: 16px; line-height: 1.4; font-weight: 700; }
.uie-section-title p, .uie-model-title p, .uie-result-head p { margin: 2px 0 0; color: var(--uie-muted); font-size: 12px; line-height: 1.5; }

.uie-drop {
  position: relative;
  display: grid;
  min-height: 210px;
  overflow: hidden;
  place-items: center;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  outline: none;
  transition: .18s ease;
}
.uie-drop:hover, .uie-drop:focus-visible, .uie-drop.dragover { border-color: var(--uie-primary); background: #faf9ff; }
#primaryEmpty { display: grid; place-items: center; gap: 4px; color: var(--uie-muted); text-align: center; }
#primaryEmpty i { margin-bottom: 5px; color: #8293ac; font-size: 38px; }
#primaryEmpty strong { color: #64748b; font-size: 14px; font-weight: 600; }
#primaryEmpty span { font-size: 12px; }
#primaryPreview { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.uie-small-action {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 8px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(5px);
}
.uie-box-layer { position: absolute; inset: 0; z-index: 2; cursor: crosshair; }
.uie-box { position: absolute; border: 2px solid var(--uie-primary); background: rgba(91,67,245,.12); pointer-events: none; }

.uie-reference-head { display: flex; justify-content: space-between; margin: 15px 1px 8px; color: var(--uie-title); font-size: 13px; font-weight: 700; }
.uie-reference-head label span, .uie-reference-head > span { color: var(--uie-muted); font-size: 11px; font-weight: 400; }
.uie-reference-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.uie-reference-grid > button, .uie-reference-item {
  position: relative;
  display: grid;
  min-height: 70px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--uie-border);
  border-radius: 9px;
  background: #f8fafc;
  color: #64748b;
}
.uie-reference-grid > button { gap: 1px; font-size: 11px; }
.uie-reference-grid > button i { font-size: 18px; }
.uie-reference-item img { width: 100%; height: 70px; object-fit: cover; }
.uie-reference-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15,23,42,.72);
  color: #fff;
  font-size: 12px;
}

.uie-scene-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.uie-scene-heading strong { color: var(--uie-title); font-size: 13px; }
.uie-scene-heading span { color: var(--uie-muted); font-size: 11px; }
.uie-quick-categories { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.uie-quick-categories::-webkit-scrollbar { display: none; }
.uie-quick-categories button { flex: 0 0 auto; min-height: 29px; padding: 5px 10px; border: 1px solid #e3e8f2; border-radius: 999px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 600; white-space: nowrap; }
.uie-quick-categories button:hover, .uie-quick-categories button.active { border-color: #bdb3ff; background: var(--uie-primary-soft); color: var(--uie-primary); }
.uie-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.uie-quick-actions button {
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid var(--uie-border);
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}
.uie-quick-actions button:hover, .uie-quick-actions button.active { border-color: #bdb3ff; background: var(--uie-primary-soft); color: var(--uie-primary); }
.uie-quick-actions button i { margin-right: 2px; }
.uie-quick-model-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; color: var(--uie-muted); font-size: 11px; line-height: 1.55; }
.uie-quick-model-hint i { flex: 0 0 auto; margin-top: 2px; color: var(--uie-primary); }
#prompt, #negativePrompt {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 11px 13px;
  overflow: hidden;
  resize: none;
  border: 1px solid var(--uie-border);
  border-radius: 10px;
  outline: none;
  color: var(--uie-title);
  font-size: 14px;
  line-height: 1.65;
  transition: .18s ease;
}
#negativePrompt { min-height: 74px; }
#prompt:focus, #negativePrompt:focus { border-color: var(--uie-primary); box-shadow: 0 0 0 3px rgba(91,67,245,.1); }
#prompt::placeholder, #negativePrompt::placeholder { color: #b2becf; }
.uie-char-count { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--uie-muted); font-size: 11px; }
#analysisHint.ready { color: var(--uie-success); }
#analysisHint.error { color: var(--uie-danger); }

.uie-local-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid #ddd8ff;
  border-radius: 10px;
  background: #faf9ff;
}
.uie-local-panel > div { flex: 1; min-width: 0; }
.uie-local-panel strong, .uie-local-panel span { display: block; }
.uie-local-panel strong { color: var(--uie-title); font-size: 12px; }
.uie-local-panel span { color: var(--uie-muted); font-size: 11px; }
.uie-local-panel button, .uie-result-head button, .uie-error button {
  flex: none;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #d7d0ff;
  border-radius: 8px;
  background: #fff;
  color: var(--uie-primary);
  font-size: 12px;
  font-weight: 600;
}

.uie-model-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 68px;
  border: 1px solid var(--uie-border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--uie-muted);
  font-size: 12px;
}
.uie-model-loading.error, .uie-model-error { color: var(--uie-danger); }
.uie-mini-spinner { width: 17px; height: 17px; border: 2px solid #e7e3ff; border-top-color: var(--uie-primary); border-radius: 50%; animation: uie-spin .8s linear infinite; }
.uie-model-select-label {
  display: grid;
  gap: 6px;
  color: var(--uie-title);
  font-size: 12px;
  font-weight: 600;
}
.uie-model-detail {
  margin-top: 9px;
  padding: 11px 12px;
  border: 1px solid #ddd8ff;
  border-radius: 10px;
  background: #faf9ff;
}
.uie-model-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.uie-model-detail-head > div { min-width: 0; }
.uie-model-detail-head strong, .uie-model-detail-head span { display: block; }
.uie-model-detail-head strong { color: var(--uie-title); font-size: 14px; line-height: 1.4; }
.uie-model-detail-head span { margin-top: 1px; color: #64748b; font-size: 11px; }
.uie-model-detail-head em {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--uie-success);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.uie-model-detail-row { display: flex; gap: 7px; margin-top: 7px; color: #64748b; font-size: 11px; line-height: 1.5; }
.uie-model-detail-row b { flex: none; color: var(--uie-title); font-weight: 600; }
.uie-model-price-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.uie-model-price-list span { padding: 3px 7px; border-radius: 6px; background: #eeeaff; color: var(--uie-primary); font-size: 11px; font-weight: 600; }
.uie-model-detail > p { margin: 7px 0 0; color: var(--uie-muted); font-size: 11px; line-height: 1.4; }
.uie-compatibility-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #fde68a;
  border-radius: 9px;
  background: #fffbeb;
  color: #a16207;
  font-size: 11px;
  line-height: 1.5;
}
.uie-compatibility-warning.success { border-color: #bbf7d0; background: #f0fdf4; color: #047857; }
.uie-compatibility-warning.error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.uie-compatibility-warning i { flex: none; margin-top: 2px; }

.uie-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.uie-settings-grid label, .uie-professional > label { display: grid; gap: 6px; color: var(--uie-title); font-size: 12px; font-weight: 600; }
select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--uie-border);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--uie-title);
  font-size: 13px;
}
select:focus { border-color: var(--uie-primary); box-shadow: 0 0 0 3px rgba(91,67,245,.1); }
.uie-professional { display: grid; gap: 11px; margin-top: 12px; padding: 12px; border: 1px solid #ddd8ff; border-radius: 10px; background: #faf9ff; }
.uie-advanced-settings { margin-top: 11px; border: 1px solid var(--uie-border); border-radius: 9px; background: #fff; }
.uie-advanced-settings summary { padding: 9px 11px; color: #64748b; font-size: 12px; font-weight: 600; cursor: pointer; }
.uie-advanced-settings .uie-professional { margin: 0 10px 10px; }
.uie-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.uie-checks label { display: flex; align-items: center; gap: 6px; color: var(--uie-text); font-size: 12px; }
.uie-checks input { accent-color: var(--uie-primary); }
.uie-preserve-help { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--uie-muted); font-size: 12px; line-height: 1.6; }
.uie-preserve-help i { flex: 0 0 auto; margin-top: 2px; color: var(--uie-primary); }
.uie-estimate { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: #f8fafc; color: var(--uie-muted); font-size: 12px; }
.uie-estimate strong { color: var(--uie-primary); font-size: 13px; }
.uie-generate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #694df7, #4f36ea);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(91,67,245,.22);
}
.uie-generate:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(91,67,245,.28); }
.uie-generate:disabled { cursor: not-allowed; background: #dbe2ec; color: #94a3b8; box-shadow: none; }

.uie-result-card {
  position: sticky;
  top: calc(var(--yh-site-header-height, 142px) + 18px);
  display: flex;
  flex-direction: column;
  min-height: 660px;
  padding: 22px;
}
.uie-result-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #eef2f7; }
.uie-result-head button { color: var(--uie-danger); border-color: #fecaca; }
.uie-empty-result, .uie-processing, .uie-error {
  display: flex;
  flex: 1;
  min-height: 550px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 18px;
  text-align: center;
}
.uie-result-icon { display: grid; width: 66px; height: 66px; margin-bottom: 15px; place-items: center; border-radius: 18px; background: var(--uie-primary-soft); color: var(--uie-primary); font-size: 30px; }
.uie-empty-result h3, .uie-processing h3, .uie-error h3 { margin: 0; color: var(--uie-title); font-size: 18px; line-height: 1.4; }
.uie-empty-result p, .uie-processing p, .uie-error p { margin: 8px 0 0; color: var(--uie-muted); font-size: 13px; }
.uie-flow { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #64748b; }
.uie-flow span { padding: 9px 13px; border: 1px solid var(--uie-border); border-radius: 9px; background: #f8fafc; font-size: 12px; }
.uie-flow i { color: #cbd5e1; }
.uie-spinner { width: 42px; height: 42px; margin-bottom: 18px; border: 4px solid #e7e3ff; border-top-color: var(--uie-primary); border-radius: 50%; animation: uie-spin .8s linear infinite; }
@keyframes uie-spin { to { transform: rotate(360deg); } }
.uie-result-view { padding-top: 16px; }
.uie-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uie-compare figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--uie-border); border-radius: 12px; background: #f8fafc; }
.uie-compare figcaption { padding: 8px 11px; border-bottom: 1px solid var(--uie-border); color: #64748b; font-size: 12px; font-weight: 600; }
.uie-compare img { display: block; width: 100%; height: min(54vh, 600px); min-height: 300px; object-fit: contain; }
.uie-quality { margin-top: 12px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 9px; background: #fffbeb; color: #a16207; font-size: 12px; }
.uie-result-meta { margin-top: 12px; color: #64748b; font-size: 12px; font-weight: 600; }
.uie-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.uie-result-actions button, .uie-result-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--uie-border);
  border-radius: 9px;
  background: #fff;
  color: var(--uie-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.uie-result-actions button:hover, .uie-result-actions a:hover { border-color: var(--uie-primary); color: var(--uie-primary); }
.uie-result-actions a { margin-left: auto; background: var(--uie-primary); border-color: var(--uie-primary); color: #fff; }
.uie-result-actions a:hover { background: var(--uie-primary-strong); color: #fff; }
.uie-error > i { margin-bottom: 12px; color: var(--uie-danger); font-size: 42px; }
.uie-error > div { display: flex; gap: 8px; margin-top: 16px; }

.uie-toast {
  position: fixed;
  z-index: 10000;
  right: 22px;
  bottom: 22px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(15,23,42,.22);
}
.uie-toast.error { background: #b91c1c; }
.uie-toast.success { background: #047857; }

@media (max-width: 1320px) {
  .uie-grid { grid-template-columns: 1fr; }
  .uie-result-card { position: static; min-height: 520px; }
}

@media (max-width: 1180px) {
  .uie-workspace { padding-inline: 16px; }
}

@media (max-width: 920px) {
  .uie-shell { display: block; }
  .uie-sidebar { position: static; display: flex; height: auto; overflow-x: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--uie-border); }
  .uie-brand { display: none !important; }
  .uie-sidebar > a { flex: none; min-height: 36px; margin: 0 3px; padding: 7px 10px; white-space: nowrap; }
  .uie-workspace { padding: 18px 14px 34px; }
  .uie-history-rail { display: none; }
  .uie-grid { grid-template-columns: 1fr; }
  .uie-result-card { position: static; min-height: 520px; }
  .uie-empty-result, .uie-processing, .uie-error { min-height: 420px; }
}

@media (max-width: 560px) {
  .uie-workspace { padding: 14px 10px 26px; }
  .uie-page-head { display: block; margin-bottom: 13px; }
  .uie-page-head h1 { font-size: 20px; }
  .uie-page-head p { font-size: 12px; }
  .uie-oss-tag { margin-top: 9px; }
  .uie-control-card, .uie-result-card { padding: 15px; border-radius: 13px; }
  .uie-drop { min-height: 180px; }
  .uie-reference-grid { grid-template-columns: repeat(3, 1fr); }
  .uie-model-detail-head { display: block; }
  .uie-model-detail-head em { display: inline-block; margin-top: 6px; }
  .uie-settings-grid { grid-template-columns: 1fr; }
  .uie-local-panel { align-items: stretch; flex-wrap: wrap; }
  .uie-local-panel > div { flex-basis: 100%; }
  .uie-checks { grid-template-columns: 1fr; }
  .uie-compare { grid-template-columns: 1fr; }
  .uie-compare img { height: auto; min-height: 240px; max-height: 480px; }
  .uie-flow { gap: 5px; }
  .uie-flow span { padding: 7px 8px; }
  .uie-result-actions > * { flex: 1 1 calc(50% - 8px); margin-left: 0 !important; }
}

/* Desktop workspace stays fixed; only the left settings card scrolls. */
@media (min-width: 1321px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .uie-shell {
    height: calc(100vh - var(--yh-site-header-height, 142px));
    min-height: 0;
    overflow: hidden;
  }

  .uie-history-rail {
    position: static;
    top: auto;
    height: 100%;
  }

  .uie-workspace {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 18px;
  }

  .uie-page-head { flex: none; }

  .uie-grid {
    min-height: 0;
    flex: 1;
    align-items: stretch;
  }

  .uie-control-card {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  .uie-control-card::-webkit-scrollbar { width: 6px; }
  .uie-control-card::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
  .uie-control-card::-webkit-scrollbar-track { background: transparent; }

  .uie-result-card {
    position: static;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .uie-result-view {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }

  .uie-compare {
    min-height: 0;
    flex: 1;
  }

  .uie-compare figure {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .uie-compare img {
    height: 0;
    min-height: 0;
    max-height: none;
    flex: 1;
  }

  .uie-quality,
  .uie-result-meta,
  .uie-result-actions { flex: none; }

  .uie-empty-result,
  .uie-processing,
  .uie-error { min-height: 0; }
}