/* Universal Tool Studio — adaptive professional layer
 * Loaded after all base/suite styles. It intentionally normalises hierarchy,
 * spacing and theme integration without forcing every tool into one layout.
 */
:root {
  --ucs-brand: var(--qc-blue, #2563eb);
  --ucs-brand-dark: var(--qc-blue-dark, #1d4ed8);
  --ucs-accent: var(--qc-violet, #7c3aed);
  --ucs-ink: var(--qc-ink, #101828);
  --ucs-text: var(--qc-text, #475467);
  --ucs-muted: var(--qc-muted, #667085);
  --ucs-line: var(--qc-line, #e4e7ec);
  --ucs-soft: var(--qc-soft, #f5f7fb);
  --ucs-success: var(--qc-green, #0e9f6e);
  --ucs-danger: #d92d20;
  --ucs-warning: #b54708;
  --ucs-surface: #fff;
  --ucs-border: var(--ucs-line);
  --ucs-primary: var(--ucs-brand);
  --ucs-surface-soft: var(--ucs-soft);
  --ucs-shadow-sm: 0 8px 24px rgba(16,24,40,.06);
  --ucs-shadow: var(--qc-shadow, 0 18px 50px rgba(16,24,40,.09));
  --ucs-radius: var(--qc-radius, 20px);
}

/* Page / theme alignment ------------------------------------------------ */
.qc-tool-view .ucs-site-main,
.ucs-site-main { width: min(1180px, calc(100% - 40px)); color: var(--ucs-text); }
.qc-tool-view .ucs-converter { box-shadow: none; }
.ucs-site-main::before {
  width: min(900px, 92vw); height: 390px;
  background: radial-gradient(circle, rgba(37,99,235,.095), rgba(124,58,237,.035) 52%, transparent 73%);
}
.ucs-breadcrumb { margin-bottom: 30px; color: var(--ucs-muted); font-weight: 650; }
.ucs-hero { max-width: 860px; margin-bottom: 26px; }
.ucs-hero h1 { margin-bottom: 13px; color: var(--ucs-ink); font-size: clamp(34px,4.4vw,48px); font-weight: 790; letter-spacing: -.038em; }
.ucs-hero p { max-width: 680px; color: var(--ucs-muted); font-size: clamp(16px,1.8vw,18px); line-height: 1.65; }
.ucs-eyebrow,.ucs-section-heading > span { color: var(--ucs-brand); }
.ucs-converter { margin-bottom: 68px; }
.ucs-trust-row { gap: 8px; margin-bottom: 12px; color: var(--ucs-muted); font-size: 11.5px; font-weight: 700; }
.ucs-trust-row span { padding: 6px 9px; border: 1px solid var(--ucs-line); border-radius: 999px; background: rgba(255,255,255,.78); }
.ucs-trust-row i { color: var(--ucs-success); }
.ucs-privacy { max-width: 760px; margin: 12px auto 0; color: var(--ucs-muted); font-size: 11.5px; line-height: 1.55; text-align: center; }

/* Main application surface --------------------------------------------- */
.ucs-app {
  overflow: visible;
  padding: clamp(20px,3.2vw,34px);
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius);
  background: var(--ucs-surface);
  box-shadow: var(--ucs-shadow);
}
.ucs-app::before { height: 3px; border-radius: var(--ucs-radius) var(--ucs-radius) 0 0; background: linear-gradient(90deg,var(--ucs-brand),var(--ucs-accent)); }
.ucs-app.ucs-layout-pdf-studio,
.ucs-app.ucs-layout-image-studio,
.ucs-app.ucs-layout-video-studio,
.ucs-app.ucs-layout-code-studio,
.ucs-app.ucs-layout-zip-studio { overflow: hidden; padding: 0; }
.ucs-shell-pdf-studio,.ucs-shell-image-studio,.ucs-shell-video-studio,.ucs-shell-code-studio,.ucs-shell-zip-studio { max-width: 1180px; }
.ucs-shell-media-editor,.ucs-shell-document-visual,.ucs-shell-visual-editor,.ucs-shell-collection,.ucs-shell-viewer,.ucs-shell-reference-preview { max-width: 1120px; }
.ucs-shell-code-workbench,.ucs-shell-text-workbench,.ucs-shell-data-preview { max-width: 1080px; }
.ucs-shell-compact,.ucs-shell-file-action { max-width: 820px; }

/* Workflow is helpful on task tools, but full studios should open directly. */
.ucs-professional-studio .ucs-app > .ucs-workflow,
.ucs-professional-direct .ucs-app > .ucs-workflow { display: none; }
.ucs-workflow { gap: 7px; margin-bottom: 20px; }
.ucs-workflow li { min-height: 43px; padding: 8px 9px; border-color: var(--ucs-line); background: var(--ucs-soft); color: var(--ucs-muted); font-size: 10.5px; font-weight: 650; }
.ucs-workflow b { border-radius: 7px; background: #eff6ff; color: var(--ucs-brand); }

/* Control hierarchy ----------------------------------------------------- */
.ucs-field { gap: 7px; margin-bottom: 15px; color: var(--ucs-ink); font-size: 12.5px; font-weight: 700; }
.ucs-field > span:first-child { line-height: 1.35; }
.ucs-field input,.ucs-field select,.ucs-field textarea,.ucs-tool-search input {
  min-height: 44px; padding: 11px 13px; border-color: #d0d5dd; border-radius: 10px; background: #fff; color: var(--ucs-ink); font-weight: 500;
}
.ucs-field textarea { min-height: 180px; line-height: 1.55; }
.ucs-field input:hover,.ucs-field select:hover,.ucs-field textarea:hover { border-color: #b8c0cc; }
.ucs-field input:focus,.ucs-field select:focus,.ucs-field textarea:focus,.ucs-tool-search input:focus {
  border-color: var(--ucs-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.11);
}
.ucs-field input[type="range"] { min-height: 34px; accent-color: var(--ucs-brand); }
.ucs-field input[type="color"] { min-height: 44px; }
.ucs-form-grid { gap: 13px; margin-bottom: 15px; }
.ucs-check { color: var(--ucs-text); font-size: 12.5px; line-height: 1.45; }
.ucs-check input { accent-color: var(--ucs-brand); }
.ucs-panel-title { margin: 20px 0 10px; color: var(--ucs-ink); font-size: 14px; font-weight: 760; letter-spacing: -.01em; }
.ucs-tool-note,.ucs-image-suite-warning,.ucs-media-pro-warning { border-radius: 10px; line-height: 1.55; }
.ucs-tool-note { border-color: #dbeafe; background: #f5f9ff; color: var(--ucs-text); }

/* Buttons: one clear primary action, utilities stay quiet. */
.ucs-button {
  min-height: 44px; padding: 10px 18px; border-color: var(--ucs-brand); border-radius: 10px;
  background: linear-gradient(135deg,var(--ucs-brand),var(--ucs-brand-dark));
  box-shadow: 0 6px 16px rgba(37,99,235,.18); font-size: 13px; font-weight: 750;
}
.ucs-button:hover { box-shadow: 0 9px 22px rgba(37,99,235,.23); }
.ucs-button-secondary {
  border-color: var(--ucs-brand); background: #fff; box-shadow: none; color: var(--ucs-brand) !important;
}
.ucs-button-secondary:hover { border-color: var(--ucs-brand-dark); background: #eff6ff; box-shadow: none; color: var(--ucs-brand-dark) !important; }
.ucs-button:focus-visible,.ucs-unit-swap:focus-visible,.ucs-page-card:focus-visible,.ucs-file-card-actions button:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
.ucs-actions { gap: 8px; margin: 14px 0; }
.ucs-actions.is-segmented { border-color: #d0d5dd; border-radius: 10px; }
.ucs-actions.is-segmented .ucs-button { border-right-color: #d0d5dd; }

/* Adaptive panels / results -------------------------------------------- */
.ucs-pro-card,.ucs-side-workspace > .ucs-side-controls,.ucs-analysis-panel,.ucs-editor-settings,.ucs-document-settings,.ucs-page-settings,.ucs-media-controls,.ucs-reference-controls,.ucs-bg-controls,.ucs-image-suite-controls,.ucs-av-controls,.ucs-pdf-p1-controls,.ucs-seo-card,.ucs-text-suite-workspace > section {
  border-color: var(--ucs-line); border-radius: 14px; background: #fff;
}
.ucs-pro-card,.ucs-side-workspace > .ucs-side-controls { background: #fff; }
.ucs-pro-workspace,.ucs-side-workspace,.ucs-editor-workspace,.ucs-image-suite-workspace,.ucs-av-workspace,.ucs-pdf-p1-workspace { gap: 18px; }
.ucs-result,.ucs-pro-result {
  border-color: var(--ucs-line); border-radius: 13px; background: #fff;
}
.ucs-result > strong,.ucs-pro-result-head strong { color: var(--ucs-ink); }
.ucs-result pre { color: #344054; }
.ucs-result.has-download,.ucs-download-result { border-color: #dbe4ef; }
.ucs-pro-stats > span,.ucs-image-suite-stat,.ucs-av-stat { border-color: var(--ucs-line); background: var(--ucs-soft); }
.ucs-pro-details,.ucs-advanced-controls,.ucs-professional-advanced {
  border: 1px solid var(--ucs-line); border-radius: 11px; background: var(--ucs-soft);
}
.ucs-pro-details > summary,.ucs-advanced-controls > summary,.ucs-professional-advanced > summary {
  padding: 11px 12px; cursor: pointer; color: #344054; font-size: 12px; font-weight: 760; list-style-position: inside;
}
.ucs-advanced-controls { padding: 0; }
.ucs-advanced-controls > :not(summary),.ucs-professional-advanced > :not(summary) { margin-left: 12px; margin-right: 12px; }
.ucs-advanced-controls > :last-child,.ucs-professional-advanced > :last-child { margin-bottom: 12px; }
.ucs-advanced-controls[open] > summary,.ucs-professional-advanced[open] > summary { margin-bottom: 10px; border-bottom: 1px solid var(--ucs-line); }
.ucs-professional-advanced { margin: 8px 0 14px; padding: 0; }
.ucs-professional-advanced .ucs-form-grid { margin-bottom: 0; }

/* Upload / preview surfaces -------------------------------------------- */
.ucs-dropzone {
  min-height: 180px; padding: 22px; border-width: 1.5px; border-color: #cbd5e1; border-radius: 14px;
  background: #fbfcfe; transform: none;
}
.ucs-dropzone:hover,.ucs-dropzone.is-dragging { border-color: var(--ucs-brand); background: #f5f9ff; transform: none; }
.ucs-dropzone strong { color: var(--ucs-brand); font-size: 15px; }
.ucs-upload-icon { width: 44px; height: 44px; border-color: #dbeafe; border-radius: 12px; box-shadow: none; color: var(--ucs-brand); }
.ucs-dropzone.is-ready { border-color: #abefc6; background: #f6fef9; }
.ucs-image-preview,.ucs-live-image-editor,.ucs-waveform-editor,.ucs-video-preview,.ucs-media-preview { border-color: var(--ucs-line); box-shadow: 0 10px 28px rgba(16,24,40,.08); }
.ucs-crop-handle { background: var(--ucs-brand); }

/* Tool-family profiles ------------------------------------------------- */
.ucs-professional-simple .ucs-app { padding: clamp(20px,3vw,30px); }
.ucs-professional-simple .ucs-workflow { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ucs-professional-workbench .ucs-app { padding: clamp(18px,2.6vw,28px); }
.ucs-professional-visual .ucs-app { padding: clamp(16px,2.2vw,24px); }
.ucs-professional-media .ucs-app,.ucs-professional-document .ucs-app { padding: clamp(16px,2vw,24px); }
.ucs-professional-studio .ucs-app { box-shadow: 0 20px 54px rgba(16,24,40,.12); }

/* The right-hand pane is sticky only when it is genuinely a compact result/preview,
   never for tall media controls or editors. */
@media (min-width: 980px) {
  .ucs-professional-workbench .ucs-pro-workspace > .ucs-pro-card:nth-child(2),
  .ucs-professional-workbench .ucs-text-suite-workspace > :nth-child(2) { position: sticky; top: 96px; }
  .ucs-professional-media .ucs-media-controls,
  .ucs-professional-document .ucs-document-settings,
  .ucs-professional-visual .ucs-editor-settings,
  .ucs-professional-visual .ucs-image-suite-controls { position: static !important; top: auto !important; }
}

/* Tables/code should scroll horizontally rather than squeeze illegibly. */
.ucs-table-preview,.ucs-pro-kv-table,.ucs-regex-table-wrap,.ucs-pdf-p1-size-table,.ucs-seo-table-wrap { max-width: 100%; overflow: auto; }
.ucs-pro-pre,.ucs-seo-code,.ucs-regex-highlight { border-radius: 11px; }

/* Mobile / tablet ------------------------------------------------------- */
@media (max-width: 899px) {
  .ucs-site-main { width: min(100% - 28px,1180px); }
  .ucs-hero { margin-bottom: 22px; }
  .ucs-app { padding: 18px; border-radius: 16px; }
  .ucs-workflow { grid-template-columns: 1fr; }
  .ucs-professional-simple .ucs-workflow { grid-template-columns: 1fr; }
  .ucs-pro-workspace,.ucs-image-suite-workspace,.ucs-av-workspace,.ucs-pdf-p1-workspace,.ucs-side-workspace,.ucs-editor-workspace { grid-template-columns: 1fr !important; }
  .ucs-pro-workspace > .ucs-pro-card:nth-child(2),.ucs-text-suite-workspace > :nth-child(2) { position: static !important; top: auto !important; }
}
@media (max-width: 600px) {
  .ucs-site-main { width: min(100% - 20px,1180px); padding-top: 24px; }
  .ucs-breadcrumb { margin-bottom: 22px; font-size: 11.5px; }
  .ucs-hero h1 { font-size: 34px; }
  .ucs-hero p { font-size: 15px; }
  .ucs-trust-row { gap: 6px; }
  .ucs-trust-row span { padding: 5px 7px; font-size: 10.5px; }
  .ucs-app { padding: 15px; }
  .ucs-app.ucs-layout-pdf-studio,.ucs-app.ucs-layout-image-studio,.ucs-app.ucs-layout-video-studio,.ucs-app.ucs-layout-code-studio,.ucs-app.ucs-layout-zip-studio { padding: 0; }
  .ucs-form-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .ucs-field { margin-bottom: 12px; }
  .ucs-field textarea { min-height: 160px; }
  .ucs-button { min-height: 43px; }
  .ucs-actions .ucs-button { flex: 1 1 130px; }
  .ucs-dropzone { min-height: 155px; padding: 18px 14px; }
  .ucs-pro-card,.ucs-side-workspace > .ucs-side-controls,.ucs-analysis-panel,.ucs-editor-settings,.ucs-document-settings,.ucs-page-settings,.ucs-media-controls,.ucs-reference-controls,.ucs-bg-controls,.ucs-image-suite-controls { padding: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ucs-app * { scroll-behavior: auto !important; }
}


/* Theme-coherent specialist workspaces ---------------------------------
 * These editors intentionally retain their denser app-like layout, but their
 * strongest accent states inherit QuickConvertify instead of looking like a
 * second unrelated product.
 */
.ucs-ie-upload-icon,.ucs-ie-badge,.ucs-ve-upload-icon,.ucs-ve-badge,.ucs-ve-media-thumb,.ucs-pde-subheading small,.ucs-pde-layer-icon {
  background: #eff6ff; color: var(--ucs-brand);
}
.ucs-ie-drop:hover,.ucs-ie-drop.is-dragging,.ucs-ve-dropzone:hover,.ucs-ve-dropzone.is-dragging,.ucs-ve-media-drop.is-dragging {
  border-color: #60a5fa; background: #f5f9ff; box-shadow: 0 0 0 4px rgba(37,99,235,.07);
}
.ucs-ie-spinner { border-top-color: var(--ucs-brand); }
.ucs-ie-icon-button:hover,.ucs-ie-compact:hover,.ucs-ie-status-button:hover,.ucs-ie-small-icon:hover,
.ucs-ve-secondary:hover,.ucs-ve-add-media:hover,.ucs-pde-page-quick:hover {
  border-color: #93c5fd; background: #f5f9ff; color: var(--ucs-brand-dark);
}
.ucs-ie-crop-box { border-color: #3b82f6; }
.ucs-ie-crop-handle,.ucs-pde-resize,.ucs-video-trim-handle { background: var(--ucs-brand); box-shadow: 0 0 0 1px var(--ucs-brand-dark),0 2px 7px rgba(16,24,40,.18); }
.ucs-ie-field input[type="range"],.ucs-ie-check input,.ucs-ve-field input[type="range"],.ucs-ve-check input { accent-color: var(--ucs-brand); }
.ucs-ie-field input:focus,.ucs-ie-field select:focus,.ucs-ie-field textarea:focus,
.ucs-ve-field input:focus,.ucs-ve-field select:focus,.ucs-ve-field textarea:focus,
.ucs-pde-field input:focus,.ucs-pde-field textarea:focus,.ucs-pde-field select:focus {
  border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(37,99,235,.11);
}
.ucs-ve-add-media { border-color: #bfdbfe; background: #eff6ff; color: var(--ucs-brand-dark); }
.ucs-ve-media-row:hover { border-color: #bfdbfe; }
.ucs-ve-clip { border-color: #93c5fd; background: linear-gradient(180deg,#eff6ff,#dbeafe); color: #1d4ed8; }
.ucs-ve-clip.is-selected { border-color: var(--ucs-brand); box-shadow: 0 0 0 2px rgba(37,99,235,.14); }
.ucs-ve-trim-handle { background: rgba(37,99,235,.18); }
.ucs-ve-export-progress>i { background: linear-gradient(90deg,var(--ucs-brand),var(--ucs-accent)); }
.ucs-pde-annotation.is-selected { outline-color: var(--ucs-brand); }

/* Actions and disclosure polish --------------------------------------- */
.ucs-result-primary {
  border-color: var(--ucs-brand) !important;
  background: linear-gradient(135deg,var(--ucs-brand),var(--ucs-brand-dark)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.18) !important;
}
.ucs-professional-advanced > summary::marker,.is-advanced-settings > summary::marker { color: var(--ucs-brand); }
.ucs-professional-advanced[open] { background: #fbfdff; }
.ucs-professional-direct .ucs-app { padding-top: clamp(20px,3vw,30px); }

/* Context-sensitive fields use hidden rather than disabled state, so a setting
   that cannot affect the current mode does not add visual noise. */
.ucs-professional-ready [aria-hidden="true"][hidden] { display: none !important; }

/* Wide task workbenches get breathing room; simple tools stay compact. */
@media (min-width: 980px) {
  .ucs-professional-visual .ucs-image-suite-workspace,
  .ucs-professional-visual .ucs-av-workspace,
  .ucs-professional-document .ucs-pdf-p1-workspace { align-items: start; }
  .ucs-professional-simple .ucs-app { max-width: 820px; margin-inline: auto; }
  .ucs-professional-direct.ucs-professional-workbench .ucs-app { max-width: 1080px; }
}

@media (max-width: 760px) {
  .ucs-ie-field-grid,.ucs-ve-field-grid { grid-template-columns: 1fr; }
  .ucs-professional-ready .ucs-actions { flex-wrap: wrap; }
  .ucs-professional-ready .ucs-actions > .ucs-button,
  .ucs-professional-ready .ucs-actions > a.ucs-button { min-width: min(100%,140px); }
  .ucs-professional-advanced > summary { min-height: 42px; display: flex; align-items: center; }
}

/* 3.27 final audit refinements: dense option sets stay readable instead of becoming a single segmented strip. */
.ucs-actions.ucs-case-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(128px,1fr)); gap: 8px; width: 100%; }
.ucs-actions.ucs-case-grid .ucs-button { width: 100%; min-height: 42px; }
.ucs-unit-all-results { margin-top: 14px; }
.ucs-unit-all-results table { min-width: 360px; }
.ucs-unit-formula { margin: 4px 0 0; }
@media (max-width: 600px) {
  .ucs-actions.ucs-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* 3.37.0 — individual-tool UX audit and responsive clarity ------------- */
.ucs-hero-category {
  display: inline-flex; align-items: center; min-height: 30px; margin-bottom: 12px; padding: 6px 10px;
  border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; color: var(--ucs-brand-dark) !important;
  font-size: 11px; font-weight: 800; letter-spacing: .045em; line-height: 1; text-decoration: none !important; text-transform: uppercase;
}
.ucs-hero-category:hover,.ucs-hero-category:focus-visible { border-color: var(--ucs-brand); background: #dbeafe; outline: 0; }
.ucs-hero-title-row { align-items: center; }
.ucs-hero-title-row h1 { margin: 0; }
.ucs-hero-tool-icon { flex-basis: 52px; width: 52px; height: 52px; border-radius: 15px; }
.ucs-hero-tool-icon .ucs-svg-icon { width: 35px; height: 35px; }

.ucs-tool-intro {
  display: grid; gap: 5px; margin: 0 0 20px; padding: 0 0 17px; border-bottom: 1px solid var(--ucs-line);
}
.ucs-tool-intro > span { color: var(--ucs-brand); font-size: 10.5px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.ucs-tool-intro h2 { margin: 0; color: var(--ucs-ink); font-size: clamp(20px,2.7vw,26px); font-weight: 790; letter-spacing: -.025em; line-height: 1.22; }
.ucs-tool-intro p { max-width: 760px; margin: 0; color: var(--ucs-muted); font-size: 12.5px; line-height: 1.55; }
.ucs-professional-ready,.ucs-professional-ready * { box-sizing: border-box; }
.ucs-professional-ready > *,
.ucs-professional-ready [class*="workspace"],
.ucs-professional-ready [class*="controls"],
.ucs-professional-ready [class*="preview"],
.ucs-professional-ready .ucs-field,
.ucs-professional-ready .ucs-result { min-width: 0; max-width: 100%; }
.ucs-professional-ready img,.ucs-professional-ready canvas,.ucs-professional-ready video,.ucs-professional-ready svg { max-width: 100%; }
.ucs-professional-ready pre { max-width: 100%; overflow-x: auto; }
.ucs-professional-ready select,.ucs-professional-ready input,.ucs-professional-ready textarea { max-width: 100%; }

/* Width follows task complexity instead of stretching every tool equally. */
.ucs-shell-calculator { max-width: 960px; }
.ucs-shell-seo-workbench { max-width: 1100px; }
.ucs-ux-density-compact.ucs-shell-compact { max-width: 760px; }
.ucs-ux-density-dense.ucs-shell-code-workbench,
.ucs-ux-density-dense.ucs-shell-data-preview,
.ucs-ux-density-dense.ucs-shell-visual-editor { max-width: 1160px; }

/* Measurable, persistent processing feedback. */
.ucs-process {
  min-height: 58px; margin: 16px 0; padding: 11px 13px 13px; border-color: #bfdbfe;
  background: #f5f9ff; box-shadow: none;
}
.ucs-process > strong { white-space: normal; line-height: 1.4; }
.ucs-process-state {
  flex: 0 0 auto; padding: 4px 8px; border: 1px solid #bfdbfe; border-radius: 999px;
  background: #fff; color: var(--ucs-brand-dark); font-size: 10px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase;
}
.ucs-process.is-ready .ucs-process-state { border-color: #abefc6; color: #067647; }
.ucs-process.is-error .ucs-process-state { border-color: #fecdca; color: #b42318; }

/* Selected files become a compact, readable replacement surface. */
.ucs-dropzone.is-ready {
  min-height: 72px; padding: 12px 14px; border-style: solid; border-color: #bfdbfe; background: #f8fbff; text-align: left;
}
.ucs-upload-ready { width: 100%; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; }
.ucs-upload-ready > i { width: 36px; height: 36px; border-radius: 10px; background: #dbeafe; color: var(--ucs-brand-dark); }
.ucs-upload-ready > span { min-width: 0; overflow: hidden; color: var(--ucs-ink); font-weight: 730; overflow-wrap: normal; word-break: normal; white-space: nowrap; text-overflow: ellipsis; }
.ucs-upload-ready > b { color: var(--ucs-brand); font-size: 11px; white-space: nowrap; }
.ucs-file-summary { margin: 10px 0 16px; text-align: left; }

/* A broken optional renderer must never leave a blank or unusable tool shell. */
.ucs-runtime-failure {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px;
  padding: 16px; border: 1px solid #fecdca; border-radius: 14px; background: #fff8f7; color: var(--ucs-ink);
}
.ucs-runtime-failure > i {
  display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px;
  background: #fee4e2; color: #b42318; font-style: normal; font-size: 22px; font-weight: 900;
}
.ucs-runtime-failure strong { display: block; margin-bottom: 3px; font-size: 15px; }
.ucs-runtime-failure p,.ucs-runtime-failure small { display: block; margin: 0; overflow-wrap: anywhere; }
.ucs-runtime-failure p { color: var(--ucs-muted); font-size: 12px; line-height: 1.55; }
.ucs-runtime-failure small { margin-top: 4px; color: #b42318; font-size: 11px; }
.ucs-runtime-failure .ucs-button { min-width: 122px; }

/* Two-button language: one blue primary, one blue outline secondary. */
.ucs-button-secondary,.ucs-actions.is-segmented .ucs-button {
  border-color: var(--ucs-brand); background: #fff; color: var(--ucs-brand) !important; box-shadow: none;
}
.ucs-button.ucs-action-remove,.ucs-button.ucs-subtitle-delete {
  border-color: #fda29b !important; background: #fff !important; color: var(--ucs-danger) !important; box-shadow: none !important;
}
.ucs-button.ucs-action-remove:hover,.ucs-button.ucs-subtitle-delete:hover { border-color: var(--ucs-danger) !important; background: #fff1f1 !important; }
.ucs-button[hidden],.ucs-is-complete [data-ucs-hidden-on-success="1"] { display: none !important; }
.ucs-result-primary { position: relative; }

/* Result takes over as the primary state after processing. */
.ucs-is-complete > .ucs-tool-intro { opacity: .8; }
.ucs-download-result.is-success,.ucs-result.is-success {
  border-color: #86efac; background: #f6fef9; box-shadow: 0 10px 28px rgba(16,185,129,.08);
}
.ucs-download-result.is-success > strong::before,.ucs-result.is-success > strong::before { margin-right: 7px; color: #067647; content: "✓"; }
.ucs-download-result .ucs-button { min-height: 46px; }

/* Preview policy: reference previews stay small; interactive previews remain prominent. */
.ucs-ux-preview-reference .ucs-image-preview { max-height: 190px; }
.ucs-ux-preview-live .ucs-effect-preview,.ucs-ux-preview-document .ucs-effect-preview { background: #f8fafc; }
.ucs-ux-preview-data .ucs-table-preview { border: 1px solid var(--ucs-line); border-radius: 12px; }
.ucs-ux-preview-none .ucs-effect-preview:empty,.ucs-ux-preview-none .ucs-preview-panel:empty { display: none !important; }

/* Dense controls remain scan-friendly without becoming a wall of fields. */
.ucs-ux-density-dense .ucs-form-grid { gap: 12px; }
.ucs-ux-density-dense .ucs-field { margin-bottom: 12px; }
.ucs-professional-advanced { background: #f8fafc; }
.ucs-professional-advanced > summary { min-height: 43px; box-sizing: border-box; }
.ucs-optional-preview {
  margin: 12px 0 16px; border: 1px solid var(--ucs-line); border-radius: 11px; background: #f8fafc;
}
.ucs-optional-preview > summary {
  min-height: 43px; box-sizing: border-box; padding: 11px 12px; color: var(--ucs-brand-dark);
  cursor: pointer; font-size: 12px; font-weight: 780;
}
.ucs-optional-preview[open] > summary { border-bottom: 1px solid var(--ucs-line); }
.ucs-optional-preview > :not(summary) { margin: 12px !important; }

@media (min-width: 900px) {
  .ucs-layout-calculator .ucs-side-workspace,.ucs-layout-calculator .ucs-pro-workspace {
    grid-template-columns: minmax(0,1.3fr) minmax(280px,.72fr);
  }
  .ucs-layout-calculator .ucs-result,.ucs-layout-calculator .ucs-pro-result { position: sticky; top: 92px; }
  .ucs-layout-viewer { padding: clamp(18px,2.5vw,28px); }
  .ucs-ux-preview-code .ucs-code-workspace,.ucs-ux-preview-data .ucs-data-workspace { align-items: start; }
}

@media (max-width: 899px) {
  .ucs-tool-intro { margin-bottom: 16px; padding-bottom: 14px; }
  .ucs-layout-calculator .ucs-result,.ucs-layout-calculator .ucs-pro-result { position: static; }
  .ucs-workflow { display: flex; grid-template-columns: none; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .ucs-workflow li { min-width: min(72vw,230px); flex: 0 0 auto; scroll-snap-align: start; }
  .ucs-mobile-flow { display: grid !important; grid-template-columns: minmax(0,1fr) !important; align-items: start; gap: 14px !important; }
  .ucs-mobile-preview-first > .ucs-mobile-preview-pane { order: 1 !important; }
  .ucs-mobile-preview-first > .ucs-mobile-control-pane { order: 2 !important; }
  .ucs-mobile-controls-first > .ucs-mobile-control-pane { order: 1 !important; }
  .ucs-mobile-controls-first > .ucs-mobile-preview-pane { order: 2 !important; }
  .ucs-mobile-flow > .ucs-mobile-preview-pane,
  .ucs-mobile-flow > .ucs-mobile-control-pane { min-width: 0; position: static !important; top: auto !important; }
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane { min-height: 0 !important; max-height: 240px; overflow: auto; }
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane canvas,
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane img,
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane video { width: auto; max-width: 100%; max-height: 190px !important; object-fit: contain; }
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane audio { width: 100%; min-height: 54px; }
}

@media (max-width: 600px) {
  .ucs-hero { margin-bottom: 20px; }
  .ucs-hero-category { min-height: 27px; margin-bottom: 10px; padding: 5px 8px; font-size: 9.5px; }
  .ucs-hero-title-row { align-items: flex-start; justify-content: flex-start; gap: 10px; text-align: left; }
  .ucs-hero h1 { font-size: clamp(29px,9vw,36px); line-height: 1.08; }
  .ucs-hero p { text-align: left; font-size: 14px; line-height: 1.58; }
  .ucs-hero-tool-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
  .ucs-hero-tool-icon .ucs-svg-icon { width: 29px; height: 29px; }
  .ucs-trust-row { justify-content: flex-start; }
  .ucs-trust-row span { min-height: 28px; box-sizing: border-box; }
  .ucs-tool-intro h2 { font-size: 20px; }
  .ucs-tool-intro p { font-size: 12px; }
  .ucs-workflow { display: none; }
  .ucs-upload-ready { grid-template-columns: 34px minmax(0,1fr); }
  .ucs-upload-ready > i { width: 32px; height: 32px; }
  .ucs-upload-ready > b { grid-column: 2; white-space: normal; }
  .ucs-runtime-failure { grid-template-columns: 36px minmax(0,1fr); align-items: start; padding: 13px; }
  .ucs-runtime-failure > i { width: 36px; height: 36px; border-radius: 10px; font-size: 19px; }
  .ucs-runtime-failure .ucs-button { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .ucs-process,.ucs-process-float { grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; }
  .ucs-process-state,.ucs-process-float .ucs-process-state { display: none; }
  .ucs-process-float { right: auto; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 20px); padding: 11px 12px 12px; }
  .ucs-result-float { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 20px); grid-template-columns: 30px minmax(0,1fr); padding: 11px 12px; }
  .ucs-result-float .ucs-button { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .ucs-actions { width: 100%; }
  .ucs-actions > .ucs-button,.ucs-actions > a.ucs-button { min-width: 0; }
  .ucs-download-result > .ucs-actions,.ucs-result > .ucs-actions,.ucs-pro-result > .ucs-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .ucs-download-result > .ucs-actions > .ucs-button,.ucs-result > .ucs-actions > .ucs-button,.ucs-pro-result > .ucs-actions > .ucs-button { width: 100%; }
  .ucs-file-summary,.ucs-file-info,.ucs-result span,.ucs-pro-result span { max-width: 100%; overflow-wrap: anywhere; }
  .ucs-mobile-flow { gap: 12px !important; }
  .ucs-mobile-flow > .ucs-mobile-control-pane,
  .ucs-mobile-flow > .ucs-mobile-preview-pane { box-sizing: border-box; width: 100%; padding: 12px !important; }
  .ucs-mobile-control-pane .ucs-field,
  .ucs-mobile-control-pane input:not([type="checkbox"]):not([type="radio"]),
  .ucs-mobile-control-pane select,
  .ucs-mobile-control-pane textarea { min-width: 0; max-width: 100%; }
  .ucs-mobile-control-pane > .ucs-button,
  .ucs-mobile-control-pane > .ucs-actions,
  .ucs-mobile-control-pane > .ucs-actions > .ucs-button { width: 100%; }
  .ucs-mobile-preview-first > .ucs-mobile-preview-pane canvas,
  .ucs-mobile-preview-first > .ucs-mobile-preview-pane img,
  .ucs-mobile-preview-first > .ucs-mobile-preview-pane video { max-width: 100%; max-height: min(420px,52vh) !important; object-fit: contain; }
  .ucs-mobile-preview-first .ucs-image-suite-canvas-wrap,
  .ucs-mobile-preview-first .ucs-video-resize-frame { min-height: 200px; }
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane { max-height: 205px; padding: 10px !important; }
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane canvas,
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane img,
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane video { max-height: 158px !important; }
  .ucs-mobile-preview-compact > .ucs-mobile-audio-pane { min-height: 0 !important; max-height: 118px; }
  .ucs-mobile-preview-compact > .ucs-mobile-preview-pane > :first-child { margin-top: 0; }
  .ucs-mobile-preview-first .ucs-page-browser { max-height: min(560px,62vh); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .ucs-mobile-preview-first .ucs-file-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .ucs-image-suite-crop-handle,
  .ucs-av-handle,
  .ucs-crop-handle,
  .ucs-pdf-p1-crop-handle { width: 20px !important; height: 20px !important; }
  .ucs-ux-preview-data .ucs-table-preview { max-height: min(430px,65vh); }
  .ucs-ux-preview-live canvas,.ucs-ux-preview-document canvas { max-width: 100%; height: auto; }
}

@media (max-width: 380px) {
  .ucs-site-main { width: min(100% - 14px,1180px); }
  .ucs-app { padding: 13px; border-radius: 14px; }
  .ucs-trust-row span { padding-inline: 6px; }
  .ucs-actions { display: grid; grid-template-columns: 1fr; }
  .ucs-actions > .ucs-button,.ucs-actions > a.ucs-button { width: 100%; }
}