.client-media-dialog {
  --media-accent: #bff2d2;
  --media-foreground: #f5f5f7;
  --media-muted: #b8b9c3;
  --media-panel: #191a20;
  color-scheme: dark;
  box-sizing: border-box;
  min-width: 0;
  width: min(1080px, calc(100vw - 40px));
  height: min(800px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 12px;
  border: 1px solid #303138;
  border-radius: 20px;
  background: #090a0e;
  color: var(--media-foreground);
  font: .875rem/1.4 system-ui, sans-serif;
  overflow: hidden;
  overflow-wrap: anywhere;
  box-shadow: 0 24px 100px rgb(0 0 0 / 55%);
}
.client-media-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.client-media-output { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0 4px; }
.client-media-output-modes { display: flex; gap: 2px; padding: 2px; min-width: 0; max-width: 100%; border-radius: 14px; background: #191a20; }
.client-media-output-modes button { flex: none; width: auto; min-width: 44px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 12px; background: transparent; color: #f5f5f7; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.3; text-transform: none; letter-spacing: normal; white-space: normal; cursor: pointer; }
.client-media-output-modes button[aria-pressed=true] { background: #f5f5f7; color: #191a20; }
.client-media-output-duration { display: flex; flex: 1; align-items: center; gap: 10px; max-width: 320px; min-width: 170px; color: #dddde5; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.3; text-transform: none; letter-spacing: normal; }
.client-media-output-duration input { min-width: 44px; min-height: 44px; flex: 1; width: 80px; accent-color: var(--media-accent); }
.client-media-output-duration output { flex: none; min-width: 34px; font-variant-numeric: tabular-nums; }
.client-media-timing { display: grid; gap: 8px; padding: 0; border: 0; border-top: 1px solid #373842; border-radius: 0; }
.client-media-timing summary { min-height: 44px; align-content: center; color: #dddde5; font-size: .8125rem; font-weight: 550; cursor: pointer; }
.client-media-timing[open] > :not(summary) { margin-bottom: 8px; }
.client-media-time-track { position: relative; height: 8px; border-radius: 999px; background: #30323c; overflow: hidden; }
.client-media-time-track span { position: absolute; top: 0; height: 100%; border-radius: inherit; background: var(--media-accent); }
.client-media-time-track i { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px #191a20; }
.client-media-time-fields { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.client-media-time-position { margin: 0; color: var(--media-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.client-media-screen-reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.client-media-photo-play { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #555761; border-radius: 50%; background: #101116; color: #fff; font-size: 0; cursor: pointer; }
.client-media-photo-play::before { content: ""; display: block; width: 16px; height: 16px; margin: auto; background: #fff; clip-path: polygon(20% 0, 100% 50%, 20% 100%); }
.client-media-photo-play[data-paused=false]::before { clip-path: polygon(10% 0, 40% 0, 40% 100%, 10% 100%, 10% 0, 60% 0, 90% 0, 90% 100%, 60% 100%, 60% 0); }
.client-media-dialog::backdrop { background: rgb(0 0 0 / 80%); backdrop-filter: blur(8px); }
.client-media-dialog button { box-sizing: border-box; flex: none; height: auto; min-height: 44px; font-family: inherit; font-weight: 500; line-height: 1.3; text-transform: none; letter-spacing: normal; box-shadow: none; transition: none; }
.client-media-dialog [hidden], .client-media-native-control { display: none !important; }
.client-media-dialog :focus-visible { outline: 3px solid var(--media-accent); outline-offset: 3px; }
.client-media-editor-header { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 4px; }
.client-media-editor-identity { display: grid; gap: 2px; min-width: 0; }
.client-media-brand { color: var(--media-accent); font-size: .625rem; font-weight: 750; letter-spacing: .16em; }
.client-media-editor-header h2 { margin: 0; color: var(--media-foreground); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.client-media-dialog .client-media-close { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 50%; background: #24252b; color: #fff; cursor: pointer; }
.client-media-close svg { display: block; width: 24px; height: 24px; }
.client-media-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; flex: 1 1 auto; min-height: 0; margin: 0; }
.client-media-workspace:not([data-media-mode=preview]) { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
.client-media-preview-pane { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; border-radius: 18px; background: radial-gradient(ellipse at center, #22232b 0%, #111217 65%, #0c0d11 100%); overflow: hidden; }
.client-media-dialog .client-image-preview, .client-media-dialog .client-video-preview { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; border: 0; border-radius: 12px; background: #101116; box-shadow: 0 16px 48px rgb(0 0 0 / 28%); touch-action: none; }
@supports (width: 1cqw) {
  .client-media-preview-pane { container-type: size; }
  .client-media-dialog .client-image-preview, .client-media-dialog .client-video-preview { width: min(calc(100cqw - 24px), calc(max(40px, 100cqh - 24px) * var(--media-aspect, 1.777778))); height: auto; }
}
.client-media-toolbar { position: absolute; inset: 8px 8px auto; z-index: 2; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.client-media-tabs, .client-media-history { display: flex; gap: 4px; pointer-events: auto; }
.client-media-toolbar button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; background: rgb(15 16 20 / 82%); color: #fff; cursor: pointer; backdrop-filter: blur(12px); }
.client-media-toolbar svg { width: 20px; height: 20px; }
.client-media-text-icon { font: 600 21px/1 system-ui, sans-serif; letter-spacing: -.06em; white-space: nowrap; }
.client-media-toolbar button[aria-pressed=true] { background: #fff; color: #121318; border-color: #fff; }
.client-media-toolbar button:disabled { opacity: .35; cursor: default; }
.client-media-control-pane { scroll-padding-block-start: calc(var(--media-panel-header-height, 52px) + 52px); min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: #54555f transparent; padding: 12px; border: 1px solid #2a2b33; border-radius: 18px; background: var(--media-panel); }
.client-media-tools { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
.client-media-panel-header { position: sticky; top: -12px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; padding: 0 0 8px; background: var(--media-panel); }
.client-media-panel-header h3 { margin: 0; min-width: 0; color: #fff; font-size: .875rem; font-weight: 600; }
.client-media-done { flex: none; width: auto; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 999px; background: #f4f4f7; color: #15161b; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.client-media-tools-body { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; }
.client-media-dialog .client-media-tool-hint { margin: 0; color: var(--media-muted); font-size: .8125rem; line-height: 1.45; }
.client-media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.client-media-field, .client-media-layer-editor { display: grid; gap: 6px; min-width: 0; }
/* Keep the native video format field inside its track at enlarged text sizes. */
.client-media-field { grid-template-columns: minmax(0, 1fr); }
.client-media-layer-editor { gap: 8px; }
.client-media-dialog .client-media-field label, .client-media-dialog .client-image-field label { color: #dddde5; font: inherit; font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
.client-media-dialog .client-media-field input, .client-media-dialog .client-media-field select, .client-media-dialog .client-media-field textarea,
.client-media-dialog .client-image-field input, .client-media-dialog .client-image-field select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 1px solid #42444f; border-radius: 10px; background: #25262e; color: #f5f5f7; font: inherit; font-size: .875rem !important; line-height: 1.4; }
.client-media-dialog .client-image-field select, .client-media-dialog .client-media-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23ededf3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.client-media-dialog .client-media-field textarea { resize: vertical; font-size: .875rem !important; line-height: 1.45; }
.client-media-dialog .client-media-field input[type=range], .client-media-dialog .client-image-field input[type=range] { min-height: 44px; padding: 0; margin: 0; border: 0; background: transparent; accent-color: var(--media-accent); }
.client-media-font-strip { display: flex; gap: 8px; }
.client-media-font-strip button { min-width: 0; flex: 1; min-height: 44px; padding: 6px; border: 1px solid #42444f; border-radius: 10px; background: #25262e; color: #fff; font-size: 1.0625rem; cursor: pointer; }
.client-media-font-strip button[aria-pressed=true] { background: #f4f4f7; color: #131419; border-color: #f4f4f7; }
.client-media-colors { display: flex; gap: 2px; padding: 3px 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.client-media-colors button, .client-media-colors .client-media-field { flex: 0 0 44px; }
.client-media-colors button { position: relative; display: grid; place-items: center; height: 44px; min-height: 44px; min-width: 0; padding: 7px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.client-media-colors button::before { content: ""; width: 22px; height: 22px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; background: var(--swatch); }
.client-media-colors button[aria-pressed=true] { outline: 2px solid #fff; outline-offset: -4px; }
.client-media-colors .client-media-field label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.client-media-colors .client-media-field { position: relative; }
.client-media-colors .client-media-field input[type=color] { width: 44px; height: 44px; padding: 7px; border: 0; border-radius: 50%; background: conic-gradient(#ff4d79, #ffd45c, #9af3b6, #57a5ff, #b99bff, #ff4d79); cursor: pointer; }
.client-media-colors input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.client-media-colors input[type=color]::-webkit-color-swatch { border: 2px solid #191a20; border-radius: 50%; }
.client-media-colors input[type=color]::-moz-color-swatch { border: 2px solid #191a20; border-radius: 50%; }
.client-media-filter-strip { display: flex; gap: 10px; padding: 2px 2px 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.client-media-filter-strip button { flex: 0 0 72px; display: grid; gap: 6px; min-height: 44px; padding: 5px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: #dddde5; font: inherit; font-size: .75rem; line-height: 1.35; text-align: center; cursor: pointer; scroll-snap-align: start; }
.client-media-filter-strip canvas { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; background: #33353f; }
.client-media-filter-strip button[aria-pressed=true] { border-color: var(--media-accent); color: #fff; }
.client-media-emojis { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(44px, 2.75rem), 1fr)); gap: 8px; max-width: 28rem; width: 100%; }
.client-media-emojis button { min-height: max(44px, 2.75rem); min-width: 0; padding: 6px; border: 0; border-radius: 12px; background: #25262e; color: #fff; font: inherit; font-size: 1.375rem; line-height: 1.1; cursor: pointer; }
.client-media-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.client-media-buttons button { flex: 1 1 90px; min-height: 44px; min-width: 0; padding: 8px 10px; border: 1px solid #494a55; border-radius: 999px; background: #25262e; color: #f5f5f7; font: inherit; font-size: .8125rem; line-height: 1.4; white-space: normal; text-transform: none; letter-spacing: normal; cursor: pointer; }
.client-media-buttons [data-media-tool=add-text] { background: #f4f4f7; color: #15161b; border-color: #f4f4f7; font-weight: 650; }
.client-media-panel-header h3 { margin-right: auto; }
.client-media-add-more [data-media-tool=add-text] { flex: none; width: max(44px, 2.75rem); min-height: max(44px, 2.75rem); height: auto; padding: 0; font-size: 1.375rem; line-height: 1; }
.client-media-geometry { padding-top: 0; border-top: 1px solid #373842; }
.client-media-geometry summary, .client-media-information summary { min-height: 44px; align-content: center; color: #dddde5; font-size: .8125rem; font-weight: 550; cursor: pointer; }
.client-media-geometry .client-media-field { margin-top: 10px; }
.client-media-tools small { color: var(--media-muted); font-size: .75rem; }
.client-media-tools :disabled { opacity: .4; cursor: default; }
.client-media-tools [role=status] { margin: 0; color: var(--media-muted); font-size: .875rem; }
.client-media-dialog .client-image-controls, .client-media-dialog .client-image-sliders { margin: 10px 0; gap: 10px; }
.client-media-dialog .client-media-control-pane > .client-media-field { margin: 12px 0; }
.client-media-dialog .client-media-information { margin: 12px 0; }
.client-media-dialog .client-media-information p, .client-media-dialog .client-video-edit-note { color: var(--media-muted); font-size: .875rem; }
.client-media-dialog .client-image-privacy, .client-media-dialog .client-video-privacy, .client-media-dialog .client-video-edit-note { padding: 12px; border-radius: 12px; background: #25262e; }
.client-media-dialog a { color: var(--media-accent); }
.client-media-auto-crop { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid #373842; }
.client-media-auto-button { min-height: 44px; padding: 10px 16px; border: 1px solid #494a55; border-radius: 999px; background: #25262e; color: #f5f5f7; font: inherit; font-weight: 600; cursor: pointer; }
.client-media-auto-button[aria-pressed=true] { background: var(--media-accent); color: #15161b; border-color: var(--media-accent); }
.client-media-auto-button:disabled { opacity: .4; cursor: default; }
.client-media-dialog .client-media-auto-crop p { margin: 0; color: var(--media-muted); font-size: .875rem; }
.client-media-playback { position: absolute; inset: auto 12px 12px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.client-media-playback #client-video-play { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; background: rgb(15 16 20 / 85%); color: #fff; font-size: 0; cursor: pointer; }
.client-media-playback #client-video-play::before { content: ""; display: block; width: 16px; height: 16px; margin: auto; background: #fff; clip-path: polygon(20% 0, 100% 50%, 20% 100%); }
.client-media-playback #client-video-play[data-paused=false]::before { clip-path: polygon(10% 0, 40% 0, 40% 100%, 10% 100%, 10% 0, 60% 0, 90% 0, 90% 100%, 60% 100%, 60% 0); }
.client-media-seek { flex: 1; max-width: 240px; min-width: 44px; }
.client-media-seek label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.client-media-muted { flex: none; margin-left: auto; padding: 7px 10px; border-radius: 999px; background: rgb(15 16 20 / 85%); color: #eeeef3; font-size: .6875rem; }
.client-media-dialog > [role=status] { flex: none; min-height: 0; margin: 0 4px; color: var(--media-muted); font-size: .75rem; line-height: 1.4; }
.client-media-dialog > [role=status]:empty { display: none; }
.client-media-dialog .client-image-error, .client-media-dialog .client-video-error { color: #ffb8c3; }
.client-media-dialog > progress { flex: none; margin: 0; accent-color: var(--media-accent); }
.client-media-dialog .client-image-actions, .client-media-dialog .client-video-actions { display: flex; justify-content: flex-end; align-items: stretch; gap: 10px; flex: none; margin: 0; padding: 0 4px; }
.client-media-dialog .client-image-actions button, .client-media-dialog .client-video-actions button { flex: 0 1 180px; min-width: 0; min-height: 44px; height: auto; padding: 8px 14px; border: 1px solid #454650; border-radius: 999px; background: #191a20; color: #f5f5f7; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: normal; white-space: normal; cursor: pointer; }
.client-media-dialog .client-image-actions .client-image-primary, .client-media-dialog .client-video-actions .btn-primary { order: 1; background: #f5f5f7; color: #15161b; border-color: #f5f5f7; }
.client-media-dialog .client-image-actions button:disabled, .client-media-dialog .client-video-actions button:disabled { opacity: .4; cursor: default; }
.client-video-edit-panel { margin: 0; }
/* Values stay adjacent to their controls, including at large text sizes. */
.client-media-range-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.client-media-range-heading label { min-width: 0; }
.client-media-range-value { flex: none; color: var(--media-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.client-media-timing-actions, .client-media-center-actions, .client-media-secondary-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.client-media-timing-actions button, .client-media-center-actions button, .client-media-secondary-actions button { flex: 1 1 74px; min-width: 44px; min-height: 44px; padding: 6px 8px; border-radius: 9px; font-size: .75rem; }
.client-media-secondary-actions { padding-top: 8px; border-top: 1px solid #373842; }
.client-media-dialog .client-media-output-modes button { width: auto; }
.client-media-dialog .client-media-done { flex: none; width: auto; }
.client-media-dialog .client-media-playback input[type=range] { border: 0; }
.client-media-dialog .client-image-actions button:hover:not(:disabled), .client-media-dialog .client-video-actions button:hover:not(:disabled) { filter: brightness(.92); transform: none; box-shadow: none; }
/* Contextual inspector: each task has a short, named panel. */
.client-media-tool-label { display: none; }
.client-media-layer-list { display: flex; gap: 6px; overflow: auto; padding: 3px 0; min-width: 0; }
.client-media-layer-chip { flex: 0 0 auto; max-width: min(180px, 100%); min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid #3d3e47; border-radius: 8px; background: transparent; color: #c7c8d0; font: inherit; font-size: .75rem; }
.client-media-layer-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-media-layer-chip[aria-pressed=true] { color: var(--media-accent); border-color: #6b9d7f; background: #25352c; }
.client-media-inspector-tabs { position: sticky; top: var(--media-panel-header-height, 52px); z-index: 2; background: var(--media-panel); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; min-width: 0; padding-bottom: 4px; border-bottom: 1px solid #34353d; }
.client-media-inspector-tab { min-width: 0; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: #b8b9c3; font: inherit; font-size: .8125rem; }
.client-media-inspector-tab[aria-selected=true] { background: #2b2c34; color: #fff; }
.client-media-inspector-section { display: grid; gap: 10px; min-width: 0; }
.client-media-section-label { margin: 0; color: var(--media-muted); font-size: .75rem; line-height: 1.4; }
.client-media-picker { min-width: 0; }
.client-media-picker > summary { min-height: 44px; align-content: center; color: #dddde5; font-size: .8125rem; cursor: pointer; }
.client-media-picker > p { margin: 0 0 8px; color: var(--media-muted); font-size: .75rem; }
.client-media-picker .client-media-buttons { margin-top: 8px; }
.client-media-layer-actions { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #34353d; }
.client-media-layer-actions .client-media-buttons { gap: 4px; }
.client-media-layer-actions .client-media-buttons button { flex: 1 1 72px; font-size: .75rem; border-radius: 7px; }
.client-media-layer-actions .client-media-secondary-actions { padding: 0; border: 0; }
.client-media-font-strip button { font-size: .8125rem; line-height: 1.3; }
.client-media-add-more [data-media-tool=add-text] { width: auto; padding: 6px 10px; font-size: .8125rem; }
.client-media-inspector-section .client-media-geometry, .client-media-inspector-section .client-media-timing { border: 0; }
.client-media-inspector-section .client-media-timing > :not(summary) { margin-bottom: 8px; }
.client-media-inspector-section .client-media-geometry .client-media-field { margin-top: 8px; }
@media (min-width: 1024px) and (pointer: fine) {
  .client-media-dialog { width: min(1120px, calc(100vw - 40px)); height: min(800px, calc(100dvh - 32px)); border-radius: 16px; font-size: .8125rem; }
  .client-media-dialog[open] { gap: 10px; }
  .client-media-editor-header { min-height: 36px; gap: 10px; }
  .client-media-editor-header h2 { font-size: .875rem; font-weight: 550; }
  .client-media-brand { font-size: .5625rem; }
  .client-media-dialog .client-media-close { width: 32px; height: 32px; min-height: 32px; padding: 7px; background: transparent; }
  .client-media-close svg { width: 18px; height: 18px; }
  .client-media-output-modes { border-radius: 9px; }
  .client-media-output-modes button { min-height: 36px; border-radius: 7px; padding: 6px 12px; font-size: .8125rem; }
  .client-media-output-duration { font-size: .75rem; gap: 8px; }
  .client-media-output-duration input { min-height: 36px; }
  .client-media-workspace:not([data-media-mode=preview]) { grid-template-columns: minmax(0, 1fr) 320px; }
  .client-media-preview-pane { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 8px; padding: 0 12px 10px; box-sizing: border-box; border: 1px solid #25262e; border-radius: 10px; background: #101115; }
  .client-media-dialog .client-image-preview, .client-media-dialog .client-video-preview { grid-column: 1; grid-row: 2; width: min(calc(100cqw - 24px), calc(max(40px, 100cqh - 128px) * var(--media-aspect, 1.777778))); border-radius: 5px; box-shadow: 0 4px 18px rgb(0 0 0 / 20%); }
  .client-media-toolbar { position: static; grid-column: 1; grid-row: 1; align-self: start; width: 100%; padding: 6px 0; box-sizing: border-box; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #26272f; }
  .client-media-tabs { flex: 1 1 300px; flex-wrap: wrap; gap: 2px; }
  .client-media-tool-label { display: inline; min-width: 0; font-size: .75rem; line-height: 1.3; }
  .client-media-toolbar button { display: inline-flex; gap: 6px; width: auto; height: auto; min-width: 32px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; backdrop-filter: none; }
  .client-media-toolbar svg { width: 17px; height: 17px; flex: none; }
  .client-media-text-icon { font-size: 18px; }
  .client-media-toolbar button[aria-pressed=true] { background: #2d2e36; color: #fff; }
  .client-media-history { margin-left: auto; }
  .client-media-history button { width: 32px; min-height: 32px; padding: 7px; }
  .client-media-playback { position: static; grid-column: 1; grid-row: 3; width: 100%; min-width: 0; gap: 10px; }
  .client-media-seek { max-width: none; }
  .client-media-dialog .client-media-playback .client-media-photo-play, .client-media-dialog .client-media-playback #client-video-play { width: 32px; height: 32px; min-height: 32px; border: 0; background: transparent; }
  .client-media-photo-play::before, .client-media-playback #client-video-play::before { width: 12px; height: 12px; }
  .client-media-control-pane { display: flex; flex-direction: column; overflow: hidden; padding: 12px; border-radius: 10px; background: #17181e; }
  .client-media-panel-header { position: static; flex: none; padding: 0; margin-bottom: 8px; gap: 4px; background: transparent; }
  .client-media-panel-header h3 { font-size: .8125rem; font-weight: 600; }
  .client-media-dialog .client-media-done { min-height: 32px; padding: 5px 8px; border-radius: 6px; background: transparent; color: #b8b9c3; font-size: .75rem; }
  .client-media-dialog .client-media-add-more [data-media-tool=add-text] { min-width: 32px; min-height: 32px; padding: 5px 8px; border-radius: 6px; background: #2b2c34; color: #fff; font-size: .75rem; }
  .client-media-tools { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .client-media-tools-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; overflow: hidden; }
  .client-media-tools-body > :not(.client-media-layer-editor) { flex: none; }
  .client-media-tools-body > .client-media-picker[open] { flex: 0 1 auto; max-height: 180px; overflow: auto; }
  .client-media-layer-list { flex-wrap: wrap; gap: 4px; max-height: 76px; }
  .client-media-dialog .client-media-layer-chip { max-width: 140px; min-width: 32px; min-height: 32px; padding: 5px 8px; font-size: .75rem; }
  .client-media-layer-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; overflow: hidden; }
  .client-media-inspector-tabs { position: static; flex: none; gap: 2px; background: transparent; }
  .client-media-dialog .client-media-inspector-tab { min-height: 34px; padding: 5px 8px; font-size: .75rem; }
  .client-media-inspector-section { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px; align-content: start; gap: 8px; scrollbar-width: thin; }
  .client-media-dialog .client-media-field label, .client-media-dialog .client-image-field label { font-size: .75rem; }
  .client-media-dialog .client-media-field input, .client-media-dialog .client-media-field select, .client-media-dialog .client-media-field textarea, .client-media-dialog .client-image-field input, .client-media-dialog .client-image-field select { min-height: 36px; padding: 6px 8px; font-size: .8125rem !important; border-color: #3b3d46; border-radius: 7px; background: #22232b; }
  .client-media-dialog .client-media-field textarea { min-height: 52px; font-size: .8125rem !important; }
  .client-media-dialog .client-media-field input[type=range], .client-media-dialog .client-image-field input[type=range] { min-height: 32px; padding: 0; background: transparent; }
  .client-media-grid { gap: 8px; }
  .client-media-inspector-section .client-media-field:has(> select[data-media-tool=background]) { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); align-items: center; gap: 8px; }
  .client-media-font-strip { gap: 4px; }
  .client-media-font-strip button { min-height: 34px; padding: 5px 6px; font-size: .75rem; border-radius: 6px; }
  .client-media-colors { display: grid; grid-template-columns: repeat(5, minmax(32px, 1fr)); gap: 2px 4px; overflow: visible; padding: 2px; }
  .client-media-colors button, .client-media-colors .client-media-field { flex: none; min-width: 0; }
  .client-media-dialog .client-media-colors button, .client-media-dialog .client-media-colors input[type=color] { width: 100%; height: 32px; min-height: 32px; padding: 5px; }
  .client-media-colors button::before { width: 20px; height: 20px; }
  .client-media-colors button[aria-pressed=true] { outline: 0; }
  .client-media-colors button[aria-pressed=true]::before { box-shadow: 0 0 0 2px #17181e, 0 0 0 3px #fff; }
  .client-media-inspector-section[data-media-section=appearance] > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .client-media-dialog .client-media-colors input[type=color] { width: 32px; justify-self: center; border-radius: 50%; }
  .client-media-picker > summary { min-height: 34px; font-size: .75rem; }
  .client-media-layer-actions { padding-top: 8px; gap: 4px; }
  .client-media-layer-actions .client-media-buttons button, .client-media-center-actions button, .client-media-timing-actions button { min-height: 32px; min-width: 32px; padding: 5px 6px; font-size: .6875rem; border-color: #3b3d46; }
  .client-media-layer-actions .client-media-secondary-actions button { border: 0; background: transparent; color: #b8b9c3; }
  .client-media-auto-button { min-height: 36px; padding: 6px 10px; font-size: .75rem; }
  .client-media-dialog .client-media-auto-crop p, .client-media-dialog .client-video-edit-note, .client-media-dialog .client-media-information p { font-size: .75rem; }
  .client-media-workspace[data-media-mode=crop] .client-media-control-pane { display: block; overflow: auto; }
  .client-media-workspace[data-media-mode=crop] .client-media-panel-header { position: sticky; top: -12px; background: #17181e; padding-block: 4px; }
  .client-media-workspace[data-media-mode=look] .client-media-tools-body { overflow: auto; }
  .client-media-dialog .client-image-actions, .client-media-dialog .client-video-actions { align-items: center; gap: 12px; }
  .client-media-dialog .client-image-actions button, .client-media-dialog .client-video-actions button { flex: 0 0 auto; min-height: 36px; padding: 7px 12px; border: 0; border-radius: 7px; font-size: .8125rem; }
  .client-media-dialog .client-image-actions .client-image-secondary, .client-media-dialog .client-video-actions .btn-secondary { margin-right: auto; padding-inline: 4px; background: transparent; color: #b8b9c3; }
  .client-media-dialog .client-image-actions .client-image-primary, .client-media-dialog .client-video-actions .btn-primary { min-height: 40px; min-width: 150px; padding-inline: 18px; }
}

@media (max-width: 760px) {
  .client-media-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: calc(8px + env(safe-area-inset-top)) 0 calc(8px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; overflow: auto; }
  .client-media-editor-header { padding: 0 12px; }
  .client-media-output { flex-wrap: wrap; gap: 6px; padding: 0 12px; }
  .client-media-output-modes { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; }
  .client-media-output-modes button { padding: 6px 10px; font-size: .8125rem; }
  .client-media-output-duration { flex: 1; min-width: 72px; max-width: 220px; gap: 4px; font-size: .75rem; }
  .client-media-output-duration > span { display: none; }
  .client-media-output-duration input { width: 44px; }
  .client-media-output-duration output { min-width: 26px; }
  .client-media-workspace, .client-media-workspace:not([data-media-mode=preview]) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .client-media-workspace:not([data-media-mode=preview]) { min-height: max(280px, 18rem); grid-template-rows: minmax(120px, 1fr) minmax(148px, min(34dvh, 290px)); }
  .client-media-preview-pane { border-radius: 0; }
  .client-media-control-pane { border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 10px 14px; }
  .client-media-panel-header { top: -10px; }
  .client-media-dialog .client-image-actions, .client-media-dialog .client-video-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); padding: 0 12px; gap: 8px; }
  .client-media-dialog .client-image-actions button, .client-media-dialog .client-video-actions button { padding: 8px 10px; font-size: .8125rem; }
  .client-media-dialog > [role=status] { margin: 0 12px; font-size: .6875rem; }
  .client-media-dialog .client-media-field input, .client-media-dialog .client-media-field select, .client-media-dialog .client-media-field textarea, .client-media-dialog .client-image-field input, .client-media-dialog .client-image-field select { font-size: 1rem !important; }
  .client-media-dialog .client-image-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .client-media-muted { font-size: .625rem; padding: 6px; }
  .client-media-toolbar { inset-inline: 4px; }
  .client-media-output-modes button { padding-inline: 8px; }
}
@media (max-height: 700px) and (max-width: 599px) {
  .client-media-workspace:not([data-media-mode=preview]) { min-height: max(304px, 18rem); grid-template-rows: minmax(156px, 1fr) max(168px, 9rem); }
}
@media (max-height: 520px) and (min-width: 600px) {
  .client-media-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: 8px; overflow: auto; }
  .client-media-workspace:not([data-media-mode=preview]) { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); grid-template-rows: minmax(0, 1fr); min-height: 160px; }
  .client-media-output { position: absolute; top: 8px; right: 12px; max-width: 50%; }
  .client-media-editor-header { padding-right: 52%; }
  .client-media-output-duration { min-width: 80px; max-width: 180px; }
  .client-media-output-duration > span { display: none; }
  .client-media-dialog .client-image-actions, .client-media-dialog .client-video-actions { display: flex; padding: 0; }
  .client-media-control-pane { border: 1px solid #2a2b33; border-radius: 14px; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .client-media-workspace:not([data-media-mode=preview]) { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); }
}
@media (prefers-reduced-motion: no-preference) {
  .client-media-toolbar button, .client-media-filter-strip button, .client-media-font-strip button { transition: background-color .15s, border-color .15s; }
}

/* Keep inspector targets usable with touch and enlarged text in every layout. */
.client-media-dialog .client-media-control-pane :is(button, input, select, textarea) {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* Native select contents must not enlarge the panel at 200% text in WebKit. */
.client-media-dialog .client-media-control-pane select {
  max-width: 100%;
  overflow: hidden;
}