:root {
  --media-bg: #0b0d12;
  --media-panel: #15181f;
  --media-panel-soft: #1b1f27;
  --media-line: #2a2f3a;
  --media-text: #f2f4f7;
  --media-muted: #9ba4b3;
  --media-faint: #667085;
  --media-accent: #f6a623;
  --media-accent-strong: #ff8700;
  --media-success: #22c58b;
  --media-danger: #f97066;
}

html:has(.media-workbench-page) { background: var(--media-bg); }
body.media-workbench-page {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background: var(--media-bg);
  color: var(--media-text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body.media-workbench-page .site-header,
body.media-workbench-page .tool-dock { display: none; }
body.media-workbench-page button,
body.media-workbench-page select,
body.media-workbench-page textarea { font: inherit; }
body.media-workbench-page button { cursor: pointer; }
body.media-workbench-page [hidden] { display: none !important; }
body.media-workbench-page button:focus-visible,
body.media-workbench-page a:focus-visible,
body.media-workbench-page select:focus-visible,
body.media-workbench-page textarea:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 2px; }

.media-shell { display: grid; min-height: 100vh; grid-template-columns: 220px minmax(0, 1fr); }
.media-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  border-right: 1px solid var(--media-line);
  background: #101217;
}
.media-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 0 20px;
  border-bottom: 1px solid var(--media-line);
  color: var(--media-text);
  text-decoration: none;
}
.media-brand img { width: 31px; height: 31px; }
.media-brand span { display: grid; gap: 2px; }
.media-brand strong { font-size: 19px; line-height: 1; }
.media-brand small { color: var(--media-muted); font-size: 10px; letter-spacing: 0; }
.media-scene-nav { display: grid; gap: 7px; padding: 25px 12px; }
.media-scene-nav p { margin: 0 8px 8px; color: var(--media-faint); font-size: 12px; }
.media-scene-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--media-muted);
  font-weight: 650;
  text-align: left;
}
.media-scene-button:hover { background: #191d25; color: var(--media-text); }
.media-scene-button.active { border-color: #343a47; background: #1d222c; color: #fff; }
.media-scene-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: inherit;
}
.media-sidebar-foot { display: grid; gap: 5px; margin-top: auto; padding: 18px 20px; border-top: 1px solid var(--media-line); }
.media-sidebar-foot a { color: var(--media-muted); font-size: 13px; text-decoration: none; }
.media-sidebar-foot a:hover { color: var(--media-accent); }

.media-workbench-main { width: min(1440px, 100%); margin: 0 auto; padding: 0 36px 54px; box-sizing: border-box; }
.media-topbar {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--media-line);
}
.media-kicker { margin: 0 0 5px; color: var(--media-accent); font-size: 12px; font-weight: 700; }
.media-topbar h1 { margin: 0; color: #fff; font-size: 24px; line-height: 1.15; }
.media-account-link { border: 1px solid var(--media-line); border-radius: 5px; padding: 9px 12px; color: var(--media-text); font-size: 13px; text-decoration: none; }
.media-account-link:hover { border-color: var(--media-accent); color: var(--media-accent); }

.media-composer { margin-top: 30px; border: 1px solid var(--media-line); border-radius: 8px; background: var(--media-panel); }
.media-composer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 14px; }
.media-composer-heading h2,
.media-results-heading h2 { margin: 0; color: #fff; font-size: 20px; line-height: 1.25; }
.media-composer-heading p,
.media-results-heading p { margin: 6px 0 0; color: var(--media-muted); font-size: 13px; line-height: 1.5; }
.media-billing-badge { flex: 0 0 auto; border: 1px solid #5b4725; border-radius: 999px; padding: 5px 9px; color: #ffc663; font-size: 12px; }
.media-form { display: grid; gap: 16px; padding: 0 24px 22px; }
.media-segment,
.media-model-choice,
.media-filter { display: flex; align-items: center; gap: 6px; }
.media-segment { width: fit-content; padding: 4px; border-radius: 6px; background: #0e1015; }
.media-segment button,
.media-model-choice button,
.media-filter button {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 12px;
  background: transparent;
  color: var(--media-muted);
  font-size: 13px;
  font-weight: 650;
}
.media-segment button:hover,
.media-model-choice button:hover,
.media-filter button:hover { color: #fff; }
.media-segment button.active,
.media-model-choice button.active,
.media-filter button.active { border-color: #464d59; background: #2a2f38; color: #fff; }
.media-model-choice button:disabled { cursor: not-allowed; opacity: .42; }
.media-prompt-field { display: grid; gap: 9px; }
.media-prompt-field > span,
.media-form-controls label > span { color: var(--media-muted); font-size: 13px; }
.media-prompt-field textarea {
  min-height: 126px;
  resize: vertical;
  border: 1px solid var(--media-line);
  border-radius: 6px;
  padding: 14px;
  background: #101319;
  color: #fff;
  line-height: 1.55;
}
.media-prompt-field textarea::placeholder { color: #6f7886; }
.media-form-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.media-form-controls label { display: grid; min-width: 142px; gap: 7px; }
.media-form-controls select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #383e4a;
  border-radius: 5px;
  padding: 0 28px 0 10px;
  background: #22262e;
  color: #f4f6f8;
}
.commerce-output-language-field { position: relative; display: grid; min-width: 150px; }
.commerce-output-language-field > button {
  width: 100%;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 0 30px 0 10px;
  background: var(--media-control);
  color: var(--media-text);
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-output-language-field > button::after { position: absolute; right: 10px; content: "▾"; color: var(--media-muted); }
.commerce-output-language-menu {
  position: absolute;
  top: calc(100% + 7px);
  bottom: auto;
  left: 0;
  z-index: 24;
  display: grid;
  width: 260px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--media-line);
  border-radius: 6px;
  padding: 7px;
  background: var(--media-panel);
  box-shadow: 0 16px 34px var(--media-shadow);
}
.commerce-output-language-menu[hidden] { display: none; }
.commerce-output-language-menu label { display: flex; min-width: 0; align-items: center; gap: 9px; border-radius: 4px; padding: 8px; color: var(--media-text); font-size: 13px; }
.commerce-output-language-menu label:hover { background: var(--media-control-active); }
.commerce-output-language-menu input { width: 16px; height: 16px; accent-color: var(--media-accent-strong); }
.commerce-output-language-menu small { margin-left: auto; color: var(--media-faint); font-size: 11px; }
.media-model-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; }
.media-model-choice { min-width: 0; overflow-x: auto; padding-bottom: 1px; }
.media-model-choice button { flex: 0 0 auto; border-color: #343943; background: #1c2027; }
.media-cost { display: grid; min-width: 190px; gap: 3px; text-align: right; }
.media-cost strong { color: #fff; font-size: 13px; font-weight: 700; }
.media-cost span { color: var(--media-muted); font-size: 12px; white-space: nowrap; }
.media-submit { min-width: 104px; min-height: 40px; border: 0; border-radius: 5px; padding: 0 15px; background: var(--media-accent-strong); color: #201400; font-weight: 800; }
.media-submit:hover { background: #ff9a20; }
.media-submit:disabled { cursor: wait; opacity: .62; }
.commerce-plan-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 0 12px;
  background: var(--media-control);
  color: var(--media-text);
  font-size: 13px;
  font-weight: 750;
}
.commerce-plan-button:hover { border-color: var(--media-accent); color: var(--media-accent-strong); }
.commerce-plan-button:disabled { cursor: wait; opacity: .62; }
.commerce-plan-button svg,
.commerce-plan-preview header button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.media-api-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-api-actions a { border: 1px solid #4d5664; border-radius: 5px; padding: 8px 11px; color: #e4e8ef; font-size: 13px; text-decoration: none; }
.media-api-actions a:hover { border-color: var(--media-accent); color: var(--media-accent); }
.media-message { min-height: 18px; margin: -3px 0 0; color: var(--media-muted); font-size: 12px; }
.media-message.ok { color: var(--media-success); }
.media-message.error { color: var(--media-danger); }

.media-results { margin-top: 36px; }
.media-results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--media-line); }
.media-results-heading h2 span { margin-left: 8px; color: var(--media-muted); font-size: 13px; font-weight: 500; }
.media-results-tools { display: flex; align-items: center; gap: 12px; }
.media-filter { padding: 3px; border: 1px solid var(--media-line); border-radius: 6px; background: #11141a; }
.media-filter button { padding: 6px 9px; font-size: 12px; }
.media-refresh { border: 1px solid #4a515e; border-radius: 5px; padding: 7px 11px; background: transparent; color: #e9edf3; font-size: 12px; }
.media-refresh:hover { border-color: var(--media-accent); color: var(--media-accent); }
.media-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; }
.media-task-card { min-width: 0; overflow: hidden; border: 1px solid var(--media-line); border-radius: 7px; background: #15181d; color: inherit; text-align: left; }
button.media-task-card { padding: 0; }
button.media-task-card.completed { transition: transform .16s ease, border-color .16s ease; }
button.media-task-card.completed:hover { transform: translateY(-2px); border-color: #727b8b; }
.media-card-visual,
.media-card-placeholder { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: #090b0f; }
.media-card-visual img,
.media-card-visual video { display: block; width: 100%; height: 100%; object-fit: contain; }
.media-card-placeholder { gap: 10px; color: #9aa2af; }
.media-card-placeholder span { display: block; width: 28px; height: 28px; border: 3px solid #3e4550; border-top-color: var(--media-accent); border-radius: 50%; animation: media-spin .9s linear infinite; }
.media-card-placeholder strong { font-size: 14px; }
@keyframes media-spin { to { transform: rotate(360deg); } }
.media-card-body { display: grid; gap: 8px; padding: 13px; }
.media-card-status { width: fit-content; border-radius: 999px; padding: 3px 7px; background: #303742; color: #d2d7df; font-size: 11px; font-weight: 700; }
.media-card-status.completed { background: rgba(34, 197, 139, .16); color: #73e3b4; }
.media-card-status.failed { background: rgba(220, 68, 68, .14); color: #e87b7b; }
.media-card-status.uncertain { background: rgba(217, 151, 35, .16); color: #d99723; }
.media-card-placeholder.failed { aspect-ratio: 16 / 6; color: #d87373; }
.media-card-placeholder.uncertain { aspect-ratio: 16 / 6; color: #d99723; }
.media-card-error { color: #c86767; font-size: 12px; line-height: 1.55; }
.media-card-warning { color: #d99723; font-size: 12px; font-weight: 650; line-height: 1.5; }
.media-card-body strong { color: #f4f6f8; font-size: 15px; }
.media-card-prompt { display: -webkit-box; overflow: hidden; min-height: 38px; color: #b5bdc9; font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-card-meta { overflow: hidden; color: #788393; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.media-card-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.media-card-footer .media-card-meta { min-width: 0; flex: 1; }
.media-task-retry { position: relative; display: inline-grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid #4d5663; border-radius: 5px; padding: 0; background: #20252d; color: #dfe4ec; }
.media-task-retry:hover { border-color: var(--media-accent); background: #292f38; color: var(--media-accent); }
.media-task-retry:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 2px; }
.media-task-retry:disabled { cursor: wait; opacity: .55; }
.media-task-retry svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.media-task-retry::after { position: absolute; right: 0; bottom: calc(100% + 7px); z-index: 4; width: max-content; max-width: 120px; border: 1px solid #4b5360; border-radius: 4px; padding: 5px 7px; background: #090b0f; color: #f2f4f7; content: attr(data-tooltip); font-size: 11px; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; }
.media-task-retry:hover::after,
.media-task-retry:focus-visible::after { opacity: 1; transform: translateY(0); }
.media-task-fix {
  min-height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--media-accent);
  border-radius: 5px;
  padding: 0 10px;
  background: var(--media-accent);
  color: #17120a;
  font-size: 11px;
  font-weight: 800;
}
.media-task-fix:hover { filter: brightness(1.06); }
.media-task-fix:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 2px; }
.media-card-review { border: 1px solid rgba(217, 151, 35, .48); border-radius: 4px; padding: 6px 9px; background: rgba(217, 151, 35, .12); color: #d99723; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }
.media-card-review:hover { border-color: #d99723; background: rgba(217, 151, 35, .2); }
.media-card-open { color: #ffc86c; font-size: 12px; font-weight: 650; }
.media-result-empty { display: grid; min-height: 220px; margin-top: 20px; place-content: center; gap: 8px; border: 1px dashed #3a414c; border-radius: 7px; color: var(--media-muted); text-align: center; }
.media-result-empty strong { color: #e6eaf0; }
.media-failures { margin-top: 30px; }
.media-failures h3 { margin: 0 0 10px; color: #d2d7df; font-size: 14px; }
#failureList { display: grid; gap: 8px; }
.media-failure-item { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.5fr) auto; align-items: center; gap: 14px; border: 1px solid #4a3033; border-radius: 6px; padding: 10px 12px; background: rgba(117, 36, 42, .1); }
.media-failure-item div { display: grid; gap: 3px; min-width: 0; }
.media-failure-item strong { color: #f0d1d3; font-size: 13px; }
.media-failure-item span { overflow: hidden; color: #aeb5c0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.media-failure-item p { margin: 0; color: #f09a9b; font-size: 12px; line-height: 1.4; }
.media-failure-item small { color: #8e97a4; font-size: 11px; white-space: nowrap; }

.media-detail-dialog { width: min(1440px, calc(100vw - 48px)); height: min(860px, calc(100dvh - 32px)); max-height: min(860px, calc(100dvh - 32px)); overflow: hidden; border: 1px solid #3a414d; border-radius: 8px; padding: 0; background: #1a1e25; color: var(--media-text); box-shadow: 0 24px 80px rgba(0, 0, 0, .58); }
.media-detail-dialog::backdrop { background: rgba(2, 4, 8, .76); backdrop-filter: blur(3px); }
.media-detail-shell { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.media-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--media-line); padding: 18px 22px; }
.media-detail-header h2 { margin: 0; color: #fff; font-size: 20px; }
.media-dialog-close { border: 0; background: transparent; color: var(--media-muted); font-size: 13px; }
.media-dialog-close:hover { color: #fff; }
.media-detail-content { display: grid; min-height: 0; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 22px; overflow: auto; }
.media-detail-visual { display: block; width: 100%; height: auto; min-height: 0; align-self: start; overflow: hidden; border-radius: 6px; background: #06080b; }
.media-detail-visual img.media-detail-image {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.media-detail-visual video { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.media-detail-data { display: grid; align-content: start; gap: 20px; }
.media-detail-data h3 { margin: 0 0 9px; color: var(--media-text); font-size: 14px; }
.media-detail-prompt { margin: 0; border: 1px solid #343b46; border-radius: 5px; padding: 12px; background: #232831; color: #d6dbe3; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.media-detail-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.media-detail-params div { min-height: 72px; border-radius: 5px; padding: 10px; background: #252a32; }
.media-detail-params dt { color: #8993a1; font-size: 12px; }
.media-detail-params dd { margin: 9px 0 0; color: #f2f4f7; font-size: 14px; }
.media-detail-params dd { overflow-wrap: anywhere; }
.media-detail-status { display: grid; min-height: 220px; place-content: center; gap: 9px; padding: 24px; text-align: center; }
.media-detail-status strong { color: #f2f4f7; font-size: 22px; }
.media-detail-status span { max-width: 360px; color: var(--media-muted); font-size: 13px; line-height: 1.6; }
.media-detail-status.uncertain strong { color: #d99723; }
.media-detail-status.failed strong { color: var(--media-danger); }
.media-detail-delivery div { border: 1px solid rgba(217, 151, 35, .22); background: rgba(217, 151, 35, .08); }
.media-detail-references { display: flex; flex-wrap: wrap; gap: 10px; }
.media-detail-reference { display: grid; width: 92px; gap: 5px; margin: 0; }
.media-detail-reference img { display: block; width: 92px; aspect-ratio: 3 / 4; border: 1px solid var(--media-line); border-radius: 5px; object-fit: cover; background: var(--media-empty); }
.media-detail-reference figcaption { overflow: hidden; color: var(--media-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.media-detail-reference figcaption strong { margin-right: 4px; color: var(--media-accent-strong); font-size: 10px; }
.media-detail-error { margin: 0; color: var(--media-danger); font-size: 13px; line-height: 1.5; }
.media-detail-footer { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--media-line); padding: 16px 22px; }
.media-detail-language { display: flex; margin-right: auto; align-items: center; gap: 8px; color: var(--media-muted); font-size: 12px; }
.media-detail-language select { min-height: 36px; border: 1px solid var(--media-line); border-radius: 5px; padding: 0 28px 0 9px; background: var(--media-control); color: var(--media-text); }
.media-detail-reuse,
.media-detail-download { border: 1px solid #555e6c; border-radius: 5px; padding: 9px 13px; background: transparent; color: #edf0f4; font-size: 13px; font-weight: 650; text-decoration: none; }
.media-detail-reuse { border-color: #2563eb; background: #2563eb; color: #fff; }
.media-detail-reuse:hover { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.media-detail-download { border-color: var(--media-accent-strong); background: var(--media-accent-strong); color: #211400; }
.media-detail-download:hover { background: #ff9a1d; }
.media-detail-download-batch { border-color: #555e6c; background: #252a32; color: #edf0f4; }
.media-detail-download-batch:hover { border-color: #737e8e; background: #303640; color: #fff; }

.embed-mode .media-sidebar { display: none; }
.embed-mode .media-shell { grid-template-columns: 1fr; }
.embed-mode .media-workbench-main { padding-top: 0; }
@media (max-width: 900px) {
  .media-shell { grid-template-columns: minmax(0, 1fr); }
  .media-sidebar,
  .media-workbench-main { min-width: 0; }
  .media-sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--media-line); }
  .media-brand { min-height: 58px; }
  .media-scene-nav { display: flex; overflow-x: auto; padding: 10px 16px; }
  .media-scene-nav p,
  .media-sidebar-foot { display: none; }
  .media-scene-button { flex: 0 0 auto; }
  .media-workbench-main { padding: 0 18px 36px; }
  .media-detail-content { grid-template-columns: 1fr; }
  .media-detail-visual { height: auto; min-height: 0; }
}
@media (max-width: 680px) {
  .media-topbar { min-height: 74px; }
  .media-composer { margin-top: 18px; }
  .media-composer-heading,
  .media-form { padding-right: 16px; padding-left: 16px; }
  .media-composer-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .media-model-row { grid-template-columns: 1fr auto; }
  .media-model-choice { grid-column: 1 / -1; }
  .media-cost { min-width: 0; text-align: left; }
  .media-results-heading { align-items: flex-start; flex-direction: column; }
  .media-results-tools { width: 100%; justify-content: space-between; }
  .media-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .media-card-body { padding: 10px; }
  .media-card-prompt { min-height: 57px; -webkit-line-clamp: 3; }
  .media-failure-item { grid-template-columns: 1fr; gap: 6px; }
  .media-detail-content { padding: 16px; }
  .media-detail-header,
  .media-detail-footer { padding-right: 16px; padding-left: 16px; }
  .media-detail-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-detail-footer > * { box-sizing: border-box; width: 100%; min-width: 0; text-align: center; white-space: nowrap; }
}
@media (max-width: 420px) {
  .media-workbench-main { padding-right: 12px; padding-left: 12px; }
  .media-form-controls label { min-width: calc(50% - 5px); flex: 1 1 120px; }
  .media-detail-params { grid-template-columns: 1fr; }
}

/* Toolbar, theme controls, and full isolation from the legacy media styles. */
body.media-workbench-page {
  --media-sidebar: #101217;
  --media-subtle: #0e1015;
  --media-input: #101319;
  --media-control: #1c2027;
  --media-control-active: #2a2f38;
  --media-empty: #090b0f;
  --media-dialog: #1a1e25;
  --media-detail-surface: #232831;
  --media-param-surface: #252a32;
  --media-status-surface: #303742;
  --media-button-ink: #201400;
  --media-shadow: rgba(0, 0, 0, .42);
}

body.media-workbench-page[data-theme="light"] {
  --media-bg: #f5f7fa;
  --media-panel: #ffffff;
  --media-panel-soft: #f7f9fc;
  --media-line: #d8dee8;
  --media-text: #1b2530;
  --media-muted: #637083;
  --media-faint: #7c8795;
  --media-sidebar: #ffffff;
  --media-subtle: #eef2f6;
  --media-input: #f9fafc;
  --media-control: #f3f5f8;
  --media-control-active: #e3e8ef;
  --media-empty: #edf1f5;
  --media-dialog: #ffffff;
  --media-detail-surface: #f4f6f9;
  --media-param-surface: #eef2f6;
  --media-status-surface: #e2e8f0;
  --media-button-ink: #211400;
  --media-shadow: rgba(31, 42, 55, .13);
}

html:has(body.media-workbench-page[data-theme="light"]) { background: #f5f7fa; }
body.media-workbench-page,
body.media-workbench-page button,
body.media-workbench-page select,
body.media-workbench-page textarea {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  letter-spacing: 0;
}
.media-sidebar { background: var(--media-sidebar); }
.media-sidebar-brand { display: flex; align-items: center; min-height: 74px; border-bottom: 1px solid var(--media-line); }
.media-sidebar-brand .media-brand { min-width: 0; flex: 1 1 auto; min-height: 74px; border-bottom: 0; }
.media-sidebar-toggle {
  width: 32px;
  height: 32px;
  margin-right: 14px;
  overflow: hidden;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 0;
  background: transparent;
  color: var(--media-muted);
  font-size: 0;
}
.media-sidebar-toggle::before { content: "<"; font-size: 18px; line-height: 1; }
.media-sidebar-toggle:hover { border-color: var(--media-accent); color: var(--media-accent); }
.media-sidebar-toggle:focus-visible { font-size: 11px; }
.media-sidebar-toggle:focus-visible::before { display: none; }
.media-shell.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.media-shell.sidebar-collapsed .media-brand { justify-content: center; padding: 0; }
.media-shell.sidebar-collapsed .media-brand span,
.media-shell.sidebar-collapsed .media-scene-nav p,
.media-shell.sidebar-collapsed .media-scene-button > span:last-child,
.media-shell.sidebar-collapsed .media-sidebar-foot { display: none; }
.media-shell.sidebar-collapsed .media-sidebar-brand { min-height: 74px; flex-direction: column; justify-content: center; gap: 3px; }
.media-shell.sidebar-collapsed .media-sidebar-brand .media-brand { min-height: 38px; }
.media-shell.sidebar-collapsed .media-sidebar-toggle { margin: 0; }
.media-shell.sidebar-collapsed .media-sidebar-toggle::before { content: ">"; }
.media-shell.sidebar-collapsed .media-scene-nav { padding: 20px 12px; }
.media-shell.sidebar-collapsed .media-scene-button { justify-content: center; padding: 8px 4px; }

.media-topbar { min-height: 88px; }
.media-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.media-topbar-button,
.media-icon-button {
  min-height: 36px;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 0 11px;
  background: var(--media-panel);
  color: var(--media-text);
  font-size: 13px;
  font-weight: 650;
}
.media-topbar-button:hover,
.media-icon-button:hover { border-color: var(--media-accent); color: var(--media-accent); }
.media-icon-button { min-width: 50px; padding: 0 9px; }
.media-theme-control { position: relative; }
.media-theme-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 176px;
  gap: 3px;
  border: 1px solid var(--media-line);
  border-radius: 7px;
  padding: 8px;
  background: var(--media-panel);
  box-shadow: 0 18px 44px var(--media-shadow);
}
.media-theme-menu p { margin: 3px 5px 5px; color: var(--media-muted); font-size: 12px; }
.media-theme-menu button { border: 0; border-radius: 5px; padding: 9px 10px; background: transparent; color: var(--media-text); font-size: 13px; text-align: left; }
.media-theme-menu button:hover,
.media-theme-menu button.active { background: var(--media-control-active); color: var(--media-text); }
.media-account-link { border-color: var(--media-line); background: var(--media-panel); color: var(--media-text); }

.media-composer,
.media-task-card { background: var(--media-panel); }
.media-segment { background: var(--media-subtle); }
.media-segment button.active,
.media-model-choice button.active,
.media-filter button.active { border-color: var(--media-line); background: var(--media-control-active); color: var(--media-text); }
.media-model-choice button { border-color: var(--media-line); background: var(--media-control); color: var(--media-muted); }
.media-prompt-field textarea { background: var(--media-input); color: var(--media-text); }
.media-form-controls select { border-color: var(--media-line); background: var(--media-control); color: var(--media-text); }
.media-cost {
  display: grid;
  min-width: 228px;
  gap: 4px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  text-align: right;
}
.media-cost strong,
.media-cost span { display: block; justify-content: initial; }
.media-cost strong { color: var(--media-text); font-weight: 700; }
.media-cost span { color: var(--media-muted); }
.media-submit { background: var(--media-accent-strong); color: var(--media-button-ink); }
.media-filter { background: var(--media-subtle); }
.media-refresh { border-color: var(--media-line); color: var(--media-text); }
.media-card-visual,
.media-card-placeholder { background: var(--media-empty); }
.media-card-status { background: var(--media-status-surface); color: var(--media-text); }
.media-card-body strong { color: var(--media-text); }
.media-card-prompt { color: var(--media-muted); }
.media-result-empty { border-color: var(--media-line); background: var(--media-panel); }
.media-detail-dialog,
.media-settings-dialog { border-color: var(--media-line); background: var(--media-dialog); color: var(--media-text); box-shadow: 0 24px 80px var(--media-shadow); }
.media-detail-visual { background: var(--media-empty); }
.media-detail-prompt { border-color: var(--media-line); background: var(--media-detail-surface); color: var(--media-text); }
.media-detail-params div { background: var(--media-param-surface); }
.media-detail-params dd,
.media-detail-header h2 { color: var(--media-text); }

.media-settings-dialog { width: min(860px, calc(100vw - 36px)); max-height: min(860px, calc(100dvh - 36px)); overflow: auto; border-radius: 8px; padding: 0; }
.media-settings-dialog::backdrop { background: rgba(2, 4, 8, .62); backdrop-filter: blur(3px); }
.media-settings-shell { display: grid; gap: 18px; padding: 22px; }
.media-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--media-line); padding-bottom: 16px; }
.media-settings-header h2 { margin: 0; color: var(--media-text); font-size: 20px; }
.media-settings-intro { margin: -8px 0 0; color: var(--media-muted); font-size: 13px; }
.media-model-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.media-model-setting-group { border: 1px solid var(--media-line); border-radius: 6px; padding: 14px; background: var(--media-panel-soft); }
.media-model-setting-group h3 { margin: 0 0 12px; color: var(--media-text); font-size: 14px; }
.media-model-setting-group > p { margin: 0; color: var(--media-muted); font-size: 13px; }
.media-model-setting-options { display: grid; gap: 8px; }
.media-model-setting-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 61px;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 10px;
  background: var(--media-panel);
  color: var(--media-text);
  text-align: left;
}
.media-model-setting-option > span { display: grid; gap: 4px; min-width: 0; }
.media-model-setting-option strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.media-model-setting-option small { color: var(--media-muted); font-size: 12px; }
.media-model-setting-option b { flex: 0 0 auto; color: var(--media-accent); font-size: 12px; }
.media-model-setting-option:hover { border-color: var(--media-accent); }
.media-model-setting-option.active { border-color: var(--media-accent); background: var(--media-control-active); }
.media-model-setting-option:disabled { cursor: not-allowed; opacity: .52; }

body.media-workbench-page[data-theme="light"] .media-brand strong,
body.media-workbench-page[data-theme="light"] .media-topbar h1,
body.media-workbench-page[data-theme="light"] .media-composer-heading h2,
body.media-workbench-page[data-theme="light"] .media-results-heading h2,
body.media-workbench-page[data-theme="light"] .media-result-empty strong { color: var(--media-text); }
body.media-workbench-page[data-theme="light"] .media-scene-button.active { border-color: #c8d1de; background: #e8edf4; color: var(--media-text); }
body.media-workbench-page[data-theme="light"] .media-detail-dialog::backdrop,
body.media-workbench-page[data-theme="light"] .media-settings-dialog::backdrop { background: rgba(28, 39, 51, .36); }

@media (max-width: 900px) {
  .media-sidebar-brand { min-height: 58px; }
  .media-sidebar-brand .media-brand { min-height: 58px; }
  .media-sidebar-toggle { display: none; }
  .media-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .media-shell.sidebar-collapsed .media-brand { justify-content: flex-start; padding: 0 20px; }
  .media-shell.sidebar-collapsed .media-brand span { display: grid; }
  .media-shell.sidebar-collapsed .media-scene-nav { display: flex; padding: 10px 16px; }
  .media-shell.sidebar-collapsed .media-scene-button { justify-content: flex-start; padding: 8px 10px; }
  .media-shell.sidebar-collapsed .media-scene-button > span:last-child { display: inline; }
}
@media (max-width: 680px) {
  .media-topbar { align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 0; }
  .media-topbar-actions { width: 100%; justify-content: flex-start; overflow-x: auto; }
  .media-topbar-button,
  .media-icon-button,
  .media-account-link { flex: 0 0 auto; }
  .media-cost { min-width: 0; }
  .media-model-settings { grid-template-columns: 1fr; }
  .media-settings-shell { padding: 16px; }
}

.media-language-control { position: relative; }
.media-language-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 214px;
  gap: 3px;
  border: 1px solid var(--media-line);
  border-radius: 7px;
  padding: 8px;
  background: var(--media-panel);
  box-shadow: 0 18px 44px var(--media-shadow);
}
.media-language-menu p { margin: 3px 5px 5px; color: var(--media-muted); font-size: 12px; }
.media-language-menu button {
  display: grid;
  gap: 3px;
  border: 0;
  border-radius: 5px;
  padding: 9px 10px;
  background: transparent;
  color: var(--media-text);
  text-align: left;
}
.media-language-menu button strong { font-size: 13px; }
.media-language-menu button small { color: var(--media-muted); font-size: 11px; }
.media-language-menu button:hover,
.media-language-menu button.active { background: var(--media-control-active); }

.media-reference-field { display: grid; gap: 9px; }
.media-reference-heading { display: flex; align-items: baseline; gap: 7px; color: var(--media-muted); font-size: 13px; }
.media-reference-heading small { color: var(--media-faint); font-size: 11px; }
.media-reference-list { display: flex; flex-wrap: wrap; gap: 8px; }
.media-reference-item,
.media-reference-add {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--media-line);
  border-radius: 6px;
  padding: 0;
  background: var(--media-input);
}
.media-reference-item { border-style: solid; }
.media-reference-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-reference-item .media-reference-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(7, 10, 14, .78);
  color: #fff;
  font-size: 0;
}
.media-reference-item .media-reference-remove::before { content: "x"; font-size: 14px; line-height: 1; }
.media-reference-role-switch {
  position: absolute;
  bottom: 3px;
  left: 3px;
  min-width: 34px;
  height: 20px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  padding: 0 5px;
  background: rgba(7, 10, 14, .78);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
}
.media-reference-role-switch:hover { background: var(--media-accent); }
.media-style-reference-item .media-reference-role-switch {
  top: 3px;
  bottom: auto;
}
.media-style-reference-kind {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  height: 20px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  padding: 0 3px;
  background: rgba(7, 10, 14, .82);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
}
.media-style-reference-kind:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 1px; }
.media-reference-add { color: var(--media-muted); font-size: 0; }
.media-reference-add::before { content: "+"; font-size: 29px; font-weight: 300; line-height: 1; }
.media-reference-add:hover { border-color: var(--media-accent); color: var(--media-accent); }
.media-reference-add:disabled { cursor: not-allowed; opacity: .45; }
.media-style-reference-field {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--media-line);
  padding-top: 11px;
}
.media-style-reference-field[hidden] { display: none !important; }
.media-style-reference-copy { display: grid; min-width: 0; gap: 3px; color: var(--media-text); font-size: 13px; font-weight: 700; }
.media-style-reference-copy small { color: var(--media-muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.media-style-reference-list { min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; }
.media-style-reference-item,
.media-style-reference-add { width: 60px; height: 60px; flex: 0 0 60px; }
.media-failures { display: none !important; }

/* Commerce workbench */
.media-mode-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; }
.media-segment button { display: inline-flex; align-items: center; gap: 7px; }
.media-segment button svg,
.media-submit svg,
.commerce-workflow-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media-submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.media-submit svg { width: 19px; height: 19px; }
.media-compose-stage { display: contents; }
.media-parameter-bar { display: contents; }
.commerce-intro { margin: 32px 0 6px; text-align: center; }
.commerce-intro h2 { margin: 0; color: var(--media-text); font-size: 34px; line-height: 1.2; }
.commerce-intro p { margin: 10px 0 0; color: var(--media-muted); font-size: 15px; }
.commerce-skill-indicator { display: inline-flex; align-items: center; min-height: 30px; color: var(--media-muted); font-size: 13px; font-weight: 650; }
.commerce-skill-indicator::before { margin-right: 7px; color: var(--media-accent); content: "*"; font-size: 19px; }
.commerce-recipe { min-width: 0; color: var(--media-muted); font-size: 14px; line-height: 2.35; }
.commerce-recipe button,
.commerce-recipe select,
.commerce-recipe input { min-height: 34px; border: 1px solid var(--media-line); border-radius: 5px; background: var(--media-control); color: var(--media-text); }
.commerce-recipe button { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; }
.commerce-recipe button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.commerce-recipe button:hover { border-color: var(--media-accent); color: var(--media-accent); }
.commerce-recipe select { margin: 0 5px; padding: 0 28px 0 10px; }
.commerce-recipe input { width: 112px; margin: 0 5px; padding: 0 10px; }
.commerce-recipe input.commerce-recipe-wide { width: min(360px, 42vw); }
.commerce-brief { border-top: 1px solid var(--media-line); padding-top: 10px; }
.commerce-brief summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--media-muted); font-size: 13px; font-weight: 700; }
.commerce-brief summary:hover { color: var(--media-accent); }
.commerce-brief-hint { margin: 2px 0 10px; color: var(--media-muted); font-size: 12px; line-height: 1.55; }
.commerce-brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.commerce-brief-grid label { display: grid; min-width: 0; gap: 6px; color: var(--media-muted); font-size: 12px; }
.commerce-brief-grid .commerce-brief-points { grid-column: span 2; }
.commerce-brief input,
.commerce-brief textarea { width: 100%; min-width: 0; border: 1px solid var(--media-line); border-radius: 5px; padding: 9px 10px; background: var(--media-control); color: var(--media-text); font: inherit; line-height: 1.45; }
.commerce-brief input { min-height: 40px; }
.commerce-brief textarea { min-height: 68px; resize: vertical; }
.commerce-brief input:focus,
.commerce-brief textarea:focus { border-color: var(--media-accent); outline: 0; }
.commerce-model-field { display: grid; min-width: 310px; gap: 5px; color: var(--media-muted); font-size: 12px; }
.commerce-model-field select { min-height: 40px; border: 1px solid var(--media-line); border-radius: 5px; padding: 0 34px 0 11px; background: var(--media-control); color: var(--media-text); }
.commerce-workflows { display: flex; min-width: 0; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 0 0 5px; scrollbar-width: thin; }
.commerce-workflows button { display: inline-flex; min-width: 202px; min-height: 58px; flex: 1 0 202px; align-items: center; gap: 11px; border: 1px solid var(--media-line); border-radius: 7px; padding: 8px 13px; background: var(--media-panel); color: var(--media-muted); font-size: 13px; font-weight: 700; text-align: left; }
.commerce-workflows button:hover { border-color: var(--media-accent); color: var(--media-text); }
.commerce-workflows button.active { border-color: #a9b4c3; background: var(--media-control-active); color: var(--media-text); }
.commerce-workflow-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; background: var(--media-subtle); color: var(--media-accent); }

.media-shell[data-active-scene="commerce"] .media-composer { margin-top: 22px; box-shadow: 0 18px 48px var(--media-shadow); }
.media-shell[data-active-scene="commerce"] .media-composer-heading { display: none; }
.media-shell[data-active-scene="commerce"] .media-form { grid-template-columns: 112px minmax(0, 1fr); gap: 14px 18px; padding: 14px 16px 12px; }
.media-shell[data-active-scene="commerce"] .media-mode-row { grid-column: 1 / -1; }
.media-shell[data-active-scene="commerce"] .commerce-recipe { grid-column: 2; grid-row: 2; align-self: start; padding-top: 4px; }
.media-shell[data-active-scene="commerce"] .media-reference-field { grid-column: 1; grid-row: 2 / span 4; align-content: start; }
.media-shell[data-active-scene="commerce"] .media-reference-heading { display: none; }
.media-shell[data-active-scene="commerce"] .media-reference-list { display: grid; gap: 8px; }
.media-shell[data-active-scene="commerce"] .media-reference-item,
.media-shell[data-active-scene="commerce"] .media-reference-add { width: 92px; height: 128px; margin: 8px auto 0; border-radius: 6px; }
.media-shell[data-active-scene="commerce"] .media-reference-add { transform: rotate(-5deg); }
.media-shell[data-active-scene="commerce"] .media-reference-add:hover { transform: rotate(-2deg); }
.media-shell[data-active-scene="commerce"] .media-reference-item + .media-reference-item { height: 92px; }
.media-shell[data-active-scene="commerce"] .media-prompt-field { grid-column: 2; grid-row: 3; align-self: stretch; }
.media-shell[data-active-scene="commerce"] .media-prompt-field[hidden] { display: none !important; }
.media-shell[data-active-scene="commerce"] .media-style-reference-field { grid-column: 2; grid-row: 4; }
.media-shell[data-active-scene="commerce"] .media-style-reference-list { display: flex; gap: 7px; }
.media-shell[data-active-scene="commerce"] .media-style-reference-item,
.media-shell[data-active-scene="commerce"] .media-style-reference-add { width: 60px; height: 60px; flex: 0 0 60px; margin: 0; transform: none; }
.media-shell[data-active-scene="commerce"] .commerce-brief { grid-column: 2; grid-row: 5; }
.media-shell[data-active-scene="commerce"] .media-prompt-field > span { display: none; }
.media-shell[data-active-scene="commerce"] .media-prompt-field textarea { min-height: 128px; border: 0; padding: 4px 2px 14px; background: transparent; font-size: 15px; resize: vertical; }
.media-shell[data-active-scene="commerce"] .media-parameter-bar { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; border-top: 1px solid var(--media-line); padding-top: 12px; }
.media-shell[data-active-scene="commerce"] .media-form-controls { align-items: end; flex-wrap: nowrap; }
.media-shell[data-active-scene="commerce"] .media-form-controls label { min-width: 104px; }
.media-shell[data-active-scene="commerce"] .media-form-controls label > span,
.media-shell[data-active-scene="commerce"] .commerce-output-language-field > span,
.media-shell[data-active-scene="commerce"] .commerce-model-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.media-shell[data-active-scene="commerce"] .commerce-output-language-menu label > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
.media-shell[data-active-scene="commerce"] .media-model-row { position: relative; grid-template-columns: 250px auto 46px; gap: 10px; }
.media-shell[data-active-scene="commerce"] .media-model-choice { display: none; }
.media-shell[data-active-scene="commerce"] .commerce-model-field { min-width: 250px; }
.media-shell[data-active-scene="commerce"] .media-cost { position: absolute; right: 56px; bottom: 47px; min-width: 210px; }
.media-shell[data-active-scene="commerce"] .media-submit { width: 46px; min-width: 46px; height: 42px; padding: 0; }
.media-shell[data-active-scene="commerce"] .media-submit span { display: none; }
.media-shell[data-active-scene="commerce"] .media-api-actions,
.media-shell[data-active-scene="commerce"] .media-message,
.media-shell[data-active-scene="commerce"] .commerce-plan-preview { grid-column: 1 / -1; }
.commerce-plan-preview {
  overflow: hidden;
  border-top: 1px solid var(--media-line);
  padding-top: 14px;
}
.commerce-plan-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.commerce-plan-preview > header > div { display: grid; gap: 3px; }
.commerce-plan-preview > header span { color: var(--media-accent-strong); font-size: 11px; font-weight: 800; }
.commerce-plan-preview > header strong { color: var(--media-text); font-size: 17px; line-height: 1.35; }
.commerce-plan-preview > header button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  background: transparent;
  color: var(--media-muted);
}
.commerce-plan-preview > header button:hover { color: var(--media-text); }
.commerce-plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  color: var(--media-muted);
  font-size: 12px;
}
.commerce-plan-summary strong { color: var(--media-text); font-weight: 750; }
.commerce-plan-summary .commerce-plan-warning { color: var(--media-danger); font-weight: 700; }
.commerce-plan-summary .commerce-plan-inference { color: var(--media-accent-strong); font-weight: 700; }
.commerce-plan-add-reference {
  min-height: 28px;
  border: 1px solid var(--media-accent);
  border-radius: 5px;
  padding: 0 10px;
  background: var(--media-accent);
  color: #17120a;
  font: inherit;
  font-weight: 800;
}
.commerce-plan-add-reference:hover { filter: brightness(1.06); }
.commerce-plan-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--media-line);
}
.commerce-plan-pages li {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid var(--media-line);
  padding: 12px 10px 12px 0;
}
.commerce-plan-pages li:nth-child(odd) { border-right: 1px solid var(--media-line); }
.commerce-plan-pages li:nth-child(even) { padding-left: 12px; }
.commerce-plan-page-index {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--media-line);
  border-radius: 50%;
  color: var(--media-muted);
  font-size: 11px;
  font-weight: 800;
}
.commerce-plan-page-copy { display: grid; min-width: 0; gap: 4px; }
.commerce-plan-page-copy strong { overflow-wrap: anywhere; color: var(--media-text); font-size: 13px; line-height: 1.4; }
.commerce-plan-page-copy span { overflow-wrap: anywhere; color: var(--media-muted); font-size: 12px; line-height: 1.5; }
.commerce-plan-page-copy .commerce-plan-page-final-copy { color: var(--media-text); font-weight: 650; }
.commerce-plan-page-meta { color: var(--media-accent-strong) !important; font-size: 11px !important; font-weight: 750; }
.commerce-plan-page-edit {
  display: none;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.commerce-plan-preview.revision-mode .commerce-plan-page-edit { display: grid; }
.commerce-plan-page-edit > span {
  color: var(--media-muted);
  font-size: 11px;
  font-weight: 700;
}
.commerce-plan-page-edit input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 0 10px;
  background: var(--media-control);
  color: var(--media-text);
  font: inherit;
  font-size: 12px;
}
.commerce-plan-page-edit input:focus { border-color: var(--media-accent); outline: 2px solid color-mix(in srgb, var(--media-accent) 18%, transparent); }
.commerce-plan-page-copy .commerce-plan-page-blocked {
  color: var(--media-danger);
  font-weight: 700;
}
.commerce-plan-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
}
.commerce-plan-actions > span { margin-right: auto; color: var(--media-success); font-size: 12px; font-weight: 700; }
.commerce-plan-actions > span[data-review-status="partial"],
.commerce-plan-actions > span[data-review-status="blocked"] { color: var(--media-danger); }
.commerce-plan-actions button,
.commerce-plan-revision button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 0 12px;
  background: var(--media-control);
  color: var(--media-text);
  font-size: 12px;
  font-weight: 750;
}
.commerce-plan-actions button:hover { border-color: var(--media-accent); color: var(--media-accent-strong); }
.commerce-plan-actions button:disabled,
.commerce-plan-revision button:disabled { cursor: wait; opacity: .58; }
.commerce-plan-actions button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.commerce-plan-revision {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--media-line);
  padding-top: 12px;
}
.commerce-plan-revision[hidden] { display: none; }
.commerce-plan-revision-heading { display: grid; gap: 3px; }
.commerce-plan-revision-heading strong { color: var(--media-text); font-size: 13px; }
.commerce-plan-revision-heading span { color: var(--media-muted); font-size: 11px; line-height: 1.45; }
.commerce-plan-revision textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 1px solid var(--media-line);
  border-radius: 5px;
  padding: 11px 12px;
  background: var(--media-control);
  color: var(--media-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
}
.commerce-plan-revision textarea:focus { border-color: var(--media-accent); outline: 2px solid color-mix(in srgb, var(--media-accent) 18%, transparent); }
.commerce-plan-revision-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.commerce-plan-revision-actions > span {
  min-width: 0;
  margin-right: auto;
  color: var(--media-muted);
  font-size: 12px;
  line-height: 1.45;
}
.commerce-plan-revision-actions > span[data-state="ok"] { color: var(--media-success); }
.commerce-plan-revision-actions > span[data-state="error"] { color: var(--media-danger); }
.commerce-plan-revision #applyCommercePlanRevision { border-color: var(--media-accent-strong); background: var(--media-accent-strong); color: #211400; }
body.media-workbench-page .media-shell[data-active-scene="commerce"] .media-reference-add { font-size: 0; }
.media-shell[data-active-scene="commerce"][data-active-mode="video"] .media-reference-field { display: grid; }

@media (max-width: 900px) {
  .commerce-intro { margin-top: 24px; }
  .commerce-intro h2 { font-size: 29px; }
  .media-shell[data-active-scene="commerce"] .media-form { grid-template-columns: 96px minmax(0, 1fr); }
  .media-shell[data-active-scene="commerce"] .media-reference-item,
  .media-shell[data-active-scene="commerce"] .media-reference-add { width: 78px; height: 110px; }
  .media-shell[data-active-scene="commerce"] .media-style-reference-item,
  .media-shell[data-active-scene="commerce"] .media-style-reference-add { width: 58px; height: 58px; flex-basis: 58px; }
  .media-shell[data-active-scene="commerce"] .media-parameter-bar { grid-template-columns: 1fr; }
  .media-shell[data-active-scene="commerce"] .media-model-row { grid-template-columns: minmax(220px, 1fr) auto 46px; }
  .media-shell[data-active-scene="commerce"] .commerce-model-field { min-width: 0; }
  .media-shell[data-active-scene="commerce"] .media-cost { right: 56px; }
}

@media (max-width: 680px) {
  .commerce-intro { margin-top: 20px; text-align: left; }
  .commerce-intro h2 { font-size: 26px; }
  .commerce-intro p { font-size: 13px; }
  .media-shell[data-active-scene="commerce"] .media-form { grid-template-columns: 1fr; padding: 12px; }
  .media-shell[data-active-scene="commerce"] .media-mode-row,
  .media-shell[data-active-scene="commerce"] .commerce-recipe,
  .media-shell[data-active-scene="commerce"] .media-reference-field,
  .media-shell[data-active-scene="commerce"] .media-style-reference-field,
  .media-shell[data-active-scene="commerce"] .media-prompt-field,
  .media-shell[data-active-scene="commerce"] .commerce-brief,
  .media-shell[data-active-scene="commerce"] .media-form-controls,
  .media-shell[data-active-scene="commerce"] .media-parameter-bar,
  .media-shell[data-active-scene="commerce"] .media-api-actions,
  .media-shell[data-active-scene="commerce"] .media-message { grid-column: 1; grid-row: auto; }
  .media-mode-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .commerce-recipe { line-height: 2.6; }
  .commerce-recipe input.commerce-recipe-wide { width: min(100%, 320px); }
  .media-shell[data-active-scene="commerce"] .media-reference-field { display: flex; align-items: flex-start; overflow-x: auto; }
  .media-shell[data-active-scene="commerce"] .media-reference-list { display: flex; }
  .media-shell[data-active-scene="commerce"] .media-reference-item,
  .media-shell[data-active-scene="commerce"] .media-reference-add { width: 74px; height: 92px; flex: 0 0 74px; margin: 0; transform: none; }
  .media-shell[data-active-scene="commerce"] .media-style-reference-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .media-shell[data-active-scene="commerce"] .media-style-reference-copy { grid-column: 1 / -1; }
  .commerce-plan-pages { grid-template-columns: 1fr; }
  .commerce-plan-pages li:nth-child(odd) { border-right: 0; }
  .commerce-plan-pages li:nth-child(even) { padding-left: 0; }
  .commerce-plan-actions { align-items: stretch; flex-direction: column; }
  .commerce-plan-actions > span { margin-right: 0; }
  .commerce-plan-actions button { width: 100%; }
  .media-shell[data-active-scene="commerce"] .media-style-reference-list { display: flex; }
  .media-shell[data-active-scene="commerce"] .media-style-reference-item,
  .media-shell[data-active-scene="commerce"] .media-style-reference-add { width: 58px; height: 58px; flex-basis: 58px; }
  .media-shell[data-active-scene="commerce"] .media-prompt-field textarea { min-height: 116px; border-top: 1px solid var(--media-line); padding-top: 13px; }
  .commerce-brief-grid { grid-template-columns: 1fr; }
  .commerce-brief-grid .commerce-brief-points { grid-column: 1; }
  .media-shell[data-active-scene="commerce"] .media-form-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-shell[data-active-scene="commerce"] .media-form-controls label { min-width: 0; }
  .media-shell[data-active-scene="commerce"] .media-parameter-bar { display: grid; }
  .media-shell[data-active-scene="commerce"] .media-model-row { grid-template-columns: 1fr auto 46px; }
  .commerce-model-field { min-width: 0; }
  .media-shell[data-active-scene="commerce"] .media-cost { position: static; grid-column: 1 / -1; min-width: 0; text-align: left; }
  .commerce-plan-pages { grid-template-columns: 1fr; }
  .commerce-plan-pages li:nth-child(odd) { border-right: 0; }
  .commerce-plan-pages li:nth-child(even) { padding-left: 0; }
  .commerce-workflows button { min-width: 188px; flex-basis: 188px; }
}

/* Media landing view: reuse the existing studio routes and creation controls. */
.media-home,
.media-works { display: none; }
body.media-home-active .media-home { display: block; }
body.media-works-active .media-works { display: block; }
body.media-home-active .media-studio-view,
body.media-works-active .media-studio-view { display: none !important; }
.media-home button { letter-spacing: 0; }
.media-scene-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-works-nav { margin-top: 5px; }

.media-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: 42px 0 24px;
}
.media-home-copy { min-width: 0; }
.media-home-kicker {
  margin: 0 0 10px;
  color: var(--media-accent-strong);
  font-size: 12px;
  font-weight: 800;
}
.media-home-copy h1 {
  max-width: 760px;
  margin: 0;
  color: var(--media-text);
  font-size: 40px;
  line-height: 1.15;
}
.media-home-copy > p:last-child {
  margin: 12px 0 0;
  color: var(--media-muted);
  font-size: 15px;
  line-height: 1.65;
}
.media-home-launchers {
  display: grid;
  grid-template-columns: repeat(4, 86px);
  gap: 8px;
}
.media-home-launchers button {
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-items: center;
  gap: 6px;
  border: 1px solid var(--media-line);
  border-radius: 7px;
  padding: 9px 6px;
  background: var(--media-panel);
  color: var(--media-text);
  box-shadow: 0 8px 24px var(--media-shadow);
  font-size: 12px;
  font-weight: 700;
}
.media-home-launchers button:hover {
  border-color: var(--media-accent);
  color: var(--media-accent-strong);
  transform: translateY(-2px);
}
.media-home-launchers svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-home-mosaic {
  display: grid;
  min-height: 286px;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.45fr) minmax(0, .82fr);
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--media-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--media-panel);
  box-shadow: 0 18px 48px var(--media-shadow);
}
.media-home-mosaic-item {
  position: relative;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: var(--media-empty);
  color: #fff;
}
.media-home-mosaic-item.side { opacity: .76; }
.media-home-mosaic-item img,
.media-home-mosaic-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, filter .25s ease;
}
.media-home-mosaic-item video { pointer-events: none; }
.media-home-mosaic-item.side img,
.media-home-mosaic-item.side video { filter: saturate(.72) brightness(.8); }
.media-home-mosaic-item:hover img,
.media-home-mosaic-item:hover video { transform: scale(1.025); filter: none; }
.media-home-mosaic-item span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  overflow: hidden;
  padding: 11px 12px;
  background: rgba(5, 7, 11, .76);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-home-mosaic-item span.video::before { margin-right: 7px; content: "\25B6"; font-size: 10px; }

.media-home-featured { padding: 42px 0 20px; }
.media-home-featured-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.media-home-featured-head h2 {
  margin: 0;
  color: var(--media-text);
  font-size: 27px;
  line-height: 1.2;
}
.media-home-featured-head p {
  margin: 7px 0 0;
  color: var(--media-muted);
  font-size: 13px;
}
.media-home-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  border: 1px solid var(--media-line);
  border-radius: 7px;
  padding: 4px;
  background: var(--media-panel);
}
.media-home-filters button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 13px;
  background: transparent;
  color: var(--media-muted);
  font-size: 13px;
  font-weight: 700;
}
.media-home-filters button:hover { color: var(--media-text); }
.media-home-filters button.active {
  border-color: var(--media-line);
  background: var(--media-control-active);
  color: var(--media-text);
}
.media-home-case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.media-home-case {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--media-line);
  border-radius: 8px;
  padding: 0;
  background: var(--media-empty);
  color: #fff;
  text-align: left;
}
.media-home-case.wide { grid-column: span 2; aspect-ratio: 16 / 7; }
.media-home-case img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .28s ease, opacity .2s ease;
}
.media-home-case:hover { border-color: var(--media-accent); }
.media-home-case:hover img { transform: scale(1.025); opacity: .9; }
.media-home-case-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 3px;
  padding: 32px 14px 13px;
  background: linear-gradient(transparent, rgba(4, 6, 10, .86));
  color: #fff;
}
.media-home-case-caption small { color: rgba(255, 255, 255, .72); font-size: 10px; }
.media-home-case-caption strong { font-size: 14px; line-height: 1.35; }
.media-home-case-play {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  background: rgba(4, 6, 10, .68);
  color: #fff;
  font-size: 11px;
}

.media-works { padding: 42px 0 30px; }
.media-works-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--media-line);
}
.media-works-header h1 {
  margin: 0;
  color: var(--media-text);
  font-size: 34px;
  line-height: 1.2;
}
.media-works-header > div > p:last-child {
  margin: 9px 0 0;
  color: var(--media-muted);
  font-size: 14px;
}
.media-works-refresh {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--media-line);
  border-radius: 6px;
  padding: 0;
  background: var(--media-panel);
  color: var(--media-text);
}
.media-works-refresh:hover { border-color: var(--media-accent); color: var(--media-accent-strong); }
.media-works-refresh svg,
.media-works-empty svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-works-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 18px;
}
.media-works-filters {
  display: flex;
  min-width: min(420px, 100%);
  gap: 4px;
  border: 1px solid var(--media-line);
  border-radius: 7px;
  padding: 4px;
  background: var(--media-panel);
}
.media-works-filters button {
  min-height: 36px;
  flex: 1 1 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 18px;
  background: transparent;
  color: var(--media-muted);
  font-size: 13px;
  font-weight: 700;
}
.media-works-filters button:hover { color: var(--media-text); }
.media-works-filters button.active {
  border-color: var(--media-line);
  background: var(--media-control-active);
  color: var(--media-text);
}
.media-works-count { flex: 0 0 auto; color: var(--media-muted); font-size: 13px; }
.media-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.media-work-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--media-line);
  border-radius: 8px;
  padding: 0;
  background: var(--media-panel);
  color: var(--media-text);
  text-align: left;
  transition: border-color .16s ease, transform .16s ease;
}
.media-work-card:hover { border-color: var(--media-accent); transform: translateY(-2px); }
.media-work-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--media-empty);
}
.media-work-visual img,
.media-work-visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}
.media-work-card:hover .media-work-visual img,
.media-work-card:hover .media-work-visual video { transform: scale(1.02); }
.media-work-type {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 4px;
  padding: 5px 8px;
  background: rgba(4, 6, 10, .74);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.media-work-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(4, 6, 10, .64);
  color: #fff;
  font-size: 12px;
  transform: translate(-50%, -50%);
}
.media-work-body { display: grid; gap: 6px; padding: 13px 14px 14px; }
.media-work-body strong {
  overflow: hidden;
  color: var(--media-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-work-body span { color: var(--media-muted); font-size: 12px; }
.media-works-empty {
  display: grid;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  gap: 9px;
  border: 1px dashed var(--media-line);
  border-radius: 8px;
  background: var(--media-panel);
  color: var(--media-muted);
  text-align: center;
}
.media-works-empty svg { width: 30px; height: 30px; }
.media-works-empty strong { color: var(--media-text); font-size: 15px; }
.media-works-empty span { font-size: 13px; }

@media (max-width: 1120px) {
  .media-home-intro { grid-template-columns: 1fr; align-items: start; }
  .media-home-launchers { grid-template-columns: repeat(4, minmax(108px, 1fr)); }
  .media-home-launchers button { min-height: 62px; grid-template-columns: auto 1fr; justify-items: start; padding: 10px 14px; }
}

@media (max-width: 900px) {
  body.media-home-active .media-sidebar { position: static; height: auto; }
  body.media-works-active .media-sidebar { position: static; height: auto; }
  body.media-home-active .media-workbench-main { padding-top: 0; }
  body.media-works-active .media-workbench-main { padding-top: 0; }
  .media-home-intro { padding-top: 30px; }
  .media-home-copy h1 { font-size: 34px; }
  .media-home-mosaic { min-height: 250px; }
  .media-home-mosaic-item { min-height: 224px; }
  .media-home-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-works { padding-top: 30px; }
}

@media (max-width: 680px) {
  .media-home-intro { gap: 20px; padding: 25px 0 18px; }
  .media-home-copy h1 { font-size: 29px; }
  .media-home-copy > p:last-child { margin-top: 9px; font-size: 13px; }
  .media-home-launchers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-home-launchers button { min-height: 58px; }
  .media-home-mosaic {
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }
  .media-home-mosaic-item { min-height: 178px; }
  .media-home-mosaic-item.focus { grid-column: 1 / -1; grid-row: 1; min-height: 220px; }
  .media-home-mosaic-item.side { min-height: 150px; }
  .media-home-featured { padding-top: 30px; }
  .media-home-featured-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .media-home-featured-head h2 { font-size: 23px; }
  .media-home-filters { width: 100%; box-sizing: border-box; justify-content: stretch; }
  .media-home-filters button { min-width: 0; flex: 1 1 0; padding: 0 6px; }
  .media-home-case-grid { gap: 8px; }
  .media-home-case,
  .media-home-case.wide { grid-column: span 1; aspect-ratio: 4 / 5; }
  .media-home-case-caption { padding-right: 10px; padding-left: 10px; }
  .media-works { padding-top: 25px; }
  .media-works-header h1 { font-size: 29px; }
  .media-works-header > div > p:last-child { font-size: 13px; line-height: 1.55; }
  .media-works-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .media-works-filters { width: 100%; min-width: 0; box-sizing: border-box; }
  .media-works-count { align-self: flex-end; }
  .media-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .media-work-body { padding: 10px; }
}

@media (max-width: 420px) {
  .media-home-launchers button { grid-template-columns: auto 1fr; font-size: 11px; }
  .media-home-mosaic-item.focus { min-height: 194px; }
  .media-home-mosaic-item.side { min-height: 132px; }
  .media-home-case-grid { grid-template-columns: 1fr; }
  .media-home-case,
  .media-home-case.wide { aspect-ratio: 16 / 10; }
  .media-works-grid { grid-template-columns: 1fr; }
  .media-work-visual { aspect-ratio: 16 / 10; }
}

/* Homepage showcase preview */
.media-showcase-dialog {
  width: min(1500px, calc(100vw - 48px));
  max-width: none;
  height: min(920px, calc(100dvh - 40px));
  max-height: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 0;
  background: #0b0d10;
  color: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .64);
}
.media-showcase-dialog::backdrop { background: rgba(3, 5, 8, .84); backdrop-filter: blur(4px); }
.media-showcase-shell { position: relative; display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.media-showcase-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.media-showcase-stage img,
.media-showcase-stage video { position: absolute; inset: 18px; display: block; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; }
.media-showcase-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  padding: 0;
  background: rgba(7, 9, 12, .72);
  color: #fff;
}
.media-showcase-close:hover { border-color: rgba(255, 255, 255, .72); background: rgba(7, 9, 12, .9); }
.media-showcase-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.media-showcase-caption { min-height: 48px; margin: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding: 13px 20px; color: rgba(255, 255, 255, .82); font-size: 14px; }

@media (max-width: 680px) {
  .media-showcase-dialog { width: calc(100vw - 20px); height: calc(100dvh - 20px); }
  .media-showcase-stage img,
  .media-showcase-stage video { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .media-showcase-close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .media-showcase-caption { min-height: 44px; padding: 11px 14px; }
}